Bagaimana cara membuat show hide pada related post di blog? Mari kita lihat bagaimana membuatnya. Syaratnya tentu sobat blogger sudah harus ...
Bagaimana cara membuat show hide pada related post di blog? Mari kita lihat bagaimana membuatnya. Syaratnya tentu sobat blogger sudah harus mmasang jQuery. Sebelum memulai ada baiknya lihat dulu hasil akhir show related post blogger yan akan kita buat
Nanti hasilnya akan seperti berikut ini. Silahkan klik.
Jika sobat ingin menerapkan trik show hide pada related post ini silahkan ikuti langkah membuatnya di bawah ini.
Seperti yang saya sebutkan sebelumnya, pastikan di template sobat sudah terpasang jQuery. Minimal seperti berikut ini.
Kemudian letakkan css berikut ini di antara css template blog Anda.
css di atas adalah css tombol pada element show hide untuk related post nanti, jika menurut sobat kurang menarik silahkan Anda ubah saja sesuai keinginan yang menurut sobat lebih bagus...
Bagaimana menerapkannya? Temukan kode tag pembuka related post milik Anda seperti berikut jika sobat telah memasang related post pada blog sobat.
lalu letakkan dan sisipkan kode di bawah ini pada kode di atas sehingga menjadi seperti berikut.
Kalau sobat belum memasang related post silahkan gunakan dan letakkan kode berikt ini di bawah tag
Lengkapi CSS sebelumnya dengan CSS berikut.
Langkah terakhir letakkan JavaScript ini di atas tag
Setelah semua langkah selesai simpan perubahan template.
Selamat mencoba ;)
Nanti hasilnya akan seperti berikut ini. Silahkan klik.
Jika sobat ingin menerapkan trik show hide pada related post ini silahkan ikuti langkah membuatnya di bawah ini.
Seperti yang saya sebutkan sebelumnya, pastikan di template sobat sudah terpasang jQuery. Minimal seperti berikut ini.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'>
Kemudian letakkan css berikut ini di antara css template blog Anda.
.rp-tombol-jib{
width:100%;
padding:10px;
margin:0px auto;
background-color:#0099cc;
font-size:16px;
color:#fff;
border:1px solid #ddd;
text-transform:uppercase;
line-height:40px;
vertical-align: middle;
position:relative;
cursor:pointer;
text-align:center;
}
.show-elem-rp {display:none;}
css di atas adalah css tombol pada element show hide untuk related post nanti, jika menurut sobat kurang menarik silahkan Anda ubah saja sesuai keinginan yang menurut sobat lebih bagus...
Bagaimana menerapkannya? Temukan kode tag pembuka related post milik Anda seperti berikut jika sobat telah memasang related post pada blog sobat.
<div id='related-post'>
.........bla bla bla.......
</div>
lalu letakkan dan sisipkan kode di bawah ini pada kode di atas sehingga menjadi seperti berikut.
<div class='rp-tombol-jib show-on-klik'>Show Artikel Terkait</div>
<div class='show-elem-rp'>
<div id='related-post'>
.....kode related post.....
</div>
</div>
Kalau sobat belum memasang related post silahkan gunakan dan letakkan kode berikt ini di bawah tag
<div class='post-footer'>
atau <data:post.body/>
<div class='rp-tombol-jib show-on-klik'>Show Related Post</div>
<div class='show-elem-rp'>
<div 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>Artikel Terkait:</h4>",
numPosts: 5,
titleLength: "auto",
containerId: "related-post",
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>
<script type='text/javascript'>
/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://blog.kangismet.net",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
</script>
</div>
</div>
Lengkapi CSS sebelumnya dengan CSS berikut.
#related-post {background:#ccc;width:100%;margin:0px auto;padding:10px}
#related-post h2{font-family:'Oswald', Arial, sans-serif;font-size:16px;color:#4a4a4a;text-transform:uppercase;margin:0 0 15px;padding:0;font-weight:normal}
#related-post a{color:#2c3e50;}
#related-post li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt2hlv-L0DiEOLLifxUYQloWocmZWbjcYaL51pyfSehfOXcFO7-OXt5WG78BwhHRLplB2oA_mxplGH_IaVJes0gllQ7d3TnTU0hu5hyphenhyphentiq-2xAwHEUGYZ0Nw0JPCtCQS92t4SwwNfFgZ8V/s1600/bullet.png) no-repeat 1px 5px;color:#2c3e50;text-indent:0;line-height:1.6em;margin:0;padding:0 0 3px 19px}
#related-post a:hover{color:#5295c6;text-decoration:none}
#related-post .widget{margin:0;padding:0}
#related-post ul{list-style:none;margin:0;padding:0}
Langkah terakhir letakkan JavaScript ini di atas tag
</body>
<script type='text/javascript'>
$(function() {
$(".show-on-klik").click(function () {
$(".show-elem-rp").toggle("pulsate")
});
});
</script>
Setelah semua langkah selesai simpan perubahan template.
Selamat mencoba ;)
COMMENTS