Widget Link Media Sosial plus Kotak Berlangganan (Subscribe/Newsletter) untuk Blogger

Baca Juga

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

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/JavaScript
2. 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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=contohblognih&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='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.

Jika tak suka dengan desain dan kode link medsos plus form berlangganan di atas, berikut ini desain lainnya. Background hitam. Bisa diubah lagi kok!

CARA PASANG

1. KODE LINK

Pasang di atas kode </head>. Kalau sudah ada, abaikan!

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

2. KODE CSS

Pasang di atas kode </head>

<style type='text/css'>
#subscribebox{background:#424242;padding:20px;font-family:&#39;PT Sans&#39;,sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#42A5F5}
.subscribe-button:focus{outline:0}
</style>

3. KODE HTML/JAVASCRIPT

Pasang di Layout:
- Add a Gadget > Pilih HTML/Javascript
- Judul widget kosongkan
- Copas kode berikut in

<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=contohblognih' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=contohblognih, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='contohblognih'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email Address...'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>

Ganti kode warna merah dengan punya Anda.

4. Simpan!

Demikian Widget Link Media Sosial plus Kotak Berlangganan (Subscribe/Newsletter) untuk Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*