Kode Membuat Related Post with Thumblail Image di Bawah Posing Blog

Kode Membuat Related Post with Thumblail Image di Bawah Posing Blog

KODE dan cara membuat Related Post with Thumblail Image (Tulisan Terkait dengan Gambar) plus Ringkasan. Fast Loading dan SEO Friendly.

Kode Membuat Related Post with Thumblail Image di Bawah Posing Blog

KODE CSS
Copy the CSS code below and place it above the ]]></b:skin>

/* ==== Related Post Widget Start ==== */

.related-post {
 margin:2em auto 0;
 font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
 font-size:150%;
 margin:0 0 .5em;
}
.related-post a {color:#48d}
.related-post a:hover {color:#f00}

/* Style 2 */
.related-post-style-2,
.related-post-style-2 li {
 margin:0;
 padding:0;
 list-style:none;
}
.related-post-style-2 li {
 padding:10px;
 border-top:1px solid #eee;
 overflow:hidden;
}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {
 width:75px;
 height:75px;
 max-width:none;
 max-height:none;
 background-color:transparent;
 border:none;
 padding:0;
 float:left;
 margin:2px 10px 0 0;
}
.related-post-style-2 .related-post-item-title {
 font-weight:bold;
 font-size:110%;
}
.related-post-style-2 .related-post-item-summary {
 display:block;
 overflow:hidden;
}
.related-post-style-2 .related-post-item-more {}

/* ==== Related Post Widget End ==== */

KODE XML / JAVASCRIPT
Copy the XML code below and place it above

<div class=post-footer> 

or anywhere inside the 

<b:includable id=post var=post/> and 

<b:includable id=mobile-post var=post/>

Be careful!

<!-- Related Post Widget Start -->
<b:if cond=data:blog.pageType == &quot;item&quot;>
 <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>
 &quot;<data:label.name/>&quot;<b:if cond=data:label.isLast != &quot;true&quot;>,</b:if>
 </b:loop></b:if>];
 var relatedPostConfig = {
 homePage: &quot;<data:blog.homepageUrl/>&quot;,
 widgetTitle: &quot;&lt;h4&gt;Related Posts:&lt;/h4&gt;&quot;,
 numPosts: 5,
 summaryLength: 300,
 titleLength: &quot;auto&quot;,
 thumbnailSize: 75,
 noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
 containerId: &quot;related-post&quot;,
 newTabLink: false,
 moreText: &quot;&quot;,
 widgetStyle: 2,
 callBack: function() {}
 };
 </script>
 <script type=text/javascript src=http://dte-project.googlecode.com/svn/trunk/related-post/related-post.min.js/>
</b:if>
<!-- Related Post Widget End -->

Sumber: DTE

Anda bisa membuat, memilih, dan setting sendiri tampilan Related Post Widget Blogger, termasuk gaya Related Post with Thumblail Image (Tulisan Terkait dengan Gambar) plus Ringkasan seperti di atas.*

Get

download
alternative link download