• About
  • Sitemap
  • Privacy Policy
  • Disclaimer
  • Contact
Download Tutorial Gratis ( Photoshop, Corel Draw, Blog, SEO, Desain Grafis, Template )
  • Home
  • Tutorial
    • Submenu1
    • Submenu2
  • Desain Grafis
  • Template
  • Contoh Undangan
  • Sitemap
  • SEO
  • Blog
  • Photoshop
  • Corel Draw

Home » Tutorial Blog » Tutorial Cara Membuat Gadget Widget Blogspot Terlengkap

Tutorial Cara Membuat Gadget Widget Blogspot Terlengkap


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.
membuat widget/gadget

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/AVvXsEhrAXuK4m7fIwwCT_9p4BbHNUXWVIkU7fZNH3FG7Ia6mYidHikPcbnbVTc6Ji95bDEK7RuPFQm3eIChcZWNkJjhwHuJl05x9M5RaxpZgls_6SnB_kGYGmQg-gIkk87qTR36KGJ2CP9D7CfU/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/114260774078734881680" 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%2Fpemakan.wortell&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/ravdania" class="twitter-follow-button" data-show-count="true">Follow @ravdania</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/impoint.blogspot.com">Technorati</a></li>
<li class="rss"><a href="http://impoint.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=mediablogger1', '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="mediablogger1"/>
<input name="loc" type="hidden" value="en_US"/>
   </form>
</div>
<div class="mediablogger">
   <a href="http://impoint.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.

Posted by Unknown on Saturday, April 6, 2013 - Rating: 4.5
Title : Tutorial Cara Membuat Gadget Widget Blogspot Terlengkap
Description : Tutorial cara memasang widget / gadget banyak dijelaskan oleh para bloggers . Dalam membuat widget, tidak hanya keren, cantik, menarik,...

Share to

Facebook Google+ Twitter

0 Response to "Tutorial Cara Membuat Gadget Widget Blogspot Terlengkap"

Post a Comment

Newer Post
Older Post
Home
Subscribe to: Post Comments (Atom)

Popular Posts

  • FORMAT CONTOH UNDANGAN (doc)
    Kali ini saya mencoba membuat link download berupa beberapa contoh undangan yang sering dibikin untuk acara-acara tertentu, misalnya tah...
  • Download Film Semi Gratis | Film Semi Indonesia
    Download Film Semi Gratis lainnya Di : 1. andrianacom.blogspot.com 2. sh3hack3r.blogspot.com Movie Synopsis Starting in Jakarta in...
  • Add Social Sharing/Bookmarking Widget with Cool Hover Effect
    Social sharing / bookmarking widget with Cool Gray-scale/Color hover widget to Blogger blog. i have given a beautiful sharing widget with c...
  • PreWedding dengan Efek Foto Sephia
    Pada tutorial ilmuGrafis kali ini kita akan belajar membuat efek Photo Sephia . Maaf ini buka sephia judul lagunya Sheila On7 tapi maksunya ...
  • Spooky HDR Effect
    OK Brader en Sister sudah lama saya tidak berkontribusi di Web kesayangan saya ini... :D . Pada Efek Photo dengan Photoshop kali ini s...

Labels

CONTOH UNDANGAN (doc) Desaign grafis Hardware and Software News PLUGIN PHOTOSHOP FREE Search Engine Optimization SEO SEO BLOG skripsi Software Desain Grafis Template Tips and trick Tips Komputer Tips Software Tutorial Blog Tutorial Corel Tutorial Photoshop Tutorial PHOTOSHOP GRATIS Tutorial SEO

Site Info

Copyright © 2012 Download Tutorial Gratis ( Photoshop, Corel Draw, Blog, SEO, Desain Grafis, Template ) - All Rights Reserved
Design by Mas Sugeng - Powered by Blogger