Membuat Kotak Berlangganan Simple & Keren Dibawah Posting

Saya sudah usang mempelajari cara membuatnya, namun ilmu aku belum seberapa, namun aku hanya bermodalkan nekat dan kemauan, dan kesudahannya aku bertahap mengerti cara membuatnya sobat. Walaupun bekerjsama aku tidak membuatnya melainkan mengeditnya.

Untuk instruksi aslinya aku dapatkan di template Mas Sugeng 2015, dan aku edit sampai menjadi lebih menyerupai dengan style pada template Evomagz. Makara untuk teman yang menginginkan kotak berlangganan ini yang telah aku buat lebih simple dan tidak mengecewakan keren, teman sanggup mengikuti tutorial berikut ini.
Tambahkan CSS berikut di atas </head> pada edit HTML sobat.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> .berlangganan-box{font-family:Arial;color:#fff;background:#38424B;padding:15px;border:1px solid #ededed;margin:10px 0 0;text-align:center} .berlangganan-box input.email-address[type=&quot;text&quot;]{width:80%;padding:10px;border:1px solid #ddd;text-align:center;border-radius:4px;outline:none} .berlangganan-box input.submit-email[type=&quot;submit&quot;]{transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;padding:10px;background:#2db2eb;border-radius:4px;color:#fff;border:none;font-weight:normal;outline:none;width:80%} .berlangganan-box input.submit-email[type=&quot;submit&quot;]:hover{background:#0099cc;cursor:pointer} .button{transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;text-align:center;position:relative;vertical-align:top;width:148px;height:32px;padding:0;font-size:13px;color:#fff;font-weight:normal;text-align:center;background:#07ACEC;border:0;cursor:pointer;border-bottom:3px solid #0D9AD0;border-radius:4px;outline:none} .button:active{top:1px;outline:none} .button:hover{background:#0D9AD0} </style> </b:if>

CSS tersebut telah dilengkapi dengan tag kondisional supaya hanya terload dibagian posting, dan dengan begitu tidak akan menambah beban dari home page sobat, nah selanjutnya cari instruksi yang sama persis menyerupai berikut.
<data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div>

Selanjutnya letakkan instruksi berikut ini sempurna dibawah instruksi tersebut.

<div class='berlangganan-box'> <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=Competitiv&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>   <p>Sign up here with your email address to receive updates from this blog in your inbox.</p><p><input class='email-address' name='email' placeholder='Your Email Address...' type='text'/></p><input name='uri' type='hidden' value='Competitiv'/> <input name='loc' type='hidden' value='en_US'/> <p><input class='submit-email' type='submit' value='Subscribe'/></p> </form> </div>
Pengaturan pada widget ini hanya perlu teman perhatikan pada kata yang aku beri tanda blok kuning, ganti dengan id feedburner sobat. Setelah itu teman Simpan Template, dan coba lihat hasilnya.

Baca Juga:  Membuat Widget Recent Comments Sederhana Untuk Blogger

Sebenarnya untuk instruksi yang terakhir tidak musti teman letakkan pada bab yang aku berikan, namun sanggup juga teman sesuaikan, semisalnya teman tahu letak tag html related post, maka teman sanggup letakkan instruksi yang terakhir itu sempurna dibawah instruksi html related post. Semoga bermanfaat. 🙂


Sumber https://www.iwanberbagi.com