Selasa, 30 Juli 2013

Cara Mengedit HTML Template Blogspot 2013 Tampilan Baru

CARA MENGEDIT HTML TEMPLATE BLOGSPOT 2013 TAMPILAN BARU
Cara mengedit html template blogspot tampilan baru - Hari ini saya sedang membuka Google Plus saya dan melihat pertanyaan dari seorang rekan blogger qbenk raflesia yang menanyakan "apakah cara mengedit HTML template di blogspot sudah berubah?". Setelah saya cek, ternyata memang sudah berubah cara mengeditnya.

Blogger kembali membuat tampilan baru untuk mengedit template di bulan APRIL 2013 ini, yang bisa jadi menyulitkan teman-teman blogger pemula karena cara yang lama yang sering menggunakan expand widget template sudah tidak akan berfungsi lagi. Padahal anda akan membutuhkan ini untuk mengedit template blog keren anda menjadi template blog SEO Friendly....
Jadi mari kita pelajari bagaimana cara edit HTML di tampilan baru ini.....

Mengenal tampilan EDIT HTML Blogspot

Secara garis besar semua fungsi tombol masih lengkap, hanya posisinya diubah. Malah saya bisa katakan perubahan ini jauh lebih baik! Untuk lebih jelasnya mari lihat gambar di bawah ini.... (masuk ke menu TEMPLATE dan klik EDIT HTML)

Tampilan baru dari EDIT HTML TEMPLATE BLOGSPOT

Keterangan Gambar:
  • A adalah tombol untuk kembali ke menu TEMPLATE
  • B adalah tombol untuk SIMPAN perubahan pada TEMPLATE
  • C adalah fitur baru yang akan banyak membantu, yaitu LOMPAT ke kode WIDGET
  • D dan E adalah tombol TOGGLE MODE untuk melihat versi HTML dan melihat versi tampilan browser
  • F adalah tombol untuk menghilangkan perubahan yang sudah anda lakukan dalam satu pengeditan
  • H adalah tombol untuk mengembalikan perubahan yang sebelumnya sudah anda lakukan tapi hilang karena pemformatan
  • H adalah tombol untuk mengembalikan widget ke setingan default
Yang perlu teman-teman blogger perhatikan dalam tampilan baru untuk mengedit HTML template blogspot ini adalah dua hal, yaitu tombol lompat ke widget dan panah-panah kecil berwarna hitam pada baris kode.

TOMBOL LOMPAT KE WIDGET
Tombol ini akan sangat membantu anda untuk menuju kode dari suatu widget di template anda. Anda cukup mengklik tombol tersebut dan akan terbuka dropdown untuk melompat ke kode HTML widget yang anda inginkan....
tombol lompat ke widget untuk membantu anda menemukan widget
Yang menjadi masalah adalah saat anda sampai di kode HTML widget tersebut,....anda akan melihat tampilan kode yang dipadatkan dalam lipatan yang ditandai dengan ► ..... lihat gambar di bawah ini....
tombol panah kecil pada EDIT HTML template blogspot untuk mengurai kode
Apakah saudara bisa melihat panah hitam kecil di atas?....

Tombol Panah Hitam Kecil
Tombol ► ini adalah fitur baru yang akan membuka setiap kode menjadi lebih detail lagi. Kalau ternyata setelah anda klik masih ada tombol panah hitam lagi di dalamnya, maka klik lagi tombol panah hitam itu sampai semua kode widget yang anda inginkan terbuka penuh.
Jika sudah terbuka penuh sekarang anda sudah bisa mengedit kode pada widget tersebut.

PENGGANTI EXPAND WIDGET TEMPLATE DI EDIT HTML TEMPLATE BLOGSPOT TAMPILAN BARU

Yang menjadi masalah sekarang adalah anda akan mengalami kerepotan yang cukup mengganggu jika harus mengedit sebuah kode yang sangat panjang dan mempunyai begitu banyak panah kecil hitam. Saat itulah anda pasti berharap tombol expand widget template masih ada di sini.

Apakah tidak ada cara menampilkan semua kode HTML agar proses edit bisa berjalan lebih cepat? Sebenarnya anda bisa membuka semua kode dengan cara yang sangat mudah....
  • Klik kursor di dalam barisan kode mana saja....
  • Tekan CTRL+A untuk menyorot semua kode
  • Tekan CTRL+C untuk mengcopy semua kode
  • Tekan tombol DEL pada keyboard untuk menghapus semua kode, dan
  • Terakhir tekan CTRL+V untuk mempaste semua kode
Kode yang dipaste ini akan terbuka penuh dan tidak ada panah hitam kecilnya, jadi hasilnya kurang lebih sama dengan tombol checkbox EXPAND WIDGET TEMPLATE yang ada pada EDIT HTML template blogspot tampilan lama....

Anda tetap bisa memakai tombol LOMPAT KE WIDGET saat semua kode sudah dijabarkan, jadi ini akan membantu anda untuk mengedit TEMPLATE. Mudah-mudahan Google tidak melakukan perubahan lagi dalam waktu dekat ini, ....soalnya belakangan ini Google seperti sedang berinovasi di sana sini. Agak repot juga kalau EDIT HTML dari menu TEMPLATE ini selalu diubah modelnya.....

UPDATE:
Rupanya banyak teman blogger yang kesulitan mencari kode tertentu di dalam baris kode yang panjang. Sebenarnya caranya sangat mudah....

CARA MENCARI KODE DI EDIT HTML BLOGSPOT TAMPILAN BARU

Anda sudah tidak bisa lagi mencari kode dengan menggunakan CTRL+F pada browser, .... jadi klik dulu di antara barisan kode dan klik CTRL+F, nanti akan muncul kotak pencarian di sudut kanan atas jendela kode HTML.

Di situlah anda memasukkan nama kode yang akan anda cari, dan tekan enter sesudahnya. Jika anda belum menemukan kode yang diinginkan, maka tekan terus enter sampai ketemu. Lebih jelasnya lihat gambar di bawah ini....
cara mencari kode di EDIT HTML BLOGSPOT TAMPILAN BARU

Mudah-mudahan saudara tidak bingung lagi memakai EDIT HTML TEMPLATE BLOGSPOT tampilan baru ini....

Cara Edit Menu Template Blogger

Sebenarnya sudah banyak blogger yang posting cara edit atau membuat menu template di blogspot. Tetapi karena permintaan seorang teman saya mencoba untuk menjelaskan cara edit template dengan mudah, yang biasanya kita download di penyedia template gratisan seperti Zootemplate, Btemplate, Free blogger templates Dan masih banyak lagi. Karena biasanya template yang kita download sudah menyertakan menu navigasi namun terkadang tidak menyertakan cara edit menu navigasi tersebut. 
Cara editnya cukup gampang hanya anda ingat saja judul menu yang akan anda edit seprti contoh gambar dibawah ini:

Sekarang masuk tahap peng-editan menu yaitu masuk ke Dashboard=>Design=>Edit HTML serta jangan lupa untuk checklist Expand Widget Templates kemudian cari kode/judul menu yang anda ingin edit dengan tekan Ctrl+F pada keyboard komputer anda. Jika sudah ketemu seperti gambar di bawah ini:

Ganti kode seperti  yang ada pada gambar dengan  link anda dan judul menu yang yang anda inginkan lalu save templates. Proses ini juga berlaku pada template magazine yang biasa menyertakan gambar slide dengan keterangan dari gambar slide.
Cukup mudahkan cara meng-Edit menu pada template premium free yang kita download. Selamat berkreasi dengan template-template gratisan yang bagus-bagus menurut anda. Dan jika ingin berkreasi dengan menu buatan sendir anda bisa mencobanya dengan menggunakan aplikasi css generator => Download Disini

Cara Menambah Sub-Menu 2013 pada Blogspot


Assalamualaikum,
Kali ini saya berbagi trik atau tips untuk memberi sub menu pada menu di blog kita. Mungkin untuk beberapa kawan-kawan cara ini sudah lama, namun ada baiknya saya menulis ulang bagi kawan-kawan yang belum paham terkait hal ini. Selain itu cara ini juga bisa membantu saya , apabila saya lupa cara menambahkan sub menunya. Awalnya mungkin kita menebak bahwa sub menu ini hanya terdapat pada beberapa template tertentu. Ternyata pemikiran itu tidak sebenarnya salah dan benar, karena template bisa di atur di dalam 'edit HTML'.
Sekarang kita menuju caranya.

1. ubah sesuaikan setelan tab menu dan menu halaman yang akan ditampilkan, dimana caranya adalah seperti yang tampak pada gambar di bawah ini.
Keterangan : angka 1 menunjukkan 'tab atas' jangan pilih yang 'jangan ditampilkan'. Sedangkan angka 2 menunjukkan menu kita yang tidak memiliki sub menu.

2. Buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > centang pada ‘Expand Template Widget’ di bagian atas.

3. Cari kode ]]></b:skin> dan kemudian sisipkan kode CSS berikut ini tepat di ATASnya.


 4. Cari kode <li><a  mungkin anda akan menemukan 2 kode yang sama. Pastikan kode tersebut berkelanjutan seperti :
<li><a expr:href='data:link.href'><data:link.title/></a></li>
Perhatikan di bawah nya akan ada kode <b:/loop>
Copy dan paste kode di bawah ini, di BAWAH kode <b:/loop> tadi.


 5. Simpan Template mu tadi. Lalu coba lihat blog, maka seharusnya akan ada tab bernama "Menu" di bagian atas blog anda beserta Sub Menu 1,2,3. Nah untuk mengganti nama "Menu" dan "Sub Menu 1" tadi, ganti tulisan "Menu" di pada kode <li><a href='#'>Menu</a> di atas dengan nama sesuka anda dan pada kode Sub Menu di atas. Jika anda menginginkan lebih dari 1 menu dengan sub menu, anda tinggal menambahkan kode di atas tadi di bawahnya.

Semoga artikel kali ini bermanfaat bagi kawan-kawan. Barakallahulaum wal ana.
Wassalamualaikum wr wb.

Cara Merubah Menu Template Hasil Download

OK bro kali ini saya akan memberikan toturial cara merubah halaman bawaan template hasil download di blog. Dulu sewaktu saya memulai membuat blog dan menulis artikel saya sangat semangat untuk mengelola blog saya tapi saya cepat bosan template blog tidak nyaman dan kurang menarik segera saya coba mendownload template dan dapat template yang bagi ku menarik seperti dibawah ini :


Tapi saya bingung bagaimana cara merubah atau menghilangkan halaman bawaan template tersebut. seperti dibawah ini sesuai kehendak ku..

Tidak pantang menyerah saya menemukan caranya. Ikuti langkah dibawah ini :
  • login ke dasbord blog anda
  • cari rancangan- edit html
  • jangan lupa centak kotak expand widget template 
  • selanjutnya cari kode <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  • trus lihat kode dibawahnya anda akan menemukan code seperti ini 
<li><a href='#'>Parent Category</a>
<ul class='children'>
<li><a href='#'>Child Category 1</a>
<ul class='children'>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'&gt;Sub Child Category 3</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul>
</li>
  • Code diatas adalah kode yang akan diubah. anda bisa merubah kode sejenisnya diantara kode diatas
  • warna merah bisa anda ganti dengan judul halaman yang lain terserah anda, warna biru adalah anak dari judul halaman warna merah dan hijau anaknya lagi.Sedangkan warna orange link yang akan menunjukkan artikel-artikel dari judul halaman (URL).
  • Sedangkan kode <ul class='children'> digunakan untuk menciptakan anak halaman .anda bisa gunakan kode itu untuk menciptakan anak-anak lainya.
  • Dan jika anda inging mengisi Sub Menu dengan Label silahkan ganti # dengan alamat URL Label anda.
Sekian dari saya. semoga artikel ini bisa bermanfaat.

Cara Mengedit Halaman Template Bawaan Hasil Download pada Blog

Download Download Now
Cara Mengedit Halaman Template Bawaan Hasil Download pada Blog
Saya adalah blogger pemula yang bingung ketika memakai template yang tidak disediakan blogspot atau hasil download. Bagaimana Cara Mengedit Halaman Template Bawaan Hasil Download pada Blog tersebut.
Saya sudah browsing mencari informasinya tetapi tidak ada yang cocok. Saya coba mencari permasalahan dan ternyata berhasil. Kebetulan saya memakai template b-SEO Versi 5. Mudah-mudahan cara ini berlaku untuk semua template hasil download. Dan kali ini saya akan bagikan cara-caranya:
1. Login ke Blogger.
2. Masuk pada bagian Template.
3. Pilih Edit HTML.
4. Centang pada bagian kotak Expand Template Widget.
5. Cari kode berikut dengan menggunakan ctrl+F (Untuk halaman diatas header).

<div id='NavbarMenuAtas'>
Perhatikan Kode di Bawahnya

<li><a href='/'>Home</a></li>
<li><a href='/p/link-exchange.html'>Sampel Page</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Privacy</a></li>
<li><a href='/p/link-exchange.html'>Link Exchange</a></li>
<li><a href='/p/sitemap.html'>Sitemap</a></li>
<li><a href='#'>Pasang Iklan</a></li>

6. Cari kode berikut dengan menggunakan ctrl+F (Untuk halaman dibawah header).

<div id='NavbarMenu'>

Perhatikan Kode di Bawahnya

<li><a href='#'>Entertainment</a></li>
<li><a href='#'>Blogging</a>
<ul><li><a href='#'>Blogger Templates</a></li>
<li><a href='#'>Tutorial</a></li>
<li><a href='#'>Widget</a></li>

</ul></li>
<li><a href='#'>Tekno</a>
<ul>
<li><a href='#'>Komputer</a></li>
<li><a href='#'>Handphone</a></li>
<li><a href='#'>Software</a></li>
<li><a href='#'>Antivirus</a></li>

</ul>
</li>
<li><a href='#'>Kuliner</a></li>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Tools</a>
<ul>
<li><a href='#'>Kode Warna</a></li>
<li><a href='#'>HTML Parser</a></li>
<li><a href='#'>Meta Tags Generator</a></li>

</ul></li>
<li><a href='#'>Health</a></li>
<li><a href='#'>Aneka Remaja</a></li>
<li><a href='#'>Video</a></li>
<li><a href='#'>Foto</a></li>
<li><a href='#'>Google Plus</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Youtube</a></li>

Catatan:
Untuk tulisan berwarna biru adalah URL halaman.
Untuk tulisan berwarna hijau adalah Judul halaman.
Untuk kode yang berlatar abu-abu adalah Sub Menu pada menu di atasnya.

7. Editlah kode-kode halaman di atas sesuai keinginan sobat. Sobat bisa mengganti/memasukan URL halaman, mengganti Judul halaman, menambahkan halaman atau mengahpus halaman yang tidak terpakai.
8. Lihat dulu hasilnya lewat Pratinjau.
9. Simpan Template.

Untuk cara alternatif lebih mudah lagi sob, daripada pusing.
Sobat tinggal masuk ke Template>>Edit HTML. Centang Expand Template Widget. Dan cari salah satu judul laman pada template (gunakan tombol ctrl+f). Setelah ditemukan, maka editlah laman-laman disekitar seperti sudah sebelumnya dijelaskan.
Cara Mengedit Halaman Template Bawaan Hasil Download pada Blog

Semoga sobat mengerti tutorial ini dan semoga cara ini berhasil. Amiien.

Mengedit Top Menu Pada Template Blogger

 ...Postingan ringan lagi.... yang merupakan pertanyaan dari sobat" Sob klu mau edit menu di atas blog seperti home ,about,post rss ,coment rss, mohon solusinya sob ?  " ..oke setelah dua hari libur ngeblog... now here we go again... :)

...Memang belum tersedia fitur untuk mengedit top menu pada template blogger ..belum secanggih itu... tapi mungkin mbah google suatu saat nanti  akan mendukung juga fitur untuk mengubah menu top blogger...wow hehe :D .. idak seperti jika kita menggunakan drupal / joomla / mambo yg praktis hanya tinggal menginstal fitur list top menu yang bisa di ubah-ubah...

... Untuk mengedit top menu pada template blogger kita harus sedikit mengubah kode script html template blognya... jadi perhatikan caranya berikut ini :

>> Contoh I
1. Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget )...
2. Seperti biasa Copy-Paste dahulu seluruh kode HTML template widget blog kamu ke dalam Notepad dan simpan... untuk jaga-jaga...
3. Tekan Control+F lalu cari kode " <div id='menu'> " ...kalau di kode html blog saya seperti ini.. biasanya ada sedikit perbedaan dengan kode template blog kalian.. 
4. Nanti akan terlihat kode sesudah " <div id='menu'> " yang seperti contoh dibawah ini...
<div id='menu'>
   <ul>
    <li><a Title='Home' expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://id-id.facebook.com/people/Andi-Wong/1222512287'>About</a></li>
    <li><div class='gap'/></li>

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
    <li><div class='gap'/></li>
    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://www.blogger.com/'>Login</a></li>
   </ul>
  </div>

    </div>


Keterangan :
> Ubahlah nama menu yang saya warnai ungu seperti contoh diatas...
> URL yang saya warnai biru juga diubah sesuai dengan nama menu yang kamu tentukan...

5. Jika sudah lalu Simpan template & refresh blog kamu...

...Jika ingin menambah lagi menu blog tinggal copy-paste kode html top menu-nya saja seperti contoh dibawah ini :
<div id='menu'>
   <ul>
    <li><a Title='Home' expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://id-id.facebook.com/people/Andi-Wong/1222512287'>About</a></li>
    <li><div class='gap'/></li>

<li><a href='menambah menu di tengah'>Tambah Menu di tengah</a></li>
    <li><div class='gap'/></li>

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
    <li><div class='gap'/></li>
    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://www.blogger.com/'>Login</a></li>

    <li><a href='menambah menu dibawah'>Tambah Menu dibawah</a></li>

   </ul>
  </div>

ATAU....

>> Contoh II 
1. Jika kode html top menu di Contoh I berbeda dengan kode top menu di template kamu.. coba yang ini.. 
2. Tekan Control+F lalu cari kode " <div class='Menu'> " ...
3. Nanti akan terlihat kode sesudah " <div class='Menu'> " yang seperti contoh dibawah ini...
<div class='Menu'>
                <ul>
                <li><a href='/'><span>Home</span></a></li>
                <li><a href='#' title='About'><span>About</span></a>
</li>
                <li><a href='#' title='Contact'><span>Contact</span></a>
</li>
                <li><a href='#' title='Extras'><span>Extras</span></a>
</li>
                </ul>
            </div>
Keterangan :
> Ubahlah nama menu yang saya warnai ungu seperti contoh diatas...
> URL yang saya warnai biru juga diubah sesuai dengan nama menu yang kamu tentukan...

5. Jika sudah lalu Simpan template & refresh blog kamu...

...Dan jika ingin menambah lagi menu blog tinggal copy-paste kode html top menu-nya saja seperti contoh dibawah ini :
<div class='Menu'>
                <ul>
                <li><a href='/'><span>Home</span></a></li>
                <li><a href='#' title='About'><span>About</span></a>
</li>

                <li><a href='menambah menu di tengah' title='#'><span>Tambah Menu di tengah</span></a>
</li>

                 <li><a href='#' title='Contact'><span>Contact</span></a>
</li>
                <li><a href='#' title='Extras'><span>Extras</span></a>
</li>

                <li><a href='menambah menu dibawah' title='Extras'><span>Tambah Menu dibawah</span></a>
</li>

                </ul>
            </div>

...mudah bukan...

Minggu, 16 Juni 2013

Cara Merubah Tampilan Blog seperti Web Profesional


Alexa Certified Traffic Ranking for http://aputhjosh.blogspot.com/

Minggu, 16 Juni 2013

Apakah anda kurang puas dengan tampilan blog anda sekarang? Dimana sangat mudah ditebak, bahwa blog anda dibuat dengan layanan gratis yang bernama blogger.com? Dan lebih-lebih lagi tampilannya sangat tidak meyakinkan? Jika jawaban anda ya, berarti kita sama. Blog ini juga dibuat dengan blogger.com. Tapi semua jejak aslinya sudah saya rubah, maka jadilah tampilannya menjadi seperti sekarang ini. Nah, jika anda juga tertarik ada beberapa hal yang bisa anda lakukan:

Pertama: Ganti Domainnya.

Anda tentu sudah paham apa itu domain, yaitu kata terakhir yang terdapat pada alamat (URL) blog anda. Asal blog anda menggunakan blogger.com, maka domainnya adalah: blogspot.com. Nah itulah ciri pertamanya. Asal anda tahu, URL blog ini dulunya adalah: http://www.blogernas.blogspot.com. Selain panjang, jujur saja yang kurang sreg dengan tulisan blogspot.com di belakangya. Akhirnya saya ganti dengan domain blog ini menjadi co.cc. Dan itu gratis. Maka jadilah alamat blog ini: http://www.blogernas.co.cc.

Nah, jika anda tertarik mengganti domain blog anda seperti ini anda bisa lihat caranya pada: Cara Mengganti Domain blogspot.com Menjadi co.cc.

Kedua: Ganti Template.

Ini merupakan pandangan pertama yang sangat menetukan. Jika tampilan blog anda kacangan, besar kemungkinan tidak hanya pengunjung yang tidak betah dan tidak ingin kembali, tapi anda sendiri juga sudah “mual” setiap membukanya. Apalagi jika template yang anda gunakan masih tamplate bawaan blogspot yang masih “perawan”.

Nah, jika ingin tampilan blog anda tampak tidak seperti blog, tapi seperti web professional, maka ada 2 cara yang bisa anda lakukan:

1. Tetap menggunakan template bawaan blogger.com, tapi anda lakukan purubahan di sana sini. Mulai dari header, sidebar, footer dan halamamn postingan. Jika anda ingin belajar dari blog ini, maka anda bisa lihat beberapa caranya pada arsip blog, kategori di sidebar atau pada daftar isi blog ini.
2. Dengan menggunakan template pihak ketiga. Anda tinggal mencari situs penyedia template gratis kemudian anda pilih model tampilan yang anda inginkan lalu downloadlah template tersebut. Tapi jika anda lagi malas berkeliaran, anda juga bisa langsung dapatkan dari blog ini. Ini KUNCI GUDANGNYA.
3. Kombinasi dari kedua hal di atas. Meskipun templatenya anda download dari pihak ketiga, namun pada bagian tertentu tetap anda modifikasi agar lebih sesuai dengan selera anda, seperti yang saya lakukan terhadap blog ini.

Ketiga: Hilangkan Navbar Bawaan Blogger.com.

Apa itu navbar? Inilah contoh gambarnya:


Nah, sebagus apapun tampilan blog anda, tapi selagi ada navbar bawaan ini, maka sudah bisa ditebak blog anda menggunakan blogger.com. Dan karena tampilan navbar inilah yang membuat saya hampir minggat menggunakan blogger.com. Tapi rupanya itu bisa dihilangkan. Jika anda juga berminat, catatannya masih saya simpan DI SINI.

Keempat: Rubah Logo Favicon Bloggernya.

Favicon adalah singkatan dari favorit icon. Inilah contoh gambarnya:

Cara Mengganti Icon Blogspot
Nah, meskipun kecil, siapa saja yang sudah biasa blogging akan tahu bahwa jika ada icon ini di tabulasi browser, maka blog anda dibuat menggunakan blogger.com. Karena icon inilah yang menjadi ciri khasnya. Termasuk bagian ini, juga dulunya membuat saya hampir minggat dari blogger.com. Tapi untunglah, rupanya icon itu juga bisa diganti. Caranya bisa anda lihat DI SINI.

Kelima: Lihat Profil Lengkapku.

Jika widget ini sudah terpasang di sidebar blog anda, biasanya akan tampil foto anda dan tulisan “Lihat Profil Lengkapku.” Ini juga merupakan ciri khas dari tampilan blogger.com. Nah jika anda juga ingin mengilangkan jejak yang satu ini, maka anda bisa langsung menghapus tulisan tersebut. Caranya juga sudah saya sediakan DI SINI.

Nah, lebih kurang itulah beberapa hal mendasar yang bisa anda lakukan untuk menyulap tampilan blog anda tidak lagi seperti blog pasaran, tapi sudah berubah menjadi seperti web profesional.

Selamat mencoba dan semoga berhasil!

Cara Membuat READ MORE Pada Blog OTOMATIS MUDAH 2013


Blog ini sekarang banyak membahas tentang tutorial blogspot, dan yang dibahas adalah tutorial dasar atau awal semisal dari cara membuat email, membuat blog dan semisalnya. Dalam keadaan blog itu jika telah jadi tentu tidak bisa langsung tulis saja, tapi perlu dilakukan beberapa perubahan semisal menambahkan read more otomatis untuk mempercantik tampilan blog.
Dari beberapa teman yang baru mengikuti panduan membuat blog blogspot disini, dan minta dikunjungi, saya lihat masih banyak yang belum memasang read more atau baca selengkapnya sehingga dirasa perlu untuk memberikan tutorial cara membuat read more pada blog agar tips blogging ini terus bersambung dan mungkin nanti akan menjadi panduan lengkap cara membuat blog dari awal.
cara membuat read more
Sebenarnya pada artikel Bagaimana cara menulis artikel di blogspot untuk pemula pada point ke 13 sudah dijelaskan cara memotong tampilan artikel agar tidak panjang alias tehnik membuat read more tapi itu cara manual, dan cukup merepotkan jika harus menggunakannya setiap kali posting. sehingga kita gunakan saja "baca selanjutnya" yang otomatis 
Kalau anda menggunakan template dari situs tempat dowload template keren, bisa dikatakan hampir semuanya sudah menggunakan read more otomatis sehingga tutorial ini mungkin kurang menarik untuk anda.

Cara Membuat Readmore Otomatis di Blogger

1. Silahkan login ke Blogger > Template
2. Supaya lebih aman, klik tombol Cadangkan / Pulihkan yang ada di pojok kanan > Unduh Template Lengkap, setelah selesai template terunduh, tekan Tutup
3. Sekarang klik tombol Edit HTML.
4. Copy kode ini:
</head>
5. Letakkan kursur DI DALAM kotak Edit HTML.
6. Tekan CTRL+F untuk mencari lalu tekan CTRL+V lalu tekan ENTER
7. Setelah ketemu kode </head> , maka letakkan kode berikut diatas </head>


<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 220;
img_thumb_height = 120;
img_thumb_width = 220;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c}; 
//]]>
</script>


8. Sekarang cari kode <data:post.body/> sebagaimana anda tadi mencari </head> maka akan anda temui kode tersebut tidak hanya satu. sehingga kita harus coba-coba, tapi mulailah dari <data:post.body/> yang paling bawah atau akhir.
Jika sudah ketemu yang paling akhir, maka ganti kode tersebut dengan ini:


 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:left'><b>Baca Selengkapnya</b> &#8594; <a expr:href='data:post.url'><data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>


9. Klik Pratinjau Template untuk melihat apakah artikel di homepage anda sudah menampilkan baca selengkapnya kemudian judul artikel. Contohnya seperti di blog ini  http://inibeli.blogspot.com/
Jika belum berhasil maka klik tombol Edit Template  lalu hapus script yang baru saja anda tambahkan tadi atau tekan CTRL + Z. Sekarang coba ganti dengan <data:post.body/> yang ada di atasnya, semoga kali ini anda berhasil. Jika ketika di Pratinjau sudah terpasang dengan benar klik tombol Save Template.
Jika anda ingin mengatur seberapa panjang teks yang di tampilkan atau seberapa besar gambar yang dimuat berikut ini keterangannya:
summary_noimg = 250;  adalah banyaknya karakter yang ditampilkan ketika postingan anda tidak ada gambar
summary_img = 220; adalah banyaknya karakter yang ditampilkan ketika postingan atau pada artikel anda terdapat gambar.
img_thumb_height = 120; adalah tinggi gambar thumbnail
img_thumb_width = 220; adalah lebar gambar thumbnail

Anda bisa juga mengganti BACA SELENGKAPNYA dengan kata-kata lain.
Demikian artikel Cara Memasang Read More Pada Artikel di Blog. Silahkan baca artikel lainnya, terima kasih.

Sumber kode : impoint.blogspot.com

Jumat, 14 Juni 2013

Cara Mudah Memasang Lagu Di Blog


Posted by tsunardy blogger on Jum'at, Juni 14, 2013
Cara Mudah Memasang Lagu Di Blog - Banyak sudah tutorial-tutorial tentang cara memasang lagu atau cara menambahkan lagu pada blog, Memasang Widget Musik Player untuk sebuah blog memiliki kekurangan dan kelebihan tersendiri. Tergantung dari si pengunjung dan koneksi yang dimilikinya.

Untuk anda yang tetap ingin memasang lagu diblognya, berikut saya sediakan satu tutorial mudah dan singkat, silangkan disimak.
Pertama kunjungi situs scmplayer.net, kemudian pada tab Choose Skin, silahkan pilih tampilan skin widget yang nantinya akan ditampilkan pada blog anda.

Cara Mudah Memasang Lagu Di Blog

Lalu klik pada tab Edit Playlist, disini ada dua pilihan yaitu dengan memasukan url lagu yang di pasang manual(Manual Playlist). Atau dari playlist akun youtube(RSS Podcast) anda. gunakan saja pilihan pertama "Manual Playlist".

Cara Mudah Memasang Lagu Di Blog

Cara Memasang Lagu Di Blog
Contoh Yang Saya Lakukan
Perhatikan pada gambar yang saya lingkari merah, disitu terterah contoh untuk memasukan lagu yang anda inginkan, silahkan anda cari situs yang menyediakan lagu atau bisa anda upload sendiri ataupun mencari di youtube.com video yang nantinya sebagai url lagu.(bukan menampilkan video, hanya suara dari video)

Kemudian klik pada tab Configure Settings untuk mengatur lagu yang sudah kita pilih tadi, atur sesuai keinginan anda. Atau seperti pengaturan saya pada gambar dibawah ini

Cara Memasang Lagu Di Blog
Klik Untuk Memperbesar


Setelah itu klik tombol Done, lalu copy script yang diberikan.

Cara Mudah Memasang Lagu Di Blog

Langkah terakhir, masuk ke akun blogger anda pilih tata letak. Kemudian klik tambah gadget pilih gadget HTML/Javascript. Lalu paste kan script tadi. klik Simpan.

Sekarang blog anda sudah terpasang lagu, setiap pengunjung yang datang akan disambut dengan lagu yang anda pasang :) pastikan pada tab Edit Playlist, anda memasukan url yang benar. Selamat mencoba....