f Cara Pasang Email Subscribe dan Media Sosial Pada Blogspot - Trik dan Tips Pasang Email dan Medsos di Blog - Konten Cara Viral

Cara Pasang Email Subscribe dan Media Sosial Pada Blogspot - Trik dan Tips Pasang Email dan Medsos di Blog

Cara Pasang Kolom Subscribe dan Link Media Sosial Pada Blogspot


Cara Pasang Email Subscribe dan Media Sosial Pada Blogspot


Baiklah kali ini kontencaraviral 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 ini kontencaraviral 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.

3 Responses to "Cara Pasang Email Subscribe dan Media Sosial Pada Blogspot - Trik dan Tips Pasang Email dan Medsos di Blog"

  1. numpang promote ya min ^^
    Hayyy guys...
    sedang bosan di rumah tanpa ada yang bisa di kerjakan
    dari pada bosan hanya duduk sambil nonton tv sebaiknya segera bergabung dengan kami
    di DEWAPK agen terpercaya di tunggu lo ^_^

    BalasHapus

close

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel