Membuat Artikel Terkait Bergambar di blog

Cara Membuat Artikel Terkait Bergambar di blog - mengenai Cara Membuat Artikel Terkait kali Jalmis Blog akan berbagi Tips atau cara membuat Artikel Terkait Vertikal atau horizontal thumbail  di blog yang tentunya artikel terkait ini di taruh di bawah posting . Tutorial Artikel terkait ini sesuai label blog masing misalnya Blogger Tips maka akan muncul juga artikel sebelum atau sesudah yang kita post di label tersebut..

Artikel terkait adalah suatu widget post setelah kita posting maka akan menentukan posting lain sesuai label di bawah postingan blog. tutorial ini adalah termasuk kategori seo blog karena awak master seo mengatakan begitu maka saya sendiri yang masih belajar kepingin juga berbagi untuk sobat semua agar bisa di praktekkan di blog sobat masing - masing , coba lihat gambar di bawah ini, itu adalah Artikel terkait dengan icon seperti feed seperti yang saya share saat ini ....

Oke langsung saja ke pembahasannya ..

1. Sign in akun blogger sobat
2. Klik Rancangan => Edit HTML =>
3. Tekan CTRL+F atau F3 agar cepat dalam pencarian

4. Cari kode </head> jika  sudah ketemu letakkan kode dibawah ini tepat di bawah kode     

   </head>

<style type='text/css'> #related-posts { float : left; width : 100%; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; 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 { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX2uMkWLXEPWkjvSx60-AQoA4UojGsn69JIze2dClRhgBaqQ4Sjf6dhsgZ96_ebGBkHHsVKTDsSH57rSx-aS0AF2CidggYnfqwVwTcaaTbccP-WI2uKYGnGX5TNyXxW3hIRKeWN0ve9R4/&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://belajarblogging.googlecode.com/files/relpost.js' type='text/javascript'/>

5. Kemudian cari lagi kode <data:post.body/>, jika terdapat dua kode. Maka letakkan kode di bawah ini tepat di bawah kode <data:post.body/> yang kedua

<b:if cond='data:blog.pageType == "item"'><div id="related-posts"><font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if>

Jika sudah selesai semua sudah selesai sekarang tinggal klik save dan lihat hasilnya.
semoga cara diatas bermamfaat buat sobat semuanya..