Membuat Music Player valid HTML5 dengan Playlist di Blogger

Membuat Music Player valid HTML5 dengan Playlist di Blogger

Membuat Music Player valid HTML5 dengan Playlist di Blogger - Apa kabar sobat Blogger? Udah tenang rasanya saat ini soalnya baru pulang kampung dari tepat tinggal nenek saya, selepas libur panjang lebaran tahun ini. Oia.. saya juga mau mengucapkan "Selamat Hari Raya Idul Fitri 1436 H", "Mohon Maaf Lahir & Batin".

Pada artikel pertama saya selepas Hari Raya Idul Fitri ini saya akan berbagi tutorial untuk anda yang yang suka mendengar music, karna saya akan mengajrkan anda untuk "Membuat Music Player valid HTML5 dengan Playlist di Blogger", Bagaimana apakah anda tertarik untuk mencobanya? kalau begitu langsung saja deh kita cara pembuatannya. :)

Membuat Music Player valid HTML5 dengan Playlist di Blogger
  • Pertama-tama anda harus masuk ke akun Blogger anda
  • Lalu pada Dashboard pilih tab Template > Edit HTML
  • Kemudian cari kode </head> dan paste kode berikut diatasnya.
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'/>
<link href="https://googledrive.com/host/0B0WJjcJEFNziLXFVNjE1Mms2VkU" rel="stylesheet"></link>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://googledrive.com/host/0B0WJjcJEFNziYXRYUFZEVkRNaTA" type="text/javascript"></script> 
  • Selanjutnya 'Simpan Template' anda.

Menambah Music Player valid HTML5 di Blogger
  • Selanjutnya Pilih Tata Letak > Tambah Gadget > HTML/Javascript
  • Kemudian paste kode berikut ke dalam konten box kemudian Simpan gadget.
  • Jangan lupa untuk disesuaikan Playlist Music mp3 nya. :)
<div class="mbl">
 <div class="mbl_player" id="mnplp">
  <div class="mbl_art_bg"></div>
  <img class="mbl_cover" src="" alt=""/>
  <span class="mnpl_title"></span>
  <span class="mnpl_author"></span>
  <div class="mnpl_volume_min"></div>
  <div class="mnpl_volume"></div>
  <div class="mbl_volume_max"></div>
  <div class="mnpl_toolbar">
   <div class="mnpl_tlb_prev"></div>
   <div class="mnpl_tlb_stop"></div>
   <div class="mnpl_tlb_next"></div>
   <div class="mnpl_current"></div>
   <div class="mnpl_long"></div>
   <div class="mnpl_all"></div>
  </div>
  <div class="mbl_playlist">
  </div>
 </div>
 </div>
<script type="text/javascript">
$(function(){
$('#mnplp').mnplp({
'volume': 80,
'playlist':[
{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"}
    ]
   });
  });
 </script> 

Kustomisasi:
  1. Title: Merupakan judul musik atau lagu.
  2. mfile: Ini merupakan file musik di .mp3 ekstensi.
  3. Author: Nama orang atau penyanyi musik.
  4. Cover: Sampul gambar yang muncul saat lagu diputar.
  5. Background: Gambar yang muncul di latar belakang pemutar musik.
Nah, sekarang anda telah memasang widget "Membuat Music Player valid HTML5 dengan Playlist di Blogger", Anda dapat menambah Playlist Mp3 sesuai keinginan anda yang penting ekstensi file music anda dalam bentuk .MP3
Semoga bermanfaat..

Flat UI Email Subscription Box For Blogger

Flat UI Email Subscription Box For Blogger

Flat UI Email Subscription Box For Blogger - Email Subscribe adalah salah satu widget yang awalnya disedian oleh Google FeedBurner yang bertujuan untuk memberikan pelayanan update artikel disebuah blog yang akan dikirim langsung ke alamat email yang melakukan subscribe ke blog tersebut setiap kali blog melakukan update artikel.

Jadi Subscribe Email ini memudahkan pembaca membaca artikel blog kita langsung dari akun email mereka. Sehingga menjadi lebih mudah untuk diakses oleh mereka pada subscriber email. Pada artikel sebelumnya saya juga pernah berbagi tentang subscribe box, yaitu: Clean Social Subscribe Widget for Blogger. Jika anda belum membaca artikel tersebut, silahkan anda baca juga. :)

Untuk anda yang ingin Memasang Flat UI Email Subscription Box For Blogger, Silahkan anda ikuti langkah-langkah dibawah ini dengan mudah :
  • Masuk ke Akun Blogger
  • Pilih Tata Letak > Tambah Gadget > Pilih HTML/Javascript
  • Lalu paste kode berikut dalam konten box, kemudian simpan gadget.
 <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>

<div id='byard-emailsubsocial'>
              <div class='heading'>
               Sign Up in Seconds
              </div>
                 <p>Sign up with your email address to receive hot updates straight in your inbox.</p>
             <div class='emailsub'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SemuaTutorial-ku', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
               <input type='text' name='name' placeholder='Your Name' />
               <input type='text' name='email' placeholder='Your Email' />
               <input type="hidden" value="SemuaTutorial-ku" name="uri"/>
               <input type="hidden" name="loc" value="en_US"/>                <input value="Sign Up Now!" class="button" type="submit" />

              </form>
             </div>

             </div> 

 <style type='text/css'>
     #byard-emailsubsocial {
      width: 300px;
      height: 330px;
      border: 1px solid #ddd;
        border-radius: 5px 5px 0px 0px;
     }
     #byard-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
     }
   #byard-emailsubsocial p {
    font-family: open sans;
    font-size: 13px;
    color: rgb(170, 170, 170);
    line-height: 25px;
    padding: 10px 20px 0 20px;
    margin: 0;
   }
   #byard-emailsubsocial .emailsub {
    padding: 0px 20px 10px 20px;
   }
   #byard-emailsubsocial .emailsub input {
    color: rgb(170, 170, 170);
    padding: 10px;
    margin-top: 10px;
    font-size: 15px;
    font-family: open sans;
    width: 92%;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-radius: 5px;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
   }
   #byard-emailsubsocial .emailsub input:focus {
    border-color:#F4836A;
    outline: none;
    box-shadow: 0 0 2px 1px #F4836A;
   }
   #byard-emailsubsocial .emailsub .button {
    background: #F4836A;
    color: white!important;
    border:none;
    outline: none;
    border-bottom: 3px solid #B3614E;
    transition:background .4s linear;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    font-weight: 600;
    cursor:pointer;
   }
   #byard-emailsubsocial .emailsub .button:hover{
    background: #DD7761;
   }

     </style> 

  • Silahkan ganti ID "SemuaTutorial-ku" dengan ID FeedBurner anda.
  • Selesai
Nah, sekarang anda sudah memasang  "Flat UI Email Subscription Box For Blogger". Semoga widget ini dapat bermanfaat untuk anda. Jika anda ada masalah atau pertanyaan seputar topic diatas, silahkan ajukan disini. Sampai jumpa.

Daftar Kode Nama Domain Negara di Seluruh Dunia

Daftar Kode Nama Domain Negara Seluruh Dunia

Daftar Kode Nama Domain Negara di Seluruh Dunia - Nama Domain adalah nama unik yang diberikan untuk mengidentifikasi nama jaringan komputer ataupun internet. Nama Domain berfungsi untuk mempermudah pengguna di internet pada saat melakukan akses ke server, selain juga dipakai untuk mengingat nama server yang dikunjungi tanpa harus mengenal deretan angka yang rumit yang dikenal sebagai IP address.

Domain ini juga dikenal sebagai sebuah kesatuan dari sebuah situs web seperti contohnya “jasakom.com”. Nama Domain kadang-kadang disebut pula dengan istilah URL, atau alamat website.


Nah, Berhubung pada artikel sebelumnya saya telah membagikan artikel tentang "Cara Menghentikan URL Redirection Negara Tertentu di Blogger" dan anda yang bertanya kode nama domain .UK miliki negara siapa dan saya terbesit untuk membuat artikel ini. Semoga dapat membantu anda semua.

Berikut ini daftar lengkap Kode Nama Domain Negara diSeluruh Dunia

A
.ac – Pulau Ascension *
.ad – Andorra
.ae – Uni Emirat Arab
.af – Afganistan
.ag – Antigua dan Barbuda *
.ai – Anguilla
.al – Albania
.am – Armenia *
.an – Antillen Belanda
.ao – Angola
.aq – Antartika
.ar – Argentina
.as – Samoa Amerika *
.at – Austria *
.au – Australia
.aw – Aruba
.ax – Ã…land
.az – Azerbaijan

B
.ba – Bosnia Herzegovina
.bb – Barbados
.bd – Bangladesh
.be – Belgia *
.bf – Burkina Faso
.bg – Bulgaria
.bh – Bahrain
.bi – Burundi *
.bj – Benin
.bm – Bermuda
.bn – Brunei Darussalam
.bo – Bolivia *
.br – Brasil *
.bs – Bahama *
.bt – Bhutan
.bv – Pulau Bouvet (tidak dipakai dan tidak terdaftar)
.bw – Botswana
.by – Belarus
.bz – Belize *

C
.ca – Kanada
.cc – Pulau Cocos *
.cd – Republik Demokratik Kongo (dulunya .zr – Zaire) *
.cf – Republik Afrika Tengah
.cg – Republik Kongo *
.ch – Swiss *
.ci – Côte d’Ivoire (Pantai Gading)
.ck – Kepulauan Cook *
.cl – Chili
.cm – Kamerun
.cn – Republik Rakyat Tiongkok *
.co – Kolombia
.cr – Kosta Rika
.cs – Serbia dan Montenegro (dulunya .yu – Yugoslavia; Catatan: pada tanggal 3 Juni, 2006, Montenegro mendeklarasikan kemerdekaannya, sehingga domain ini tidak dipakai lagi.) (kode domain .cs tidak dipakai, tidak ada DNS) (kode domain .cs dulunya dipakai untuk Cekoslowakia)
.cu – Kuba
.cv – Tanjung Verde
.cx – Pulau Natal *
.cy – Siprus
.cz – Republik Ceko

D
.de – Jerman
.dj – Djibouti *
.dk – Denmark *
.dm – Dominika
.do – Republik Dominika
.dz – Aljazair (Algeria)

E
.ec – Ekuador
.ee – Estonia
.eg – Mesir
.eh – Sahara Barat (tidak dipakai; tidak ada DNS)
.er – Eritrea
.es – Spanyol *
.et – Ethiopia
.eu – Uni Eropa (kode domain yang “dikhususkan” oleh ISO 3166-1)

F
.fi – Finlandia
.fj – Fiji *
.fk – Kepulauan Falkland
.fm – Federasi Mikronesia *
.fo – Kepulauan Faroe
.fr – Perancis

G
.ga – Gabon
.gb – Britania Raya (Reserved domain by IANA; deprecated – see .uk)
.gd – Grenada
.ge – Georgia
.gf – Guyana Perancis
.gg – Guernsey
.gh – Ghana
.gi – Gibraltar
.gl – Greenland *
.gm – Gambia
.gn – Guinea
.gp – Guadeloupe
.gq – Guinea Khatulistiwa
.gr – Yunani *
.gs – Georgia Selatan dan Kepulauan Sandwich Selatan *
.gt – Guatemala
.gu – Guam
.gw – Guinea Bissau
.gy – Guyana

H
.hk – Hong Kong *
.hm – Pulau Heard dan Kepulauan McDonald *
.hn – Honduras *
.hr – Kroasia
.ht – Haiti
.hu – Hongaria *

I
.id – Indonesia
.ie – Republik Irlandia
.il – Israel *
.im – Pulau Man *
.in – India *
.io – Teritorial Britania di Samudra Hindia *
.iq – Irak
.ir – Iran *
.is – Islandia
.it – Italia

J
.je – Jersey
.jm – Jamaika
.jo – Yordania
.jp – Jepang

K
.ke – Kenya
.kg – Kirgizstan
.kh – Kamboja
.ki – Kiribati
.km – Komoro
.kn – Saint Kitts dan Nevis
.kp – Korea Utara (tidak dipakai; tidak ada DNS)
.kr – Korea Selatan
.kw – Kuwait
.ky – Kepulauan Cayman
.kz – Kazakhstan *

L
.la – Laos *
.lb – Lebanon
.lc – Saint Lucia
.li – Liechtenstein *
.lk – Sri Lanka
.lr – Liberia
.ls – Lesotho
.lt – Lituania
.lu – Luxemburg
.lv – Latvia *
.ly – Libya *

M
.ma – Maroko
.mc – Monako
.md – Moldova *
.me – Montenegro
.mg – Madagaskar
.mh – Kepulauan Marshall
.mk – Republik Makedonia
.ml – Mali
.mm – Myanmar
.mn – Mongolia *
.mo – Makau
.mp – Kepulauan Mariana Utara *
.mq – Martinique
.mr – Mauritania
.ms – Montserrat *
.mt – Malta
.mu – Mauritius *
.mv – Maladewa
.mw – Malawi *
.mx – Meksiko *
.my – Malaysia
.mz – Mozambik

N
.na – Namibia *
.nc – Kaledonia Baru
.ne – Niger
.nf – Pulau Norfolk *
.ng – Nigeria
.ni – Nikaragua
.nl – Belanda * (ccTLD terdaftar pertama)
.no – Norwegia
.np – Nepal
.nr – Nauru *
.nu – Niue *
.nz – Selandia Baru *

O
.om – Oman

P
.pa – Panama
.pe – Peru
.pf – Polinesia Perancis
.pg – Papua Nugini
.ph – Filipina *
.pk – Pakistan *
.pl – Polandia *
.pm – Saint-Pierre dan Miquelon
.pn – Kepulauan Pitcairn *
.pr – Puerto Riko *
.ps – Otoritas Nasional Palestina *
.pt – Portugal *
.pw – Palau
.py – Paraguay

Q
.qa – Qatar

R
.re РR̩union
.ro – Rumania *
.rs – Serbia
.ru – Rusia *
.rw – Rwanda

S
.sa – Arab Saudi
.sb – Kepulauan Solomon *
.sc – Seychelles *
.sd – Sudan
.se – Swedia *
.sg – Singapura
.sh – Saint Helena *
.si – Slovenia
.sj – Svalbard dan Jan Mayen (tidak dipakai; tidak terdaftar)
.sk – Slowakia
.sl – Sierra Leone
.sm – San Marino *
.sn – Senegal
.so – Somalia *
.sr – Suriname *
.st – Sao Tome dan Principe *
.su – Uni Soviet (terdepresiasi; digantikan; kode domain “dipakai untuk pergantian” oleh ISO 3166-1)
.sv – El Salvador
.sy – Suriah *
.sz – Swaziland *

T
.tc – Kepulauan Turks dan Caicos
.td – Chad
.tf – Teritorial Perancis Selatan
.tg – Togo *
.th – Thailand
.tj – Tajikistan *
.tk – Tokelau *
.tl – Timor Leste (dulunya .tp) *
.tm – Turkmenistan *
.tn – Tunisia
.to – Tonga *
.tp – Timor Timur (terdepresiasi – gunakan .tl; kode domain “dipakai untuk pergantian” oleh ISO 3166-1)
.tr – Turki
.tt – Trinidad dan Tobago *
.tv – Tuvalu *
.tw – Republik China (Taiwan) *
.tz – Tanzania

U
.ua – Ukraina
.ug – Uganda *
.uk – Inggris (kode domain yang “dikhususkan” oleh ISO 3166-1) (lihat pula .gb)
.us – Amerika Serikat *
.uy – Uruguay
.uz – Uzbekistan

V
.va – Vatikan
.vc – Saint Vincent dan Grenadines *
.ve – Venezuela
.vg – Kepulauan Virgin Britania Raya *
.vi – Kepulauan Virgin Amerika Serikat
.vn – Vietnam
.vu – Vanuatu *

W
.wf – Wallis dan Futuna
.ws – Samoa (dulunya Samoa Barat) *

Y
.ye – Yaman
.yt – Mayotte
.yu – Yugoslavia (kemudian berganti nama menjadi Serbia dan Montenegro)

(kode domain secara resmi digantikan oleh .cs (lihat di atas) namun tetap dipakai; kode domain “dipakai untuk pergantian” oleh ISO 3166-1)

Z
.za – Afrika Selatan *
.zm – Zambia
.zw – Zimbabwe

Tidak bersponsor
.biz .com .edu .gov .info .int .mil .name .net .org

Bersponsor
.aero .cat .coop .jobs .mobi .museum .pro .tel .travel

Infrastruktur
.arpa .root

Startup phase
.asia

Diusulkan
.berlin .bzh .cym .gal .geo .kid .kids .mail .nyc .post .sco .web .xxx

Dihapus
.nato

Dipesan
.example .invalid .localhost .test

Pseudo-domain
.bitnet .csnet .ip .local .onion .uucp

Itulah Daftar Kode Nama Domain Negara di Seluruh Dunia yang dapat saya bagikan untuk anda semua. Jika anda memiliki pertanyaan, silahkan ajukan disini. Semoga artikel ini bisa bermanfaat untuk anda dan sampai jumpa!

Cara Menghentikan URL Redirection Negara Tertentu di Blogger

Cara Menghentikan URL Redirection Negara Tertentu di Blogger

Cara Menghentikan URL Redirection Negara Tertentu di Blogger - Blogger telah memperkenalkan pengalihan negara tertentu dari blog yang berjalan di domain .blogspot. Ini memberikan domain yang spesifik pada negara berbasis blogspot Anda berdasarkan lokasi geografis pengunjung Anda.

Misalnya jika pengunjung Anda mengunjungi blog Anda www.xyz.blogspot.com dari Pakistan maka akan mengarahkan pengunjung Anda untuk URL www.xyz.blogpost.pk ini. Jadi, Anda harus menghentikan ini karena bisa menyebabkan beberapa kerusakan serius pada peringkat pencarian Anda. Hari ini di artikel ini, saya akan menunjukkan cara untuk menghentikan negara redirection URL tertentu di blogger.

Mengapa Berhenti Negara Redirection Tertentu?
Mungkin untuk anda yang bertanya bahwa mengapa Anda harus berhenti negara redirection spesifik blog Anda?. Jadi, saya akan menjelaskan hal itu untuk kalian. Sebenarnya, ketika blog Anda mengarahkan pada URL berdasarkan negara tersebut maka hal itu mempengaruhi Alexa Rank dan Halaman Juice Ranking blog Anda sebagaimana URL diarahkan akan dianggap sebagai URL baru. Jadi, Anda disarankan untuk menghentikan negara redirection khusus untuk mengamankan Alexa Juice Rank dan Page Rank blog Anda.

Cara Menghentikan URL Redirection Negara Tertentu di Blogger
  1. Masuk ke Akun Blogger
  2. Pilih Template > Edit HTML
  3. Lalu cari kode </head> dan paste kode berikut tepat diatasnya.
<script type='text/javascript'>
      var blog = document.location.hostname;
      var slug = document.location.pathname;
      var ctld = blog.substr(blog.lastIndexOf("."));
      if (ctld != ".com") {
        var ncr = "http://" + blog.substr(0, blog.indexOf("."));
        ncr += ".blogspot.com/ncr" + slug;
        window.location.replace(ncr);
      }
</script> 

Atau Gunakan yang ini agar lebih Siip:
<script type='text/javascript'>
var str=window.location.href.toString();if(&quot;-1&quot;==str.indexOf(&quot;.com/&quot;)){var str1=str.substring(str.lastIndexOf(&quot;.blogspot.&quot;));if(&quot;-1&quot;==str1.indexOf(&quot;/&quot;))var str2=str1;else var str2=str1.substring(0,str1.indexOf(&quot;/&quot;)+1);window.location.href=window.location.href.toString().replace(str2,&quot;.blogspot.com/ncr/&quot;)}
</script> 
Selanjutnya anda dapat menyimpan Template anda dengan mengklik 'Save Template'.

Semoga artikel kali ini bermanfaat bagi anda yang sedang mencari cara untuk Menghentikan URL Redirection dari Negara Tertentu di Blogger. Jika anda memiliki masalah dengan artikel diatas, anda dapat bertanya dikotak komentar, sampai jumpa.

Semoga bermanfaat!

Cara Menambah Border Image di Blogger

Cara Menambah Border Image di Blogger
Cara Menambah Border Image di Blogger - Mungkin anda sudah pernah melihat foto dibagian postingan blog yang memiliki garis tepi atau dikelilingi sebuah garis, nah itu namanya border yang sengaja ditambah oleh admin blog untuk image agar membuat gambar dipostingannya menjadi lebih manrik.

Saya juga menggunakan Image Border ini dipotingan image saya, untuk membuat tampilan gambar saya menjadi lebih menarik untuk dilihat. Dan yang pasti tips ini tidak akan membuat loading blog anda menjadi berat, karna disini kita hanya menggunakan script css.

Baiklan, untuk anda yang ingin mencoba memasang Border Image, silahkan ikuti langkah sederhana dibawah ini untuk menggunakannya:
  • Masuk ke Akun Blogger
  • Pilih Template > Edit HTML
  • Cari kode </b:skin> dan paste kode berikut tepat diatasa kode tsb.
.post img {

border:5px solid #d2d2d2;

padding:2px;

} 

Anda juga dapat mengubah tampilan Border Image sesuai keinginan anda dengan kode berikut:
  1. solid: Defines a solid border
  2. dotted: Defines a dotted border
  3. dashed: Defines a dashed border
  4. double: Defines two borders. The width of the two borders are the same as the border-width value
  5. groove: Defines a 3D grooved border. The effect depends on the border-color value
  6. ridge: Defines a 3D ridged border. The effect depends on the border-color value
  7. inset: Defines a 3D inset border. The effect depends on the border-color value
  8. outset: Defines a 3D outset border. The effect depends on the border-color value

Setelah anda mengatur kode css dan sudah meletakkan kode css dengan benar, sekarang anda dapat menyimpan Template anda. Dan anda anda dapat melihat hasilnya di gambar postingan anda.

Sekian untuk artikel kali, semoga artikel singkat dan sederhana ini bisa bermanfaat untuk anda. Sampai jumpa..

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(http://2.bp.blogspot.com/-t5BPiq15e-0/UW4wQDK9rhI/AAAAAAAAEbA/8-8-6I8Y0fA/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(http://3.bp.blogspot.com/-ZHFVbaJTCnk/UW4wQAhaZRI/AAAAAAAAEa8/twbpOZTGEIk/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..

Cara Hosting Javascript Gratis di yourjavascript.com

Cara Hosting Javascript Gratis di yourjavascript.com

Cara Hosting Javascript Gratis di yourjavascript.com - Halo sobat Tutorialku, Apa kabar? tidak terasa saat ini kita sudah memasuki hari-hari terakhir dalam Bulan Ramadhan tahun 2015 kali ini, semoga kita bisa mencapai ke Hari Raya Idul Fitri, ya. Dan menjadi orang yang lebih baik lagi untuk ke depannya nanti.

Pada kesempatan kali ini saya akan berbagi tips bagaimana cara hosting gratis script javascript yang kita miliki di web yourjavascript.com. Javascript adalah salah satu bahasa pemprogramman web yang pasti dan banyak digunakan oleh semua website, baik itu website personal maupun non-personal. Karna semua website pasti menggunakan script Javascript untuk membangun website yang lebih dinamis dan interaktif kepada user. Jadi, sebagai seorang Blogger saya rasa anda sudah tidak asing lagi dengan istilah javascript ini.

Apa keuntungan hosting javascript di yourjavascript.com?
bila kita bicara masalah keuntungan hosting di yourjavascript.com, diantaranya yaitu anda tidak perlu untuk melakukan registrasi akun di yourjavascript.com, dan jika anda ingin mengupload javacsript disana tidak dipungut biaya alias gratis. selain itu juga cara kerjanya pun tidak sulit untuk kita melakukan hosting javascript di situs yourjavascript.com.

Bagaimana Cara Hosting Javacsript di Yourjavascript.com?
  • Silahkan anda mengunjungi situsnya di yourjavascript.com
  • Maka anda akan langsung berhadapan dengan form Upload kode Javascript anda.
  • Selanjutnya untuk mengupload kode Javascript anda, silahkan klik 'Browse..' untuk mencari kode javascript dikomputer yang ingin anda upload.
  • Selanjutnya masukkan alamat email anda dibagian 'Your Email', alamat email ini digunakan untuk menerima url kode javascript kita bila sudah berhasil diupload.
  • Lalu masukkan kode Verification angka dengan benar kemudian Klik 'Upload'. kira-kira hasilnya seperti gambar berikut:
Cara Hosting Javascript Gratis di yourjavascript.com
  • Setelah anda mengklik 'upload', tunggu beberapa saat hingga muncul pemberitahuan seperti dibawah ini, itu artinya proses upload selesai dan silahkan anda membuka akun email anda untuk melihat URL kode javascript anda.
Cara Hosting Javascript Gratis di yourjavascript.com

Nah, sekarang anda dapat menggunakan kode javascript anda yang telah dihosting dengan URL yang anda dapat tadi. Anda bisa meletakkan kode javascript tersebut sesuaikeinginan dan kebutuhan anda.

Saya rasa itu saja unutk artikel kali ini tentang Cara Hosting Javascript Gratis di yourjavascript.com, apabila anda ada masalah atau hal yang ingin ditanyakan seputar tips diatas silahkan ajukan dibawah ini. Sampai jumpa dan 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..

Memasang Dotted Animasi Preloading di Blogger

Memasang Dotted Animasi Preloading di Blogger

Memasang Dotted Animasi Preloading di Blogger - Setelah pada artikel sebelumnya saya juga pernah berbagi Animasi Preloading Page untuk blogger yaitu: Memasang Efek Loading Page Youtube di Blog dan Memasang Animasi Preloading di Blogger. Sebenarnya artikel ini fungsinya sama dengan dua artikel sebelumnya yaitu untuk animasi preloading page di blog, Hanya bedanya dari segi penampilannya saja.

Pada kesempatan kali ini, saya juga ingin membagikan Animasi Loading Page kembali untuk anda yang suka mengotak-atik tampilan blog anda, supaya menjadi lebih menarik lagi. Animasi kali ini memiliki tampilan 4 buah titik yang cukup besar (Dotted) yang memiliki warna-warni yang bergerak.

Untuk Demo, Silahkan klik disini. (Jika masih menggunakan).

Untuk anda yang ingin Memasang Dotted Animasi Preloading di Blogger, silahkan anda ikuti langkah-langkahnya dibawah ini:
  1. Masuk ke akun Blogger
  2. Pilih Template > Edit HTML
  3. Cari kode <body> dan paste kode berikut ini tepat dibawah kode <body> tsb.
 <!-- LOADING BLOG PRELOADING -->
 <div id='loader'>
<div class='balls'/>
<div class='balls'/>
<div class='balls'/>
<div class='balls'/>
</div>
    <script type='text/javascript'>
        $(window).load(function () {
            setTimeout(function () {
                $(&quot;.balls&quot;).fadeOut(&quot;slow&quot;);
                setTimeout(function () {
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
                }, 1000)
            }, 1000)
        });
    </script>
<style>
#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#22475E;z-index:1000}.balls{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}.balls:nth-child(1){background-color:#FF5460;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(2){background-color:#FF9D84;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(3){background-color:#F0E797;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(4){background-color:#75B08A;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}@keyframes move{0%{left:0%}100%{left:100%}}</style>
<!-- END PRELOADING --> 

Setelah anda menambahkan kode diatas, sekarang anda dapat menyimpan template anda, dan anda sudah bisa melihat hasil Animasi Preloading Page diblog anda. Semoga blog anda menjadi lebih menarik dan lebih cantik.

Jangan lupa komentarnya! :)
Semoga bermanfaat..

Clean Social Subscribe Widget for Blogger

Clean Social Subscribe Widget for Blogger

Clean Social Subscribe Widget for Blogger - Subscribe Widget adalah salah satu widget yang banyak digunakan oleh para blogger untuk memberikan pelayanan update postingan kepada pengunjung yang ingin berlangganan artikel dari blog langsung dikirim ke alamat email pelanggang dengan bantuan feedburner google. Layanan ini memudahkan pelanggan untuk mengupdate artikel yang kita tulis diblog kita, sehingga pelanggan tinggal membaca artikel kita langsung dikotak masuk email mereka.

Nah, pada kesempatan kali ini, saya akan berbagi sedikit tips cara membuat form Subscribe yang menarik untuk anda. Selain kotak Subscribe, untuk berlangganan lewat email, widget ini juga dilengkapi dengan sosial media seperti Facebook Like, dan Twitter Follower. Jadi, menurut saya Widget Clean Social Subscribe ini sangat PAS untuk dipasang dibagian akhir postingan anda, selain memudahkan pengunjung untuk berlangganan artikel, pengunjung juga bisa mengikuti fanspage facebook kita dan follow akun twitter dengan mudah.

Untuk demo bisa dilihat dibawah ini:

Untuk anda yang ingin memasang Clean Social Subscribe Widget for Blogger, anda bisa mengikuti langkah-langkah sederhananya dibawah ini:
  1. Masuk Ke Akun Blogger
  2. Pilih Template > Edit HTML
  3. Kemudian cari kode <data:post.body/> lalu paste kode dibawah ini tepat dibawah kode tersebut.
Note! Mungkin anda akan menemukan lebih dari satu kode <data:post.body/>, Maka pastikan anda meletakkan kode dibawah ini pada kode <data:post.body/> yang tepat.
 <section class="newsletter">
<h2>
Subscribe for new posts ?
</h2>
<div id="form-newsletter">
<div class="social facebook">
<a href="https://www.facebook.com/semua.tutorialku" target="_blank">
      <img src="http://1.bp.blogspot.com/-HiD7bFwl-fM/U3nB1ozGbKI/AAAAAAAACb0/5_nqyCGPN8Q/s1600/nl-facebook@2x.png" />
    </a>
    <iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fsemua.tutorialku&amp;width=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=519648428126767&amp;locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">
    </iframe>
  </div>
<div class="social twitter">
<a href="https://twitter.com/RamaDony96" target="_blank">
      <img src="http://2.bp.blogspot.com/-NPqgpxxxV1s/U3nB1GvOtwI/AAAAAAAACbw/CmH7ymTRpR4/s1600/nl-twitter@2x.png" />
    </a>
    <iframe allowtransparency="true" class="social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=RamaDony96&amp;show_count=false&amp;show_screen_name=false&amp;size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button">
    </iframe>
    <script>
      !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
        if(!d.getElementById(id)){
          js=d.createElement(s);
          js.id=id;
          js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
    </script>
  </div>
<div class="newsletter-form">
<fieldset>
<h2>
       Get all posts directly in your mail.
      </h2>
<div class="fields">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=Semua Tutorial-ku', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" placeholder="Enter Your Email here.." />
          <input name="uri" type="hidden" value="Semua Tutorial-ku" />
          <input name="loc" type="hidden" value="en_US" />
          <input class="subscribe" name="commit" type="submit" value="Subscribe" />
        </form>
</div>
</fieldset>
</div>
</div>
</section>
<style>
.newsletter{text-align:center;margin:20px 0;}
.newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}
.newsletter .social{padding-top:20%;width:20%;float:left;position:relative}
.newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
.newsletter:before,.newsletter:after{content:&quot; &quot;;display:table}
.newsletter:after{clear:both}
.newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
.newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}
.newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}
.newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
.newsletter .social a:hover img{transform:scale(1.1)}
.newsletter .social .social-box{bottom:20px;left:50%;position:absolute}
.newsletter .social .social-box.fb-like{margin-left:-45px}
.newsletter .social .social-box.twitter-follow-button{margin-left:-30px}
.newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
.newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}
.newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
.newsletter .newsletter-form fieldset .fields{position:relative}
.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10px;transition:all ease 0.6s;}
.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
</style>
<script type="text/JavaScript">
fontsize = function () {
    var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width
    $(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);
};
$(window).resize(fontsize);
$(document).ready(fontsize);
</script> 

Konfigurasi! Setelah anda menambah kode diatas dengan benar, selanjutnya anda tinggal mengganti ID Fanspage Facebook, ID Twitter dan ID FeedBurner dengan ID yang anda miliki. Jika sudah selesai, Simpan Template blog anda.

Sekarang telah memasang Clean Social Subscribe Widget for Blogger diblog anda, semoga widget ini dapat berjalan dengan baik dan terlihat sempurna diblog anda, ya.
Semoga bermanfaat..