Beriku Langkah-Langkah Cara Membuat Related Post Keren di Blog
1. Login atau masuk terlebih dahulu ke akun Blogger anda
2. Pilih menu " Template " => EDIT HTML
3. Cari kode ]]></b:skin> ( Gunakan CTRL+F untuk mempermudah pencarian )
4. Letakan kode di bawah ini tepat di atas kode ]]></b:skin>
.related-post{ margin:2em auto 0; font:normal normal 12px/1.4 Arial,Sans-Serif}
.related-post h4{ font-size:150%; margin:0 0 .5em;color:yellow}
.related-post a{color:orange}
.related-post a:hover{color:olive}
.related-post-style-6 li{position:relative}
.related-post-style-6 .related-post-item-thumbnail{ width:50px; height:50px; max-width:none; max-height:none; background-color:#000; border:1px solid olive; padding:0; float:left; margin:0 10px 0 0}
.related-post-style-6 .related-post-item-title{ display:block; font-weight:bold}
.related-post-style-6 .related-post-item-summary{ display:block; overflow:hidden; font-size:11px}
.related-post-style-6 .related-post-item-tooltip{ position:absolute; bottom:100%; left:-10px; z-index:999; margin-bottom:10px; border:1px solid olive; background-color:#000; padding:10px; width:90%; height:auto; box-shadow:0 1px 3px rgba(0,0,0,.2); display:none}
.related-post-style-6 .related-post-item-tooltip:before,
.related-post-style-6 .related-post-item-tooltip:after{ content:""; display:block; width:0; height:0; border:10px solid transparent; border-top-color:olive; position:absolute; top:100%; left:21px}
.related-post-style-6 .related-post-item-tooltip:after{ border-top-color:#000; border-width:9px; margin-left:1px}
.related-post-style-6 li:hover .related-post-item-tooltip{display:block}
5. Kemudian Cari kode <div class='post-footer'>
6. Taruh kode di bawah ini tepat di atas kode <div class='post-footer'>
</b:if>
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-post' class='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>Baca Juga Yang Ini</h4>",
numPosts: 5,
summaryLength: 300,
titleLength: "auto",
thumbnailSize: 50,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 6,
callBack: function() {}
};
</script>
<script type='text/javascript' src='http://fullblogdesign-demo.googlecode.com/svn/trunk/related-post.min.js'/>
</b:if>
<!-- Related Post Widget End -->