-->

Selo Aji

Tips Unik dan Menarik

Cara Pasang Artikel Terkait Keren di Blog


Related Post merupakan salah satu bagian yang terpenting diblog atau pun website. okeh kali ini ada cara memasang widget relate post/artikel terkait di bawah posting yang keren, yang ada scrollnya. Bagi anda yang ingin mencobanya silakan ikuti langkah-langkah dibawah ini:

1. Login ke blogger
2. Klik Template > Edit HTML
3. Cari kode </head> (agar lebih cepat tekan Ctrl+F)
4. Copy dan Pastekan kode/script dibawah ini diatas/sebelum </head>

<style> #related-posts { float : left;height:200px;overflow:auto; width : 540px; 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/AVvXsEj8OQqddXQxLkbFvJSBqgEgbVyOS1cKpQ077CAkhvK9gKrnnZgvD6enfUfoVokVIde5U-s4N5toKmUWkjyXogS6b-PsMOPw_KJqS6bR9x81chiSY_fa-aq9xRlYZ2_ML4oNL1M7rl3C5Mo/&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://problogizjs.googlecode.com/files/Related-posts.js' type='text/javascript'/>

5. Cari kode <data:post.body/> sama sepeti cara di atas gunakan tombol F3 atau CTRL+F untuk mempermudah pencarian.
7. Jika ketemu,mungkin di blog anda terdapat lebih dari satu <data:post.body/> , taruh kode berikut di kode yang ke dua,ingat yang KE DUA. (jika kurang cocok maka atur saja sesuai keinginan).

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <font face='Arial' size='3'><b>Artikel Terkait : </b></font><font color='#151515'><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=10&quot;' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if> 

8. Simpan dan keterangan (untuk kode yang berwarna biru, kode tersebut adalah ukuran tinggi dan lebar related postnya. Sesuaikan saja dengan ukuran templatenya agar lebih rapih).

Baca juga:

Tags:

4 komentar

avatar

wow cool, mau pasang juga ah:D

Balas delete
avatar

iya met, silakan langsung dipasang aja :)

Balas delete
avatar

sekedar masukan, itu no 7 tolong di jelasin biar tambah membantu :)
thanks
www.jadulnge.blogspot.com

Balas delete
avatar

diperjelas dibagian kata mana?

Balas delete