Cara membuat Subscribe Box Keren Di Blogger

Dhika    Oktober 25, 2018    CSS , HTML , TIPS BLOGGER   

Hi sobat blogger apa kabarnya di hari ini? mudah-mudahan pada sehat ya.
Di kesempatan kali ini saya akan membagikan sebuah widget blogger yang dimana widget seperti ini wajib ada di sebuah blog.
Dan mungkin juga sebagian blogger sudah paham tentang kegunaan dari widget ini, dan untuk kalian yang belum tahu apa kegunaan dari widget ini bisa menyimaknya dibawah ini.

Cara membuat Subscribe Box Keren Di Blogger 
Buat kalian sobat blogger yang belum memasang widget seperti ini, saya sarankan agar bisa memasangnya di blog. Karena sangat penting sekali widget subscribe berlangganan via email selain itu juga pengunjung tidak akan ketinggalan update dari blog kalian yang di share apa lagi, update postingan kalian berkualitas dan banyak penggemarnya.

Lantas bagaimana cara membuat widget seperti ini? Nah untuk kalian yang ingin membuatnya gampang kok kalian bisa ikuti langkah-langkah dibawah ini.

Jika kalian tertarik silahkan kalian pasang terlebih dahulu code dibawah ini. dan letakan codenya tepat sebelum </head> 

 <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'/>

Jika sudah selanjutnya kalian letakan code CSS dibawah ini, letakan codenya tepat sebelum </style> atau </b:skin> 

#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;}

Kalian juga bisa sesuaikan CSS warnanya dengan selera kalian, dengan mengedit bagian Backgroundnya. Jika tidak kalian bisa langsung save/simpan kembali template yang sudah kalian edit tadi.

Selanjutnya agar widgetnya bisa tampil kalian gunakan code dibawah ini, dan bisa kalian letakan dibagian bawah postingan, footer, atau terserah kalian enaknnya di letakan dimana.

<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=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 == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>

LIVE DEMO

CATATAN:Silahkan kalian bisa edit,
code diatas sesuai apa yang sudah saya tandai.

Nah mungkin dari saya cukupkan sekian dulu ya sobat tentang Cara membuat Subscribe Box Keren Di Blogger selamat mencoba, dan semoga bermanfaat.