Widget Link Media Sosial plus Kotak Berlangganan (Subscribe/Newsletter) untuk Blogger
KODE widget berikut ini menggabungkan ikon & link media sosial dengan kotak berlangganan (subscription box/email newsletter/follow by email).
Tampilannya simple, bersih, tapi keren. Ikon dan link medsosnya adalah RSS Feedburner, Google Plus, serta dua media sosial terpopuler --Facebook dan Twitter.
CB juga pasang, namun menghilangkan ikon link medsosnya karena sudah ada di navigasi menu di atas header.
Anda juga bisa memilih jenis Kotak Berlangganan plus Media Sosial lainnya.
Penampakannya seperti di gambar ilustrasi di atas. Berikut ini cara memasangnya, tidak usah Edit HTML, cukup di Layout/Tata Letak blogger Anda.
Cara Pasang Widget Link Media Sosial + Kotak Berlangganan
1. Layout > Add a Gadget > HTML/JavaScript2. Judul Boleh Dikosongkan, Boleh juga diisi, misalnya: JOIN & FOLLOW ME!
3. Copas kode berikut ini ke kolom Content:
<style>
div.subscribe{width:100%; padding:15px 0; height:50px}
#bor-social{ background: #FFFFFF; border: 1px solid #E6E6E6; margin: 0 0 20px;}
.subscribe{ border-bottom: 1px solid #E6E6E6; padding: 15px 0;}
.subscribe li a{display: block; float: left; line-height: 1.3; margin: 0 2px 0 0; padding: 38px 0 0 2px; width: 64px; text-align:center; color: #777777; font-size: 11px;}
.subscribe ul{list-style:none;}
.subscribe li{margin:0 0 0 15px}
.subscribe a{padding:40px 11px 0px 0px; display: block;}
.subscribe a:hover {opacity:0.8;}
#subscribe-icon li{font-size: 11px; margin: 0 2px 5px 2px; width: 52px; text-align: center;height: 42px;display:inline;float:left;}
.subscribe .sub-google a{background: url(http://1.bp.blogspot.com/-lC9AgvCg208/UxDjlzEVdDI/AAAAAAAACSQ/6VNDJSyNM_Y/s1600/ico-google.png) no-repeat 13px 0;}
.subscribe .sub-twitter a{background: url(http://1.bp.blogspot.com/-NB2cMSawG8o/UxDjn7IaE7I/AAAAAAAACSg/cOC-YMt_Mtg/s1600/ico-twitter.png) no-repeat 15px 0;}
.subscribe .sub-facebook a{background: url(http://3.bp.blogspot.com/-G4_BfjWP96s/UxDjm8r6eRI/AAAAAAAACSY/2rV1MJlKoe0/s1600/ico-facebook.png) no-repeat 15px 0;}
.subscribe .sub-rss a{background: url(http://1.bp.blogspot.com/-2jhfGbPuYho/UxDjlNGxPFI/AAAAAAAACSI/qQy51oqO2g4/s1600/ico-rss.png) no-repeat 16px 0;}
.subscribe .sub-email a{background: url(http://2.bp.blogspot.com/-GcCWYpIpUHc/UXp2e30KdQI/AAAAAAAAA2c/8ilWCLWMWUQ/s1600/icon-email.png) no-repeat 0 0;}
.linked {width:100%; cursor: auto;}
.linked form { margin:0; padding:0;}
.linked p.intro {font-size: 14px; line-height: 1.5; color:#000; padding:10px 20px 0; margin:0 0 5px; font-weight:bold;}
.linked a{ color:#777 !important;}
.linked p.feed { margin:0 10px 0 18px; font-size:12px; color:#777777; }
.form-go{ background: url(http://3.bp.blogspot.com/-wTLtzwr6Z7w/UXpe75Yi78I/AAAAAAAAA1k/TkaF6yr7AWA/s1600/alert-overlay.png); color: #2C2F32; margin-left: 10px; height: 29px; padding: 0px 6px; border: 1px solid #ddd; cursor: pointer; margin-bottom: 9px;moz-border-radius: 5px; width:67px; margin-left:0px;
-webkit-border-radius: 5px; text-shadow: 1px 1px 0 #fff;}
.form-go:hover{opacity: 0.8;}
</style>
<div id='bor-social'>
<div class='subscribe'>
<ul>
<!-- Social Profile Icons -->
<li class='sub-rss'><a href='YOUR-FEED-URL' rel='nofollow' target='_blank'>RSS</a></li>
<li class='sub-google'><a href='YOUR-GOOGLE+-URL' rel='nofollow' target='_blank'>GooglePlus</a></li>
<li class='sub-twitter'><a href='YOUR-TWITTER-URL' rel='nofollow' target='_blank'>Twitter</a></li>
<li class='sub-facebook'><a href='YOUR-FACEBOOK-URL' rel='nofollow' target='_blank'>Facebook</a></li>
</ul>
</div><div class='clear'/>
<div class='linked'>
<p class='intro'>E-mail Newsletter</p>
<p class='feed'>Receive Latest Posts from CB Blogger Straight in Your Email Inbox</p>
<!-- Configure Subscribe Form -->
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=contohblognih', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='padding:8px 3px 12px 15px; margin:0 0 0 3px;' target='popupwindow'>
<p><input class='form-subscibe' name='email' placeholder='E-mail' style='width:160px;border-color: #ccc #efefef #efefef #ccc; border-width: 1px; border-style: solid; color: #777; padding: 6px 6px 6px 10px;' type='text'/>
<input name='uri' type='hidden' value='contohblognih'/><input name='loc' type='hidden' value='en_US'/>
<input class='form-go' type='submit' value='Submit'/></p></form>
</div></div>
<div class='clear'/></div></div>
4. Isi link media sosialnya dan ganti tulisan warna merah jika perlu. Yang wajib diganti adalah Feedburner ID contohblognih dengan kode FeedBurner milik Anda. Jika belum punya, Bikin ID Feedburner.
5. Save!
Kini kotak berisi ikon dan link media sosial plus kotak berlangganan sudah muncul di sidebar blog Anda. Good Luck & Happy Blogging! (www.contohblog.com).*
Labels: Desain Blog
<< Home