Friday, August 17, 2012

Widget RSS Unik


Dalam posting ini saya akan menunjukkan cara untuk menambahkan widget unik untuk blogger blog.
Seperti yang Anda lihat dari angka itu berisi link ke halaman fan Facebook, Google + halaman danmengikuti twitter tombol, RSS dan yang paling penting sebuah forum langganan yang menarik yang akan lebih meningkatkan jumlah daftar pelanggan. Kami menggunakan CSS dan jQuery untuk memperbaiki penampilan widget ini.

Cara memasang Widget ini ke blog anda .

Login ke akun Blogger anda
Klik Rancangan
Klik Tambahkan Widget
Lalu pilih HTML/Javascript
Masukkan kode di bawah ini di dalam HTML/Javascript

<style type="text/css">.mdbar{width:300px;float:left;background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIWch2SOgwIACnAPOU4lILQX-9iTTFteyunlgga5w8dNk2vamuwomWgBUWaAt_0YzYlW8vhkSpn6nJXYmRznw6cNQSvnw6q_pOGFXrR2cK7yFRGhsaDpy4_8-bwt8lIJy-wCwq9h61yE63/s1600/%5Bwww.gj37765.blogspot.com%5Dsidebartop.gif) top no-repeat;margin:0 0 10px;padding:10px;border:1px solid #DDD;}.mdbar .md-credit{}.mdbar .md-credit a{float:right;font-size:10px;font-weight:bold;text-shadow:1px 1px white;color:#1E598E;text-decoration:none;}.mdbar h2{background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIXifuNdqGTzmMZK7ErokMsMgQVJSK4pfg0_89Mo_Jdg2sChwXqX69kAgo3X3rRclHmTLdP48GbgIi51JieiiHCotzUEPJY9xRFoHYnCICSf8y2hmh5i8xwYmdldgaN2nH4CxqQGpW5gLc/s1600/%255Bwww.gj37765.blogspot.com%255DSUBSCRIBE.gif) no-repeat;height:50px;margin:0px 0 0px 0;padding:0px 20px 0px 0px;font-size:0px;font-family:Sans-serif, Arial, Helvetica;font-weight:bold;text-transform:uppercase;color:#ffffff;text-shadow:0 1px 0 #fff;}.mdbar .count{color:#F17C18;font-size:14px;font-weight:bold;font-family:Helvetica, Arial;height:40px;line-height:40px;vertical-align:middle;width:310px;padding:0 0px 0 4px;margin:0;}.mdbar .count span.bigcount{color:#F17C18;font-size:24px;font-family:Helvetica, Arial;line-height:39px;vertical-align:middle;margin:0px;padding:10px 0px 0px 0;}.mdbar .subicons{border-bottom:1px solid #e6e6e6;margin:0px 0 0px 0;float:left;width:300px;font-family:Helvetica, Arial;font-size:12px;}.mdbar .subicons a{text-decoration:none;color:#333333;}.mdbar .subicons a:hover{text-decoration:underline;color:#333333;}.mdbar .subicons .rssicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF_r7AZqbDiScRbPDjxNQR8kNmCOUoL-sgQBXNkohpykQmFr0h-nLZcohZF68GAKukl_QxcQQg5jVviLeHPz298o4bWF4yG9aSMXfS9q_Y0msqHn6l7qJ0KrguJ2cEVuJDPEtiZTUjXgMT/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px 5px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.mdbar .subicons .googleicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF_r7AZqbDiScRbPDjxNQR8kNmCOUoL-sgQBXNkohpykQmFr0h-nLZcohZF68GAKukl_QxcQQg5jVviLeHPz298o4bWF4yG9aSMXfS9q_Y0msqHn6l7qJ0KrguJ2cEVuJDPEtiZTUjXgMT/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -37px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.mdbar .subicons .fbicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF_r7AZqbDiScRbPDjxNQR8kNmCOUoL-sgQBXNkohpykQmFr0h-nLZcohZF68GAKukl_QxcQQg5jVviLeHPz298o4bWF4yG9aSMXfS9q_Y0msqHn6l7qJ0KrguJ2cEVuJDPEtiZTUjXgMT/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -79px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.mdbar .subicons .twittericon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF_r7AZqbDiScRbPDjxNQR8kNmCOUoL-sgQBXNkohpykQmFr0h-nLZcohZF68GAKukl_QxcQQg5jVviLeHPz298o4bWF4yG9aSMXfS9q_Y0msqHn6l7qJ0KrguJ2cEVuJDPEtiZTUjXgMT/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -121px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.mdbar .emailsub{border-bottom:0px solid #e6e6e6;padding:15px 0 0px 0;float:left;width:100%;font-family:Helvetica, Arial;}.mdbar .emailsub .emailicon{background:url(http://www.fordfarmhouse.com/images/email.png) no-repeat 0 2px;float:left;padding:0px 15px 0px 50px;margin:0 0 0 5px;width:300px;line-height:20px;vertical-align:middle;font-size:14px;color:#333;}.mdbar .emailsub .emailupdatesform{margin:15px 0 5px 5px;width:300px;float:left;}.mdbar .emailsub .emailupdatesform input.emailupdatesinput{background:#fff !important;float:left;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.mdbar .emailsub .emailupdatesform input.joinemailupdates{/*linear-gradient*/background:-webkit-gradient(linear,left top,left bottom,color-stop(#F9EAD4,0),color-stop(#F9780E,1));background:-webkit-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-moz-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-o-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#F9780E));border:1px solid #F9780E;text-transform:none;font:bold 12px arial;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;}</style><div class="mdbar"><h2 class='title'>Subscribe Now!</h2><div class="count"><span class="bigcount"><a rel="nofollow" href="http://feeds.feedburner.com/_deejayHan_"><img style="border:0" alt="" src="http://feeds.feedburner.com/%7Efc/_deejayHan_?bg=F2F2F2&amp;fg=666&amp;anim=1" height="26" width="88" /></a> </span>Learn Free Pro Tricks daily </div><div class="subicons"><div class="rssicon">&nbsp;<a rel="nofollow" href="http://feeds.feedburner.com/_deejayHan_" target="_blank">  RSS</a></div><div class="googleicon">&nbsp;<a href="https://plus.google.com/u/0/101171096978172622292" rel="author" target="_blank"> G+</a></div><div class="fbicon"> &nbsp;<a href="https://www.facebook.com/Bloger-Newbie" target="_blank" rel="nofollow">FB</a></div><div class="twittericon">&nbsp;<a href="https://www.twitter.com/a_dechandra" target="_blank" rel="nofollow">Twitter</a></div></div><div class="emailsub"><div class="emailicon"><p style=" width:270px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial;  padding:0; margin:0;">Receive Our All Updates  In Your Inbox by &nbsp; &nbsp; submitting your Email ID below.</p></div><div class="emailupdatesform"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogerseonewbie', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="blogerseonewbie" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form><span class="md-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://blogerseonewbie.blogspot.com" target="_blank" >Blogger Widgets &#62;&#62;</a></span></div></div> </div>

Lalu Klik Simpan / Save

Keterangan :
-  feed_bloger_newbie  adalah Feedburner saya , anda ganti dengan feedburner anda.
101171096978172622292  adalah profil GooglePlus saya , maka anda ganti dengan profil GooglePlus anda
Bloger-Newbie adalah Profil fan page facebook saya , anda ganti dengan profil fan page facebook anda 
a_dechandra  adalah profil twitter saya , anda ganti dengan twitter anda.

Selamat mencoba, Semoga bermanfaat.

No comments:

Post a Comment