Membuat Subscribe Box With Social Button

Membuat Subscribe Box With Social Button

Sama hal nya seperti subscribe box umumnya, widget subscribe box ini berfungsi agar pengunjung blog medapat informasi update setiap anda menerbitkan atau memposting artikel baru ke dalam blog anda.

Widget Subscribox yang kali ini saya share terdapat tombol sosial media diatasnya seperti facebook dan ke enam tombol sosial lainnya, anda juga dapat mengganti tombol sosial media ini sesuai keinginan anda dengan mengganti font awesome dan link ke arah sosial media yang anda inginkan.

Sebelum anda merubah semua itu alangkah baiknya kita terapkan dulu widget Subscribebox yang sudah saya rangkai ini ke dalam template untuk memastikan semua kode dibawah bekerja. Namun jika anda ragu tidak ada salahnya anda membackup template anda sebelum menerapkan kode di bawah ini.

Nah untuk membuatnya silakan buka template editor dan letakan kode CSS berikut diatas ]]></b:skin> atau </style>

/* CSS Subscribe Box With Social Button */
#subscribebox{background:#576269;padding:20px;font-family:'PT Sans',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:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}

Kemudian letakan Layout > Add a gadget > HTML/Javascript dan tambahkan kode berikut didalamnya.

<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 our to Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<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'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
<div class="creadit">
<a href="http://trikricky.com" rel="dofollow" target="_blank"> Get This Widget</a></div>

Ganti Tanda Pagar " # " dan link yang ditandai dengan link tujuan anda dan Ganti YOUR-USER-NAME Dengan Username anda kemudian simpan.

Lihat hasilnya...

Widget ini menggunakan Font Awesome, pastikan anda sudah menambahkan nya ke dalam template sebelum menggunakan kode ini

Demikian Cara membuat Widget Subscribe box with social button yang saya share kali ini. Kreasikan kembali kode CSS diatas sesuai warna template yang anda gunakan.
Advertisement
Advertisement

Artikel Terkait

Jangan menunggu kemampuan sebelum anda bersedia Bertindak. Bertindaklah karena itulah yang kelak menjadikan anda mampu