Cara Membuat Tabel Responsive - Di tutorial ini, saya akan membagikan desain tabel data responsive yang simple, ringan namun tetap elegan dan memiliki aksesibilitas yang sangat baik untuk pengguna, dan itu saya lalukan hanya dengan menggunakan css dan html dasar dengan size yang sangat kecil karena saya mengerti, halaman web anda mungkin membutuhkan lebih banyak variasi table data yang responsive dan tidak membebani loading situs web.
Jadi langsung saja, ambil css table responsive-nya di bawah ini dan simpan atau pasang di kumpulan css situs web anda, untuk pengguna blogger silahkan letakkan css tabel data diatas kode ]]></b:skin> atau </style>.
[code type="CSS Table Responsive"]table th{color:#1e1e1e}table caption{color:#1e1e1e;font-size:17px;font-weight:700;text-transform:uppercase}table.data,main table{width:100%;background-color:#fff}table.number_list th:first-child{width:26px;text-align:center}table.data th,main table th{background-color:#007b37;color:#fff}table.data th[scope=col],main table th[scope=col]{border-bottom:grey 1px solid}table.data th[scope=row],main table th[scope=row]{border-right:grey 1px solid}table.data,table.data th,table.data td,main table,main table th,main table td{border-collapse:collapse;border:1px solid #ccc;vertical-align:top}table.data td,table.data th,main table td,main table th{padding:4px}table.data th,main table th{font-weight:700}table.data td,main table td{background-color:#fff!important}[/code]
Kemudian, untuk membuat table di halaman posts, silahkan gunakan kode html table data berikut ini melalui mode pengeditan HTML bukan Compose seperti contoh berikut ini;
html table

HTML Table (2 Column)

[code type="HTML"]<table class="data">
 <caption>Teks Table Caption Disini</caption>
<thead>
 <tr><th scope="col">Column 1</th><th scope="col">Column 2</th></tr>
  </thead>
  <tbody>
 <tr><th scope="row">Teks</th><td>Data</td></tr>
 <tr><th scope="row">Teks</th><td>Data</td></tr>
 <tr><th scope="row">Teks</th><td>Data</td></tr>
 <tr><th scope="row">Teks</th><td>Data</td></tr>
  </tbody>
</table>[/code]
Jika kamu ingin membuat table data 4 column dan 5 row, gunakan kode html berikut ini dan ganti teks atau isi data sesuai dengan yang ingin input kedalam tabel.

HTML Table (3 Column)

[code type="HTML"]<table class="data">
 <caption>Teks Table Caption Disini</caption>
<thead>
 <tr><th scope="col">Column 1</th><th scope="col">Column 2</th><th scope="col">Column 3</th></tr>
  </thead>
  <tbody>
 <tr><th scope="row">Row 1</th><td>Data</td><td>Data</td></tr>
 <tr><th scope="row">Row 2</th><td>Data</td><td>Data</td></tr>
 <tr><th scope="row">Row 3</th><td>Data</td><td>Data</td></tr>
 <tr><th scope="row">Row 4</th><td>Data</td><td>Data</td></tr>
 <tr><th scope="row">Row 5</th><td>Data</td><td>Data</td></tr>
  </tbody>
</table>[/code]

HTML Table (4 Column)

[code type="HTML"]<table class="data">
 <caption>Teks Table Caption Disini</caption>
<thead>
 <tr><th scope="col">Column 1</th><th scope="col">Column 2</th><th scope="col">Column 3</th><th scope="col">Column 4</th></tr>
  </thead>
  <tbody>
 <tr><th scope="row">Data 1</th><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
 <tr><th scope="row">Data 2</th><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
 <tr><th scope="row">Data 3</th><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
  </tbody>
</table>[/code]
Kamu mungkin ingin melihat demo table responsive ini, sebelum menerapkannya ke situs web, silahkan uji demo table data responsive berikut di berbagai ukuran layar (deice)
Table Data Responsive
Kolom 1Kolom 2Kolom 3Kolom 4
Baris 1Data 1Data 2Data 3
Baris 2Data 1Data 2Data 3
Baris 3Data 1Data 2Data 3

HTML Table Dengan Daftar/List

Kusus untuk membuat table dengan list atau daftar (number list), gunakan kode html table berikut ini, sedangkan kode css table responsive yang digunakan masih sama.
[code type="HTML"]<table class="data number_list">
<caption>Teks Caption Disini</caption>
<thead>
<tr><th scope="col">No</th><th scope="col">Month</th><th scope="col">Production</th><th scope="col">Reject</th><th scope="col">Other</th></tr>
</thead>
  <tbody>
<tr><th scope="row">1</th><td>January</td><td>97%</td><td>2%</td><td>input</td></tr>
<tr><th scope="row">2</th><td>February</td><td>73%</td><td>0,5%</td><td>input</td></tr>
<tr><th scope="row">3</th><td>March</td><td>100%</td><td>5%</td><td>input</td></tr>
<tr><th scope="row">4</th><td>April</td><td>89%</td><td>1%</td><td>input</td></tr>
<tr><th scope="row">5</th><td>May</td><td>65%</td><td>0%</td><td>no data</td></tr>
</tbody>
</table>[/code]
Demo table resposnsive dengan dafar atau list (number list)
Table Responsive With Number List
NoMonthProductionRejectOther
1January97%2%input
2February73%0,5%input
3March100%5%input
4April89%1%input
5May65%0%no data

Spesifikasi Table
  • Desain responsive dan support di banyak jenis browser (IE, Firefox, Chrome, Safari, Opera)
  • Ringan (tidak mempengaruhi kecepatan loading situs web)
  • Font tabel mengikuti setelan font pada halaman web
  • Mudah di pasang di situs web apa saja (blogger, wordpress dll)
  • Gratis selamanya
Demikian tutorial membuat table responsive, semoga artikel ini bisa membantu anda dalam membuat tabel yang responsive di situs web anda dan memberikan manfaat kepada banyak blogger-blogger yang aktif di konten review.

Cara Memasang Form Komentar Facebook Di Template Blogger - Beberapa waktu lalu saya baru saja mempublikasikan tutorial memasang plugin komentar disqus di template blogger, dan pada kesempatan ini saya kembali dengan tutorial yang masih membahas form komentar (widget komentar) yaitu "cara memasang form komentar facebook di template blogger".

Secara teknis langkah-langkah yang saya gunakan dalam menginstall / memasang widget form komentar facebook di template blogger masih sama dengan tuturial yang sebelumnya (memasang komentar disqus), jika kamu sudah mengikutinya maka tutorial memasang form komentar facebook di template blogger ini akan terasa mudah untuk diaplikasikan.
Langsung saja ke proses penginstallan form komentar facebook, langkah pertama yang harus dilakukan adalah memasang css facebook comments diatas kode kode ]]></b:skin> atau diatas kode </style> agar tampilan form komentar facebook responsive dan memiliki lebar yang penuh (sesuai dengan lebar post body), berikut css nya.
[code type="CSS"]/* --- Facebook Comments --- */
#container-commentfb .fb-comments,#container-commentfb .fb_iframe_widget,#container-commentfb .fb_iframe_widget span,#container-commentfb .fb_iframe_widget iframe{width:100%;display:block!important;min-width:100%;}[/code]
Selanjutnya kita menuju penginstallan kode html widget dan script facebook comments, lakukan ini secara perlahan (step by step).
[ads-post]
Cari kumpulan kode widget form komentar blogger, atau cari kode di bawah ini;
[code type="HTML"]<b:includable id='comments' var='post'>...</b:includable>[/code]
Atau jika folder kode terbuka maka kode diatas akan terlihat seperti ini;
[code type="JS"]<b:includable id='comments' var='post'>
...other code...
...other code...
</b:includable>[/code]
Kemudian, tepat dibawahnya tambahkan kode facebook app id dan script facebook comments berikut ini (pasang secara beruntun);
[code type="HTML"]<b:includable id='displayed-facebookid' var='post'>
<div id='facebook-comment-appid' style='display:none'>218168578325095</div>
</b:includable>
<b:includable id='facebook-comment' var='post'>
<b:if cond='data:post.allowNewComments'>
 <div id='fb-root'/>
 <div class='facebook-comment comment-box' id='facebook_cm'>
 <div class='hide' style='line-height: 0;visibility: hidden;'>
 <script>
 var APPID = $('#facebook-comment-appid').text();
 if (APPID == '' || APPID == null) {
 APPID = '218168578325095';
 }
 window.fbAsyncInit = function(){
 FB.init({appId:APPID,status:true,cookie:true,xfbml:true});};
 (function(){var e = document.createElement('script');
 e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
 e.async = true;
 document.getElementById('fb-root').appendChild(e);
 }());
 </script>
 </div>
 <script async='async' src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
 <div id='container-commentfb'>
 <div class='fb-comments' data-colorscheme='light' data-num-posts='10' data-width='100%' expr:data-href='data:post.url'/>
 </div>
 </div>
</b:if>
</b:includable>[/code]
Perhatikan nomer seri plugin komentar facebook 218168578325095 pada kode diatas, itu adalah kode facebook app id saya, setelah widget komentar facebook berhasil di install sepenuhnya silahkan ganti kode facebook app-id saya dengan kode facebook app-id anda sendiri.

Langkah selanjutnya cari juga kode dibawah ini;
[code type="HTML"]<b:includable id='iframe_comments' var='post'>....</b:includable>[/code]
Kemudian diatas kode tersebut tambahkan kode berikut ini;
[code type="HTML"]<b:includable id='fn_comment_picker' var='post'>
<div class='comments'>
 <b:if cond='data:post.allowComments'>
  <b:include data='post' name='displayed-facebookid'/>
  <b:if cond='data:top.commentLabel != &quot;facebook&quot;'>
   <b:include data='post' name='comment_picker'/>
  </b:if>
  <b:if cond='data:top.commentLabel == &quot;facebook&quot;'>
   <b:include data='post' name='facebook-comment'/>
  </b:if>
 </b:if>
  </div>
</b:includable>[/code]
Catatan: Jika semua kode yang dimaksud tidak ada atau tidak ditemukan didalam template blog anda, silahkan pasang secara beruntun semua kode dan script facebook comments yang saya berikan tepat berada dibawah kode;
[code type="HTML"]<b:includable id='comments' var='post'>...</b:includable>[/code]
Terakhir cari kode di bawah ini untuk menyelesaikan penginstallan form komentar facebook di template blogger, berikut kode nya;
[code type="CSS"]<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>[/code]
Perhatikan kode comment_picker silahkan ganti 'comment_picker' dengan 'fn_comment_picker' kemudian save template, pada tahap ini widget form komentar facebook sudah selesai di install namun status-nya masih dalam keadaan siaga atau stanby. Untuk menampilkan widget komentar facebook silahkan pergi ke Tata Letak Blogger > Widget Post/Blog klik Edit, pada kolom tampilkan komentar ganti teks "komentar" menjadi "facebook" (tanpa tanda petik), lihat contoh gambar dibawah ini;
Menampilkan Form Komentar Facebook
Penting: Jika sebelumnya kamu sudah mengaplikasikan tutorial memasang komentar disqus dari situs ini maka harap di hapus terlebih dahulu agar pemasangan widget komentar facebook ini berjalan dengan mulus dan jangan lupa follow by email situs ini untuk mendapatkan pemberitahuan konten terbaru dari blog ini.

Kelebihan: Teknik pemasangan plugin komentar facebook pada tutorial ini valid html5 dan memungkinkan anda mengganti form komentar dengan cepat (facebook atau blogger), jika ingin kembali ke komentar blogger kamu hanya perlu mengaktifkan-nya melalui tata letak (ganti "facebook" menjadi "blogger" atau "komentar" dan tanpa tanda petik), Selain itu script facebook comments pada tutorial ini juga memungkinkan browser untuk memuat halaman situs secara dinamis (lebih cepat) karena menggunakan teknik pemuatan script asyncr.

Cara Membuat Tombol Follow Blog - Tombol follow merupakan salah satu widget penting untuk di pasang pada situs blog, tombol follow blogger sering disebut juga sebagai tombol join us (join this site) berfungsi sebagai navigasi yang memudahkan pengunjung untuk mengikuti situs yang mereka sukai. Pada tutorial ini saya akan membagikan cara membuat tombol follow blogger yang dapat ditempatkan di berbagai tata letak seperti di atas kolom komentar, sidebar, menu navigasi dan tombol follow di dalam postingan.
Cara Membuat Tombol Follow Blog
Metode yang saya gunakan untuk membuat tombol follow adalah dengan memanfaatkan link follow yang ada pada widget followers (join this site), dengan demikian maka tombol follow yang dihasilkan akan lebih ramah dan mudah di aplikasikan. Langsung saja ke tutorial membuat tombol follow blogger dan yang pertama harus dilakukan adalah menyiapkan link follow + id situs blog, lihat contoh dibawah ini;
[code type="URL"]https://www.blogger.com/follow.g?blogID=6093713042691745392[/code]
Nomor id yang ditandai dengan huruf tebal adalah nomor id situs blog saya, silahkan ganti dengan "id" situs blog masing-masing, untuk mendapatkan atau melihat "id" situs blog silahkan login ke blogger, pilih salah satu situs jika kamu memiliki banyak situs blog kemudian lihat pada addres bar id situs blog anda.
ID Situs Blog
ID Situs Blog
Setelah link follow situs disiapkan selanjutnya adalah memasang link follow tersebut ke tata letak atau tempat yang diinginkan dan menampilkan nya sebagai tombol follow (join us).

Memasang Tombol Follow di Atas Kolom Komentar

  1. Login ke blogger > Template > Edit HTML
  2. Cari kode penutup css yaitu ]]></b:skin>
  3. Tambahkah kode css berikut ini tepat di atas kode ]]></b:skin>
[code type="CSS"].comments .rightx{font-size:12px;position:absolute;$endSide:0;top:0;line-height:22px;max-height:22px;padding:4px 0 0 4px;margin-$endSide:0;background-color:#333333;overflow:hidden;display:block;} .comments .rightx a{display:inline-block;min-width:75px;margin-$endSide:0;background-color:#333333;text-align:center;color:#ffffff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;cursor:pointer;text-decoration:none;text-transform: uppercase;}[/code]
Ganti text "Join Us" dengan Follow First atau Subscribe sesuai dengan selera masing-masing dan ganti juga nomor id "6093713042691745392" dengan id situs blog kamu sendiri. Save template dan lihat hasilnya, tombol follow akan muncul di atas kolom komentar seperti terlihat pada contoh dibawah ini.
Cara Membuat Tombol Follow di Atas Kolom Blog
Cara Membuat Tombol Follow di Atas Kolom Blog
Catatan: Kode <h4 id='comment-post-message'><data:postCommentMsg/></h4> adalah kode "comment message" single comment box dan merupakan kode default kolom komentar bawaan blogger. Jika sebelumnya pada template situs blog kamu sudah dimodifikasi atau menggunakan 3 comment system (blogger-facebook-disqus) silahkan lihat pada contoh gambar berikut;
Contoh membuat atau menambahkan tombol follow blog di atas kolom komentar (3 sistem komentar)
Contoh membuat atau menambahkan tombol follow blog di atas kolom komentar (3 sistem komentar)

Menambahkan Tombol Follow Pada Menu Navigasi

[code type="HTML"]<nav class='naviy' id='nav'>
<ul class='sf-menu' id='menunav'>
<li><a href='add_url'>About</a></li>
<li><a href='add_url'>Contact</a></li>
//contoh menambahkan tombol follow blogger dengan link follow di menu navigasi
<li><a href='https://www.blogger.com/follow.g?blogID=6093713042691745392'>Join This Site</a></li>
//end
</ul>
</nav>[/code]

Membuat Tombol Follow di Sidebar

  1. Login ke Blogger > Tata Letak > Add Widget HTML
  2. Tambahkan kode berikut ini kemudian save
[code type="HTML"]<button onclick="window.location='https://www.blogger.com/follow.g?blogID=6093713042691745392'" style="background-color: orange; color: white; height: 30px; width: 201px;"><b>Follow Us</b></button>[/code]
Ganti id blog dan warna tombol sesuai dengan yang di inginkan.

Menambahkan Tombol Follow di Dalam Postingan

Untuk menambahkan tombol follow di dalam post (artikel) sebenarnya metode yang digunakan sama dengan metode membuat tombol follow di sidebar, yaitu dengan menambahkan element button pada link follow blog. Kamu bisa mencoba variasi tombol yang berbeda seperti contoh berikut ini.
[code type="HTML"]<a href="https://www.blogger.com/follow.g?blogID=6093713042691745392" target="_blank"><button><b>Subscribe Me</b></button></a>[/code]
Nah, itulah beberapa cara membuat tombol follow di blog (situs blogger) yang dapat di sesesuaikan dan di tempatkan di beberapa tata letak. Silahkan di garap atau cobalah ber experiment sendiri dengan link follow blogger. Metode ini juga dapat diterapkan pada situs blog yang sudah menghapus bundle css blogger, umumnya menghapus bundle css blogger akan menyebabkan beberapa widget blogger tidak berfungsi termasuk widget followers dan tentu saja ini satu-satunya cara terbaik untuk membuat atau menggantikan tombol follow blogger yang rusak.

Kelebihan:
  • Mengganti widget followers (join this site) dengan tombol follow, tidak membebani loading situs web sama sekali.
  • Tombol follow dapat diletakkan di banyak tempat yaitu, di atas kolom komentar, sidebar, menu navigasi, di dalam post blogger dan lain-lain.
  • Menghindari blocked rendering paruh atas situs
  • Dan dapat di variasikan dengan banyak style css button.
Demikian tutorial cara membuat tombol follow (subscribe button) blogger dan siap-siap untuk mendapatkan banyak followers situs blog kamu. Jika ingin melihat demonya silahkan gulir ke kolom komentar dan Subscribe situs blog tukang listrik batam. Anggap saja subscribe anda sebagai bonus untuk saya, akhir kata saya ucapkan terimakasih telah berkunjung dan semoga tuorial ini bermanfaat.

Cara Memasang Komentar Disqus Di Template Blogger - Tutorial kali ini akan membahas cara memasang widget komentar disqus di blogger tanpa menghilangkan fungsi widget default komentar blogger, jadi jika kamu mengikuti trik yang saya gunakan dalam memasang atau menginstall widget komentar disqus maka kamu dapat menggunakan kedua sistem komentar "disqus dan blogger" tanpa harus mengedit template secara berulang.

Ketika ingin menggunakan komentar disqus kamu hanya perlu mengaktifkan switch disqus comment dan jika ingin kembali ke komentar blogger kamu hanya perlu menonaktifkan switch disqus comment nya saja (two comment system disqus & blogger).

Sebelum ke tutorial memasang komentar disqus di template blogger saya ingin memberikan satu penjelasan lagi mengenai lokasi penempatan kode "script komentar disqus" agar tutorial ini dapat diterapkan juga oleh blogger pemula. Script komentar disqus yang akan kita install di template blogger sepenuhnya di tempatkan pada tumpukan widget post blogger, lebih spesifik lagi di kumpulan kode comment form. untuk lebih jelasnya lihat contoh gambar di bawah ini;
Jadi sebelum memasang kode / script komentar disqus temukan terlebih dahulu kumpulan kode comment form default blogger dan beri spasi baris seperti contoh gambar di atas.

Ingat jangan membuka /mengklik tanda panah pada masing-masing folder kode seperti yang terlihat pada bagian kiri gambar agar proses pemasangan komentar disqus menjadi lebih mudah, Ciutkan kode dengan meng-klik tag pembuka <b:includable id='...' var='post'> jika sebelumnya folder kode html sudah terbuka. Sekarang kita masuk ke tahap pertama penginstalan kode atau script disqus comment, copy 2 kode berikut ini.

#Code 1 dan 2 - Disqus Comment
[code type="HTML"]<b:includable id='discusshortname' var='post'>
<div id='disqus-shortname' style='display: none'>somadtukanglistrikbatam</div>
</b:includable>[/code]
[code type="HTML"]<b:includable id='disqus-comment' var='post'>
<div class='disqus-comment comment-box' id='disqus_cm'>
     <div id='disqus-blogger-comment-block'/>
</div>
&lt;script type=&#39;text/javascript&#39;&gt;
var disqus_shortname = document.getElementById(&#39;disqus-shortname&#39;).innerHTML;
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;;
var disqus_url = disqus_blogger_current_url;
(function () {
&quot;use strict&quot;;
var get_comment_block = function () {
var block = document.getElementById(&#39;disqus-blogger-comment-block&#39;);
return block;
};
var comment_block = get_comment_block();
if (!!comment_block) {
var disqus_div = document.createElement(&#39;div&#39;);
disqus_div.id = &#39;disqus_thread&#39;;
comment_block.innerHTML = &#39;&#39;;
comment_block.appendChild(disqus_div);
comment_block.style.display = &#39;block&#39;;
var dsq = document.createElement(&#39;script&#39;);
dsq.async = true;
dsq.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/blogger_item.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.body).appendChild(dsq);
}
})();
&lt;/script&gt;
</b:includable>[/code]
Tempatkan kode 1 dan 2 (kode html disqus-shortname dan script disqus comment) secara berurutan tepat berada di bawah kode brikut ini;
[code type="HTML"]<b:includable id='comments' var='post'>...</b:includable>[/code]
Lihat id atau disqus shortname somadtukanglistrikbatam, setelah menyelesaikan proses penginstallan komentar disqus silahkan ganti shortname disqus saya dengan shortname disqus kamu sendiri, untuk sementara biarkan saja dulu supaya nanti bisa melihat hasilnya.

#Code 3 Disqus Comment
[code type="HTML"]<b:includable id='fn_comment_picker' var='post'>
<div class='comments'>
<b:if cond='data:post.allowComments'>
       <b:include data='post' name='discusshortname'/>
<b:if cond='data:top.commentLabel != &quot;disqus&quot;'>
       <b:include data='post' name='comment_picker'/>
    </b:if>
<b:if cond='data:top.commentLabel == &quot;disqus&quot;'>
      <b:include data='post' name='disqus-comment'/>
</b:if>
</b:if>
  </div>
</b:includable>[/code]
Tempatkan kode tersebut (code-3) tepat berada di atas kode;
[code type="HTML"]<b:includable id='iframe_comments' var='post'>....</b:includable>[/code]
Save template untuk mengakhiri proses penginstallan komentar disqus di template blogger, pada tahapan itu komentar disqus sudah selesai di install namun posisinya masih stanby (belum berfungsi) jadi untuk menampilkan widget komentar disqus masih ada 2 langkah lagi yang harus dilakukan untuk menyetting switch disqus comment (untuk menampilkan form komentar disqus).

Cari atau temukan switch default komentar blogger yang di gunakan untuk menampilkan form komentar di halaman post dan static page blogger, seperti yang terlihat di bawah ini;
[code type="HTML"]<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <b:include data='post' name='comment_picker'/>
       </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <b:include data='post' name='comment_picker'/>
  </b:if>[/code]
Kemudian ganti comment_picker dengan fn_comment_picker dan save template blog anda,  Oh ya, pada tag conditional static_page adalah form komentar untuk halaman statis seperti halaman T.O.S dan sebagainya, jika kamu tetap ingin menggunakan kmentar blogger pada halaman static kamu tidak perlu menggantinya, cukup ganti comment_picker yang berada di dalam tag conditional "item" (halaman postingan).

Langkah trakhir pergi ke Tata Letak Blogger kemudian pada Widget Post / Blog klik edit, centang pada bagian "tampilkan komentar" dan ganti tulisan "komentar" menjadi "disqus" selesai, lihat contoh gambar di bawah ini;
Cara menampilkan komentar disqus
Cara menampilkan komentar disqus
Jika ingin kembali dari komentar disqus ke komentar blogger kamu hanya perlu menghapus tulisan disqus melalui tata letak tanpa harus menghapus semua kode disqus comment yang sudah terinstall, dengan begitu widget komentar disqus akan kembali pada posisi stanby dan tidak dijalankan oleh browser sehingga tidak mengganggu perenderan sama sekali karena hanya komentar blogger yang akan di jalankan oleh browser, begitu juga sebaliknya jika pada bagian tampilkan komentar di isi dengan "disqus".

Tambahan: Sebenarnya semua kode dan script komentar disqus seperti diatas "code 1,2 dan 3 bisa diurutkan kemudian di pasang secara bersamaan kedalam tumpukan widget comment form dan akan terformat (disusun secara otomatis) oleh platform blogger, tapi ketika menyimpan-nya kamu perlu menekan tombol seve 2 hingga 3 kali untuk memastikan kode atau script disqus comments benar-benar terseimpan, lalu kamu harus merefresh halaman untuk melihat apakan kode html dan script komentar disqus sudah terinstall atau tidak.

Saya fikir setiap desainer template harus menerapkan teknik memasang form komentar disqus seperti yang saya lakukan agar pengguna template akan lebih mudah menentukan pilihan form komentar yang mereka sukai, terlebih sekarang ini tombol balas pada form komentar blogger tidak berfungsi ketika pengguna menghapus bundle css widget blogger, jadi plugin komentar disqus ono benar-benar menjadi solusi untuk menggantikan komentar blogger.

Selain itu teknik memasang form komentar disqus di template blogger pada tutorial ini juga valid html5 dan masih bisa dikembangkan lagi misalnya menampilkan form komentar blogger dan disqus secara bersamaan dengan sistem Tab atau bisa juga dikembangkan menjadi 3 Tab Comment Sistem sekaligus (facebook, disqus dan blogger), itu akan membuat template anda lebih bernilai jika dibandingkan dengan template yang hanya dilengkapi satu sistem komentar saja.

Demikian tutorial "Cara Memasang Komentar Disqus Di Blogger (Two Comment Systems)" semoga bermanfaat dan menambah ilmu bagi kita semua khususnya blogger indonesia, untuk melihat demonya silahkan kunjungi themecreat.blogspot.com dan tinggalkan komentar, jangan lupa subscibe blog ini untuk mendapatkan notifikasi setiap post terbaru saya.

Widget Contact Form Responsive - Contact Form atau formulir kontak merupakan satu dari beberapa widget penting yang harus ada di setiap laman website termasuk situs blogger, widget contact form merupakan perantara yang menghubungkan antara visitor dengan pengelola situs, selain itu contact form juga berfungsi sebagai penyaring spam atau malware yang dikirim oleh visitor nakal ke e-mail pengelola situs.

Platform blogger sebenarnya sudah menyediakan widget contact form untuk situs-situs blog, namun tampilan contact form yang disediakan masih sangat sederhana "default" pengelola situs harus menyesuikan style contact form nya sendiri dengan sedikit penambahan css untuk membuat tampilan contact form menjadi lebih elegant dan responsive.

Di kasus lain, jika kamu menghaspus bundle widget blogger, maka widget contact form biasanya tidak berfungsi, jadi untuk mengatasi hal tersebut kamu memerlukan widget contact form ini.

Cara Membuat Laman Contact Form Blogger

  1. Login ke Blogger dan buat satu laman "page" baru
  2. Pada sudut kiri atas page editor klik mode html bukan compose
  3. Copy & Paste-kan script contact form blogger di bawah ini secara beruntun, kemudian tekan tombol publish
  4. Jangan lupa untuk membuat judul pada laman contact form anda.
Tutorial lebih mudah diterapkan oleh siapa saja karena sebelumnya script contact form blogger ini sudah disesuaikan dan dirancang agar mudah dipasang pada laman static blogger.

Spesifikasi widget contact form
  • 100% Responsive dan mobile friendly
  • Tampilan simple dan elegan + mudah diterapkan
  • Ready notifikasi pengiriman pesan (sucses message, failed message dan please input message)
Kode CSS, HTML dan JavaScript Contact Form
[code type="CSS"]<style scoped="" type="text/css">
#stlb{margin:auto;max-width:100%;}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:100%;height:auto;margin:5px 0;padding:15px;background:#fff;color:#444;border:1px solid rgb(213, 216, 220);}
#ContactForm1_contact-form-email-message{width:100%;height:200px;margin:5px 0;padding:15px;background:#fff;color:#444;border:1px solid rgb(213, 216, 220);}
#ContactForm1_contact-form-submit{float:right;background:#404040;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .2s ease}
#ContactForm1_contact-form-submit:hover{background:#00BE98;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:0px;background:#404040;color:#fff;font-size:13px;font-weight:600;border-radius:3px}
</style>[/code]
[code type="HTML"]<form id="stlb" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>[/code]
[code type="JavaScript"]<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '6093713042691745392';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6093713042691745392','//gigi-pages.blogspot.com','6093713042691745392');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent successfully. Thank you for contacting us</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '6093713042691745392', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script>[/code]
Instruksi

Pada bagian kode javascript di atas dibutuhkan beberapa tindakan untuk menyesuaikan widget dengan data blog masing-masing.
  • Ganti 4 kode "id" (6093713042691745392) dengan "id" situs blog masing-masing.
  • Ganti url situs (gigi-pages.blogspot.com) dengan url blog anda.
  • Tempatkan semua kode css, html dan java script contact form dalam satu laman seperti yang telah dijalaskan pada langkah di atas.
  • Lihat contoh "tampilan" contact form pada link ini [Demo Contact Form]
Catatan: Kode ID Blogger anda dapat dilihat pada bar atas browser seperti contoh berikut ini;
https://draft.blogger.com/blogger.g?blogID=6093713042691745392#editor/

Blogger Setting (Email)

Setelah widget contact form di buat, tambahkan alamat email penerima pesan ke pengaturan blogger, blogger setting > email, kemudian pada tab email posts to masukkan alamat email anda dan simpan pengaturan.
Blogger setting (email)
Blogger setting (email)
Kemudian verifikasi kepemilikan email, periksa kotak masuk anda kemudian verifikasi, selesai, saya harap tutorial ini dapat membatu dalam membuat widget contact form di laman static blooger. Jangan sungkan untuk memfollow situs ini untuk mendapatkan kiriman pemberitahuan setiap artikel terbaru kami.

Cara Menghapus Dan Memindahkan Widget Yang Terkunci - Pada beberapa desain template blogger sebagian widget sengaja di kunci agar tidak bisa dipindahkan maupun di hapus, hal tersebut karena sang desainer ingin menjadikan widget tersebut pada tata letak yang tetap agar keindahan desain-nya tidak hilang karena hal-hal yang tidak disengaja.

Namun dalam beberapa kasus widget blogger justru terkunci sendiri dan menyebabkan tata letak yang tidak bagus untuk dilihat, kasus seperti ini biasanya terjadi pada saat meng-upload atau mengganti template.

Untuk menghindari widget terkunci sebaiknya ikuti teknik yang benar menggati template blogger pada laman ini [Open This Page]

Dan, bagi yang sudah terlanjur mengganti template kemudian beberapa widget terkunci sendiri dan tidak bisa dipindahkan maka ikuti tutorial ini, disini saya akan membagikan solusi untuk menghapus widget dan memindahkan widget yang terkunci (locked='true'), jika dipahami dengan benar dari tutorial ini kamu juga akan mengerti cara mengunci widget agar tidak bisa dihapus ataupun di pindahkan. mari kita simak gambar berikut ini;
Pada gambar diatas saya contohkan tata letak 2 widget yang berbeda yaitu widget image dengan status terkunci (locked='true') dan widget follow dengan status tidak terkunci (locked='false').
  • Jika dalam html widget di sertakan kode locked='true' maka widget tidak bisa dipindahkan atau pun di hapus
  • Dan sebalik-nya jika pada html widget diterapkan kode locked='false' maka widget bisa dipindahkan dan di hapus dari tata letak blogger.
Jadi solusi untuk menghapus widget blogger yang terkunci adalah dengan cara mengganti kode locked='true' dengan kode locked='false' pada html widget atau template. Ikuti langkah-langkah menghapus widget blogger yang terkunci di bawah ini;
  1. Login ke Blogger > Template > Edit HTML
  2. Pilih Lompati ke widget (pilih widget yang akan di hapus)
  3. Kemudian ganti kode locked='true' menjadi false
Silahkan lihat contoh kode html dan gambar di bawah ini untuk lebih jelasnya;

Locked widget
[code type="HTML"]<b:widget id='Image852' locked='true' mobile='yes' title='Background Image (Bottom)' type='Image' version='1'>[/code]
Unlock the widget
[code type="HTML"]<b:widget id='Image852' locked='false' mobile='yes' title='Background Image (Bottom)' type='Image' version='1'>[/code]
Cara Menghapus Dan Memindahkan Widget Terkunci
Cara Menghapus Dan Memindahkan Widget Terkunci
Setelah mengganti kode locked='true' menjadi locked='false' silahkan save template blogger anda kemudian pergi ke tata letak untuk menghapus widget atau sekedar memindahkan-nya. Klik edit pada widget disana akan terlihat tombol hapus widget.

Bonus pengetahuan; kode mobile='yes' seperti terlihat pada gambar adalah kode untuk menampilkan widget blogger di perangkat mobile (handphone), kebalikan dari kode mobile='yes' adalaha mobile='no' yaitu perintah html untuk tidak menampilkan element atau widget di perangkat mobile.

Demikian saja cara "Cara menghapus dan memindahkan widget blogger yang terkunci", jika terdapat banyak widget yang terkunci lakukan langkah diatas pada widget yang akan di hapus satu per satu.

Begitu juga jika kamu ingin mengunci widget tertentu agar tidak bisa dipindahkan. Jika ada yang ingin ditanyakan jangan sungkan untuk menuliskan pertanyaan di kolom komentar bawah, semoga berhasil dan sukses buat kamu, see you again.

Cara Membuat Tombol Print Di Kanan Atas Posts Blogger - Salah satu widget yang harus ada di situs-situs blog adalah tombol print, terutama situs web yang berisi konten edukasi. Tidak hanya tombol print, css @media print juga dianjurkan ketersediaan-nya di situs web, bahkan beberapa tool penghitung skor seo seperti "All-in-one SEO Tool" mengharuskan css @media print di setiap situs web agar lebih user friendly (ramah pengguna).

Dan pada tutorial kali ini saya akan menjelaskan cara membuat / memasang tombol print di kanan atas posts blogger dan cara setting thumbnail print dengan css @media print.
Langkah-langkah nya sangat mudah, pertama mari kita simak material yang kita gunakan untuk membuat tombol print di bawah ini;

CSS Tombol Print
[code type="CSS"].topmeta .pull-right > *{float:right;display:block;height:25px;line-height:25px;}
.topmeta a{text-align:center;color:#fafafa;font-size:15px;text-decoration:none;padding:0 5px;background-color:#009678;width:25px;margin:0 2px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;position:relative;cursor:pointer}
.topmeta a:active{bottom:1px}
.topmeta a:hover{background-color:#353535}[/code]
Tempatkan css tombol print tersebut diatas kode ]]></b:skin> atau diatas kode </style>.

HTML Tombol Print
[code type="HTML"]<b:includable id='top-meta' var='post'>
<div class='topmeta'>
<div class='pull-right inner'>
<a class='button_print' onClick='window.print()'><i class='fa fa-print'/></a>
<a class='button_email' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; +data:post.id+ &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><i class='fa fa-envelope'/></a>
</div>
</div>
</b:includable>[/code]
Copy semua kode html tombol print diatas kemudian pasang atau tempatkan di main widget section atau di kumpulan kode widget template blog anda, lihat contoh gambar di bawah ini;
Cara Memasang Tombol Print Di Post Blogger
Cara Memasang Tombol Print Di Post Blogger
Catatan: Icon print "fa fa-print" ganti sesuai dengan jenis font awesome yang ada di situs masing-masing misal jika font awesome yang kamu gunakan v 3.2.1 maka "fa fa-print" diganti dengan "icon-print". Jika belum tersedia font awesome pada halaman situs, silahkan tambahkan di atas tag </head> kode dibawah ini;
[code type="CSS"]<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>[/code]
Switch (HTML Tombol Print)
[code type="HTML"]<b:include data='post' name='top-meta'/>[/code]
Kode ini difungsikan untuk menampilkan widget tombol print yang sudah di install pada langkah sebelumnya. Jika hanya kode css dan html tombol print saja yang di pasang maka widget tombol print masih dalam keadaan standby. Jadi untuk menampilkan tombol print di kanan atas post, pasang kode (switch) tersebut tepat diatas kode <data:post.body/>, contoh;
[code type="HTML"]<b:if cond='data:blog.pageType == &quot;item&quot;'>

Code Here....

<data:post.body/>[/code]
Simpan dan lihat hasilnya, pemasangan tombol print seperti atas hanya untuk post blog saja, jika kamu ingin menampilkan juga tombol print di static page (halaman statik) maka pasang juga switch tombol print diatas kode <data:post.body/> yang berada di dalam tag static page;
[code type="HTML"]<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

Code Here...

<data:post.body/>
<b:else/>[/code]
Setelah tombol print berhasil dipasang, sekarang kita akan men-setting css @media print, tanpa css @media print sebenarnya tombol print tetap bisa digunakan, namun thumbnail print yang ditampilkan berupa tampilan penuh. Jadi peran css @media print adalah mengatur thumbnail print agar sesuai dengan kebutuhan pengguna (hanya menampilkan judul dan halaman post) pada thumbnail print.

Css Thumbnail Print
[code type="CSS"]@media print{
...... style css here...
}[/code]
Isi css pengaturan thumbnail print situs anda dan tempatkan kode css @media print di atas kode ]]></b:skin> atau </style>, sebagai contoh saya lampirkan css thumbnail print situs saya dibawah ini;
[code type="CSS"]@media print{
#top-head,#topnav,#nav,.breadcrumbs,.post-headera.meta,#sidebar-wrapper,#blog-pager,.post-footer,#related_posts,#header-wrapper,.comments,#footer-wrapper,#top-featured,.middle-ad,.bottom-ad,.first-ad,.bottom-cont,.footer-ad{display:none}
#main-wrapper{width:100%;float:none;max-width:100%}
}[/code]
Semua bagian situs, mulai dari header, menu, sidebar dan sebagainya saya sembunyikan dengan property css display:none, kemudian pada bagian main-wrapper atau kolom post saya tampilkan dengan lebar penuh, silahkan tekan tombol print untuk melihat demo css @media print. Untuk memberikan thumbnail seperti itu kamu perlu mengetahui 'id' setiap elemen situs blog kamu, agar lebih mudah mengetahui 'id' elemen situs lakukan inspect element.

Tutorial Blogger "Cara menambah kolom add widget blogger" atau "1 kolom widget baru" seperti ini sudah lama beredar di internet, namun saya ingin membuat sesuatu yang baru dengan sebuah pemahaman mengenai template blogger agar setiap orang bisa membuat atau menambah kolom widget baru pada template mereka. Ini sangat penting dipelajari karena ini menyangkut keindahan atau ke praktisan sebuah desain web (situs blog) yang kita kelola.

Catatan: Setiap template umum-nya memiliki 4 (empat) kolom (tata letak) dasar yaitu: Header, Main, Sidebar dan Footer. "Header" berarti kepala atas, "Main" berarti badan atau pusat letak artikel "Sidebar" artinya bilah samping dan "Footer" artinya kaki (Bilah bawah)

Selain dari empat bagian tersebut kita bisa menambahkan beberapa kolom widget tambahan misalnya 1 kolom disamping header untuk tempat iklan atau menambahkan kolom widget dibawah header biasa disebut top-featured, 2 kolom atau 1 kolom. Bisa juga membagi sidebar menjadi tiga bagian (3 kolom) dan bisa juga menambahkan beberapa kolom widget di bawah badan "main", soal isi widget kamu bisa memikirkan-nya nanti setelah kolom add widget berhasil di tambahkan.

Kode HTML Dasar Kolom Widget

[code type="HTML"]<div id='topfeatured-area'>
    <b:section class='homepost' id='top-featured' preferred='yes'/>
</div>[/code]
Kode diatas merupakan kode html untuk membuat atau menambah kolom widget (gadget), jika template blog kamu mengunakan tag <div id='name'>. Tetapi jika template kamu menggunakan tag <div class='name'> maka lebih baik ikuti struktur template kamu saja dengan menambahkan kode tag html kolom widget baru seperti kode dibawah ini.
[code type="HTML"]<div class='topfeatured-area'>
  <b:section class='homepost' id='top-featured' preferred='yes'>
</div>[/code]
Kedua kode html di atas merupakan kode paling dasar untuk menambah 1 kolom widget baru, memang itu sudah sangat cukup untuk membuat sebuah kolom widget tambahan, namun jika kamu berencana banyak menggunakan css maka kode tag html kolom widget baru bisa ditambahkan dengan memasang kode dibawah ini.
[code type="HTML"]<div class='topfeatured-area'>
<div class='wrap'>
  <b:section class='homepost' id='top-featured' preferred='yes'>
</div>
</div>[/code]
Nah, sekarang dimana kode tag html "kolom widget" ini bisa diletakkan? kede tersebut bisa di pasang/diletakkan dimana saja di dalam template kamu asalkan ditempatkan di bawah penutup header </header> atau tag penutup </div>.

Cara Menambah Kolom Add Widget Blogger
Contoh Menambahkan Tag Html "Kolom Widget Baru" di bawah Header
Namun harus diingat, menambahkan tag html kolom wigdet baru di bawah tag penutup </header> tidak selalu berhasil. Karena biasa-nya di bawah header sudah disisipkan element lain seperti menunavigasi, search box atau mungkin widget newsticker. Maka untuk untuk menambahkan kolom widget baru kita harus mencari tag </div> penutup dari 3 element tersebut. Sebagai contoh lihat gambar dibawah ini.
Cara Menambah 1 Kolom Widget dibawah header
Zoom Gambar: Ini contoh "menambah kolom widget" di bawah tag penutup </div>
Meski kode tag html "kolom widget baru" ditambahkan di bawah tag penutup div, posisi kolom widget/gadget tetap berada di bawah header tepat nya di bawah menu dan di atas main atau body. Klick save dan lihat pertinjau tata letak blog anda. Untuk memastikan bahwa kamu telah berhasil menambahkan 1 kolom widget dibawah header.

Langkah terakhir adalah merapikan posisi tata letak widget dengan style css. Tambahkan css berikut ini tepat di atas kode ]]></b:skin>.
[code type="CSS"]#topfeatured-area{width:100%;margin:10px}
body#layout #top-featured .wrap{width:auto;float:left;padding:10px;}[/code]
Demikian saja cara menambahkan kolom widget baru di bawah header, sebagai penjelasan tambahan kamu bisa menambah kolom widget dimana saja yang kamu mau jika sudah paham batas-batas elemen html template, bahkan kamu bisa membuat sidebar menjadi 3 bagian atau menambah widget di bawah main (body).

Catatan: jangan terfokus pada topfeatured-area dan top-featured itu merupakan id element saja, kamu bisa mengganti-nya dengan nama lain. Jika didalam template sudah ada "id" top-featured maka kode tidak bisa di simpan kedalam template, kamu harus mengganti topfeatured-area dengan name-id yang lain.

Onclick Event (Show and Hide Comment Blogger) - Menyembunyikan dan menampilkan comment blogger merupakan salah satu cara yang tepat untuk mengurangi scrolling yang terlalu panjang, Beberapa navigasi seperti related post, newer dan older post akan menjorok kebawah sehingga tanpa kita sadari bahwa komentar yang sudah terlalu banyak dapat mengurangi pendapatan iklan dan page view sebuah laman web (blogger), terlebih jika situs web diakses melalui platform mobile.
Agar itu tidak terjadi pada situs blog anda sebaiknya buatlah sebuah navigasi pada komentar blogger dengan menerapkan sistem buka tutup pada kolom komentar blog (Show and Hide Comment Blogger). Artikel ini akan menjelaskan dan membantu anda untuk membuat "Show and Hide Comment Blogger" dengan menggunakan Onclick Event dan sedikit javascript dan css.

Langkah-langkah Membuat Show and Hide Comment Blogger

1.Login ke Blogger > Template kemudian pilih Edit HTML
2.Cari dan temukan kode html yang serupa dengan kode dibawah ini
[code type="HTML"]<div class='comments' id='comments'>[/code]
Atau, jika tidak ditemukan maka cari kode di bawah ini, ini adalah kunci keberhasilan membuat / menambahkan Onclick Event (Show and Hide Comment Blogger) ke situs blog anda.
[code type="HTML"]<div class='comments'>[/code]
Kemudian ganti kode tersebut dengan kode onclick event dibawah ini;
[code type="HTML"]<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'/>[/code]
Selanjutnya, kita perlu menambahkan sedikit css, agar toggle "Show and Hide Comment Blogger" lebih terlihat menarik, tambahkan kode css di bawah ini tepat di area kumpulan css situs blog atau letakkan diatas kode ]]></b:skin> atau </style>.
[code type="CSS"]/* 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;}[/code]
Terakhir, tambahkan kode javascript Onclick Event Show and Hide Comment Blogger untuk memberikan sedikit efect show and hide comment blogger. Tambahkan javascript dibawah ini tepat diatas kode penutup </body> situs blog anda. Tekan tombol "Save Template" untuk mengakhiri "Langkah-langkah Membuat Show and Hide Comment Blogger" dan lihat hasilnya.

Jangan lupa cobalah tombol Show and Hide Comment untuk memastikan ia benar-benar bekerja dengan baik. Berikut javascript Onclick Event (Show and Hide Comment Blogger).
[code type="JavaScript"]<script type='text/javascript'>// 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>[/code]

Cara Memperbaiki Widget Follow By Email Blogger - Dalam melakukan upaya pengoptimalan performa template blogger sebagian orang mungkin memilih untuk memparse tag head dan tag penutup body template guna menghilangkan "render blocking css dan js" external. Akibatnya beberapa widget mungkin tidak berfungsi atau sekedar mengalami perubahan bentuk. Salah satu widget blogger yang terkena dampak tersebut adalah widget follow by email.

Biasanya lebar kolom pada widget follow by email akan mengecil (berubah bentuk) setelah menghilangkan "render blocking css widget blogger" karena css external blogger yang digunakan untuk mengatur lebar kolom widget, wrapper, padding, margin dan sebagainya tidak lagi berfungsi. Dan untuk menggantikannya perlu ditambahkan css baru dalam kumpulan css template agar kolom widget follow by email kembali normal.

Jika kamu adalah salah satu yang mengalami ini harap untuk tidak panik dan ikuti langkah-langkah di bawah ini untuk memperbaiki kolom widget follow by email kesayangan anda.

1. Masuk ke Blogger > Template > Edit html
2. Klik Lompati ke widget dan pilih widget Followbyemail
3. Buka folder kode html widget followbyemail dengan meng-klik tanda panah pada baris kode, lihat contoh gambar dibawah ini;
4.  Setelah semua kode widget followby email terbuka, cari dan temukan kode <table width='100%'> kemudian ganti dengan kode <table>, selanjutnya temukan juga kode <td width='64px'> dan ganti dengan kode <td>. Silahkan lihat contoh gambar dibawah ini;
Cara Memperbaiki Kolom Widget Follow By Email
Kode html widget follow by email
5. Selanjutnya tambahkan kode css dibawah ini untuk mengatur lebar kolom (table) widget follow by email. Tempatkan di kumpulan css internal template blog anda, agar lebih mudah tempatkan diatas kode ]]></b:skin> atau diatas kode </style>.
[code type="CSS"].FollowByEmail table,.FollowByEmail td{width:100%}[/code]
Atau bisa juga menggunakan css ini;
[code type="CSS"].FollowByEmail .follow-by-email-inner .follow-by-email-address,.FollowByEmail .follow-by-email-inner .follow-by-email-submit{width:100%}[/code]
Selesai, save template dan lihat hasilnya. Jika kamu ingin mengganti style css followbyemail secara keseluruhan kamu juga bisa mendowload style css follow by email dengan varian yang berbeda, klik [Download Css].

Tutorial blogger "Cara menambah kolom widget di template blogger" atau kolom gadget seperti ini sudah lama beredar di internet, namun saya ingin membuat sesuatu yang baru dengan sebuah pemahaman mengenai template blogger agar setiap orang bisa membuat atau menambah kolom widget baru pada template mereka. Ini sangat penting dipelajari karena ini menyangkut keindahan atau ke praktisan sebuah desain web (situs blog) yang kita kelola.

Catatan: Setiap template umum-nya memiliki 4 (empat) kolom (tata letak) dasar yaitu: Header, Main, Sidebar dan Footer. "Header" berarti kepala atas, "Main" berarti badan atau pusat letak artikel "Sidebar" artinya bilah samping dan "Footer" artinya kaki (Bilah bawah).

Selain dari empat bagian tersebut kita bisa menambahkan beberapa kolom widget tambahan misalnya 1 kolom disamping header untuk tempat iklan atau menambahkan kolom widget dibawah header biasa disebut top featured, 2 kolom atau 1 kolom. Kemudian membagi sidebar menjadi tiga bagian (3 kolom) dan bisa juga menambahkan beberapa kolom widget di bawah badan "main" Nah, sedangkan widget merupakan isi dari semua bagian "kolom-kolom" tersebut.

Kode HTML Dasar Kolom Widget

    <div id='topfeatured-area'>
        <b:section class='homepost' id='top-featured' preferred='yes'/>
        </div>

Kode diatas merupakan kode html untuk membuat atau menambah kolom widget (gadget), jika template blog kamu mengunakan tag <div id=''>. Tetapi jika template kamu menggunakan tag <div class=''> maka lebih baik ikuti struktur template kamu saja dengan menambahkan kode tag html kolom widget baru seperti kode dibawah ini.

    <div class='topfeatured-area'>
      <b:section class='homepost' id='top-featured' preferred='yes'>
    </div>

Kedua kode html di atas merupakan kode paling dasar untuk menambah 1 kolom widget baru, memang itu sudah sangat cukup untuk membuat sebuah kolom widget tambahan, namun jika kamu berencana banyak menggunakan css maka kode tag html kolom widget baru bisa di tambahkan dengan memasang kode dibawah ini.

    <div class='topfeatured-area'>
    <div class='wrap'>
      <b:section class='homepost' id='top-featured' preferred='yes'>
    </div>
    </div>

Nah, sekarang dimana kode tag html "kolom widget" ini bisa diletakkan? kede tersebut bisa di pasang/diletakkan dimana saja didalam template kamu asalkan ditempatkan di bawah penutup header </header> atau div penutup yaitu </div>.
Cara Menambah Kolom Widget di Blog (Template)
Klik Template > Edit Html > Lompat Ke Widget > Pilih Header1

Cara Menambah Kolom Gadget
Contoh Menambahkan Tag Html "kolom widget baru" di bawah </header> Penutup
Namun harus diingat, menambahkan tag html kolom wigdet baru di bawah </header> penutup tidak selama-nya berhasil. Karena biasa-nya di bawah header penutup sudah disisipkan element lain seperti Dropdown Menu, Search Box atau Newsticker. Maka untuk untuk menambahkan kolom widget baru kita harus mencari tag </div> penutup dari 3 element tersebut. Sebagai contoh lihat gambar dibawah ini.

Cara Menambah 1 Kolom Widget dibawah header
Zoom Gambar: Ini contoh "menambah kolom widget" di bawah tag div penutup

Meski kode tag html "kolom widget baru" ditambahkan di bawah tag div penutup, posisi kolom widget/gadget tetap berada di bawah header tepat nya di bawah menu dan di atas main atau body. Klick save dan lihat pertinjau tata letak . Untuk memastikan bahwa kamu telah berhasil menambahkan 1 kolom widget dibawah header.

Langkah terakhir adalah merapikan posisi tata letak widget dengan style css. Tambahkan css berikut ini tepat di atas kode ]]></b:skin>.

    #topfeatured-area{width:100%;margin:10px}
    body#layout #top-featured .wrap{width:auto;float:left;padding:10px;}

Nah demikian cara menambahkan kolom widget baru di bawah header, sebagai penjelasan tambahan kamu bisa menambah kolom widget dimana saja yang kamu mau jika sudah paham, bahkan kamu bisa membuat sidebar menjadi 3 bagian. Menambah widget di bawah main (body).

Catatan: jangan terfokus pada topfeatured-area dan top-featured itu merupakan id element saja, kamu bisa mengganti-nya dengan nama lain. Jika didalam template sudah ada "id" top-featured maka kode tidak bisa di simpan kedalam template, kamu harus mengganti topfeatured-area dengan nama yang lain.