Show Hide Related Post Blogger

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.

<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'>
          &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;Artikel Terkait:&lt;/h4&gt;&quot;,
      numPosts: 5,
      titleLength: &quot;auto&quot;,
      containerId: &quot;related-post&quot;,
      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)+"&hellip;":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)+"&hellip;":"";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:&#39;Oswald&#39;, 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

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Show Hide Related Post Blogger
Show Hide Related Post Blogger
Jelas in Blog
https://jelasinblog.blogspot.com/2013/10/show-hide-related-post-blogger.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2013/10/show-hide-related-post-blogger.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content