Cara Pasang Kolom Subscribe dan Link Media Sosial Pada Blogspot

Cara Pasang Kolom Subscribe dan Link Media Sosial Pada Blogspot


Cara Pasang Email Subscribe dan Media Sosial Pada Blogspot


Baiklah kali ini bloggku akan memberikan tutorial yaitu Cara Pasang Widget Subscribe Pada Blogspot, pada kesempatan sebelumnya saya sudah membagikan tutorial Cara Mengganti Older Post Newer Post dengan Nomor (Angka) di Blogger nah untuk kali bloggku akan membahas cara membuat kolom subscribe pada blogger.

Apasih gunanya widget subscribe ini pada blogspot ? Sebenarnya fungsi widget subscribe ini tidak jauh beda dengan tombol subscribe pada Youtube, jika seorang mengisi kolom subscribe pada blog anda maka secara otomatis seorang tersebut akan mendapatkan notifikasi update artikel terbaru dari blog kalian, nah mungkin kurang lebihnya seperti itu.

Untuk cara pemasangannya terbilang cukup mudah kok, asalkan kalian mengikuti tutorial yang saya bagikan ini dengan benar agar semuanya lancar dan berhasil, sebelumnya cara ini sudah saya terapkan untuk blog saya lainnya. Jangan khawatir kolom subscribe ini responsif kok, berikut adalah cara membuatnya.

Cara Membuat Kolom Subscribe Dengan Media Sosial (facebook, Twitter, google, instagram dan lainnya)



  • Masuk pada blog kalian masing-masing => Tema => Edit Html.
  • Pada halaman editor html silakan anda klik dimana saja lalu Ctrl + F lalu cari kode </head>, tepatkan kode ini diatas kode </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 kedua kode diatas sudah terdapat pada template blog kalian, bisa kalian skip dan lanjutkan ketahap selanjutnya.


  • Silakan kalian copy kode dibawah ini tepat diatas kode </head>
 <style>
#subscribebox{background:#576269;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:#f1d640}
.subscribe-button:focus{outline:0}
</style> 

  • Klik simpan template kalian masing-masing,
  • Untuk menampilkan kolom subscribe silakan kalian masuk ke Tata Letak => Tambahkan widget => Pilih Html/JavaScrpit, lalu letakkan kode dibawah ini. 
 <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=bloggku.com' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=bloggku.com, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='bloggku.com'/>
<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> 

Note


  1. Silakan kalian ganti # dengan akun sosial media milik kalian masing-masing.
  2. Bloggku.com ganti dengan id feedburner kalian.
  3. Jika kalian belum memiliki id/unsername feedburner kalian bisa daftar terlebih dahulu.
Nah bagaimana mudah bukan Cara Pasang Kolom Subscribe dan Link Media Sosial Pada Blogspot ? Jika ada yang belum dimengerti silakan kalian komentar dibawah yah.

1 Response to "Cara Pasang Kolom Subscribe dan Link Media Sosial Pada Blogspot"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel