Cara Membuat Responsive Share Button Dengan Counter di Blog

Cara Membuat Responsive Share Button Dengan Counter di Blog

Cara Membuat Responsive Share Button Dengan Counter di Blog - Halo, sobat blogger semua. Apa kabar? Pada kesempatan kali ini saya akan berbagi sebuah widget yang saya rasa sudah tidak asing lagi bagi para Blogger. Yap, bener banget. Widget yang akan saya bagikan kali ini adalah widget share button yang sering sobat temui di berbagai blog.

Fungsi dari widget share button ini masih sama seperti widget share button yang lainnya, yaitu memungkinkan pengunjung blog untuk berbagi artikel yang mereka baca yang dirasa bermanfaat ke sosial media dengan mudah.

Lalu kenapa harus memasang widget share button ini?

Kenapa sobat harus memasang widget share button yang akan saya bagikan kali ini, itu karena widget share button ini sudah mendukung tampilan yang sangat responsive. Selian itu, widget share button ini juga dilengkapi dengan plugin counter yang memungkinkan untuk menampilkan jumlah share yang di klik oleh pengunjung. Untuk tampilan dari share button ini bisa sobat lihat seperti pada gambar dibawah ini, lengkap dengan fitur responsive-nya.

Cara Membuat Responsive Share Button Dengan Counter di Blog

Cara Membuat Responsive Share Button Dengan Counter di Blog


Widget ini menggunakan fontawesome, pastikan di dalam template sudah terdapat link fontawesome.

1. Login ke Blogger > Template Editor > Tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>
/* Share Button dengan Counter untuk Blogger by http://semua-tutorialku.blogspot.com */
.Semua_Tutorialku_Blog { position: relative; background: none; z-index: 2; width: 100%; padding: 10px 0; display: inline-block; font-family: sans-serif; margin: 5px 0px; border-top: 1px dotted rgba(0, 0, 0, 0.05); border-bottom: 1px dotted rgba(0, 0, 0, 0.05); } 
.Semua_Tutorialku_Blog .Semua_Tutorialku { display: block; } .Semua_Tutorialku_Blog .Semua_Tutorialku .wrap { text-align: center; margin: 0 auto; display: inline-block; min-width: 41px; }  .Semua_Tutorialku_Blog .Semua_Tutorialku .wrap1 { display: inline-block; width: 31px; float: left; }  .Semua_Tutorialku_Blog .Semua_Tutorialku ul { margin: 0; padding: 0; } 
.Semua_Tutorialku_Blog .Semua_Tutorialku ul li a, .Semua_Tutorialku_Blog .Semua_Tutorialku ul li a:hover { color: #FFF !important; cursor: pointer; line-height: 25px; height: 100%; display: block; text-decoration: none; } 
.Semua_Tutorialku_Blog .Semua_Tutorialku ul li { list-style: none; list-style-type: none; padding: 0; margin: 1px; float: left; width: 16%; max-width: 115px; display: inline-block; font-size: 13px; overflow: hidden; text-align: left; height: 25px; line-height: 25px; color: #fff; border: 1px solid rgba(0,0,0,0.04); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .Semua_Tutorialku_Blog .Semua_Tutorialku ul li .fa { color: #fff; font-size: 17px; font-weight: normal; font-family: FontAwesome; display: inline-block; text-align: center; padding: 0; height: 25px; line-height: inherit; width: 30px; background-color: rgba(0,0,0,0.1); border-right: 1px solid rgba(0,0,0,0.05); } 
.Semua_Tutorialku_Blog .Semua_Tutorialku .btn_fb { background: #3a579a; } .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_fb:hover { background: #314a83; }  
.Semua_Tutorialku_Blog .Semua_Tutorialku .btn_twtr { background: #00abf0; } .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_twtr:hover { background: #0092cc; }  
.Semua_Tutorialku_Blog .Semua_Tutorialku .btn_gplus { background: #df4a32; } .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_gplus:hover { background: #be3f2b; }  
.Semua_Tutorialku_Blog .Semua_Tutorialku .btn_pntrst { background: #cd1c1f; } .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_pntrst:hover { background: #ae181a; }  
.Semua_Tutorialku_Blog .Semua_Tutorialku .btn_linkdin { background: #2554BF; } .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_linkdin:hover { background: #224EB4; } 
.Semua_Tutorialku_Blog .Semua_Tutorialku .share.h6 { font-size: 10px; font-weight: bold; text-shadow: none!important; text-decoration: none; text-align: center; color: #000000; border-top: 3px solid #FFF600 !important; border-bottom: 0; padding: 0px !important; padding-top: 5px!important; margin: 0 !important; line-height: 8px; border-radius: 75% 0; } .Semua_Tutorialku_Blog .Semua_Tutorialku .share { border: none; margin: 0px 5px 0px 1px; overflow: visible !important; width: 95px !important; } 
.Semua_Tutorialku_Blog .Semua_Tutorialku .share .count.h4 { font-size: 18px; font-weight: bold; text-shadow: none; text-decoration: none; font-family: sans-serif; text-align: center; color: #FF0000; line-height: 15px; margin-top: 0px; margin: -4px 0px 2px 0; min-height: 15px; padding: 0px; border: none; } .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_fb .share-btn, .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_twtr .share-btn, .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_gplus .share-btn, 
.Semua_Tutorialku_Blog .Semua_Tutorialku .btn_pntrst .share-btn, .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_linkdin .share-btn { position: relative; color: #C3C3C3; display: inline-block; text-align: center; font-weight: bold; font-size: 11px; float: right; min-width: 12px; font-family: sans-serif; padding: 0px 5px; background-color: rgba(0,0,0,0.28); border-radius: 0px 0px 0px 15px; }
@media only screen and (max-width: 979px){
.Semua_Tutorialku_Blog .Semua_Tutorialku .btn_linkdin { width: 34px; } 
.Semua_Tutorialku_Blog .Semua_Tutorialku .btn_fb .share-btn, .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_twtr .share-btn, .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_linkdin .share-btn, .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_gplus .share-btn, .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_pntrst .share-btn { display: none !important; } } 
@media only screen and (max-width:768px) { .Semua_Tutorialku_Blog .Semua_Tutorialku ul li a, .Semua_Tutorialku_Blog 
.Semua_Tutorialku ul li a:hover { color: #FFF !important; cursor: pointer; line-height: 25px; font-size: 11px; height: 100%; display: block; text-decoration: none; } .Semua_Tutorialku_Blog .Semua_Tutorialku .wrap { min-width: 34px; } .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_linkdin, .Semua_Tutorialku_Blog .Semua_Tutorialku .btn_pntrst { width: 30px; } .Semua_Tutorialku_Blog .Semua_Tutorialku ul li { margin: 1px 3px; }  
@media only screen and (max-width:479px) { .Semua_Tutorialku_Blog 
.Semua_Tutorialku .share { border: none; margin: 0px 5px 0px 1px; overflow: visible!important; width: 80px!important; } .Semua_Tutorialku_Blog .Semua_Tutorialku ul li { width: 25px !important; margin: 2px; border-radius: 50px; border: 2px solid rgba(0, 0, 0, 0.14); } .Semua_Tutorialku_Blog .Semua_Tutorialku .wrap { display: none !important; } .Semua_Tutorialku_Blog .Semua_Tutorialku ul li .fa { width: 25px !important; } } 

2. Tambahkan kode di bawah ini tepat di bawah atau di atas <data:post.body/> atau <div class='post-footer'>.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="Semua_Tutorialku_Blog">
<div class="Semua_Tutorialku">
<ul>
<li class="share">
<div class="share-btn" data-service="total">
<div class="count h4"></div>
<div class="share h6">SHARES</div>
</div>
</li>
<li class="btn_fb"><a expr:data-url='data:post.url' expr:data-text='data:post.title' expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=436"   );   return false;' rel="nofollow">
<div class="wrap1"><i class="fa fa-facebook"></i>
</div>
<div class="wrap">Share</div>
<div class="share-btn" data-service="facebook">
<div class="count"></div></div>
</a>
</li>
<li class="btn_twtr"><a expr:data-url='data:post.url' expr:data-text='data:post.title' expr:href='&quot;http://twitter.com/share?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;via=RamaDony96&quot;' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=436"   );   return false;' rel="nofollow">
<div class="wrap1"><i class="fa fa-twitter"></i></div>
<div class="wrap">Tweet</div>
<div class="share-btn" data-service="twitter">
<div class="count"></div></div>
</a>
</li>
<li class="btn_gplus"><a expr:data-url='data:post.url' expr:data-text='data:post.title' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,"   "   ,"   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600"   );   return false;   ' rel="nofollow">
<div class="wrap1"><i class="fa fa-google-plus"></i></div>
<div class="wrap">Share</div>
<div class="share-btn" data-service="google">
<div class="count"></div></div>
</a>
</li>
<li class="btn_pntrst"><a data-pin-config="beside" expr:data-img='data:post.thumbnailUrl' expr:data-url='data:post.url' expr:data-text='data:post.title' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=500"   );   return false;' rel="nofollow">
<div class="wrap1"><i class="fa fa-pinterest"></i></div>
<div class="wrap">Pin</div>
<div class="share-btn" data-service="pinterest">
<div class="count"></div></div>
</a>
</li>
<li class="btn_linkdin"><a expr:data-url='data:post.url' expr:data-text='data:post.title' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + data:post.snippet' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=500"   );   return false;' rel="nofollow">
<div class="wrap1"><i class="fa fa-linkedin"></i></div>
<div class="wrap">Share</div>
<div class="share-btn" data-service="linkedin">
<div class="count"></div></div>
</a>
</li>  
</ul>
</div>
</div>
</b:if>

Ganti kode yang ditandai dengan username Twitter sobat.

3. Tambahkan kode di bawah ini diatas kode </body>
<b:if cond='data:blog.pageType == &quot;item&quot;'>			
<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
  var shareUrl = $("link[rel=canonical]").attr("href");
    $.getJSON('http://tbncounts-sharecounts.rhcloud.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
        shares = data.shares;
        $(".count").each(function (index, el) {
            service = $(el).parents(".share-btn").attr("data-service");
            count = shares[service];
            if (count > 1000) {
                count = (count / 1000).toFixed(1);
                if (count > 1000) count = (count / 1000).toFixed(1) + "M";
                else count = count + "k";
            }
            $(el).html(count);
        });
    });
});
//]]></script></b:if>

4. Simpan template dan lihat hasilnya.

Demikian Cara Membuat Responsive Share Button Dengan Counter di Blog, semoga bermanfaat.

Simple Efek Disapear Artikel Blog With jQuery

Simple Efek Disapear Artikel Blog With jQuery

Simple Efek Disapear Artikel Blog With jQuery – Pada kesempatan kali ini saya ingin berbagi sedikit tips mengenai postingan blog. Dimana saya akan berbagi tips untuk memanipulasi isi postingan blog dengan efek Disapear jQuery.

Blog dan jQuery memang sangat melekat dan selalu saling berkaitan. Saat membicarakan jquery dengan blog memang terasa seperti tidak ada habisnya sampai kemudian hari untuk mengolah blog menggunakan script jQuery untuk memanipulasi komponen di dokumen HTML.

Hal ini disebabkan karena jQuery dirancang sedemikian rupa supaya projek yang kita buat menggunakan Javascript menjadi relatif sangat mudah. Write less do more, menulis kode lebih sedikit tetapi melakukan pekerjaan lebih banyak.

Pada tutorial ini kita akan membahas mengenai efek didalam posting blog yang nantinya pada artikel yang sudah kita tempel dengan efek maka akan dapat dengan mudah untuk memberikan kebebasan kepada visitor sehingga jika pada saat visitor menginginkan artikel tersebut tidak tampil di postingan maka dengan sangat mudahnya visitor dapat langsung menghilangkannya dengan menekan tombol yang sudah tersedia.

Untuk memasang efek ini kedalam blog maka berikut adalah tutorial cara menerapkan Simple Efek Disapear Artikel Blog With jQuery.

Cara Membuat Simple Efek Disapear Artikel Blog With jQuery

  1. Masuk ke blogger
  2. Buat postingan baru, dan paste kode berikut didalam mode HTML
  3. Sesuaikan isi, jika sudah Publish postingan
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery.gallery.js"></script>
<script type="text/javascript">
$(document).ready(function(){                         
$(".pane .delete").click(function(){
$(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
});
});
</script>
<style type="text/css">
.pane { color: #000; background: #e9fbe9; padding: 10px 20px 10px;
position: relative; border-top: solid 2px #52e052; }
.pane .delete { position: absolute; top: 10px;
right: 10px; cursor: pointer; }
</style>

<div class="pane">
<h3>JUDUL 1</h3>
<p>Silahkan ganti dengan teks yang di inginkan</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRdHkKlgsHgiMMETztvDHLtX0eGMlNdI8DHzf6ZIbcOP6_TGEao8N1i0uqxaPbwiuKFgUK0HPN_mOMpqYuMHG82WQ2jogDCtJ15KEONfWbrb5JmhyOXLvlqyjFkM9WhttwJ00gc4bz-Ep6/s16/btn-delete.gif" alt="delete" class="delete" />
</div>
<div class="pane">
<h3>JUDUL 2</h3>
<p>Silahkan ganti dengan teks yang di inginkan</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRdHkKlgsHgiMMETztvDHLtX0eGMlNdI8DHzf6ZIbcOP6_TGEao8N1i0uqxaPbwiuKFgUK0HPN_mOMpqYuMHG82WQ2jogDCtJ15KEONfWbrb5JmhyOXLvlqyjFkM9WhttwJ00gc4bz-Ep6/s16/btn-delete.gif" alt="delete" class="delete" />
</div>
<div class="pane">
<h3>JUDUL 3</h3>
<p>Silahkan ganti dengan teks yang di inginkan</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRdHkKlgsHgiMMETztvDHLtX0eGMlNdI8DHzf6ZIbcOP6_TGEao8N1i0uqxaPbwiuKFgUK0HPN_mOMpqYuMHG82WQ2jogDCtJ15KEONfWbrb5JmhyOXLvlqyjFkM9WhttwJ00gc4bz-Ep6/s16/btn-delete.gif" alt="delete" class="delete" />
</div> 

Untuk demonya, silahkan dipraktekkan saja Simple Efek Disapear Artikel Blog With jQuery.


Semoga hasilnya nanti lebih memuaskan, :)
Semoga bermanfaat!

Memasang jQuery Efek Zoom Gambar Bisa Bergeser

Memasang jQuery Efek Zoom Gambar Bisa Bergeser

Memasang jQuery Efek Zoom Gambar Bisa Bergeser - jQuery Efek Zoom Gambar adalah cara membuat efek pada gambar yang ada di postingan blog agar gambar tersebut terkesan lebih menarik dan membuat gambar menjadi membesar serta bisa di geser-geser.

Cara Memasang jQuery Efek Zoom Gambar Bergeser ini langkahnya cukup singkat dan mudah, hanya dengan menambahkan sedikit kode saja maka gambar tersebut sudah terkesan menarik dan akan lebih memperjelas pengunjung.

Untuk itu, seperti apakah hasil dari Memasang jQuery Efek Zoom Gambar Bergeser di blog? Coba anda arahkan kursor pada gambar dibawah ini dan coba geser-geserkan kursor mouse anda pada gambar tersebut.


Begitulah hasil dari Memasang jQuery Efek Zoom Gambar Bisa Bergeser di Blog.
Jika anda ingin membuat gambar di blog anda seperti pada gambar diatas, berikut cara Memasang jQuery Efek Zoom Gambar Bisa Bergeser:

1. Login ke akun Blogger anda
2. Kemudian pada Dashboard blog anda klik Template > Edit HTML
3. Cari kode </head>, Copy kode berikut ini kemudian letakan tepat diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://faceblog-evolutions.googlecode.com/files/cloud-zoom.1.0.2.js' type='text/javascript'/>
4. Simpan template

Oke, sampai sini Tahap Memasang jQuery Efek Zoom Gambar Bisa Bergeser sudah selesai dan siap digunakan. Tahap selanjutnya sekarang adalah menambahkan tag pada gambar tersebut saat posting, caranya sebagai berikut:
<div class="separator" style="clear: both; text-align: center;">
<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="URL GAMBAR ANDA" imageanchor="1" => <img border="0" height="300" src="URL GAMBAR ANDA" width="460" /></a></div>
Catatan: Tulisan yang berwarna merah silahkan ganti dengan URL gambar sesuai keinginan anda.

Contoh :
<div class="separator" style="clear: both; text-align: center;">
<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr_1qxfp7xrstM_9oE00CW69krLaHzAqNjYb0QU3D1Ff96WfhfJYQB06T03CGEXk0Dh5h35CbgT6pmZ08a3uHaLg2KckoufQETQr-vgpDcn22nkPbKueulOy-aCot_osD1lwLpclm3FHE/s1600/large-zoom-example.jpg" imageanchor="1" => <img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr_1qxfp7xrstM_9oE00CW69krLaHzAqNjYb0QU3D1Ff96WfhfJYQB06T03CGEXk0Dh5h35CbgT6pmZ08a3uHaLg2KckoufQETQr-vgpDcn22nkPbKueulOy-aCot_osD1lwLpclm3FHE/s640/large-zoom-example.jpg" width="460" /></a></div>

jQuery Efek fadeIn dan fadeOut Page Load Blog

jQuery Efek fadeIn dan fadeOut Page Load Blog

jQuery Efek fadeIn dan fadeOut Page Load Blog – Halo sobat blog, pada kesempatan kali saya kembali ingin berbagi sebuah tutorial sederhana untuk sobat semua, dimana tutorial kali ini berhubungan dengan page loading blog kita.

jQuery Efek fadeIn dan fadeOut Page Load Blog ini bermanfaat untuk merapihkan tampilan blog, dimana biasanya page load blog memakan waktu yang lama karna banyaknya javascript menyebabkan loading membuka halaman tampilannya sedikit terganggu dan agak terlihat kurang rapi.

Untuk mengatasi hal ini maka anda bisa memanfaatkan jQuery Efek fadeIn dan fadeOut Page Load Blog untuk menutupi kekurangan tersebut agar pada saat halaman blog terbuka sudah dalam tampilan seutuhnya sesuai tata letak masing-masing elemen.

Namun perlu diketahui, jQuery Efek fadeIn dan fadeOut Page Load Blog ini bukan berarti mempercepat loading blog akan tetapi hanya memanipulasi halaman pada saat proses loading sehingga saat browser memuat (membaca javascript yang tergolong lama) dan terkadang menyebabkan tampilan halaman sedikit acak-acakan.

Mungkin apabila diantara kalian ada yang mengalami masalah seperti ini, jQuery Efek fadeIn dan fadeOut Page Load Blog bisa menjadi alternatife untuk memanipulasi halaman dengan membuat efek fadeIn dan fadeOut.

Agar setiap kali pengunjung masuk dan menjelajahi blog dengan link yang ada, maka setiap kali browser memuat halaman akan menampilkan efek halaman yang memudar terlebih dahulu dan saat halaman terbuka sudah dalam tampilan yang rapi pastinya.

Efek fadeIn Page Load Blog
Berikut ini adalah salah satu efek fadeIn page load blog yang cukup sederhana, walau begitu efek ini cukup ampuh untuk memanipulasi loading halaman blog. Untuk menerapkan Efek fadeIn Page Load Blog masuk ke Edit HTML lalu taruh di atas kode </body>

<script type='text/javascript'>
$(document).ready(function () {
 $('body').hide().fadeIn(5000).delay(500)
});
</script>

Script diatas sudah bisa berjalan. Namun biasanya setelah layout blog sudah nampak terlihat akan tetapi efek baru akan mulai berjalan. Untuk menghilangkan terlebih dahulu, bisa menggunakan CSS body{display:none} untuk menyembunyikan body sebelum script berjalan.

Efek fadeIn dan fadeOut Page Load Blog
Untuk yang ini dengan sedikit tambahan efek pada saat keluar dari halaman (meninggalkan halaman).
Pada saat berpindah halaman maka akan timbul efek fadeOut atau halaman akan memudar terlebih dahulu sebelum ke link halaman berikutnya.

Cara kerja dari script di bawah adalah menyeleksi seluruh link yang ada pada halaman blog tersebut, sehingga mungkin apabila pada blog tersebut terdapat salah satu link untuk menampilkan lightbox atau modal dialog mungkin akan bentrok dan salah satu dari efek tersebut
tidak berjalan.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
 $("body").css("z-index", "-10");
 $("body").fadeIn(5000);
 $("a").click(function (event) {
  event.preventDefault();
  linkLocation = this.href;
  $("body").fadeOut(1000, redirectPage);
 });

 function redirectPage() {
  window.location = linkLocation;
 }
});
//]]>
</script>

Namun sebelum menerapkan cara di atas, juga perlu dipastikan bahwa di template blog juga sudah terpasang jQuery, bisa menggunakan versi terbaru atau bisa juga versi dibawahnya.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

Apabila sebelumnya sudah terdapat kode tersebut maka abaikan saja kode diatas karena tidak perlu memasangnya lagi.

Selamat mencoba..

Cara Membuat Multi Tab di Sidebar Blog

Cara Membuat Multi Tab di Sidebar Blog

Cara Membuat Multi Tab di Sidebar Blog - Multi Tab Widget pada blogger sebenarnya sudah banyak yang menggunakannya terlebih pada template-template yang baru dan update pasti telah dilengkapi dengan Multi Tab Widget ini dibagian Sidebar blognya. Namun, bagi anda yang masih belum memiliki Multi Tab widget ini diblog anda atau sekedar ingin merubah tampilan Multi Tab yang telah ada, anda bisa mencoba Multi Tab yang akan saya bagikan pada kesempatan kali ini.

Salah satu manfaat dari widget ini yaitu jika anda ingin menambahkan terlalu banyak widget disidebar, maka dengan memasang multi tab ini akan menghemat penempatan widget dikolom sidebar yang biasanya akan memanjang kebawah. Penempatan setiap widget pada sidebar ini bisa anda bagi menjadi beberapa kolom yang akan membuat tampilan blog anda menjadi terlihat lebih rapi dan menarik.

Baiklah, untuk anda yang ingin tahu Cara Membuat Multi Tab di Sidebar Blog, berikut cara penerapannya:
1. Masuk ke Akun Blogger
2. Pilih Template > Edit HTML
3. Lalu cari kode ]]></b:skin> atau </style> dan paste kode barikut tepat diatasnya
/* Multi Tab Widget */
.multitab-section{background:#fff;text-transform:uppercase;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-widget li{list-style:none;padding:0;margin:0;float:left}
.multitab-widget li a{background:#22a1c4;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none}
.multitab-tab{border:0;width:33.3%;text-align:center}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}

4. Selanjutnya paste kode berikut tepat diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
</script>

5. Terakhir paste kode Multi Tab Widget berikut setelah kode <div id='sidebar-wrapper'>
<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
</div>
Jangan lupa untuk mengganti Nama Judul Widget yang telah ditandai diatas, dengan judul widget yang ingin anda pasang. Selanjutnya Simpan Template anda dan lihat hasilnya. Sekian tips kali ini, Semoga bermanfaat!

Cara Membuat Tombol Like, Dislike dan Share di Blogger

Cara Membuat Tombol Like, Dislike dan Share di Blogger - Halo sobat Tutorialku? Pada kesempatan kali ini saya akan berbagi sebuah widget lagi nih untuk anda semua. Dan menurut saya widget kali ini juga cukup menarik dan bagus untuk dipasang diblog anda. Widget kali ini yaitu tentang Cara Membuat Tombol Like, Dislike dan Share di Blogger.

Cara Membuat Tombol Like, Dislike dan Share di Blogger

Widget Tombol Like, Dislike dan Share di Blogger ini yang perlu anda ketahui bukanlah seperti Tombol Like Facebook biasa, karna Tombol Like, Dislike ini juga disertai dengan tombol Share, jadi anda tidak perlu repot-repot lagi untuk menambah Share Button di blog anda.

Selain itu juga Tombol Like, Dislike dan Share ini memiliki tampilan yang cukup menarik, yaitu putih transparent. Jadi pas banget deh untuk diletakkan diakhir postingan anda semua.

Cara Membuat Tombol Like, Dislike dan Share di Blogger
  • Pertama Masuk ke Blogger anda
  • Pilih Template > Edit HTML
  • Cari kode </head> dan letakkan kode jQuery ini tepat diatasnya.
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
  • Setelah itu cari kode <data:post.body/> dan paste kode berikut tepat dibawah kode <data:post.body/> tsb.
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div id='bi-tip-rating-2546'/>
 </b:if>  
  • Langkah terakhir cari kode </body> dan paste kode berikut tepat diatas kode tsb.
 <style type="text/css">
#bi-tip-rating-2546 {
 margin: 0.5em 0;
 font-size: 12px!important;
}
#bi-tip-rating-2546 * {
 line-height: 1.3em!important;
}
#bi-tip-rating-2546 .button {
 float: left;
 width: 95px;
 overflow: hidden;
 border: 1px solid #C6C6C6;
 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee);
 background-image: -moz-linear-gradient(top,#F8F8F8 0,#EEE 100%);
 background-image: -ms-linear-gradient(top,#F8F8F8 0,#EEE 100%);
 background-image: -o-linear-gradient(top,#F8F8F8 0,#EEE 100%);
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE));
 background-image: -webkit-linear-gradient(top,#F8F8F8 0,#EEE 100%);
 background-image: linear-gradient(to bottom,#F8F8F8 0,#EEE 100%);
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 margin: 0 0.5em 0 0;
 padding: 2px 0;
 filter: alpha(opacity=60);
 opacity: 0.6;
}
#bi-tip-rating-2546 .button:hover {
 filter: alpha(opacity=100);
 opacity: 1;
}
#bi-tip-rating-2546 .button iframe {
 height: 20px;
 margin: 1px 0 0 0;
 position: relative;
 z-index: 9999;
}
#bi-tip-rating-2546 .like.button iframe {
 margin-left: -104px;
}
#bi-tip-rating-2546 .dislike.button iframe {
 margin-left: -92px;
}
#bi-tip-rating-2546 .button div.icon {
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitppIJ7raSr-c4nulEsywAaYpkXBwmqiDLmJDVAG-tP6fY4WKocL1p0Wd9fkCJ1NvJsTNu1cUIoCGNcOAOvKIWDtK8lWeD3D1UF6Ox73I4Joh_YSsDUFepq7HkT3HKN5ClRfck1xTdYRw/s1600/ui-icons.png);
 background-repeat: no-repeat;
 height: 20px;
 width: 20px;
 position: absolute;
 z-index: 1;
}
#bi-tip-rating-2546 .like.button div.icon {
 background-position: -252px -26px;
}
#bi-tip-rating-2546 .dislike.button div.icon {
 background-position: -320px -138px;
}
#bi-tip-rating-2546 .like.button {
 width: 85px;
}
#bi-tip-rating-2546 .share.button {
 width: 50px;
 text-align: center;
 padding: 8px;
 color: black;
 font-weight: bold;
 font-size: 12px;
 line-height: 12px!important;
}
#bi-tip-rating-2546 .button div.label {
 position: absolute;
 margin: 4px 0 0 22px;
 color: black;
 font-size: 12px;
 z-index:1;
}
#bi-tip-rating-2546 .button:active {
 border-color: #C6C6C6;
 background-color: #E9E9E9;
 background-image: none;
 -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
 -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
#bi-tip-rating-2546 .share-box {
 margin: 0.5em 0;
 display: none;
}
#bi-tip-rating-2546 input.share-url {
 display:block;
 -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);
 -ms-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);
 -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);
 box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
 border: 1px solid #ccc;
 padding: 5px;
 width: 50%;
}
#bi-tip-rating-2546 input.share-url:hover {
 -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,.15);
 -ms-box-shadow: inset 0px 1px 2px rgba(0,0,0,.15);
 -webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, .15);
 box-shadow: inset 0px 1px 2px rgba(0, 0, 0, .15);
}
#bi-tip-rating-2546 .bi-share-button:hover {
 filter: alpha(opacity=90);
 opacity: 0.9;
}
#bi-tip-rating-2546 .bi-share-button {
 display: block;
 float: left;
 width: 32px;
 height: 32px;
 margin: 1% 3% 0 0;
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiqmwvsboFn8_c4YydHq3e7p-JYspKIyLSEr8FAaJi8MErqZyGRH_jusyRN5cV-WN4RWMyrI1kh4SjPzpPfOrxBwi1ueNaK-XU80fFlhcuVykCgkhxa7-Qs0iSXWGi7wuGNMJbF5Ywguw/s1600/social-icons.png);
 background-repeat: no-repeat;
}
#bi-tip-rating-2546 .bi-share-facebook {background-position: 0 -652px;}
#bi-tip-rating-2546 .bi-share-twitter {background-position: 0 -1104px;}
#bi-tip-rating-2546 .bi-share-gplus {background-position: 0 -488px;}
#bi-tip-rating-2546 .bi-share-tumblr {background-position: 0 -380px;}
#bi-tip-rating-2546 .bi-share-pinterest {background-position: 0 0;}
#bi-tip-rating-2546 .bi-share-blogger {background-position: 0 -688px;}
#bi-tip-rating-2546 a.copyright-button:hover {
 text-decoration: underline;
}
#bi-tip-rating-2546 a.copyright-button {
 display: block;
 float: left;
 width: 1em;
 height: 1em;
 background: red;
 color: white;
 text-align: center;
 color: white;
 padding: 0.2em;
 font-size: 10px;
 font-weight: bold;
 margin: 3% 0 0 0;
}
</style>
<script type='text/javascript'>
//<![CDATA[
/* ############################################
Like / Dislike rating system plugin for Blogger by http://semua-tutorialku.blogspot.com
############################################### */
//bi-tip-2546-easy-guide-02
var default_share_description = 'Love it';//default share description when your site has no one
var default_share_title = 'This is it';//default title share when your site has no one
var text_likes = 'Likes';//text use in "like" button
var text_dislikes = 'Dislikes';//text use in dislike button
var _0xaeb7=["\x32\x20\x6A\x3D\x5A\x2E\x31\x30\x2E\x65\x3B\x79\x3D\x6A\x2E\x31\x64\x28\x27\x23\x27\x29\x3B\x6B\x28\x79\x21\x3D\x2D\x31\x29\x7B\x6A\x3D\x6A\x2E\x31\x63\x28\x30\x2C\x79\x29\x7D\x79\x3D\x6A\x2E\x31\x64\x28\x27\x3F\x27\x29\x3B\x6B\x28\x79\x21\x3D\x2D\x31\x29\x7B\x6A\x3D\x6A\x2E\x31\x63\x28\x30\x2C\x79\x29\x7D\x32\x20\x54\x3D\x27\x27\x3B\x56\x28\x69\x3D\x30\x3B\x69\x3C\x32\x39\x3B\x69\x2B\x2B\x29\x7B\x54\x2B\x3D\x27\x25\x31\x4E\x25\x31\x4F\x27\x7D\x42\x20\x4B\x28\x31\x65\x29\x7B\x36\x3D\x27\x3C\x31\x6D\x20\x31\x50\x3D\x22\x30\x22\x20\x31\x51\x3D\x22\x31\x4D\x22\x20\x31\x4C\x3D\x22\x31\x48\x22\x20\x4E\x3D\x22\x71\x3A\x2F\x2F\x48\x2E\x45\x2E\x6C\x2F\x31\x69\x2D\x31\x49\x2D\x31\x4A\x2E\x67\x3F\x31\x4B\x3D\x25\x31\x52\x27\x2B\x54\x2B\x27\x25\x31\x53\x26\x31\x5A\x3D\x25\x32\x30\x23\x27\x2B\x6A\x2B\x31\x65\x2B\x27\x22\x3E\x3C\x5C\x2F\x31\x6D\x3E\x27\x3B\x32\x31\x20\x36\x7D\x32\x20\x31\x67\x3D\x27\x23\x38\x2D\x4C\x2D\x49\x2D\x4F\x27\x3B\x32\x20\x64\x3D\x24\x28\x27\x64\x27\x29\x2E\x44\x28\x29\x3B\x6B\x28\x28\x64\x3D\x3D\x27\x27\x29\x7C\x7C\x7A\x28\x64\x29\x3D\x3D\x27\x41\x27\x29\x7B\x64\x3D\x24\x28\x27\x32\x33\x27\x29\x2E\x44\x28\x29\x7D\x6B\x28\x28\x64\x3D\x3D\x27\x27\x29\x7C\x7C\x7A\x28\x64\x29\x3D\x3D\x27\x41\x27\x29\x7B\x64\x3D\x31\x59\x7D\x32\x20\x66\x3D\x24\x28\x27\x31\x73\x5B\x31\x72\x3D\x22\x66\x22\x5D\x27\x29\x2E\x43\x28\x27\x31\x6E\x27\x29\x3B\x6B\x28\x66\x3D\x3D\x27\x27\x7C\x7C\x7A\x28\x66\x29\x3D\x3D\x27\x41\x27\x29\x7B\x66\x3D\x24\x28\x27\x31\x73\x5B\x31\x72\x3D\x22\x31\x58\x22\x5D\x27\x29\x2E\x43\x28\x27\x31\x6E\x27\x29\x7D\x6B\x28\x66\x3D\x3D\x27\x27\x7C\x7C\x7A\x28\x66\x29\x3D\x3D\x27\x41\x27\x29\x7B\x66\x3D\x31\x54\x7D\x32\x20\x6D\x3D\x27\x27\x3B\x32\x20\x53\x3D\x30\x3B\x32\x20\x51\x3D\x30\x3B\x24\x28\x27\x31\x55\x27\x29\x2E\x31\x47\x28\x42\x28\x29\x7B\x77\x3D\x24\x28\x78\x29\x2E\x31\x71\x28\x29\x3B\x68\x3D\x24\x28\x78\x29\x2E\x31\x70\x28\x29\x3B\x6B\x28\x6D\x3D\x3D\x27\x27\x29\x7B\x6D\x3D\x3D\x24\x28\x78\x29\x2E\x43\x28\x27\x4E\x27\x29\x7D\x6B\x28\x77\x3E\x3D\x53\x26\x26\x68\x3E\x3D\x51\x29\x7B\x53\x3D\x77\x3B\x51\x3D\x68\x3B\x6D\x3D\x3D\x24\x28\x78\x29\x2E\x43\x28\x27\x4E\x27\x29\x7D\x7D\x29\x3B\x6B\x28\x6D\x3D\x3D\x27\x27\x7C\x7C\x7A\x28\x6D\x29\x3D\x3D\x27\x41\x27\x29\x7B\x6D\x3D\x27\x71\x3A\x2F\x2F\x27\x2B\x5A\x2E\x31\x30\x2E\x31\x57\x2B\x27\x2F\x32\x34\x2E\x31\x7A\x27\x7D\x32\x20\x6F\x3D\x47\x28\x6A\x29\x3B\x32\x20\x73\x3D\x47\x28\x64\x29\x3B\x32\x20\x31\x78\x3D\x47\x28\x66\x29\x3B\x32\x20\x50\x3D\x47\x28\x6D\x29\x3B\x32\x20\x59\x3D\x27\x71\x3A\x2F\x2F\x48\x2E\x58\x2E\x6C\x2F\x31\x74\x2F\x31\x74\x2E\x31\x41\x3F\x75\x3D\x27\x2B\x6F\x3B\x32\x20\x31\x32\x3D\x27\x31\x62\x3A\x2F\x2F\x57\x2E\x6C\x2F\x31\x79\x2F\x31\x42\x3F\x46\x3D\x27\x2B\x6F\x2B\x27\x26\x44\x3D\x27\x2B\x73\x3B\x32\x20\x31\x33\x3D\x27\x31\x62\x3A\x2F\x2F\x31\x43\x2E\x31\x45\x2E\x6C\x2F\x75\x2F\x30\x2F\x34\x3F\x46\x3D\x27\x2B\x6F\x3B\x32\x20\x31\x36\x3D\x27\x71\x3A\x2F\x2F\x48\x2E\x31\x37\x2E\x6C\x2F\x34\x3F\x76\x3D\x33\x26\x74\x3D\x27\x2B\x73\x2B\x27\x26\x75\x3D\x27\x2B\x6F\x3B\x32\x20\x31\x34\x3D\x27\x71\x3A\x2F\x2F\x31\x35\x2E\x6C\x2F\x31\x44\x2F\x31\x46\x2F\x31\x56\x2F\x3F\x46\x3D\x27\x2B\x6F\x2B\x27\x26\x64\x3D\x27\x2B\x73\x2B\x27\x26\x66\x3D\x27\x2B\x31\x78\x2B\x27\x26\x32\x65\x3D\x27\x2B\x50\x3B\x32\x20\x31\x38\x3D\x27\x71\x3A\x2F\x2F\x48\x2E\x45\x2E\x6C\x2F\x31\x69\x2D\x78\x2E\x67\x3F\x6E\x3D\x27\x2B\x73\x2B\x27\x26\x62\x3D\x25\x32\x45\x2B\x65\x25\x32\x46\x25\x32\x32\x27\x2B\x6F\x2B\x27\x25\x32\x32\x2B\x25\x31\x75\x27\x2B\x73\x2B\x27\x25\x32\x47\x25\x32\x44\x25\x31\x75\x26\x32\x43\x3D\x27\x2B\x50\x3B\x32\x20\x36\x3D\x27\x27\x3B\x36\x2B\x3D\x27\x3C\x35\x20\x37\x3D\x22\x52\x20\x63\x22\x3E\x3C\x35\x20\x37\x3D\x22\x31\x31\x22\x3E\x3C\x2F\x35\x3E\x3C\x35\x20\x37\x3D\x22\x31\x76\x22\x3E\x27\x2B\x32\x7A\x2B\x27\x3C\x2F\x35\x3E\x27\x2B\x4B\x28\x27\x32\x41\x27\x29\x2B\x27\x3C\x2F\x35\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x35\x20\x37\x3D\x22\x55\x20\x63\x22\x3E\x3C\x35\x20\x37\x3D\x22\x31\x31\x22\x3E\x3C\x2F\x35\x3E\x3C\x35\x20\x37\x3D\x22\x31\x76\x22\x3E\x27\x2B\x32\x49\x2B\x27\x3C\x2F\x35\x3E\x27\x2B\x4B\x28\x27\x32\x42\x27\x29\x2B\x27\x3C\x2F\x35\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x37\x3D\x22\x34\x20\x63\x22\x20\x65\x3D\x22\x23\x32\x48\x22\x3E\x32\x35\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x35\x20\x4A\x3D\x22\x31\x68\x3A\x31\x6A\x3B\x4D\x3A\x31\x6B\x3B\x22\x3E\x3C\x2F\x35\x3E\x3C\x35\x20\x37\x3D\x22\x34\x2D\x31\x61\x22\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x32\x4D\x20\x37\x3D\x22\x34\x2D\x46\x22\x20\x32\x4F\x3D\x22\x27\x2B\x6A\x2B\x27\x22\x2F\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x58\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x59\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x57\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x31\x32\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x32\x50\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x31\x33\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x31\x37\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x31\x36\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x31\x35\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x31\x34\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x38\x2D\x34\x2D\x45\x20\x38\x2D\x34\x2D\x63\x22\x20\x65\x3D\x22\x27\x2B\x31\x38\x2B\x27\x22\x3E\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x61\x20\x70\x3D\x22\x72\x22\x20\x37\x3D\x22\x32\x4E\x2D\x63\x22\x20\x65\x3D\x22\x71\x3A\x2F\x2F\x32\x4A\x2E\x6C\x2F\x32\x4B\x2F\x52\x2D\x32\x4C\x2D\x55\x2D\x49\x2D\x32\x78\x2D\x56\x2D\x45\x22\x20\x4A\x3D\x22\x32\x66\x3A\x20\x32\x79\x21\x39\x3B\x4D\x3A\x20\x32\x67\x21\x39\x3B\x31\x71\x3A\x20\x31\x6F\x21\x39\x3B\x31\x70\x3A\x20\x31\x6F\x21\x39\x3B\x32\x68\x3A\x20\x32\x69\x21\x39\x3B\x31\x77\x3A\x20\x31\x39\x21\x39\x3B\x44\x2D\x32\x64\x3A\x20\x32\x63\x21\x39\x3B\x31\x77\x3A\x20\x31\x39\x21\x39\x3B\x32\x37\x3A\x20\x30\x2E\x32\x36\x21\x39\x3B\x31\x6C\x2D\x32\x38\x3A\x20\x32\x61\x21\x39\x3B\x31\x6C\x2D\x32\x62\x3A\x20\x32\x6A\x21\x39\x3B\x32\x6B\x3A\x20\x33\x25\x20\x30\x20\x30\x20\x30\x3B\x32\x74\x3A\x20\x32\x73\x28\x31\x66\x3D\x32\x75\x29\x21\x39\x3B\x31\x66\x3A\x20\x31\x21\x39\x3B\x32\x76\x3A\x32\x77\x21\x39\x3B\x32\x72\x3A\x32\x71\x21\x39\x22\x20\x64\x3D\x22\x32\x6D\x20\x32\x6C\x20\x52\x20\x78\x3F\x22\x3E\x3F\x3C\x2F\x61\x3E\x27\x3B\x36\x2B\x3D\x27\x3C\x35\x20\x4A\x3D\x22\x31\x68\x3A\x31\x6A\x3B\x4D\x3A\x31\x6B\x3B\x22\x3E\x3C\x2F\x35\x3E\x3C\x2F\x35\x3E\x27\x3B\x24\x28\x31\x67\x29\x2E\x36\x28\x36\x29\x3B\x24\x28\x27\x23\x38\x2D\x4C\x2D\x49\x2D\x4F\x20\x2E\x34\x2E\x63\x27\x29\x2E\x32\x6E\x28\x42\x28\x29\x7B\x24\x28\x27\x23\x38\x2D\x4C\x2D\x49\x2D\x4F\x20\x2E\x34\x2D\x31\x61\x27\x29\x2E\x32\x6F\x28\x27\x32\x70\x27\x2C\x42\x28\x29\x7B\x7D\x29\x7D\x29\x3B","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x76\x61\x72\x7C\x7C\x73\x68\x61\x72\x65\x7C\x64\x69\x76\x7C\x68\x74\x6D\x6C\x7C\x63\x6C\x61\x73\x73\x7C\x62\x69\x7C\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x7C\x7C\x7C\x62\x75\x74\x74\x6F\x6E\x7C\x74\x69\x74\x6C\x65\x7C\x68\x72\x65\x66\x7C\x64\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x7C\x7C\x7C\x7C\x6E\x61\x6B\x65\x5F\x75\x72\x6C\x7C\x69\x66\x7C\x63\x6F\x6D\x7C\x6D\x65\x64\x69\x61\x5F\x75\x72\x6C\x7C\x7C\x65\x6E\x63\x6F\x64\x65\x5F\x75\x72\x6C\x7C\x74\x61\x72\x67\x65\x74\x7C\x68\x74\x74\x70\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x65\x6E\x63\x6F\x64\x65\x5F\x74\x69\x74\x6C\x65\x7C\x7C\x7C\x7C\x7C\x74\x68\x69\x73\x7C\x69\x6E\x64\x65\x78\x7C\x74\x79\x70\x65\x6F\x66\x7C\x75\x6E\x64\x65\x66\x69\x6E\x65\x64\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x61\x74\x74\x72\x7C\x74\x65\x78\x74\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x75\x72\x6C\x7C\x65\x6E\x63\x6F\x64\x65\x55\x52\x49\x43\x6F\x6D\x70\x6F\x6E\x65\x6E\x74\x7C\x77\x77\x77\x7C\x72\x61\x74\x69\x6E\x67\x7C\x73\x74\x79\x6C\x65\x7C\x72\x61\x74\x65\x5F\x69\x74\x65\x6D\x5F\x68\x74\x6D\x6C\x7C\x74\x69\x70\x7C\x66\x6C\x6F\x61\x74\x7C\x73\x72\x63\x7C\x32\x35\x34\x36\x7C\x65\x6E\x63\x6F\x64\x65\x5F\x6D\x65\x64\x69\x61\x5F\x75\x72\x6C\x7C\x63\x68\x7C\x6C\x69\x6B\x65\x7C\x63\x77\x7C\x6C\x61\x62\x65\x6C\x5F\x73\x70\x61\x63\x65\x7C\x64\x69\x73\x6C\x69\x6B\x65\x7C\x66\x6F\x72\x7C\x74\x77\x69\x74\x74\x65\x72\x7C\x66\x61\x63\x65\x62\x6F\x6F\x6B\x7C\x73\x6C\x5F\x66\x61\x63\x65\x62\x6F\x6F\x6B\x7C\x77\x69\x6E\x64\x6F\x77\x7C\x6C\x6F\x63\x61\x74\x69\x6F\x6E\x7C\x69\x63\x6F\x6E\x7C\x73\x6C\x5F\x74\x77\x69\x74\x74\x65\x72\x7C\x73\x6C\x5F\x67\x70\x6C\x75\x73\x7C\x73\x6C\x5F\x70\x69\x6E\x74\x65\x72\x65\x73\x74\x7C\x70\x69\x6E\x74\x65\x72\x65\x73\x74\x7C\x73\x6C\x5F\x74\x75\x6D\x62\x6C\x72\x7C\x74\x75\x6D\x62\x6C\x72\x7C\x73\x6C\x5F\x62\x6C\x6F\x67\x67\x65\x72\x7C\x77\x68\x69\x74\x65\x7C\x62\x6F\x78\x7C\x68\x74\x74\x70\x73\x7C\x73\x75\x62\x73\x74\x72\x69\x6E\x67\x7C\x69\x6E\x64\x65\x78\x4F\x66\x7C\x6D\x65\x74\x68\x6F\x64\x7C\x6F\x70\x61\x63\x69\x74\x79\x7C\x68\x6F\x6C\x64\x65\x72\x7C\x63\x6C\x65\x61\x72\x7C\x62\x6C\x6F\x67\x7C\x62\x6F\x74\x68\x7C\x6E\x6F\x6E\x65\x7C\x66\x6F\x6E\x74\x7C\x69\x66\x72\x61\x6D\x65\x7C\x63\x6F\x6E\x74\x65\x6E\x74\x7C\x31\x65\x6D\x7C\x68\x65\x69\x67\x68\x74\x7C\x77\x69\x64\x74\x68\x7C\x6E\x61\x6D\x65\x7C\x6D\x65\x74\x61\x7C\x73\x68\x61\x72\x65\x72\x7C\x33\x45\x7C\x6C\x61\x62\x65\x6C\x7C\x63\x6F\x6C\x6F\x72\x7C\x65\x6E\x63\x6F\x64\x65\x5F\x64\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x7C\x69\x6E\x74\x65\x6E\x74\x7C\x69\x63\x6F\x7C\x70\x68\x70\x7C\x74\x77\x65\x65\x74\x7C\x70\x6C\x75\x73\x7C\x70\x69\x6E\x7C\x67\x6F\x6F\x67\x6C\x65\x7C\x63\x72\x65\x61\x74\x65\x7C\x65\x61\x63\x68\x7C\x6E\x6F\x7C\x70\x6F\x73\x74\x7C\x72\x65\x61\x63\x74\x69\x6F\x6E\x73\x7C\x6F\x70\x74\x69\x6F\x6E\x73\x7C\x73\x63\x72\x6F\x6C\x6C\x69\x6E\x67\x7C\x74\x72\x75\x65\x7C\x32\x36\x6E\x62\x73\x70\x7C\x33\x42\x7C\x66\x72\x61\x6D\x65\x62\x6F\x72\x64\x65\x72\x7C\x61\x6C\x6C\x6F\x77\x74\x72\x61\x6E\x73\x70\x61\x72\x65\x6E\x63\x79\x7C\x35\x42\x61\x7C\x35\x44\x7C\x64\x65\x66\x61\x75\x6C\x74\x5F\x73\x68\x61\x72\x65\x5F\x64\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x7C\x69\x6D\x67\x7C\x62\x6F\x6F\x6B\x6D\x61\x72\x6B\x6C\x65\x74\x7C\x68\x6F\x73\x74\x6E\x61\x6D\x65\x7C\x44\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x7C\x64\x65\x66\x61\x75\x6C\x74\x5F\x73\x68\x61\x72\x65\x5F\x74\x69\x74\x6C\x65\x7C\x74\x65\x78\x74\x43\x6F\x6C\x6F\x72\x7C\x32\x33\x30\x30\x30\x30\x30\x30\x7C\x72\x65\x74\x75\x72\x6E\x7C\x7C\x68\x31\x7C\x66\x61\x76\x69\x63\x6F\x6E\x7C\x53\x68\x61\x72\x65\x7C\x32\x65\x6D\x7C\x70\x61\x64\x64\x69\x6E\x67\x7C\x73\x69\x7A\x65\x7C\x7C\x31\x30\x70\x78\x7C\x77\x65\x69\x67\x68\x74\x7C\x63\x65\x6E\x74\x65\x72\x7C\x61\x6C\x69\x67\x6E\x7C\x6D\x65\x64\x69\x61\x7C\x64\x69\x73\x70\x6C\x61\x79\x7C\x6C\x65\x66\x74\x7C\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x7C\x72\x65\x64\x7C\x62\x6F\x6C\x64\x7C\x6D\x61\x72\x67\x69\x6E\x7C\x6F\x6E\x65\x7C\x57\x61\x6E\x74\x7C\x63\x6C\x69\x63\x6B\x7C\x74\x6F\x67\x67\x6C\x65\x7C\x66\x61\x73\x74\x7C\x73\x74\x61\x74\x69\x63\x7C\x70\x6F\x73\x69\x74\x69\x6F\x6E\x7C\x61\x6C\x70\x68\x61\x7C\x66\x69\x6C\x74\x65\x72\x7C\x31\x30\x30\x7C\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79\x7C\x76\x69\x73\x69\x62\x6C\x65\x7C\x73\x79\x73\x74\x65\x6D\x7C\x62\x6C\x6F\x63\x6B\x7C\x74\x65\x78\x74\x5F\x6C\x69\x6B\x65\x73\x7C\x30\x32\x30\x31\x7C\x30\x32\x30\x32\x7C\x65\x75\x72\x6C\x7C\x32\x46\x61\x7C\x33\x43\x61\x7C\x33\x44\x7C\x33\x43\x7C\x73\x68\x61\x72\x65\x74\x68\x69\x73\x7C\x74\x65\x78\x74\x5F\x64\x69\x73\x6C\x69\x6B\x65\x73\x7C\x62\x6C\x6F\x67\x67\x65\x72\x69\x74\x65\x6D\x73\x7C\x74\x69\x70\x73\x7C\x61\x6E\x64\x7C\x69\x6E\x70\x75\x74\x7C\x63\x6F\x70\x79\x72\x69\x67\x68\x74\x7C\x76\x61\x6C\x75\x65\x7C\x67\x70\x6C\x75\x73","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function (_0x9c61x1,_0x9c61x2,_0x9c61x3,_0x9c61x4,_0x9c61x5,_0x9c61x6){_0x9c61x5=function (_0x9c61x3){return (_0x9c61x3<_0x9c61x2?_0xaeb7[4]:_0x9c61x5(parseInt(_0x9c61x3/_0x9c61x2)))+((_0x9c61x3=_0x9c61x3%_0x9c61x2)>35?String[_0xaeb7[5]](_0x9c61x3+29):_0x9c61x3.toString(36));} ;if(!_0xaeb7[4][_0xaeb7[6]](/^/,String)){while(_0x9c61x3--){_0x9c61x6[_0x9c61x5(_0x9c61x3)]=_0x9c61x4[_0x9c61x3]||_0x9c61x5(_0x9c61x3);} ;_0x9c61x4=[function (_0x9c61x5){return _0x9c61x6[_0x9c61x5];} ];_0x9c61x5=function (){return _0xaeb7[7];} ;_0x9c61x3=1;} ;while(_0x9c61x3--){if(_0x9c61x4[_0x9c61x3]){_0x9c61x1=_0x9c61x1[_0xaeb7[6]]( new RegExp(_0xaeb7[8]+_0x9c61x5(_0x9c61x3)+_0xaeb7[8],_0xaeb7[9]),_0x9c61x4[_0x9c61x3]);} ;} ;return _0x9c61x1;} (_0xaeb7[0],62,176,_0xaeb7[3][_0xaeb7[2]](_0xaeb7[1]),0,{}));
//]]>
</script> 
  • Simpan Template anda.
  • Selesai
Nah sekarang anda sudah memasang  Tombol Like, Dislike dan Share di Blogger, dan anda dapat langsung melihat hasilnya diblog anda dengan cara membuka salah satu postingan anda, dan widget ini akan muncul dibagian akhir postingan anda.

Semoga bermanfaat..

Memasang Lines Animasi Preloading di Blogger

Memasang Lines Animasi Preloading di Blogger

Memasang Lines Animasi Preloading di Blogger - Animasi Line Preloading ini adalah widget animasi loading page yang ke 4 yang sudah saya share diblog saya ini. jadi saya tidak akan mengulang lagi untuk apa animasi page loading ini. karna fungsi nya masih sama seperti animasi page preloading yang sebelum-sebelumnya.

Baca Juga:
  1. Memasang Dotted Animasi Preloading
  2. Memasang Efek Loading Youtube page di Blog
  3. Memasang Animasi Preloading di Blogger
Untuk DEMO, silahkan Klik Disini.

Untuk anda yang berminat menggunakan Animasi Preloading yang satu ini, bisa ikuti langkah-langkahnya dibawah ini:
  1. Masuk ke Akun Blogger
  2. Pilih Template > Edit HTML
  3. Cari kode ]]></b:skin> dan paste css berikut tepat diatas nya.
 
/* ==========================================================================
   LOADING PAGE
   ========================================================================== */

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;

    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

    z-index: 1001;
}

    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #e74c3c;

        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #f9c922;

        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }


    @-webkit-keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }
    @keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }

    #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: #222222;
        z-index: 1000;
        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateX(0);  /* IE 9 */
        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
    }

    #loader-wrapper .loader-section.section-left {
        left: 0;
    }

    #loader-wrapper .loader-section.section-right {
        right: 0;
    }

    /* Loaded */
    .loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(-100%);  /* IE 9 */
                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(100%);  /* IE 9 */
                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    
    .loaded #loader {
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;  
                transition: all 0.3s ease-out;
    }
    .loaded #loader-wrapper {
        visibility: hidden;

        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%);  /* IE 9 */
                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.3s 1s ease-out;  
                transition: all 0.3s 1s ease-out;
    }
    
    /* JavaScript Turned Off */
    .no-js #loader-wrapper {
        display: none;
    }
    .no-js h1 {
        color: #222222;
    }

    #content {
        margin: 0 auto;
        padding-bottom: 50px;
        width: 80%;
        max-width: 978px;
    } 

4. Selanjutnya cari kode <body> dan paste kode berikut tepat dibawahnya.
 <div id='loader-wrapper'>
   <div id='loader'/>

   <div class='loader-section section-left'/>
            <div class='loader-section section-right'/>

  </div> 

5. Terakhir cari kode </body> dan paste kode berikut tepat diatasnya.
 <script type='text/javascript'>
;window.Modernizr=function(a,b,c){function D(a){j.cssText=a}function E(a,b){return D(n.join(a+&quot;;&quot;)+(b||&quot;&quot;))}function F(a,b){return typeof a===b}function G(a,b){return!!~(&quot;&quot;+a).indexOf(b)}function H(a,b){for(var d in a){var e=a[d];if(!G(e,&quot;-&quot;)&amp;&amp;j[e]!==c)return b==&quot;pfx&quot;?e:!0}return!1}function I(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:F(f,&quot;function&quot;)?f.bind(d||b):f}return!1}function J(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+&quot; &quot;+p.join(d+&quot; &quot;)+d).split(&quot; &quot;);return F(b,&quot;string&quot;)||F(b,&quot;undefined&quot;)?H(e,b):(e=(a+&quot; &quot;+q.join(d+&quot; &quot;)+d).split(&quot; &quot;),I(e,b,c))}function K(){e.input=function(c){for(var d=0,e=c.length;d&lt;e;d++)u[c[d]]=c[d]in k;return u.list&amp;&amp;(u.list=!!b.createElement(&quot;datalist&quot;)&amp;&amp;!!a.HTMLDataListElement),u}(&quot;autocomplete autofocus list placeholder max min multiple pattern required step&quot;.split(&quot; &quot;)),e.inputtypes=function(a){for(var d=0,e,f,h,i=a.length;d&lt;i;d++)k.setAttribute(&quot;type&quot;,f=a[d]),e=k.type!==&quot;text&quot;,e&amp;&amp;(k.value=l,k.style.cssText=&quot;position:absolute;visibility:hidden;&quot;,/^range$/.test(f)&amp;&amp;k.style.WebkitAppearance!==c?(g.appendChild(k),h=b.defaultView,e=h.getComputedStyle&amp;&amp;h.getComputedStyle(k,null).WebkitAppearance!==&quot;textfield&quot;&amp;&amp;k.offsetHeight!==0,g.removeChild(k)):/^(search|tel)$/.test(f)||(/^(url|email)$/.test(f)?e=k.checkValidity&amp;&amp;k.checkValidity()===!1:e=k.value!=l)),t[a[d]]=!!e;return t}(&quot;search tel url email datetime date month week time datetime-local number range color&quot;.split(&quot; &quot;))}var d=&quot;2.6.2&quot;,e={},f=!0,g=b.documentElement,h=&quot;modernizr&quot;,i=b.createElement(h),j=i.style,k=b.createElement(&quot;input&quot;),l=&quot;:)&quot;,m={}.toString,n=&quot; -webkit- -moz- -o- -ms- &quot;.split(&quot; &quot;),o=&quot;Webkit Moz O ms&quot;,p=o.split(&quot; &quot;),q=o.toLowerCase().split(&quot; &quot;),r={svg:&quot;http://www.w3.org/2000/svg&quot;},s={},t={},u={},v=[],w=v.slice,x,y=function(a,c,d,e){var f,i,j,k,l=b.createElement(&quot;div&quot;),m=b.body,n=m||b.createElement(&quot;body&quot;);if(parseInt(d,10))while(d--)j=b.createElement(&quot;div&quot;),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=[&quot;&amp;#173;&quot;,&#39;&lt;style id=&quot;s&#39;,h,&#39;&quot;&gt;&#39;,a,&quot;&lt;/style&gt;&quot;].join(&quot;&quot;),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background=&quot;&quot;,n.style.overflow=&quot;hidden&quot;,k=g.style.overflow,g.style.overflow=&quot;hidden&quot;,g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},z=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b).matches;var d;return y(&quot;@media &quot;+b+&quot; { #&quot;+h+&quot; { position: absolute; } }&quot;,function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)[&quot;position&quot;]==&quot;absolute&quot;}),d},A=function(){function d(d,e){e=e||b.createElement(a[d]||&quot;div&quot;),d=&quot;on&quot;+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement(&quot;div&quot;)),e.setAttribute&amp;&amp;e.removeAttribute&amp;&amp;(e.setAttribute(d,&quot;&quot;),f=F(e[d],&quot;function&quot;),F(e[d],&quot;undefined&quot;)||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:&quot;input&quot;,change:&quot;input&quot;,submit:&quot;form&quot;,reset:&quot;form&quot;,error:&quot;img&quot;,load:&quot;img&quot;,abort:&quot;img&quot;};return d}(),B={}.hasOwnProperty,C;!F(B,&quot;undefined&quot;)&amp;&amp;!F(B.call,&quot;undefined&quot;)?C=function(a,b){return B.call(a,b)}:C=function(a,b){return b in a&amp;&amp;F(a.constructor.prototype[b],&quot;undefined&quot;)},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!=&quot;function&quot;)throw new TypeError;var d=w.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(w.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(w.call(arguments)))};return e}),s.flexbox=function(){return J(&quot;flexWrap&quot;)},s.canvas=function(){var a=b.createElement(&quot;canvas&quot;);return!!a.getContext&amp;&amp;!!a.getContext(&quot;2d&quot;)},s.canvastext=function(){return!!e.canvas&amp;&amp;!!F(b.createElement(&quot;canvas&quot;).getContext(&quot;2d&quot;).fillText,&quot;function&quot;)},s.webgl=function(){return!!a.WebGLRenderingContext},s.touch=function(){var c;return&quot;ontouchstart&quot;in a||a.DocumentTouch&amp;&amp;b instanceof DocumentTouch?c=!0:y([&quot;@media (&quot;,n.join(&quot;touch-enabled),(&quot;),h,&quot;)&quot;,&quot;{#modernizr{top:9px;position:absolute}}&quot;].join(&quot;&quot;),function(a){c=a.offsetTop===9}),c},s.geolocation=function(){return&quot;geolocation&quot;in navigator},s.postmessage=function(){return!!a.postMessage},s.websqldatabase=function(){return!!a.openDatabase},s.indexedDB=function(){return!!J(&quot;indexedDB&quot;,a)},s.hashchange=function(){return A(&quot;hashchange&quot;,a)&amp;&amp;(b.documentMode===c||b.documentMode&gt;7)},s.history=function(){return!!a.history&amp;&amp;!!history.pushState},s.draganddrop=function(){var a=b.createElement(&quot;div&quot;);return&quot;draggable&quot;in a||&quot;ondragstart&quot;in a&amp;&amp;&quot;ondrop&quot;in a},s.websockets=function(){return&quot;WebSocket&quot;in a||&quot;MozWebSocket&quot;in a},s.rgba=function(){return D(&quot;background-color:rgba(150,255,150,.5)&quot;),G(j.backgroundColor,&quot;rgba&quot;)},s.hsla=function(){return D(&quot;background-color:hsla(120,40%,100%,.5)&quot;),G(j.backgroundColor,&quot;rgba&quot;)||G(j.backgroundColor,&quot;hsla&quot;)},s.multiplebgs=function(){return D(&quot;background:url(https://),url(https://),red url(https://)&quot;),/(url\s*\(.*?){3}/.test(j.background)},s.backgroundsize=function(){return J(&quot;backgroundSize&quot;)},s.borderimage=function(){return J(&quot;borderImage&quot;)},s.borderradius=function(){return J(&quot;borderRadius&quot;)},s.boxshadow=function(){return J(&quot;boxShadow&quot;)},s.textshadow=function(){return b.createElement(&quot;div&quot;).style.textShadow===&quot;&quot;},s.opacity=function(){return E(&quot;opacity:.55&quot;),/^0.55$/.test(j.opacity)},s.cssanimations=function(){return J(&quot;animationName&quot;)},s.csscolumns=function(){return J(&quot;columnCount&quot;)},s.cssgradients=function(){var a=&quot;background-image:&quot;,b=&quot;gradient(linear,left top,right bottom,from(#9f9),to(white));&quot;,c=&quot;linear-gradient(left top,#9f9, white);&quot;;return D((a+&quot;-webkit- &quot;.split(&quot; &quot;).join(b+a)+n.join(c+a)).slice(0,-a.length)),G(j.backgroundImage,&quot;gradient&quot;)},s.cssreflections=function(){return J(&quot;boxReflect&quot;)},s.csstransforms=function(){return!!J(&quot;transform&quot;)},s.csstransforms3d=function(){var a=!!J(&quot;perspective&quot;);return a&amp;&amp;&quot;webkitPerspective&quot;in g.style&amp;&amp;y(&quot;@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}&quot;,function(b,c){a=b.offsetLeft===9&amp;&amp;b.offsetHeight===3}),a},s.csstransitions=function(){return J(&quot;transition&quot;)},s.fontface=function(){var a;return y(&#39;@font-face {font-family:&quot;font&quot;;src:url(&quot;https://&quot;)}&#39;,function(c,d){var e=b.getElementById(&quot;smodernizr&quot;),f=e.sheet||e.styleSheet,g=f?f.cssRules&amp;&amp;f.cssRules[0]?f.cssRules[0].cssText:f.cssText||&quot;&quot;:&quot;&quot;;a=/src/i.test(g)&amp;&amp;g.indexOf(d.split(&quot; &quot;)[0])===0}),a},s.generatedcontent=function(){var a;return y([&quot;#&quot;,h,&quot;{font:0/0 a}#&quot;,h,&#39;:after{content:&quot;&#39;,l,&#39;&quot;;visibility:hidden;font:3px/1 a}&#39;].join(&quot;&quot;),function(b){a=b.offsetHeight&gt;=3}),a},s.video=function(){var a=b.createElement(&quot;video&quot;),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType(&#39;video/ogg; codecs=&quot;theora&quot;&#39;).replace(/^no$/,&quot;&quot;),c.h264=a.canPlayType(&#39;video/mp4; codecs=&quot;avc1.42E01E&quot;&#39;).replace(/^no$/,&quot;&quot;),c.webm=a.canPlayType(&#39;video/webm; codecs=&quot;vp8, vorbis&quot;&#39;).replace(/^no$/,&quot;&quot;)}catch(d){}return c},s.audio=function(){var a=b.createElement(&quot;audio&quot;),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType(&#39;audio/ogg; codecs=&quot;vorbis&quot;&#39;).replace(/^no$/,&quot;&quot;),c.mp3=a.canPlayType(&quot;audio/mpeg;&quot;).replace(/^no$/,&quot;&quot;),c.wav=a.canPlayType(&#39;audio/wav; codecs=&quot;1&quot;&#39;).replace(/^no$/,&quot;&quot;),c.m4a=(a.canPlayType(&quot;audio/x-m4a;&quot;)||a.canPlayType(&quot;audio/aac;&quot;)).replace(/^no$/,&quot;&quot;)}catch(d){}return c},s.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},s.sessionstorage=function(){try{return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}catch(a){return!1}},s.webworkers=function(){return!!a.Worker},s.applicationcache=function(){return!!a.applicationCache},s.svg=function(){return!!b.createElementNS&amp;&amp;!!b.createElementNS(r.svg,&quot;svg&quot;).createSVGRect},s.inlinesvg=function(){var a=b.createElement(&quot;div&quot;);return a.innerHTML=&quot;&lt;svg/&gt;&quot;,(a.firstChild&amp;&amp;a.firstChild.namespaceURI)==r.svg},s.smil=function(){return!!b.createElementNS&amp;&amp;/SVGAnimate/.test(m.call(b.createElementNS(r.svg,&quot;animate&quot;)))},s.svgclippaths=function(){return!!b.createElementNS&amp;&amp;/SVGClipPath/.test(m.call(b.createElementNS(r.svg,&quot;clipPath&quot;)))};for(var L in s)C(s,L)&amp;&amp;(x=L.toLowerCase(),e[x]=s[L](),v.push((e[x]?&quot;&quot;:&quot;no-&quot;)+x));return e.input||K(),e.addTest=function(a,b){if(typeof a==&quot;object&quot;)for(var d in a)C(a,d)&amp;&amp;e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b==&quot;function&quot;?b():b,typeof f!=&quot;undefined&quot;&amp;&amp;f&amp;&amp;(g.className+=&quot; &quot;+(b?&quot;&quot;:&quot;no-&quot;)+a),e[a]=b}return e},D(&quot;&quot;),i=k=null,function(a,b){function k(a,b){var c=a.createElement(&quot;p&quot;),d=a.getElementsByTagName(&quot;head&quot;)[0]||a.documentElement;return c.innerHTML=&quot;x&lt;style&gt;&quot;+b+&quot;&lt;/style&gt;&quot;,d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a==&quot;string&quot;?a.split(&quot; &quot;):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&amp;&amp;!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e&lt;g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function(&quot;h,f&quot;,&quot;return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&amp;&amp;(&quot;+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),&#39;c(&quot;&#39;+a+&#39;&quot;)&#39;})+&quot;);return n}&quot;)(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&amp;&amp;!f&amp;&amp;!c.hasCSS&amp;&amp;(c.hasCSS=!!k(a,&quot;article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}&quot;)),j||p(a,c),a}var c=a.html5||{},d=/^&lt;|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g=&quot;_html5shiv&quot;,h=0,i={},j;(function(){try{var a=b.createElement(&quot;a&quot;);a.innerHTML=&quot;&lt;xyz&gt;&lt;/xyz&gt;&quot;,f=&quot;hidden&quot;in a,j=a.childNodes.length==1||function(){b.createElement(&quot;a&quot;);var a=b.createDocumentFragment();return typeof a.cloneNode==&quot;undefined&quot;||typeof a.createDocumentFragment==&quot;undefined&quot;||typeof a.createElement==&quot;undefined&quot;}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||&quot;abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video&quot;,shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:&quot;default&quot;,shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.mq=z,e.hasEvent=A,e.testProp=function(a){return H([a])},e.testAllProps=J,e.testStyles=y,e.prefixed=function(a,b,c){return b?J(a,b,c):J(a,&quot;pfx&quot;)},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,&quot;$1$2&quot;)+(f?&quot; js &quot;+v.join(&quot; &quot;):&quot;&quot;),e}(this,this.document),function(a,b,c){function d(a){return&quot;[object Function]&quot;==o.call(a)}function e(a){return&quot;string&quot;==typeof a}function f(){}function g(a){return!a||&quot;loaded&quot;==a||&quot;complete&quot;==a||&quot;uninitialized&quot;==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){(&quot;c&quot;==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&amp;&amp;g(l.readyState)&amp;&amp;(u.r=o=1,!q&amp;&amp;h(),l.onload=l.onreadystatechange=null,b)){&quot;img&quot;!=a&amp;&amp;m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&amp;&amp;y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&amp;&amp;(r=1,y[c]=[]),&quot;object&quot;==a?l.data=c:(l.src=c,l.type=a),l.width=l.height=&quot;0&quot;,l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),&quot;img&quot;!=a&amp;&amp;(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||&quot;j&quot;,e(a)?i(&quot;c&quot;==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&amp;&amp;h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName(&quot;script&quot;)[0],o={}.toString,p=[],q=0,r=&quot;MozAppearance&quot;in l.style,s=r&amp;&amp;!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&amp;&amp;&quot;[object Opera]&quot;==o.call(a.opera),l=!!b.attachEvent&amp;&amp;!l,u=r?&quot;object&quot;:l?&quot;script&quot;:&quot;img&quot;,v=l?&quot;script&quot;:u,w=Array.isArray||function(a){return&quot;[object Array]&quot;==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&amp;&amp;(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split(&quot;!&quot;),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f&lt;d;f++)g=a[f].split(&quot;=&quot;),(e=z[g.shift()])&amp;&amp;(c=e(c,g));for(f=0;f&lt;b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(&quot;.&quot;).pop().split(&quot;?&quot;).shift(),i.bypass||(e&amp;&amp;(e=d(e)?e:e[a]||e[g]||e[a.split(&quot;/&quot;).pop().split(&quot;?&quot;)[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&amp;&amp;&quot;css&quot;==i.url.split(&quot;.&quot;).pop().split(&quot;?&quot;).shift()?&quot;c&quot;:c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&amp;&amp;f.load(function(){k(),e&amp;&amp;e(i.origUrl,h,g),j&amp;&amp;j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&amp;&amp;b++;return b}(),a)a.hasOwnProperty(n)&amp;&amp;(!c&amp;&amp;!--m&amp;&amp;(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&amp;&amp;a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&amp;&amp;l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&amp;&amp;c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i&lt;a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&amp;&amp;h(j,l);else Object(a)===a&amp;&amp;h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&amp;&amp;b.addEventListener&amp;&amp;(b.readyState=&quot;loading&quot;,b.addEventListener(&quot;DOMContentLoaded&quot;,A=function(){b.removeEventListener(&quot;DOMContentLoaded&quot;,A,0),b.readyState=&quot;complete&quot;},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement(&quot;script&quot;),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&amp;&amp;g(k.readyState)&amp;&amp;(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement(&quot;link&quot;),j,c=i?h:c||f;e.href=a,e.rel=&quot;stylesheet&quot;,e.type=&quot;text/css&quot;;for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};

$(document).ready(function() {
 
 setTimeout(function(){
  $(&#39;body&#39;).addClass(&#39;loaded&#39;);
 }, 3000);
 
});
</script> 

6. Sekarang anda dapat menyimpan template anda.

Note! Pastikan template anda sudah terdapat Jquery.js untuk membuat animasi lebih optimal.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Sekarang anda telah  Memasang Lines Animasi Preloading di Blogger, semoga artikel ini dan widget animasinya bisa bermanfaat untuk anda semua. Jika anda memiliki masalah dalam penerapan kode ini silahkan ditanyakan dibawah ini.

Semoga bermanfaat..

Membuat Efek Animasi Preloading Blog di Blogger

Membuat Efek Animasi Preloading Blog di Blogger

Membuat Efek Animasi Preloading Blog di Blogger - Setiap blogger pasti ingin mempunyai sebuah blog yang menarik dimata para pengunjung blognya, oleh karna itu tidak heran apabila setiap blogger berlomba-lomba mendesign blog mereka sedemikian rupa untuk mendapatkan hasil blog yang indah dan maksimal.

Dan pada kesempatan kali ini, saya ingin membantu anda yang ingin mempercantik tampilan blog anda, dengan menambahkan efek animasi loading pada blog anda. Efek animasi ini akan muncul setiap kali halaman blog anda dibuka. bisa dibilang ini efek preloading untuk blog anda, yang bisa membuat blog anda terkesan lebih indah.

Untuk Demo Klik Disini.

Untuk Membuat Efek Animasi Preloading Blog di Blogger.
bisa ikuti langkah-langkah dibawah ini:
  1. Masuk ke akun Blogger
  2. Pilih Template > Edit HTML
  3. Cari kode </body> dan paste kode berikut tepat diatasnya, lalu simpan template.
 <style>
#semua-tutorialku-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSfN1kVbLjxQDjXcjJ4ZlFbNA3ycyGkRSy3M9Pn3sQ7yyNNRr3j0lkNDM5T4Gjbwj87cfczPL4icgUmk6Yu_VAeq9mEyBUlaiBifvrjAryTq_aOgqXYf-TTBN6sd7nNmly9kYi9NXk86M/s200/load6.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="semua-tutorialku-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#semua-tutorialku-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script> 

Selesai. Sekarang anda sudah Membuat Animasi Efek Loading Blog di Blogger dan siap untuk digunakan. Anda bisa langsung melihat hasilnya dengan membuka halaman blog anda.

Semoga bermanfaat..