Dewa Blogger: Hasil penelusuran untuk show.and.hide.comments.blogger.dengan.onclick.event

Halaman

    Social Items

Home / Hasil penelusuran untuk show.and.hide.comments.blogger.dengan.onclick.event
Menambahkan Show and Hide Comments Blogger dengan Onclick Event Menambahkan Show and Hide Comments Blogger dengan Onclick Event

Menambahkan Show and Hide Comments Blogger dengan Onclick Event - Kembali lagi mengembangkan tutorial blog sesudah kemarin membahas wacana Cara Memasang Iklan Melayang Responsive dengan Tombol Close. Kali ini akan mengembangkan wacana cara menambahkan fungsi show and hide ke dalam area komentar blogger dengan memanfaatkan atribut onclick event.

Tujuan menambahkan fungsi ini adalah untuk meringankan loading (onload) blog di halaman posting kalau di postingan blog teman sudah terdapat banyak komentar didalamnya. Cara kerja dari script ini cukup sederhana adalah konten komentar akan tetap tertutup sebelum teman membuka area komentar dengan menekan tombol show and hide yang akan aku bagikan ini.

Mari kita simak caranya sebagai berikut :

Show and Hide Comments Blogger dengan Onclick Event


1. Buka Blogger > Template editor > Cari markup komentar ini :

<div class='comments' id='comments'>

Catatan : Biasanya terdapat dua markup ibarat di atas

Ganti (kedua) instruksi di atas dengan instruksi di bawah ini :

<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show comments</a> <div class='clear'/>         <div class='comments hide-content' id='comments'> <a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide comments</a> <div class='clear'/>

2. Tambahkan instruksi di bawah ini sebelum ]]></b:skin> atau </style>

/* Show and Hide Comments */ .hide-content{display:none;margin:0;padding:0;} a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s} #comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s} a.showcontent:hover{background:#fff;color:#5593f0;} #comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}

3. Tambahkan instruksi di bawah ini sebelum </body>

<script type='text/javascript'> //<![CDATA[ // Show and Hide Comments function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))}; //]]> </script>

4. Terakhir, simpan template.

Demikian tutorial sederhana wacana cara Menambahkan Show and Hide Comments Blogger dengan Onclick Event. Jika ada kesulitan silakan tanyakan lewat kolom komentar, terima kasih.

Menambahkan Show And Hide Comments Blogger Dengan Onclick Event

Memuat Komentar Disqus dengan Onclick Event Memuat Komentar Disqus dengan Onclick Event

Memuat Komentar Disqus dengan Onclick Event - Kali ini yang akan disembunyikan yaitu komentar disqus, berbeda dengan trik pada artikel Menambahkan Show and Hide Comments Blogger dengan Onclick Event. Tombol yang akan muncul hanya akan memunculkan kolom komentar disqus saja, ketika tombol diklik tombol tersebut akan hilang secara otomatis.

Namun fungsinya masih tetap sama yaitu untuk mempercepat loading dikala memuat halaman (onload) postingan di blog. Berikut cara penerapannya

Memuat Komentar Disqus dengan Onclick Event


1. Jika di blog sudah terdapat widget disqus dan semua instruksi yang berkaitan dengan disqus, silakan hapus terlebih dahulu. Agar tutorial ini sanggup diterapkan dengan baik.

2. Dalam tutorial ini ada instruksi yang memakai fontawesome. Pastikan di dalam template sudah terdapat link fontawesome.

1. Login Blogger > Template Editor > Cari instruksi di bawah ini

<b:includable id='comments' var='post'> ....... ....... ....... </b:includable>

2. Tambahkan instruksi di bawah ini sempurna di bawah instruksi pada langkah 1 di atas

<b:includable id='disqus-comment' var='post'> <script type='text/javascript'> var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;                 if (!disqus_blogger_current_url.length) {                     disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;                 } var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;                 var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;; </script> </b:includable>

Hasilnya akan menyerupai ini

<b:includable id='comments' var='post'> ....... ....... ....... </b:includable> <b:includable id='disqus-comment' var='post'> <script type='text/javascript'> var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;                 if (!disqus_blogger_current_url.length) {                     disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;                 } var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;                 var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;; </script> </b:includable>

3. Selanjutnya tambahkan instruksi di bawah ini sebelum </body>

<script type='text/javascript'> var disqus_shortname = &quot;arlinadesign&quot;; !function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}(); </script> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> !function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}(); //<![CDATA[ function load_Comments(){var e=document.getElementById("disqusshow");e.style.display="none";var t="arlinadesign";!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="http://"+t+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}()} //]]> </script> </b:if>

Ganti instruksi yang ditandai dengan username disqus sobat.

4. Selanjutnya tambahkan instruksi di bawah ini sebelum ]]></b:skin> atau </style>

/* Disqus Comments */ #comments{display:none;} .post-comment-link {visibility:hidden;} #disqus_thread {background:#fff;margin:10px 0 0 0;padding:20px;box-shadow:inset 0 0 1px 0 #aaa;} #disqusshow{position:relative;overflow:hidden;display:block;padding:15px 20px;text-align:left;color:#222;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;margin:10px 0;background:#fff;border:1px solid #999;transition:all .3s} #disqusshow:after{display:inline-block;content:"\f086";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#e85e54;border-left:1px solid #999;top:0;right:0;padding:12px 20px;position:absolute} #disqusshow:hover,#disqusshow:active{color:#f8695f}

5. Cari instruksi di bawah ini

<div class='comments' id='comments'>

6. Tambahkan instruksi di bawah ini sempurna di atas instruksi pada langkah ke 5

<div id='disqusshow' onclick='load_Comments()'>Load comments</div> <div id='disqus_thread'/>

Hasilnya akan menyerupai ini

<div id='disqusshow' onclick='load_Comments()'>Load comments</div> <div id='disqus_thread'/> <div class='comments' id='comments'>

7. Untuk menampilkan disqus comment count di halaman index dan postingan, silakan tambahkan instruksi di bawah ini pada post meta atau post gosip sesuai template yang digunakan

<a expr:href='data:post.url + &quot;#disqus_thread&quot;' title='Comments Count'> Comments</a>

8. Simpan template.

Demikian tutorial perihal Cata Memuat Komentar Disqus dengan Onclick Event, biar bermanfaat.

Memuat Komentar Disqus Dengan Onclick Event

Langganan: Postingan (Atom)