Cara Membuat Subscription Box Bawah Header

Cara Membuat Subscription Box Ala Iamtomys

Pada kesempatan ini saya akan memberikan tutorial singkat cara untuk menempatkan Subscription Box / kotak berlanggan di bawah header, tentunya jenis syle template yang seperti di blog ini lebih ideal, mungkin untuk jenis template tertentu kurang sesuai.

Sebenarnya dibuatnya postingan ini karena ada beberapa pembaca yang bertanya bagaiman membuat kotak berlangganan dibawah header blog.

Sebetulnya untuk penepatan kotak berlangganan ini sesuka hati kamu saja mau menaruhnya dimana, asalkan memhami tentang elemen yang ada di template.

Langsug saja, untuk yang mau menempatkannya di bawah header blog bisa mengikuti langkah-langkah dibawah ini:

1. Menuju Blogger

2. Copas kode dibawah ini diatas kode ]]></b:skin>

CSS

/* Subscribe Box Dibawah Head*/
#subscribe-css{

position:relative;padding:5px 0; 
background: #ff6200;

overflow:hidden;border-bottom: 8px solid #ec5b00;}

.subscribe-wrapper{color:#fff;font-size:30px;

line-height:normal;margin:0;text-align:center;
text-transform:none;font-weight:400;width:100%}

.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}

.subscribe-css-email-field{background:#fff;color:#000;margin:10px 0;padding:15px 20px;width:35%;border:0}

.subscribe-css-email-button{background:#2d2520;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}

.subscribe-css-email-button:hover{background:#000;}

#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:#fff;font-size:18px; font-family: 'Roboto', sans-serif; font-weight:600;line-height:normal;}

#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}

#subscribe-css p.subscribe-note span.itatu {font-weight: 900;
text-transform: uppercase;
font-size: 24px;font-family: 'Roboto', sans-serif; color:#fff;}

Ket:  warna tinggal di ubah sesuai keinginan,

3. Selanjutnya copas kode dibawah ini tepat di atas kode <div class='container-wrapper'> intinya kamu tempatkan kode dibawah ini setelah akhir dari kode head.

HTML

 <div id='subscribe-css'>
<p class='subscribe-note'><span/><span class='itatu'>Over 100,000+ Readers /</span> Yuk Berlangganan Blog Iamtomy&#39;s Via Email</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=IamtomysBlog' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=IamtomysBlog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='IamtomysBlog'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email...'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>

Ket: Ganti nama Iamtomysblog dengan id FeedBurner Kamu Lebih kurang seperti itu lah caranya, semoga dapat bermanfaat.

Comments Leave a Reply

Add a Comment

Kami senang anda memutuskan untuk meninggalkan komentar, harap di catat bahwa setiap komentar dimoderisasi sesuai dengan privacy policy situs kami. Kami menggunkan sistem komentar disqus, semua komentar yang mengandung spam, promosi, tautan, dan lainnya tidak akan ditampilkan.

0 Response to "Cara Membuat Subscription Box Bawah Header"

Post a Comment

share counter

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel