Cara Membuat Kolom Langganan Sederhana Elegan Dibawah Postingan

Setelah sebelumnya Kang AP memposting cara mudah membuat kolom langganan keren dibawah postingan, pada kesempatan ini Kang AP mau memberikan trik bagaimana cara membuat kolom langganan sederhana elegan dibawah postingan. Kenapa selalu dibawah postingan? Ya, karena hal ini akan membuat tampilan blog terlihat lebih keren. Anda mau kan blognya terlihat keren!

Kolom langganan ini cocok sekali bagi anda yang menyukai kesederhanaan namun terlihat elegan. Jika anda tertarik untuk menerapkannya, simak langkah-langkah berikut ini !

1. Login ke Blogger

2. Pilih Template » Edit HTML

3. Sekarang anda cari kode ]]></b:skin>

4. Letakkan kode dibawah ini diatas kode ]]></b:skin>

/* Kotak berlangganan Kang AP*/

.berlangganan-box {

border-top: 1px solid #E9E9E9;

border-bottom: 1px solid #E9E9E9;

padding: 15px;

margin:0;

text-align:center;

}

.berlangganan-box input.email-address[type="text"] {

width:60%;

padding:10px;

border:1px solid #ddd;

text-align:center;

border-radius: 4px;

outline:none;

background: #fff;

}

.berlangganan-box input.submit-email[type="submit"] {

transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;

padding:10px 15px;

background:#07ACEC;

border-radius: 4px;

color:#fff;

border:none;

font-weight:bold;

border-bottom: 3px solid #0D9AD0;

outline:none;

}

.berlangganan-box input.submit-email[type="submit"]:hover {

background:#0D9AD0;

cursor:pointer;

}

.berlangganan-box input.email-address[type="text"]:focus {

box-shadow:0 0 2px #106FE4;

}

5. Berikutnya cari kode <data:post.body/>

Baca juga :
» Cara Membuat Tombol Share Efek 3D
» Cara Memasang Profile Keren Pada Blog
» Cara Mudah Memasang Widget Ganti Background Pada Blog

6. Pasang kode dibawah ini dibawah kode <data:post.body/>

<div class='berlangganan-box'> <form action='https://feedburner.google.com/fb/a/mailverify?uri= TipsAndTrikKangAP ' method='post'onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri= TipsAndTrikKangAP &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><p><a href='https://goo.gl/qfVpU5' rel='nofollow' target='_blank'>Berlangganan via email (gratis) ▼</a><p><input class='email-address' name='email' placeholder='Masukan alamat email...' type='text'/></p><input name='uri' type='hidden' value='Tips And Trik Kang AP'/><input name='loc' type='hidden' value='en_US'/><p><input class='submit-email' type='submit' value='Berlangganan'/></p></p></form></div>

7. Simpan dan lihat hasilnya

Demikian cara membuat kolom langganan sederhana elegan dibawah postingan, semoga dapat membantu dan bermanfaat. Terima kasih atas kunjungannya and happy blogging...!!

Please Share » » Facebook Google+ Twitter