» » » Cara Membuat Widget Subscribe Newsletter dibawah Postingan

Cara Membuat Widget Subscribe Newsletter dibawah Postingan

0 Viewers ,
Salah satu untuk mendapatkan pengunjung setia adalah memasang kotak berlangganan
(Subscription Box) di Blogger anda. Kotak berlangganan (Subscription Box) ini sangat penting untuk sebuah blog. Dengan begitu pengujung akan lebih mudah untuk mendapatkan update postingan blog via email. Nantinya ketika Anda membuat postingan, maka postingan atau artikel tersebut akan terkirim melalui inbox pelanggan.

Pada kesempatan kali ini saya akan membagikan Tombol Subscribe Newsletter dibawah postingan, dan juga bisa dipasang di bagian sidebar, footer dll. Tapi nanti saya akan menjelaskan kedua cara memasangnya.

Baca Juga :

Screenshoot :


Cara Membuat Widget Subscribe Newsletter dibawah Postingan

Cara Pertama : 

1. Buka Blogger - Kemudian login.
2. Dashboard - Template
3. Edit HTML

Proses Pembuatan : 

1. Temukan <CTRL+F> kode ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>
#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}
3. Jika sudah dipasang? Temukan kode </head>
4. Copy & Paste kode berikut ini, dan letakkan 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'/>
5. Jika sudah dipasang? Temukan lagi kode <data:post.body/> biasanya kode ini lebih dari satu, silakan pilih yang kedua atau yang ketiga.
6. Copy & Paste kode berikut ini, dan letakkan dibawah kode <data:post.body/>

Jika kesalahan pada kode <data:post.body/>

Cara Alternatif :

A. Anda bisa meletakan kode dibawah ini, tepat diatas/dibawah Related Post jika memang anda memasangnya.
B. Anda bisa meletakan kode dibawah ini, tepat diatas/dibawah Share Buttons.
<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 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>
NB : Silakan anda ganti tulisan yang berwarna merah dengan kepunyaan anda.

Selain dibawah postingan? Subscribe ini juga bisa dipasang di Sidebar, Footer

Caranya :

1. Buka Tata Letak/Layout.
2. Add a Gadget
3. Pilih HTML Java Script
4. Copy & Paste kode berikut ini, dan letakkan di kolom HTML Java Script.

Screenshoot : 

<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 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>
Terakhir, Silakan Simpan Template. Silakan anda lihat postingan blog anda atau lihat bagian sidebar atau footer anda. Sekian dari saya Semoga Bermanfaat! Thank's For Reading & Sharing and Visited; Cara Membuat Tombol Subscribe Newsletter dibawah Postingan

Related Post

0 Response to "Cara Membuat Widget Subscribe Newsletter dibawah Postingan"

Post a Comment

Subscribe to: Post Comments (Atom)