Cara Memasang Widget Link Media Sosial plus Kotak Berlangganan  Widget Link Media Sosial plus Kotak Berlangganan (Subscribe/Newsletter) untuk Blogger
Cara Memasang Widget Link Media Sosial plus Kotak Berlangganan (Subscribe Box/Email Newsletter) di Sidebar Blog.

KODE widget berikut ini menggabungkan ikon & link media umum dengan kotak berlangganan (subscription box/email newsletter/follow by email).

Tampilannya simple, bersih, tapi keren. Ikon dan link medsosnya ialah RSS Feedburner, Google Plus, serta dua media umum terpopuler --Facebook dan Twitter.

CB juga pasang, namun menghilangkan ikon link medsosnya alasannya ialah sudah ada di navigasi sajian di atas header.

Anda juga dapat menentukan jenis Kotak Berlangganan plus Media Sosial lainnya.

Penampakannya menyerupai 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/JavaScript
2. Judul Boleh Dikosongkan, Boleh juga diisi, misalnya: JOIN & FOLLOW ME!
3. Copas instruksi 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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=idtutorialnih&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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='idtutorialnih'/><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 goresan pena warna merah jikalau perlu. Yang wajib diganti ialah Feedburner ID idtutorialnih dengan instruksi FeedBurner milik Anda. Jika belum punya, Bikin ID Feedburner.

5. Save!

Kini kotak berisi ikon dan link media umum plus kotak berlangganan sudah muncul di sidebar blog Anda. Good Luck & Happy Blogging! (www.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours