Sahabat- di sore ini berbagi memasang related post menarik boleh sahabat coba ok.
yang sudah ya sudah biarkan saja sahabat namun sahabat bisa untuk menambahkanaya related post sahabat..
related post kali ini anan slalu membuka blognya,yang punya kang Adhy s.
langsung ajja ya sahabat g usaha neko-neko yang bikin ribet karna anna kebetulan lagi pusing memikirkan sesuatatu,heheh maaf sahabt malah curhat nih.
langsung ajja sahabat.
GO TO BLOG
setelah log in sahabat langsung ke tamplate dan edit HTML
cari kode </head>
setelah ketemu sahabat silahkan tempelkan kode di bawah ini tepat di atasnya
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.related-post{width:auto;margin:10px -10px 0;padding:0;}
.related-post h4{margin:0 10px!important;background:none;font-size:30px;font-weight:bold;padding:0;color:#177E14;}
.related-post-style-3,.related-post-style-3 li{margin:0!important;padding:0;list-style:none;word-wrap:break-word;overflow:hidden;width:100%;line-height:1.1em}
.related-post-style-3 .related-post-item{display:block;float:left;width:25%;height:180px;padding:10px 10px;margin-bottom:10px!important;border-left:1px solid transparent;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;position:relative}
.related-post-style-3 .related-post-item:first-child{border-left:none}
.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0;width:100%;height:170px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;transition:all 400ms ease-in-out;}
.related-post-style-3 .related-post-item:hover .related-post-item-thumbnail{opacity:.6}
.related-post-style-3 .related-post-item-tooltip{position:absolute;padding:10px;background:rgba(244,131,106,.6);bottom:-150px;left:10px;right:10px;text-align:center;transition:all 400ms ease-in-out;}
.related-post-style-3 .related-post-item:hover .related-post-item-tooltip{bottom:0}
.related-post-style-3 .related-post-item-title{color:#177E14;text-align:center;padding: 0px 0 10px;font-size:100%;font-weight:bold;width:auto!important; height:auto;transition:all 400ms ease-in-out;}
.related-post-style-3 .related-post-item-title:hover{color:#fff}
.clear{clear:both}
@media screen and (max-width:800px){.related-post-style-3 .related-post-item{width:50%;}
}
@media screen and (max-width:375px){.related-post-style-3 .related-post-item{width:100%;}
}
</style>
</b:if>
setelah itu sahabat cari kode <data:post.body/>
dan letakan kode di bawah ini tepat di bawahnya.
Sahabat unutk meletakanya kan ada beberapa silahkan sahabat pastekan di kode yang terakhir tentunya kode yang sahabat tuju <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='related-post' id='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>You Might Also Like:</h4>",
numPosts: 4,
summaryLength: 370,
titleLength: "auto",
thumbnailSize:340,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 3,
callBack: function() {}
};
</script>
<div class='clear'/>
</b:if>
dan terakhir sahabat selesai You Might Also Like silahkan sahabat ganti dengan tulisan yang sahabat suka. Lalu save selesai deh
yang sudah ya sudah biarkan saja sahabat namun sahabat bisa untuk menambahkanaya related post sahabat..
related post kali ini anan slalu membuka blognya,yang punya kang Adhy s.
langsung ajja ya sahabat g usaha neko-neko yang bikin ribet karna anna kebetulan lagi pusing memikirkan sesuatatu,heheh maaf sahabt malah curhat nih.
langsung ajja sahabat.
GO TO BLOG
setelah log in sahabat langsung ke tamplate dan edit HTML
cari kode </head>
setelah ketemu sahabat silahkan tempelkan kode di bawah ini tepat di atasnya
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.related-post{width:auto;margin:10px -10px 0;padding:0;}
.related-post h4{margin:0 10px!important;background:none;font-size:30px;font-weight:bold;padding:0;color:#177E14;}
.related-post-style-3,.related-post-style-3 li{margin:0!important;padding:0;list-style:none;word-wrap:break-word;overflow:hidden;width:100%;line-height:1.1em}
.related-post-style-3 .related-post-item{display:block;float:left;width:25%;height:180px;padding:10px 10px;margin-bottom:10px!important;border-left:1px solid transparent;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;position:relative}
.related-post-style-3 .related-post-item:first-child{border-left:none}
.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0;width:100%;height:170px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;transition:all 400ms ease-in-out;}
.related-post-style-3 .related-post-item:hover .related-post-item-thumbnail{opacity:.6}
.related-post-style-3 .related-post-item-tooltip{position:absolute;padding:10px;background:rgba(244,131,106,.6);bottom:-150px;left:10px;right:10px;text-align:center;transition:all 400ms ease-in-out;}
.related-post-style-3 .related-post-item:hover .related-post-item-tooltip{bottom:0}
.related-post-style-3 .related-post-item-title{color:#177E14;text-align:center;padding: 0px 0 10px;font-size:100%;font-weight:bold;width:auto!important; height:auto;transition:all 400ms ease-in-out;}
.related-post-style-3 .related-post-item-title:hover{color:#fff}
.clear{clear:both}
@media screen and (max-width:800px){.related-post-style-3 .related-post-item{width:50%;}
}
@media screen and (max-width:375px){.related-post-style-3 .related-post-item{width:100%;}
}
</style>
</b:if>
setelah itu sahabat cari kode <data:post.body/>
dan letakan kode di bawah ini tepat di bawahnya.
Sahabat unutk meletakanya kan ada beberapa silahkan sahabat pastekan di kode yang terakhir tentunya kode yang sahabat tuju <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='related-post' id='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>You Might Also Like:</h4>",
numPosts: 4,
summaryLength: 370,
titleLength: "auto",
thumbnailSize:340,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 3,
callBack: function() {}
};
</script>
<div class='clear'/>
</b:if>
dan terakhir sahabat selesai You Might Also Like silahkan sahabat ganti dengan tulisan yang sahabat suka. Lalu save selesai deh