Cara Membuat Widget Email Subscription Responsive di Blogger

Info Blog News – Kali ini saya ingin share bagaimana Cara Membuat Widget Email Subscription Responsive di Blogger, kali ini widget email subscribe yang akan saya bagikan telah dimodifikasi agar tampak lebih profesional.

Anda dapat menyesuaikan kode sesuai yang Anda inginkan, jika Anda memiliki saran atau pertanyaan tentang tutorial di atas Anda dapat berbagi di dalamkotak komentar di bagian bawah blog ini.

Langsung saja ke topik “Cara Membuat Widget Email Subscription di Blogger “

1. Masuk ke akun blogger Anda,  Dashboard >> Template >> Edit html

2. Mencari kode berikut ( ]]></ b:skin> )

3. Setelah ketemu, letakkan kode dibawah ini, di atas kode ]]></ b:skin>

CSS - Info Blog News

.subs_wrap {   background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtTVlF7ZtH60FAbX88OMUmyoxF5-hKFMaTyOnqODspdCm9JAjnDEezbVMhUkx31jJMXEUqcGtc4OX6a8SslX9cqaHcfScCimS1doJkuKVly4_8d8gbK-nVkh8Pf3D3iZVjud_YMO4-lVr9/s1600/bg.png);   position: relative;   left: 0px;   top: 0px;   width: 320px;   height: 232px;   text-align: center;   z-index: 1; }

.subs_wrap h4 {   text-align: center;   font-family: 'Verdana', sans-serif;   font-size: 30px;   font-weight: bold;   color: #FFF;   margin: 0 auto;   padding: 35px 0 0 0;   line-height: 1; }

.subs_wrap p {   text-align: center;   font-family: 'Verdana', sans-serif;   font-size: 12px;   font-weight: normal;   color: rgba(255, 255, 255, 0.502);   margin: 0 auto;   padding: 0;   line-height: 2;   word-spacing: 0px; }

.email_input {   background-color: rgba(255, 255, 255);   opacity: 0.2;   position: relative;   margin: 35px 0 15px 0;   width: 150px;   height: 30px;   padding: 0 10px;   color: rgba(255, 255, 255);   border: none;   border-radius: 15px;   z-index: 3; }

.email_input:focus {   outline: none;   border: 1px solid #ee6e45;   opacity: 0.3;   -webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.078);   -moz-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.078);   box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.078); }

.button {   background-color: rgb(255, 255, 255, 0.015);   color: rgb(236, 94, 48);   font-family: 'Verdana', sans-serif;   position: relative;   border: none;   width: 170px;   height: 30px;   z-index: 2;   border-radius: 15px;   -webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.078);   -moz-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.078);   box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.078); }

Cara memasangnya di Blog

1. Masuki ke Tata letak dan Klik Add gadget.

2. Dalam kotak Add gadget, pilih HTML / Javascript.

3. Copy kode di bawah ini dan paste di dalam kotak konten.

HTML - Info Blog News

<div class="subs_wrap">

<h4>SUBSCRIBE</h4>

<p class="subs_p">Get the top news stories delivered to your Inbox</p>

<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri= ID-Feedburner Anda&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;);return true' target='popupwindow'>

<input gtbfieldid="10" class="email_input" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text"/>

<input value="ID-Feedburner Anda" name="uri" type="hidden" />

<input name='loc' type='hidden' value='en_US'/>

<input class='button' title='signup' type='submit' value='SignUp'/>

</form>

</div>

4. Kemudian klik “ Save “atau Simpan

5. Lihat hasilnya…

Jika Anda memiliki permasalahan seputar tutorial Cara Membuat Widget Email Subscription Responsive di Blogger, silahkan tinggalkan pesan pada kotak komentar dibagian bawah blog ini. Selamat mencoba semoga berhasil..