Cara Membuat Related Posts Di Sidebar

Related posts widget atau artikel terkait adalah widget yang memunculkan artikel yang berkaitan dengan postingan yang sedang di baca. Cara ini sudah banyak yang menjelaskan di postingan para sahabat Blogger, namun saya juga ingin berbagi pengalaman yang sudah saya kerjakan.

Related posts sangat bermanfaat bagi blog kita terutama untuk SEO dan juga bermanfaat bagi pengunjung. Dengan related posts widget ini, pengunjung suatu blog akan mudah untuk membaca atau menelusuri setiap postingan yang ada di blog kita.

Nah tentunya hal ini akan meningkatkan page view blog kita. Related posts widget ini di buat dengan berbagai bentuk yang menarik agar pengunjung tertarik untuk menelusuri blog kita. Tertarik untuk mencobanya di blog anda? Silahkan ikuti totorial Cara Membuat Related Posts Di Sidebar berikut ini.

1. Log in ke blogger dengan akun yang anda miliki.
2. Pergi menuju ke rancangan » edit HTML » centang kotak expand template widget. Atau bagi yang menggunakan tampilan blogger yang baru, anda tinggal klik template » edit HTML » centang kotak expand template widget.
3. Hampir aja lupa, sebelum melakukan pengeditan, sebaiknya anda memback-up template anda dulu buat jaga-jaga bila terjadi kesalahan dalam melakukan pengeditan.
4. Cari kode </head> dan letakkan kode di bawah ini sebelum kode </head>.

<script src='http://contents-ente.googlecode.com/files/sidebar-ente.js' type='text/javascript'></script>

5. Cari kode yang kira-kira mirip seperti ini.

<b:if cond='data:post.labels'>

<data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> </b:loop>

</b:if>

6. Kalau sudah ketemu, tambahkan kode di bawah ini di dalam kode di atas.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>

</b:if>

Sehingga kodenya menjadi seperti ini.

<b:if cond='data:post.labels'>

<data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>

</b:if>

</b:loop>

</b:if>

Keterangan : kode yang bercetak tebal berwarna merah adalah jumlah artikel terkait atau related posts yang akan di munculkan, sedangkan kode yang berwarna hijau adalah kode yang di tambahkan.

7. Save template anda.

8. Sekarang anda menuju ke tata letak » tambah gadget » HTML/Java script. Masukkan kode di bawah ini pada kolom yang sudah di sediakan.

<script type="text/javascript">

removeRelatedDuplicates();

printRelatedLabels();

</script>

9. Save gadget anda, dan lihat hasilnya.

Sekian dulu tutorial dari saya kali ini tentang Cara Membuat Related Posts Di Sidebar, bagi yang masih bingung silahkan untuk bertanya ya.

Mengenal Twitter

Kita sekarang akan mengenal yang namanya twitter, walau sudah usang beritanya namun bagi saya pun anda yang belum tahu akan berkenalan dengan yang namanya jejaring sosial yang bergambar khusus ini, memiliki logo berupa seekor burung berwarna biru yang bernama "Larry the "Bird".

Twitter adalah sebuah situs web yang dimiliki dan dioperasikan oleh Twitter Inc., yang menawarkan jejaring sosial berupa mikroblog sehingga memungkinkan penggunanya untuk mengirim dan membaca pesan yang disebut kicauan (tweets). Kicauan adalah teks tulisan hingga 140 karakter yang ditampilkan pada halaman profil pengguna. Kicauan bisa dilihat secara luar, namun pengirim dapat membatasi pengiriman pesan ke daftar teman-teman mereka saja. Pengguna dapat melihat kicauan penulis lain yang dikenal dengan sebutan pengikut ("follower").

Di Indonesia, Twitter sangat populer. Terlebih lagi, kemudahan yang disediakan oleh telepon seluler yang ada serta aplikasi yang mendukung. hal ini membuat Indonesia menduduki peringkat ke enam sebagai negara dengan pengguna Twitter terbanyak, meski Amerika masih menjadi negara nomor satu untuk urusan Twitter. Daftar akunnya mudah sekali tinggal signup saja.

Oke selamat bertwitter ria.

Cara Memasang Tag Permalink di Bawah Postingan

Manfaat memasang tag permalink artikel di setiap postingan ini selain untuk SEO on page juga kita memberikan penjelasan kepada pembaca artikel tentang alamat permalink, serta judul tersebut. Memasang permalink di setiap postingan sangat bermanfaat untuk menambah internal link dalam postingan, yang tentunya dengan adanya permalink ini akan membuat postingan kita lebih Seo Friendly.

Bagaimana cara memasang tag permalink di psotingan :
Masuk ke akun blogger sobat
Kemudian langsung saja menuju ke halaman Edit HTML
Cari kode ]]></b:skin>
Lalu pastekan code di bawah ini tepat di atas kode ]]></b:skin>
.permalink
{border: 1px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:5px;}
.strikpermalink a
{background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;}
Cari lagi kode <data:post.body/> (mungkin sobat akan menemukan 2 kode tersebut, pilih kode yang kedua)
Jika sudah di temukan, ganti kode tersebut dengan kode dibawah ini
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
<div class='permalink'>
<center><small>Anda sedang membaca artikel <strong><u><data:blog.pageName/></u></strong> dan artikel ini url permalinknya adalah <strong><data:post.url/></strong></small></center><center><small>Semoga artikel <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> ini bisa bermanfaat.</small></center></div>
<b:else/>
<p><data:post.body/></p>
</b:if>
Save dan lihat hasilnya.
Sekarang tag permalink sobat sudah terpasasng dibawah postingan.. Cara Memasang Tag Permalink di Bawah Postingan

Selamat mencoba...!!!

Cara Membuat Label Dengan Scrool

Cara Membuat Label Dengan Scrool - Terinspirasi dari blog ini, saya menyempatkan diri untuk membuat tutorial Cara Membuat Label Dengan Scrool. Nah, pada dasarnya label di blogger.com itu sebenarnya hanya terdiri atas type cloud dan list dan tidak memiliki scrool. Nah, dengan sedikit olesan, maka kita bisa membuat label dengan scrooling. Hal ini ditujukan agar blog tampak lebih rapi, dan pengunjung akan lebih mudah dalam melihat serta mencari label postingan blog apa yang ingin ia liat. Untuk demo bisa liat gambar disebelah, gambar nya langsung ane ambil dari blog ini ya. Lalu? bagaimana cara membuatnya ? Oke silahkan ikuti saya dan akan saya berikan tutorial paling mudah Cara Membuat Label Dengan Scrool.

1. Login ke blogger.com 
2. Buatlah sebuah widget label dengan menambhkan gadget pada bagian sidebar dan jangan lupa berikan judul, Misal kita buat judul "kategori"
3. Lanjut klik Edit HTML, dan klik centang Expand Template Widgets. 
4. Sekarang cari label yang udah kita buat tadi, untuk mempermudah pencarian tekan CTRL + F dan ketik "kategori" nah nanti akan muncul banyak kode. 
5. Perhatikan kode berikut ini, terdapat kode berwarna biru. Kode tersebut yang harus kita tambahkan kedalam template agar label memiliki scrool

   <b:widget id='Label1' locked='false' title='kategori' type='Label'>
   <b:includable id='main'>
   <b:if cond='data:title'>
   <h2><data:title/></h2>
   </b:if>
   <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
   

   <div style='overflow:auto; width:ancho; height:230px;'>

   <b:if cond='data:display == &quot;list&quot;'>
   <ul>
   <b:loop values='data:labels' var='label'>
   <li>
   <b:if cond='data:blog.url == data:label.url'>
   <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
   <b:else/>
   <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
   </b:if>
   <b:if cond='data:showFreqNumbers'>
   <span dir='ltr'>(<data:label.count/>)</span>
   </b:if>
   </li>
   </b:loop>
   </ul>
   <b:else/>
   <b:loop values='data:labels' var='label'>
   <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
   <b:if cond='data:blog.url == data:label.url'>
   <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
   <b:else/>
   <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
   </b:if>
   <b:if cond='data:showFreqNumbers'>
   <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
   </b:if>
   </span>
   </b:loop>
   </b:if>
   <b:include name='quickedit'/>
   </div>
   
   

   </div>

   </b:includable>
   </b:widget>

6. Simpan  

Semoga ada manfaatnya Cara Membuat Label Dengan Scrool ini.. Selamat berkarya.