Cara Mudah Membuat Kotak Subscribe Simple Dan Keren di Blogger

Membuat Kotak Subscribe di Blogger 

Setiap blogger pasti ingin selalu terhubung dengan para pembaca setianya. Ya, mereka akan sangat senang apabila mendapatkan pemberitahuan disetiap artikel yang kamu tulis. Dalam hal ini, kamu jangan pernah lupa untuk menampilkan kotak Subscribe dalam blog kamu.

Karena, itu akan membuat para pembaca lebih mudah apabila mereka ingin selalu dekat dan mendapatkan pemberitahuan setiap kamu mempublikasikan konten kamu diblog. Perlu diketahui, untuk membuat pemirsa mensubscribe blogmu, kamu pun harus hiasi kotak subscribe mu dengan indah.

Ini contohnya :
cara membuat kotak subscriber

Terlihat bagus dan simple bukan. Apabila kamu menginginkannya, kamu bisa ikuti langkah-langkah dibawah ini;

Langkah - Langkah Memasang Kotak Subscribe Simple dan Keren di Blogger

Masuk ke dashbord blogger
Disini kita akan memasukan script CSS nya terlebih dahulu
Pilih Menu Theme/Template pada dashboard blogger
Pilih Edit HTML
Tekan ctrl + f, Lalu masukan kata ]]></b:skin> dan enter
Pastekan script CSS berikut tepat di atas kode yang tadi 
 
}

#subscribebox {background:#314d5b; padding:20px;font-family: 'PT Sans', sans-serif;
width:300px;}
.widget_follow_subscribe .widget-detail {
  padding: 36px 30px 40px 30px;}

#subscribebox p {
color: white;
    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 0.2s ease-in-out;
 -moz-transition: color 0.2s ease-in-out;
 -ms-transition: color 0.2s ease-in-out;
 -o-transition: color 0.2s ease-in-out;
 transition: color 0.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: 0.928571em;
 background-color: #ffffff;
  text-align: center;
  color:efefef;
}

.subscribe-email:focus {
 outline: 0;
}

/* Placeholder color */
form.subscribe .placeholder { /* Internet Explorer 9 */
 color: #cacaca;
}

form.subscribe input:-ms-input-placeholder { /* Internet Explorer 10+ */
 color: #cacaca;
}

form.subscribe input::-webkit-input-placeholder { /* WebKit browsers */
    color: #cacaca;
}

form.subscribe input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #fafafa;
}

form.subscribe input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #fafafa;
}

.subscribe-button {
 height: 45px;
 font-weight: 700;
font-size:16px;
 color: #fff;
 text-transform: uppercase;
 border: none;
 background-color:#2BCD2B;
 
 -webkit-transition: background-color 0.2s ease-in-out;
 -moz-transition: background-color 0.2s ease-in-out;
 -ms-transition: background-color 0.2s ease-in-out;
 -o-transition: background-color 0.2s ease-in-out;
 transition: background-color 0.2s ease-in-out;
}

.subscribe-button:hover {
 background-color: #f4b458;
}

.subscribe-button:focus {
 outline: 0;
}

Setelah itu lalu klik save
Langkah terakhir adalah memanggilnya dengan cara
Pilih menu Layout
Lalu tambahkan gadget baru dan pilih HTML/Javascript
Lalu masukan script berikut

 
<center>
<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-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<img border="0" alt="Subcribe" src="http://dateinacrate.com/wp-content/uploads/2015/06/icon-subscribe.png" width="100" height="100" />
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=Lk21News' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=Msdesign92, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Nandaledg'/>
<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>
<p style="font-size:60%;">We will not share your information with anyone</p>
</div>
</center>

Setelah itu tinggal save, dan lihat

Catatan
* Ganti tanda # pada kode html dengan url sosial media kamu, seperti IG, google, facebook dan twitter

Mudah bukan cara membuat tampilan kotak subscriber untuk blogger. Apabila ada pertanyaan atau masukan, jangan sungkan untuk memberikan kata-kata pada komentar.

0 Response to "Cara Mudah Membuat Kotak Subscribe Simple Dan Keren di Blogger"

Post a Comment