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
Nah pada postingan kali ini saya akan memberikan tutorial tentang Menambahkan Artikel Terkait pada tampilan blogger yang baru. tidak beda jauh sih hanya saja prosesnya agak beda
oke langsung aja !
- 1. Login Blogger –> Template
- 2. Edit Html
- 3. Cari kode </head> dan letakkan kode di bawah ini tepat di atas kode </head>
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'/>
- 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 != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' 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