Cara membuat artikel terkait dengan thumnail

Cara membuat artikel terkait dengan thumnail - Artikel terkait atau related post dalam dalam postingan sangatlah penting, karena dengan adanya artikel terkait (related post) kita bisa menunjukkan kepada pembaca untuk membaca artikel-artikel yang berhubungan dengan posting yang dibacanya, dan jika si pembaca tertarik maka si pembaca tersebut bisa berlama-lama di blog kita.

Berikut cara memasang artikel terkait dengan thumbnail.

1. Masuk ke akun Blogger Anda.

2. Klik Download Template Lengkap, untuk berjaga-jaga kalau nanti terjadi kesalahan dalam mengedit template.

4. Klik tab Edit HTML

5.Cari kode </head> Bila Anda menggunakan browser Mozilla Firefox, tekan tombol Ctrl +  F, lalu isikan kode yang dimaksud untuk memudahkan pencarian.

6. Copy kode berikut dan paste di atas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove -->
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:2px;
}

#related-posts h2{
text-align:center;margin:0
;height:25px;padding:5px 0px 0px;line-height:1.5em
;font:normal bold 100%&#39;Trebuchet MS&#39;,Verdana,Arial,Sans-serif;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJokxWZrAiLrqeOVJoZg3PE2SrmJR1iyIIn5CqfDs6JQtd3yPXfHNzHxhfnaDr-WRhKI6TXfVGqzsM8lvXBe2P_d12BC3xyNBa2wcBzwWbI_o6tXX-1U-sAeA4Qb9slDjpEcqUolnoroA/s320/pelangi1.jpg) repeat-x;color:#FFFFFF;
}
#related-posts a{
color:#FF8000;
}
#related-posts a:hover{
color:red;
text-decoration:underline
}

#related-posts a:hover {
background-color:#484B52;
}

</style>

<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2r4FASUacHpmUzvgFYbg2L47qNctFGXB_y5KM5lNryiQADpqLDBEZXqKXoU3Wku_rmeQ9ys9tvS-rRT2d7G4H-vpEd0Aoh5C_odFUwiQhxoq3sE46TdiXJsg_Z31d159XaUi7FMSfFWI0/s1600/Nonami_Takizawa_.jpg&quot;;
var maxresults=6;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Artikel Terkait&quot;;
</script>
<script src='https://andiknet-code.googlecode.com/svn/file/relatedpostthumbnailandiknet.js' type='text/javascript'/>
<!-- remove -->
<!--Related Posts with thumbnails Scripts and Styles End-->

   6. Cari code <data:post.body/>
   7. Copy kode berikut dan paste bawah kode <data:post.body/> 

<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>

8. Simpan.

untuk code <data:post.body/> biasanya lebih dari satu, coba anda pilih yang terakhir atau paling bawah.

dan jika themplate anda ada tombol share facebook, twitter dll

anda tinggal meletakkan dibawah tombol share jejaring social yang ada di themplate anda,,

Keterangan:

• Anda dapat mengubah jumlah artikel terkait yang ingin ditampilkan dengan mengubah kode var maxresults=6;

• Untuk mengubah judul widget, Anda dapat mengedit kode berikut var relatedpoststitle=&quot;Artikel Terkait&quot;

• Bila ingin mengganti default thumbnail, edit kode berikut var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2r4FASUacHpmUzvgFYbg2L47qNctFGXB_y5KM5lNryiQADpqLDBEZXqKXoU3Wku_rmeQ9ys9tvS-rRT2d7G4H-vpEd0Aoh5C_odFUwiQhxoq3sE46TdiXJsg_Z31d159XaUi7FMSfFWI0/s1600/Nonami_Takizawa_.jpg";

• Untuk mengubah warna dari Splitter Line, silakan edit kode var splittercolor=&quot;#d4eaf2&quot;;

Read More

Pengertian Slug Pada Blog WORDPRESS

Pengertian Slug Pada Blog WORDPRESS - Slug dalam bahasa inggris berarti siput,dan apa fungsi slug bagi blog wordpress kita?. Istilah Slug itu sama artinya dengan memperpendek judul tautan sebuah postingan pada wordpress,?.misalnya kita
membuat postingan dengan judul "Cara membuat Show Hide pada Komentar blog Valid HTML5 dan CSS3 " pada judul postingan tersebut urlnya pasti juga panjang seperti http://namabloganda.wordpress.com/2013/02/08/Cara-membuat-Show-Hide-pada-Komentar-blog-Valid HTML5-dan-CSS3. Akan tetapi jika kita memanfaatkan fungsi slug url yang tadinya panjang bisa menjadi pendak seperti http://namabloganda.wordpress.com/2013/02/08/Cara-membuat-Show-Hide-pada-Komentar-blog. jadi fungsi slug di wordpress.com adalah untuk memperpendek url judul postingan yang terlalu panjang, biar url kita bisa dengan mudah di deteksi
oleh search engine seperti google,yahoo,bing dan lain-lain maka kita bisa menggunakan fasilitas yang sudah disediakan oleh pihak wordpress yang bernama slug tadi..

 Caranya sangat mudah, singkat judul yang panjang tadi

kemudian masukkan di slug, lalu terbitkan, 

selamat mencoba.

Read More