Cara Design Blogger

Home / Related Post

Showing posts with label Related Post. Show all posts

Cara Membuat Related Post With Thumbnail

Posted by Unknown on Tuesday, 16 October 2012 at 00:16

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVEpyBWJcvRoNpV6tsBq0XvgwSVRcQgxJHsYBMEai569jUrpa876pwLx1zPLZZIkhi-zWkEe2szMn_Xpd1sEvDMD8QvNX-uip77_oslI8G_a9UgGe1wr2YU0AsjJTY_0l-IyHow2FYnBC6/s1600/Membuat+related+post+with+thumbnail.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVEpyBWJcvRoNpV6tsBq0XvgwSVRcQgxJHsYBMEai569jUrpa876pwLx1zPLZZIkhi-zWkEe2szMn_Xpd1sEvDMD8QvNX-uip77_oslI8G_a9UgGe1wr2YU0AsjJTY_0l-IyHow2FYnBC6/s320/Membuat+related+post+with+thumbnail.png" width="320" /></a></div>
 
 
<div>
<a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post-with-thumbnail.html">Cara Membuat Related Post With Thumbnail</a>-Pada postingan sebelumnya Cara Design Blog sudahk memberikan tutorial blogger cara membuat related post. Namun related Post itu tanpa thumbnails atau tanpa gambar atau image. Related post with thumbnail ini karena menyertakan gambar maka akan menarik pengunjung untuk mengunjungi halaman terkait. Fungsi dari related post silahkan simak pada artikel <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post.html">cara membuat related post</a> sebelumnya. 
 
Tampilan related post with thumbnail silahkan lihat screenshoot di atas. 
Kali ini ijinkanlah Cara Design Blog memberikan tutorial cara membuat related post with thumbnail.  
Sudah siap menyimak tutorial blogger yang akan saya sampaikan? 
Oke, Mari kita simak bersama <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post-with-thumbnail.html" style="font-family: Arial, Helvetica, sans-serif;">cara membuat related post with thumbnail</a> berikut ini:</div>
<div>
1. Masuk Dasbor Blog kamu.</div>
<div>
2. Template > Edit HTML > Lanjutkan</div>
<div>
3. Centang Exspnd Template Widget</div>
<div>
4. Cari kode: </head></div>
<div>
5. Letakkan kode berikut diatas </head> 
 
<blockquote>
 <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts { float:center; height:100%; min-height:100%; padding-top:10px; padding-left:15px; padding-right:15px; } #related-posts h2{ font-size: 1.3em; color: black; font-family: Arial; margin-bottom: 0.75em; } #related-posts a{ color:black; } #related-posts a:hover { background-color:#eeeeee; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzqDiRRgAvXNopzd7ETtV1JNeAK7IYUNATEXWp3hbr_ACMG-R8TYMapXqfvVQ4xEC4jCoJYFCFvTt52dP0MT8yckLGEc7yQQjYA2j5sPeaXT0jBF3PT7PdPx0mD1ODU1_dmF-M2KaZ9aWZ/"; var maxresults=5; var splittercolor="#cccccc"; var relatedpoststitle="Artikel Terkait:"; </script> <script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/> </b:if> </blockquote>
Keterangan kode:   
<ul>
<li>Kode:#cccccc warna hijau pada kode diatas bisa kamu ganti dengan kode warna yang kamu suka. var plittercolor: garis pembatas antar <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post-with-thumbnail.html">related post with thumbnail</a>.</li>
<li>Tulisan Artikel Terkait warna hijau di atas bisa kamu ganti dengan kata yang kamu suka.</li>
</ul>
 
6. Cari: 
7. Letakan kode berikut ini tepat di bawah kode no.:6. 
 
 
<blockquote class="tr_bq">
 <b:if cond='data:blog.pageType == &quot;item&quot;'> <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><div style='clear:both'/> </b:if> </blockquote>
Keterangan kode:   
<ul>
<li>Angka 6 warna hijau pada kode di atas bisa kamu ganti dengan jumlah related post yang ingin kamu tampilkan.</li>
</ul>
8. Save Template. 
Selesai, silahkan lihat blog kamu. 
 
 
Tags:<a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post.html">cara membuat related post</a>, <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post-with-thumbnail.html">cara membuat related post with thumbnail</a> 
 </div>

Cara Membuat Related Post With Thumbnail -Pada postingan sebelumnya Cara Design Blog sudahk memberikan tutorial blogger cara membuat re...

Cara Membuat Related Post

Posted by Unknown on Sunday, 14 October 2012 at 23:08

<a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post.html">Cara Membuat Related Post</a>-Dalam postingan blog kali ini Cara Design Blog akan memberika tutorial blogger cara membuat related post. Sebelum memberikan tutorial membuat related post pada blog.  
Perlu dijelaskan dahulu apa itu related post dan apa fungsi dari related post. 
Related post diartikan sebagai sekumpulan link artikel yang terkait dengan artikel yang sedang dikunjungi. Artikel ini terkait karena kesamaan tema. Dalam postingan terdahulu Cara Design Blog membuat tutorial blog <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-label-di-blog.html">cara membuat label blog</a>. Disinilah peran label blog. Label blog menghubungkan halaman yang kita kunjungi dengan halaman lain yang terkait atau memiliki label yang sama. 
Lihat tampilan screenshoot related post Cara Design Blog berikut:  
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgFAQI61rxrSAEmy2lYfpHRTkx9eKg-dlBIgyZo44Pev4yTtXk53qN1U7nIpA_jfzJ1vpyWjjBZvCgwh_sG-E9KaUOezykr6WVwiN_YDU8HJ7vlzJUeawiZBGnZVbAYcBy2Y38QFhgiNGr/s1600/related+posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgFAQI61rxrSAEmy2lYfpHRTkx9eKg-dlBIgyZo44Pev4yTtXk53qN1U7nIpA_jfzJ1vpyWjjBZvCgwh_sG-E9KaUOezykr6WVwiN_YDU8HJ7vlzJUeawiZBGnZVbAYcBy2Y38QFhgiNGr/s320/related+posts.png" width="320" /></a></div>
 
 
Sekarang apa fungsi atau manfaat dari related post tersebut. Realated post memudahkan pengujung blog untuk mencari dan menemukan artikel yang terkait dengan halaman yang dikunjungi. Fungsi lain dari related post lainya membuat blog lebih SEO friendly.  
 
Bagaimana cara mudah membuat related post? 
Mari simak tutorial blogger <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post.html">cara membuat related post</a> berikut ini: 
1. Masuk Dasbor Blog kamu. 
2. Klik: Template >> Edit HTML > Lanjutkan >  Expand Widget Template. 
3. Cari kode: ]]></b:skin> 
Cara mudah mencari: CTR+F, Find: ]]></b:skin> 
 
4. Letakan kode berikut Tepat di atas kode ]]></b:skin> 
 
<blockquote class="tr_bq">
 #related-posts { float : left; width : 468px; margin-left : 5px; font-size: 12px; line-height : 1.8em; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { margin : 10px 5px 5px 20px; padding : 0; }</blockquote>
5. Cari kode: </head> 
6. Letakan kode berikut tepat di atas kode no.:5. 
<blockquote class="tr_bq">
<script src='http://hbhost.googlecode.com/files/Related-posts.js' type='text/javascript'</blockquote>
7. Cari kode: <data:post.body/> 
Jika kode itu ada dua, pilih yang ke dua. 
 
8. Letakan kode berikut tepat dibawah kode  <data:post.body/> 
 
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <div style='font-size:18px'>Related Posts:</div> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'/> <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=5&quot;' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> </b:if> </b:if></blockquote>
Keterangan: Tulisan "Related Post" yang saya tulis hijau di atas bisa kamu ganti dengan More About, Baca Selengkapnya atau More. Terserah kamu mana yang kamu sukai. 
 
9. Save Template. 
Selesai, silahkan lihat tampilan blog kamu.

Cara Membuat Related Post -Dalam postingan blog kali ini Cara Design Blog akan memberika tutorial blogger cara membuat related post. Sebelum...