Search

Mari Mengenal Navigasi Breadcrumb

Pernahkah anda mendengar istilah "breadcrumb" ?, Jika anda seorang "Blogger Trick Freakz" tentunya anda sudah tidak asi...

Cara Memasang Navigasi Breadcrumb di Blogspot

Mungkin bagi sebagian Blogger sudah tidak asing lagi dengan yang namanya breadcrumb. Breadcrumb adalah semacam elemen navigasi yang berada d...

Mengenal Responsive Template

"Responsive template" suatu istilah yang sudah tidak asing lagi bagi para blogger , terutama blogger yang sangat suka dengan duni...

Mulai Belajar Blogspot dengan Bismillah

Assalamualaikum wr.wb Hari senin tanggal 3 maret pukul 23:43. Dengan menyebut nama Allah yang maha pengasih dan penyayang Atas izin allah...

Kamis, 06 Maret 2014

Mari Mengenal Navigasi Breadcrumb

Pernahkah anda mendengar istilah "breadcrumb" ?, Jika anda seorang "Blogger Trick Freakz" tentunya anda sudah tidak asing dengan istilah itu .  Kali ini saya akan menuliskan sidikit pengenalan dan funsi navigasi blog yang saya anggap vital ini .

Apa Itu Breadcrumb ?


Breadcrumb atau sering disebut navigasi breadcrumb, adalah navigasi yang pada umumnya terletak di atas judul postingan atau pada bagian atas sebuah website / blog . Dengan bentuk horizontal, navigasi ini biasanya memuat link untuk kembali ke bagian kategori sampai ke halaman utama. navigasi ini seolah merekam jejak kunjungan dari halaman induk ( home/beranda) sehingga mereka dapat menuju ke suatu halaman yang dituju .

Contoh dari breadcrumb di blogspot sendiri bisa anda lihat di atas judul postingan ini atau gambar dibawah ini


Breadcrumb navigasi yang memudahkan pengunjung dalam menjelajahi situs anda ! (User Friendly)


Navigasi ini juga dianggap user friendly, dengan adanya Breadcrumb pengunjung dapat mengetahui pada kategori apa halaman yang sedang mereka jelajahi dan mereka dapat dengan mudah mencari halaman yang memiliki kategori sama . Tentunya nilai Plus akan bertambah di blog anda setelah anda memasang navigasi ini .

Breadcrumb di mata mesin pencari !

Selain memudahkan pengunjung untuk menjelajahi situs blog kita, Beberapa kalangan berpendapat bahwa navigasi ini juga memudahkan Robot mesin pencari untuk merayapi struktur halaman per halaman dalam blog kita .

Tidak hanya memudahkan perayapan oleh robot, Breadcrumb juga akan ditampilkan di hasil pencarian jika anda memasang dengan benar sesuai Rich Snippet Schema

Dibawah ini adalah contoh tampilan breadcrumb yang muncul di google




Bagaimana cara memasang navigasi Breadcrumb di Blogspot ??? 

Setelah mengetahui nilai tambah dari navigasi ini, mungkin anda ingin membuat navigasi di blog anda sendiri.
Tapi sayangnya, pada saat artikel ini ditulis template standart blogspot belum memiliki fasilitas untuk membuat atau memasang navigasi ini secara otomatis :( . Tapi anda tidak perlu kuatir, anda tetap dapat memasang navigasi vital ini di blog anda ! . Saya telah menulis caranya di posting yang berjudul Cara Memasang Navigasi Breadcrumb di Blogspot :))
Read More

Selasa, 04 Maret 2014

Cara Memasang Navigasi Breadcrumb di Blogspot

Mungkin bagi sebagian Blogger sudah tidak asing lagi dengan yang namanya breadcrumb. Breadcrumb adalah semacam elemen navigasi yang berada diatas judul postingan . Memasang atau membuat navigasi breadcrumb adalah salah satu strategi Seo Onpage , bahkan beberapa orang mengatakan, Memasang breadcrumb di blogspot dapat meningkatkan "Seo Score" pada blog itu . :p


Apa sih keuntungan memasang Navigasi Breadcrumb  ?

Seperti saya sebutkan diatas , memasang navigasi breadcrumb akan memberikan dampak postif di blog atau situs anda . Mulai dari meningkatkan Seo Score dan blog anda akan terlihat rapi dimata google robot dan pengunjung.

Kita akan mengambil contoh pada situs Kaskus.co.id , dibawah ini adalah contoh navigasi breadcrumb dari situs tersebut


Dengan adanya Navigasi Breadcrumb yang Seo Friendly itu maka Google akan memunculkan struktur navigasi di dalam pencarian . Gambar dibawah ini adalah contohnya >


Dan dibawah ini adalah contoh situs yang tidak menggunakan navigasi breadcrumb , Google tidak memasukan struktur navigasi blognya di hasil pencarian


Setelah melihat contoh kasus dua situs diatas , saya rasa menggunakan Navigasi Breadcrumb di blogspot membat blog anda terlihat lebih rapi dan terstruktur dimata Google maupun pengunjung .

 Cara Memasang Breadcrumb Di Blogger

Membuat  Breadcrumb di Blogspot sangatlah mudah , tidak perlu java script aneh-aneh berat dan bikin blogkita menjadi lambat . ok , langsung saja saya mulai cara membuat navigasi yang ramah mesin pencari itu :).
  1. Login Ke Blogger
  2. Pilih blog mana yang akan anda pasang navigasi breadcrumbs
  3. Klik "Template"
  4. Langsung Klik tombol "Edit HTML"
  5. Cari kode > ]]></b:skin>  (Klik kolom yang berisi kode HTML lalu ketik "ctrl+f" pada keyboard anda" 
  6.  Setelah ketemu , Pasang kode di nomer 7 diatas kode ]]></b:skin>
  7.  .breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}
  8. setelah selesai , kini saatnya mencari kode <b:includable id='main' var='top'>
  9. Setelah ketemu , anda tinggal menggantinya dengan kode dibawah ini di nomer 10 :
  10. <b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- breadcrumb for the post page -->
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
    <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
    <b:loop values='data:post.labels' var='label'>
    &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
    </b:loop>
    &#187; <span><data:post.title/></span>
    </div>
    <b:else/>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
    </b:if>
    </b:loop>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <div class='breadcrumbs'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Arsip untuk<data:blog.pageName/></span>
    </div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div class='breadcrumbs'>
    <b:if cond='data:blog.pageName == &quot;&quot;'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Semua Postingan</span>
    <b:else/>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posting dengan kategori<data:blog.pageName/></span>
    </b:if>
    </div>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>
    <b:includable id='main' var='top'>
    <b:include data='posts' name='breadcrumb'/>


  11. Seperti biasa,anda tinggal melakukan tugas akhir yaitu menekan tombol "simpan template" dan silahkan melihat hasilnya ^^ (navigasi ini muncul diatas artikel di halaman postingan)
Cara ini insya allah berkerja , karena saya mempraktekan sendiri di blog pribadi saya , Selain itu cara ini telah dipakai banyak blog supaya breadcrumb terindeks google .

 Berikut ini adalah contoh navigasi breadcrumb yang saya pasang :

 jika melihat dihalaman label maka akan muncul seperti gambar dibawah ini :

Selesai juga akhirnya ^o^, semoga tulisan ini bermanfaat bagi semua :))

Wasalam
Read More

Mengenal Responsive Template

"Responsive template" suatu istilah yang sudah tidak asing lagi bagi para blogger , terutama blogger yang sangat suka dengan dunia modifikasi tampilan blog .

Responsive Template VS Non-Responsive Template

Tidak semua template yang di desain memiliki fitur "responsive", memakai template yang responsive adalah salah satu cara supaya blog anda menjadi baik dimata pengunjung maupun mesin pencari . kali ini saya akan membahas apa itu Responsive Template beserta kelebihan-kelebihanya.

Template Responsive Dan Manfaat bagi pengunjung 

Contoh Efek Fitur "Responsive" pada blogspot
  Responsive template adalah istilah untuk template yang bagus dan pas untuk ditampilkan di berbagai Gadget, mulai dari dekstop, tab, sampai seluler. Dengan Responsive Blogspot Template, Anda tidak perlu membuat desain untuk mobile site dan lain sebagainya. Karena, template blogspot yang responsive akan secara otomatis mengubah tampilanya ketika pengunjung menggunakan layar gadget yang berbeda.

Sebagai contoh . anda membuat blog dengan lebar 920px. Dengan desain yang responsive , lebar template anda secara otomatis akan berubah menjadi ukuran 300px jika anda atau pengunjung membuka blog anda dilayar seukuran itu ( lebih kecil )

Jika Template Tidak responsive


Jika template tidak responsive , tampilan akan kurang menarik jika dibuka dilayar yang berbeda
Mungkin di layar anda tampilan blog anda sudah sangatlah pas, tapi belum tentu di layar pengunjung tampilan blog anda pas, karena kita tidak pernah tau dengan layar selebar apa pengunjung membuka blog anda :)
Sebagai contoh , Anda memakai ukuran 900pxl untuk lebar blog anda dan ukuran itu sangatlah pas di layar dekstop anda . Tapi pengunjung yang memakai layar lebar akan melihat blog anda sangatlah kecil , dan sebaliknya jika pengunjung memakai layar yang kecil , tampilan blog anda akan terlalu besar di layar mereka .
======

Setelah mengetahui perbedaan template yang responsive dan tidak , tentunya kita akan memilih untuk menggunakan atau merubah template kita supaya lebih responsive :), anda bisa mengecek apakah tampilan blog anda sudah responsive atau belum di http://responsivetest.net/.

Jika anda ingin mengecek dengan manual, anda bisa mengecilkan tampilan browser dengan cara menekan tombol di sebelah minimize browser anda .

Jika tampilan blog anda mengikuti layar browser ( tidak ada scroll untuk lebar ), seperti Gambar dibawah ini



maka template yang anda gunakan telah memiliki fitur responsive.

Dan jika ketika anda mengecilkan browser maka template anda tetap seperti gambar dibawah ini

Maka template anda belum responsive :) , dan saya menyarankan anda untuk mengganti atau mengubah template anda supaya lebih responsive :) .


Read More

Senin, 03 Maret 2014

Mulai Belajar Blogspot dengan Bismillah


Assalamualaikum wr.wb
Hari senin tanggal 3 maret pukul 23:43. Dengan menyebut nama Allah yang maha pengasih dan penyayang Atas izin allah saya membuat Blog ini :) , Blog ini akan saya gunakan sebagai media catatan untuk "Cara-cara memodifikasi Blogspot" .

Karena ilmu sangatlah luas, bahkan karena luasnya itulah otak saya yang tidak seberapa ini kadang tidak mampu menampung semua itu . maka blog ini saya gunakan sebagai pengingat ketika saya lupa .

Selain sebagai catatan , Blog ini saya gunakan untuk silaturahmi dan berbagi bersama apa yang saya dapatkan .  Semoga berkah menyertai kita semua , amin 3x ..

Walaikumsalam wr. wb

Read More