Cara Membuat Kotak Berlangganan Keren Di Blog

Cara Membuat Kotak Berlangganan Keren Di Blog: Baiklah shobat kali ini ID Dzgn akan coba membahasas tutorial keren untuk blogger shobat.
Kotak Berlangganan atau biasa di sapa Box Subscribe, nah Kotak Berlangganan yang kita bahas kali ini iyalah Kotak berlangganan Via Email, sebenarnya sebelumnya saya juga sudah pernah membagikan Tutorial-tutorial yang temanya sama membahas Box Subscribe/Kotak Berlangganan.

Artikel Terkait: 
- Widget Box Subscribe (Kotak Berlangganan) Menggunakan Material Design Di Blog
- Cara Membuat Box Subscribe (Kotak Berlangganan) Keren Di Bawah Postingan Blog

Sebenernya artikel ini sudah lama saya buat tetapi waktu publikasinya kurang tepat hee, mengingat kemaren juga ada pengunjung yang menanyakan cara pembuatan kotak berlangganan yang kita bahas saat ini, yaa saya bagikan.
Untuk melihat demonya silahkan lihat di homepage blog ini.
Bagaimana dengan kamu tertarik memasangnya di blog kamu?, Silahkan ikuti tutorialnya di bawah ini.

Cara Membuat Kotak Berlangganan Keren Di Blogger

1. Silahkan kamu masuk terlebih dahulu ke Blogger>Tema>Edit Html blog kamu, lalu pastekan kode berikut tepat sebelum kode ]]></b:skin> atau </style>, untuk mempercepat pencarian silahkan klik tombol

CTRL

+

F

pada keyboard kamu.

.iddzgn-subscribe-form{clear:both;display:block;overflow:hidden}
form.iddzgn-subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}.iddzgn-subscribe-css-email-field:focus{box-shadow: 0 1px 5px 1px rgb(0, 192, 220), 0 1px 10px 0 rgb(0, 192, 220);}
.iddzgn-subscribe-css-email-field{transition:all .3s;background:transparent;color:rgb(21, 74, 74);margin:10px 0;padding:15px 20px;width:99%;max-width:250px;border:2px solid;}
.iddzgn-subscribe-css-email-button{width:99%;max-width:150px; background:transparent;color:rgb(255, 122, 122);cursor:pointer;font-weight:710;padding:13px 30px;margin-left:15px;text-transform:none;font-size:17px;border:2px solid;transition:all .6s}
.iddzgn-subscribe-css-email-button:hover{background: rgba(0,0,0,0.8);border: 2px solid rgb(255, 255, 153);box-shadow: 0 1px 5px 1px rgb(0, 192, 220), 0 1px 10px 0 rgb(0, 192, 220);font-weight: bold;}.newsletter-box{;color:#1a4042;text-align:center}.newsletter-box__title,.newsletter-box__subtitle{text-shadow:1px 1px 1px rgba(0,0,0,0.3)}.newsletter-box__title{margin-top:0;font-size:2.9em}.newsletter-box__subtitle{font-size:1.2em}.newsletter-box__form{margin:25px auto 0 auto;max-width:380px;font-size:1.3rem}.newsletter-box__input{font-size:1rem}

2. Lalu silahkan kamu cari kode <div id='post-wrapper'> atau <div class='post-inner'>, dan pastekan kode berikut di bawahnya. Perlu di ingat strukture kode Html pada template tidak selalu sama jadi jika kamu tidak menemukan kode di atas, kamu bisa berkomentar di kolom komentar di bawah.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='newsletter-box'>
<div class='l-container-center'>
<h3 class='newsletter-box__title'>INSPIRING YOUR CREATIVITY !</h3>
<p class='newsletter-box__subtitle'>GET EXCLUSIVE CONTENT BY SUBSCRIBING TO OUR DAILY NEWSLETTER !</p>
<div class='iddzgn-subscribe-form'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=iddzgn' class='iddzgn-subscribe-form' method='post' onsubmit='window.open (&#39;https://feedburner.google.com/fb/a/mailverify?uri=iddzgn&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='iddzgn'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='iddzgn-subscribe-css-email-field' name='email' placeholder='Enter your Email..'/><input class='iddzgn-subscribe-css-email-button' title='SIGN UP' type='submit' value='SUBSCRIBE'/></form>
</div>
</div>
</div></b:if></b:if>

Silahkan kamu ganti iddzgn dengan ID Feed Bunner kamu.

Jika kamu ingin menampilan Kotak berlangganan ini di semua halamana kamu bisa hapus tag berikut

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
..........................
........................
.....................
.....................
....................
</b:if></b:if>

Titik-titik di atas adalah bayangan kode yang ada di bungkus oleh tag pengecualian (Jangan Di Hapus)
Silahkan kamu hapus kode yang sudah di warnai di atas untuk menampilkan Kotak berlanganan di semua halaman.

Oky jika sudah silahkan kamu save/simpan template, lalu lihat kembali blog/web kamu boommmm selamat kamu berhasil.
Nah mungkin sampe di sini saja ya, salam semua semoga bermanfaat.