Show hide related post (perbaharuan)

HTML Javascript jQuery sitemap

Hallo para sobat blogger, masih semangat ngeblog kali ini saya mau share bagaimana cara dan trik membuat show hide pada related post di blog. triknya cukup mudah dan mungkin berguna untuk blog sobat agar tampil lebih ringkas dan beda dari yang lainnya...

kira kira nanti hasilnya akan seperti berikut ini



jika sobat ingin menerapkan trik show hiude pada related post ini silahkan ikuti langkah membuatnya di bawah ini

pastikan di template sobat sudah terpasang

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'>

kemdian letakkan css berikut ini di antara css template blog anda

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-16.rp-tombol-db {
  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 kurang menarik dan bagus silahkan anda ubah saja sesuai keingan yang menurut sobat lebih bagus...

untuk menerapkannya di dalam related post cari kode tag pembuka related post milik anda seperti berikut jika sobat telah memasang related post pada blog sobat

1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-5<div id='related-post'>

.........bla  bla bla.......

</div>

lalu letakkan dan sisipkan kode di bawah ini pada kode di atas seperti berikut.


<div class='rp-tombol-db show-on-klik'>Show Artikel Terkait</div>
<div class='show-elem-rp'>
<div id='related-post'>

.....kode related post.....

</div>
</div>

jika sobat belum memasang related post silahkan gunakan dan letakkan kode berikt ini di bawah kode <div class='post-footer'> atau <data:post.body/>

1code-line:5-12code-line:5-23code-line:5-34code-line:5-45code-line:5-56code-line:5-67code-line:5-78code-line:5-89code-line:5-910code-line:5-1011code-line:5-1112code-line:5-1213code-line:5-1314code-line:5-1415code-line:5-1516code-line:5-1617code-line:5-1718code-line:5-1819code-line:5-1920code-line:5-2021code-line:5-2122code-line:5-2223code-line:5-2324code-line:5-2425code-line:5-25
<div class='rp-tombol-db 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>

tambahkan cssnya berikut di antara css yang laian

1code-line:6-12code-line:6-23code-line:6-34code-line:6-45code-line:6-56code-line:6-67code-line:6-7#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/AVvXsEi4LooyT4xRu25VrrIzYY0z4Z8mppJdZyE0Wk_TbG4Rw10Ufv1P-7u5wlm68pmMoFOpRALbug9fuO-JNa7RyfLLTMY9on22PQMfS017G7BHzX6uR1DIvIhqZqkU8jIFv_6Q4leFaKjLhVir/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 javascrip ini di atas kode tag penutup </body>

1code-line:7-12code-line:7-23code-line:7-34code-line:7-45code-line:7-56code-line:7-67code-line:7-7<script type='text/javascript'>
$(function() {  
    $(".show-on-klik").click(function () { 
    $(".show-elem-rp").toggle("pulsate")
}); 
 });
</script>

semua langkah selesai simpan perubahan templatenya, lihat hasilnya jika kurang pas silahkan deh di atur sesukanya smile.

sekian saja share saya tentang membuat show hide pada related post blog, semoga bermanfaat...

Artikel Terkait

  • Membuat Komentar di HTML
    Seperti pada bahasa pemograman lainnya, umumnya kita akan sering lupa tentang cara kerja kode yang kita buat sendiri setelah beberapa bulan berikutnya. Untuk mengatasinya, kita bisa akan menyisipkan penjelasan pada sebuah komentar di sekitar kode tersebut. HTML juga mempunyai tag khusus untuk komentar. Dalam tutorial belajar HTML: cara menamba…
  • Menambahkan Gambar di HTML
    Atribut src dalam tag <img> Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute. (perbedaan tentang alamat relatif dan alamat absolute telah kita bahas pada Belajar HTML: Cara Membuat link di HTML). Untuk contoh kode HTML tentang image i…
  • Membuat Form di HTML (tag form)
    Pengertian tag <form> Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan <form> dan diakhiri dengan </form>. Tag form akan membutuhkan beberapa atribut untuk dapat berfungsi dengan seharusnya. Atribut pertama adalah action, yang berfungsi untuk menjelaskan kemana data form akan dikirimkan. Biasanya n…
  • Pengertian DTD atau DOCTYPE
    Tag paling awal dari contoh HTML diatas adalah DTD atau DOCTYPE. DTD adalah singkatan dari Document Type Declaration. Yang berfungsi untuk memberi tahu kepada web browser bahwa dokumen yang akan diproses adalah HTML. DTD memiliki banyak versi tergantung kepada versi HTML yang kita gunakan. Pada contoh diatas, kita menggunakan DTD versi HTML 5…
  • Pengertian tag Atribut dalam HTML
    Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi untuk warna dari text, besar huruf dari text, dll. Setiap atribut memiliki pasangan nama dan nilai (value), dan ditulis dengan name=”value”. Value diapit tanda kutip, boleh menggunakan tanda kutip satu (‘) atau dua (“). Contoh kode HTML: <a hr…
  • Cara Membuat Judul (heading) di HTML
    HTML menyediakan tag khusus untuk membuat judul atau di dalam HTML lebih di kenal dengan istilah: heading. Heading dirancang terpisah dari paragraf. Tag Heading biasanya digunakan untuk judul dari paragraf, atau bagian dari text yang merupakan judul. Tag heading di dalam HTML terdiri dari 6 tingkatan, yaitu <h1>, <h2>, <h3>,…

17 komentar

  1. wah biar lebih menghemat tempat yah.boleh juga nih tutorialnya :D

    BalasHapus
    Balasan
    1. iya sob, blog ente kan rame dan banyak komengnya jadi bisa untuk menghemat tempat :)

      Hapus
    2. Setelah dibuka tinggal dihide lagi, iya kan mas ? hehe

      Hapus
    3. Lama gak muncul templatenya makin keren aja mas :-bd

      Hapus
  2. ane mw coba dulu..soalnya template ane milih2 kode..:):) thanks

    BalasHapus
  3. Balasan
    1. yang panjang related post nya gan, script show hidenya pendek

      Hapus
  4. Bisa dicoba nih kayak nya gan
    biar kelihatan kerennn :-d

    BalasHapus

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...