Cara Membuat Artikel Terkait Di Blogger

image

Pada tampilan blogger yang baru, banyak perubahan yang dirasa tidak begitu nyaman untuk blogger yang sudah terbiasa dengan tampilan lama. hal ini membuat sebagian blogger bingung untuk edit html pada template blog Steaming mad

Nah pada postingan kali ini saya akan memberikan tutorial tentang Menambahkan Artikel Terkait pada tampilan blogger yang baru. tidak beda jauh sih Open-mouthed smile hanya saja prosesnya agak beda Punch

oke langsung aja !

  1. 1. Login Blogger –> Template
  2. 2. Edit Html
  3. 3. Cari kode </head> dan letakkan kode di bawah ini tepat di atas kode </head>

image

Tekan Ctrl + F


<style> #related-posts { float : left; width : auto; 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMxneLxWEQLXHL7IHtv7r6c8JPQNnbU1OBuESQubrgckPWG2gU5zGrmlIla6XEGlffVbxYWKyieFnO8oHFTP8yv3svlQ-1YP3pI3yRrpLLKks6BZ2kpFjxr0RjdOOmnQsoCWGQEKBylYV4/s1600/rss.png ") 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://oktriblogger.googlecode.com/files/related-post-tutorialbelajarblog.js' type='text/javascript'/>


  1. 4. Kemudian cari kode <data:post.body/> dan letakkan kode dibawah ini tepat dibawah kode <data:post.body/>

<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>


Catatan : pilih kode <data:post.body/> pada baris ke tiga !

Selamat mencoba brad Open-mouthed smile Winking smile