> > Buat Widget Side Bar Feed Rss, Email, Twitter dan Facebook di Blog

Buat Widget Side Bar Feed Rss, Email, Twitter dan Facebook di Blog

Posted on Rabu, 18 Juli 2012 by do it your self


Way2Blogging’s Social Subscription Widget for Blogger / Blogspot Preview
Tentu widget Buat Widget Side Bar Feed Rss, Email, Twitter dan Facebook di Blog sangat menarik buat Blog Anda, kami disini menemukan widget ini dari hasil pencarian yang kami temukan dan memformat kembali ke versi yang kami edit.

Langkah Pembuatan :

  1. Buka akun Blog Anda
  2. Masuk ke menu Template >> Procced >> centang 'Expand Template Widget'
  3. Cari kode ]]></b:skin> dan masukkan kode dibawah ini tepat diatas kode ]]></b:skin>
    @import url("http://fonts.googleapis.com/css?family=Oswald&amp;text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20"); .w2bOldSocial ul { font-family: 'Oswald', sans-serif; margin: 15px 0; overflow: hidden;}.w2bOldSocial ul li { float: left; width: 90px; padding: 0 0 0 55px !important; margin: 0 0 0 5px !important; line-height: 48px !important;}.w2bOldSocial ul li a { font-size: 20px !important; text-decoration:none; padding:0 !important; margin:0 !important; text-decoration:none;}.w2bOldSocial ul li a:hover { text-decoration:underline;}.w2bOldSocial ul li.w2brss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7JkjGuOOmlWpdYIgBWIiOv-vLJIkPk_wHQ6bmD7RmIDHZlgP9a_vy_saWbf7V8TKwV8FFBOTp-UszQ02ffWDAdh-pw7i1RszSuY6UkENZZKc-Pa8nNEWokTVcyJROSrPpJQdMrFuMLpV9/s48/RSS.png") no-repeat scroll left center transparent !important;}.w2bOldSocial ul li.w2bmail { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-yejmstANLEeVDCrroWh7vKhHSC6_SJVbXkViLvHXUP9J1Ym_o-bpEhoxiEkDMhps_DFr9Xj5pkNXfAgqGGsy6LuC1kxBX7VidYBXPnw0CdZGN8IAMuQDqrfwiOOw5VYl7Pspp6NapR-l/s48/Mail.png") no-repeat scroll left center transparent !important;}.w2bOldSocial ul li.w2btwitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-mj-E2d0kvDqqbgQIGkLvpIsXjnTQDYDr2WRvUTUToioFpBRe1ZmCutw4AoKZbxE-avQNadN8pbNbp_TET54nlwE5NPo4lZFxPL53S38FvS2b7DwVgu5LWAF4V7c506K4dcCvEwEjKqcw/s48/Twitter2.png") no-repeat scroll left center transparent !important;}.w2bOldSocial ul li.w2bfacebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY2fErsA6oSjC4jKqtfyJ_nqR7miMZULpa6G5Om8-J1h3YM93OQjvAcoU9OjuMxMBkEKZaHcF4493DluwkQsblTQ3mesk54jqA0aQFyUQxVoFvR-VTYv0la_qMn2Xbl3bdhQV23uc9nC-f/s48/Facebook.png") no-repeat scroll left center transparent !important;}#w2bEmailsub { display: block; clear: both; margin: 10px 0;}form.w2bEmailform { margin: 20px 0 0; display: block; clear: both;}.emailText { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPx80r0Hj2erGqKxR_XTEAwpz0yqWSj_mgE7LcytRi7B8Gj9TJxPM7uAPgQ1c6lv-FfKROuDqh-3dD4bEql9_NoS7NGRUJB0tBbw5OuTYDK-QUvvik2HJ-CS-AqTkc_QPCWqWXvcpROpWx/s28/w2b-mail.png") no-repeat scroll 4px center transparent; padding: 7px 15px 7px 35px; color: #444; font-weight: bold; text-decoration: none; border: 1px solid #D3D3D3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 1px 2px #CCC inset; -moz-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset;}.emailButton { color: #444; font-weight: bold; text-decoration: none; padding: 6px 15px; border: 1px solid #D3D3D3; cursor: pointer; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #fbfbfb; background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 ); background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);}
  4. Save dan tidak ada perubahan pada script diatas.
  5. Masuk ke menu Layout >> Add Gadget >> Pilih menu HTML/JavaScript dan masukkan kode dibawah ini <div class="w2bOldSocial"> <ul> <li class="D-CopyRSS"><a href="http://feeds.feedburner.com/blogspot/frUpz">RSS</a></li> <li class="D-Copy Email"><a href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/frUpz" >Email</a></li> <li class="D-Copy Twitter"><a href="http://twitter.com/#!/DCopy_Blog">Twitter</a></li> <li class="D-Copy Facebook"><a href="https://www.facebook.com/pages/D-Copy-Blogs/149162205219777">Facebook</a></li> </ul> </div> <div id="w2bEmailsub"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/frUpz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform"> <input type="hidden" value="Way2blogging" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailText" /> <input type="submit" class="emailButton" value="SignUp" title='' /> </form> </div>
  6. Lakukan perubahan pada Script yang diberi huruf yang ditebali (BOLD)
  7. Simpan.

Artikel Terkait


Category Article

What's on Your Mind...