Cara Membuat Widget Email Subscribe Dibawah Postingan - Melanjutkan artikel sebelumnya tentang cara membuat widget email subscribe di sidebar, maka sekarang akan dijelaskan tentang cara membuat widget email subscribe di bawah postingan. Cara membuatnya hampir sama, hanya saja posisi penempatannya yang berbeda.
Memasang widget email subscription di blog bisa ditempatkan dimana saja asalkan mudah terlihat oleh para pengunjung blog, salah satunya adalah dibawah postingan. Berikut ini cara memasang widget subscribe by email dibawah postingan blog Anda :
1. Login ke blog Anda.
2. Pada menu navigasi, klik "Tema", kemudian klik "Edit HTML".
3. Pada area html tema, cari dan temukan kode ]]></b:skin>. Untuk mempermudah pencarian, gunakan tombol Ctrl+F di keyboard komputer Anda. Pada kolom pencarian, tuliskan kodenya kemudian Enter.
4. Copy script dibawah ini, pastekan tepat diatas kode ]]></b:skin>
/* Email Subscribe Box */
#subscribebox{border:1px solid #e5e5e5;padding:20px;margin:20px 0;font-family:'PT Sans',sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#394347;font-size:25px;text-align:center;font-weight:700;margin:0 0 1em 0;}
.follow-subscribe-social{margin:0;padding:0;}
.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:#394347;-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:#1C97DE}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:1em;background-color:#DEDEDE;text-align:center;color:#394347;border-radius:5px;}
.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-radius:5px;background-color:#576269;border:none;}
.subscribe-button:hover{background-color:#398DCC;}
.subscribe-button:focus{outline:0}
Selanjutnya masih di jendela yang sama, lakukan hal berikut ini !
1. Cari dan temukan kode <data:post.body/>, biasanya kode ini ada 3-4.
2. Copy script dibawah ini, pastekan dibawah kode <data:post.body/> yang ke 3 atau ke 4.
<b:if cond='data:blog.pageType == "item"'>
<div id="subscribebox">
<p>Subscribe to Our Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=ID-FeedBurner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID-FeedBurner, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='ID-FeedBurner'/>
<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 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-instagram"></i></a></li>
</ul>
</div>
</div>
</b:if>
- Ganti tulisan ID-FeedBurner dengan Id FeedBurner Anda.
- Ganti tanda # dengan alamat masing-masing media sosial Anda.
3. Setelah menempatkan script, klik "Simpan tema".
4. Selesai dan lihat hasilnya !
Selain menempatkan script dibawah kode <data:post.body/>, Anda juga bisa menempatkannya sebelum atau diatas kode <!-- clear for photos floats -->. Umumnya ada 2 kode, gunakan kode yang ke 2
Itulah Cara Membuat Widget Email Subscribe Dibawah Postingan yang bisa Anda lakukan. Semoga bermanfaat.
Share artikel... !
