Membuat Gadget Widget Blogspot Terlengkap

kevinservis WIDGET 26 Mar 2013

Tutorial cara memasang widget / gadget banyak dijelaskan oleh para bloggers. Dalam membuat widget, tidak hanya keren, cantik, menarik, simple, dan terlengkap yang dibutuhkan. Kita memerlukan beberapa faktor penting seperti posisi penempatan widget, fungsi dari widget tersebut, dan script html yang digunakan.

Agar gadget blog yang kita pasang jauh lebih optimal kita dapat memperkecil ruang untuk setiap widget tersebut dengan baik. Bukan hanya dari segi ruang, tetapi juga dari susunan script HTML/Javascript , CSS, JQuery dan lainnya yang kita gunakan.

Subscribe Widget Blogspot di Btemplate yang sangat elegan, cantik, dan keren tentu akan menarik untuk anda seperti terlihat pada gambar diatas. Bagaimana cara pembuatan dan pemasangannya? Mari ikuti, tutorial membuat widget blogspot berikut ini.

Membuat Gadget/Widget Blogspot Beautifull :
1. Login ke Blogger.com
2. Masuk ke bagian Layout / Design Rancangan
3. Pilih posisi gadget yang ingin anda tempatkan, pilih tambah widget.
4. Kemudian pilih HTML/Javascript.
5. Copy kode di bawah ini, dan masukkan di kotak tersebut. Dan beri Nama Gadget tersebut (kosong tidak apa).

<style type="text/css">
/*<!CDATA[*/
#mediablogger{width:300px;margin:auto;padding:0;}
.mediablogger-googleplus {height: 57px;}
.mediablogger-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.mediablogger-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.mediablogger-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.mediablogger-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.mediablogger-twitter a.twitter-follow-button {display: block;}
.mediablogger-twitter iframe {margin: 9px 11px;}
.mediablogger-sociallinks {background-color: #d8e6eb;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 10px 11px;overflow: hidden;}
.mediablogger-sociallinks a {text-shadow: 1px 1px white;}
.mediablogger-sociallinks .mediablogger-social {list-style: none;overflow: hidden;margin: 0 !important;padding: 0 !important;}
.mediablogger-sociallinks .mediablogger-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivR6wBiYlHqclt09pRSnIBQ248Q0tbXyZHU56IxSGVKGua2pD49EX9LitFKupMGOG4Zb85mPE6K2HTQmXjh3Lz2K9WQx4EskTupFUboaPpYxLXXzcw5wFJNRWwxpBcllw1OkeqYA_AHFD3/s1600/w2b_socialsprite.png) no-repeat;font-size: 12px;}
.mediablogger-sociallinks .mediablogger-social li a {display: block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
.mediablogger-sociallinks .mediablogger-social li a:hover {text-decoration: underline;}
.mediablogger-sociallinks .mediablogger-social li.technorati {background-position: 0 -180px !important;}
.mediablogger-sociallinks .mediablogger-social li.rss {background-position: 0 -240px !important;}
.mediablogger-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.mediablogger-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.mediablogger-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.mediablogger-emailbox input.emailu:focus {color: #333;}
.mediablogger-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.mediablogger-emailbox input.submitu:hover {text-decoration: none;}
.w2bOrange{border:1px solid #E08121 ;text-shadow:1px 1px 0 #E08121;background: #f79d4a;background: -moz-linear-gradient(top, #f79d4a 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f79d4a), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -o-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: linear-gradient(top, #f79d4a 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79d4a', endColorstr='#ef871f',GradientType=0 );}
.w2bOrange:hover{background: #f4b67c;background: -moz-linear-gradient(top, #f4b67c 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4b67c), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -o-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: linear-gradient(top, #f4b67c 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4b67c', endColorstr='#ef871f',GradientType=0 );}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.mediablogger a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>
    <div id="mediablogger">
<div class="mediablogger-googleplus">
   <script type="text/javascript">
/*<![CDATA[*/
window.___gcfg = {lang: 'en'};
(function(){
   var po = document.createElement("script");
   po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
   var s = document.getElementsByTagName("script")[0];
   s.parentNode.insertBefore(po, s);
})();
/*]]>*/
   </script>
   <div class="g-plus" data-href="https://plus.google.com/106198054042140408383" data-width="300" data-height="69" data-theme="light"></div>
</div>
<div class="mediablogger-facebook">
   <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2F511635435549312&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:66px;" allowtransparency="true"></iframe>
</div>
<div class="mediablogger-gplusone">
   <script type="text/javascript">/*<![CDATA[*/
     (function() {
var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
     })();/*]]>*/
   </script>
   <div class="g-plusone" data-size="medium" data-href="http://impoint.blogspot.com/"></div>
   <span>Recommend on Google</span>
</div>
<div class="mediablogger-twitter">
   <a href="https://twitter.com/isbernendi" class="twitter-follow-button" data-show-count="true">Follow @isbernendi</a>
   <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
</div>
<div class="mediablogger-sociallinks">
   <ul class="mediablogger-social">
<li class="technorati"><a href="http://technorati.com/blogs/kevinservis.blogspot.com">Technorati</a></li>
<li class="rss"><a href="http://kevinservis.blogspot.com/feeds/posts/default">RSS</a></li>
   </ul>
</div>
<div class="mediablogger-emailbox">
   <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=http://kevinservis.blogspot.com/feeds/posts/defaul', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
   <tr>
<td>
   <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
</td>
<td width="64px">
   <input class="submitu w2bOrange" type="submit" value="Subscribe"/>
</td>
   </tr>
</table>
<input name="uri" type="hidden" value="http://kevinservis.blogspot.com/feeds/posts/defaul"/>
<input name="loc" type="hidden" value="en_US"/>
   </form>
</div>
<div class="mediablogger">
   <a href="http://kevinservis.blogspot.com/">Get this Gadget</a>
</div>
    </div>

6. Ganti kode yang diberi warna dengan keterangan sebagai berikut :

• Ganti kode warna merah dengan ID Google Plus anda.
• Kode warna biru : Ganti dengan ID Facebook anda.
• Kode warna hijau : Ubah dengan nama akun twitter anda.
• Kode warna biru tua : Ubah dengan url blog anda.
• Ganti kode warna orang : dengan ID Feedburner Google anda.

Dengan memaksimalkan tempat, tentu akan menghemat elemen sidebar, footer, header ,body dan lainnya sesuai dengan pengaturan di blog / website anda. 

Selamat berjuang... salam bloger...