.
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
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.
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%2F
511635435549312&send=false&layout=standard&width=280&show_faces=true&action=like&colorscheme=light&font=arial&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 :
Selamat berjuang... salam bloger...
