Cara Membuat Kotak Subscribe Via Email Menarik Dan Keren

Cara Membuat Kotak Subscribe Via Email Menarik Dan Keren

Cara Membuat Kotak Subscribe Via Email Menarik Dan Keren

Halo sobat blogger, ini adalah pertama kalinya saya membuat postingan sebagai kontributor di blog sobat saya Antoncabon, dan untuk postingan perdana kali ini saya akan membagikan sebuah tutorial yang menarik dalam hal memperindah tampilan blog sobat sekalian, yaitu tutorial cara membuat kotak subcribe via email.
Kotak subscribe via email ini seratus persen menggunkan CSS, apa artinya! ya ini berarti tidak akan mempengaruhi loading blog sobat, selain itu tampilan dari Kotak Subscribe Via Email ini menarik dari segi tampilannya, untuk contohnya sobat dapat melihatnya di bagian bawah pada postingan ini.
Selain memperindah tampilan blog, saya kira sobat blogger sudah paham fungsi dari Kotak Subscribe ini yaitu fasilitas untuk berlangganan konten dari blog tertentu yang hampir di pakai oleh semua situs web untuk dapat menyebarkan tulisan atau postingan dari blog atau situs web secara ringkas/garis besar yang akan dikirimkan ke pada pelanggan konten melalui email.
Jika sobat blogger sekalian tertarik dengan kotak subscribe ini dan ingin memasangnya di blog kesayangan sobat, silahkan ikuti langkah-langkahnya yang saya tuliskan dibawah ini:

Subscribe Box Via Email
Subscribe Box Via Email


Langkah-langkah Pembuatan Kotak Subscribe di blog :

Langkah-1 : Login Blogger, Klik menu Template > Edit HTML

Langkah-2 : Simpan kode CSS dibawah ini sebelum kode </style> :

/* CSS Subscribe Box */
#subscribe-box {width:auto;height:auto;background-color:#fff;}
#subscribe-box p {font-family:&#39;Open Sans&#39;;font-size:13px;color:#333;line-height:20px;padding:10px 20px 0 20px;margin:0;text-align:center;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f5f5f5;color:#aaa;padding:10px;margin-top:10px;font-size:13px;font-family:&#39;Open Sans&#39;;width:91%;border:0;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0);transition:all 0.4s ease-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;border:none;color:#444;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2);}
#subscribe-box .emailfield .submitbutton {background:#aaa;color:#fff!important;text-transform:uppercase;font-weight:bold;outline:none;width:99%;cursor:pointer;border-radius:3px;border:none;transition:all 0.4s ease-out;}
#subscribe-box .emailfield .submitbutton:hover, #subscribe-box .emailfield .submitbutton:active {background:#888;outline:none;color:#fff;}
#subscribe-css {margin:0;padding:0;float:right;display:block;position:relative;}
.subscribe-wrapper {background:#444;width:260px;height:200px;color:#fff;font-size:14px;font-family:&#39;Open Sans&#39;;line-height:20px;padding:40px 20px 10px 20px;text-align:center;border-radius:3px;}
.subscribe-wrapper p {margin:0;margin-bottom:30px;}
.subscribe-form {clear:both;display:block;margin:10px 0;overflow:hidden;}
form.subscribe-form {clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden;}
.subscribe-css-email-field {background:#333 url(http://3.bp.blogspot.com/-b2pmxkhM8Is/VLQQ4PPCMMI/AAAAAAAAHO4/AGzYheKVaqs/s1600/sprites.png) no-repeat 1px -27px;color:#fff;margin:0 0 15px;padding:12px 40px;width:100%;border:none;}
.subscribe-css-email-button {background:#FF8830;color:#fff;cursor:pointer;font-weight:700;
padding:10px;text-transform:none;width:100%;border:none;font-size:17px;transition:all .5s ease-in;border-radius:3px;transition:all 0.3s ease-out;}
.subscribe-css-email-button:hover {background:#FF7A35;color:#fff;}

Sebaiknya sobat letakan Kotak Subscribe ini di halaman muka pada blog sobat dan tampil disetiap halaman sehingga mempermudah pengunjung untuk menjadi pelanggan konten dari blog sobat !

Langkah-3 : Copy kode HTML di bawah ini, setelah itu paste di tempat yang anda inginkan

<div id='subscribe-css'>
<div class='subscribe-wrapper'>
<p>Sign up here with your email</p>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=antoncabon' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=antoncabon&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='antoncabon'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your email address' title='Enter your email address'/><input class='subscribe-css-email-button' title='Subscribe Now' type='submit' value='Subscribe Now'/></form>
</div>
</div>
</div>

Ganti antoncabon dengan url rss sobat sendiri.

Screen Shot
Subscribe Box Via Email


Langkah-4 : Selesai !


"Hendaknya kesibukan kita lebih berfokus pada penyempurnaan penunaian kewajiban-kewajiban kita kepada Tuhan, sebab Dia, Tuhan yang sekaligus Pemberi Rejeki pasti akan membalas penunaian kewajiban tersebut dengan anugrah-Nya yang akan mencukupi kebutuhan kita." my fav words!

DONASI VIA FASAPAY



Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

2 Comments Add Comment

Saya kira tampilan nya bakal sama kaya digambar utama tapi waktu liat hasilnya mirip sama punya agan tetep bagus dan musti coba untuk masang nih dibookmark dulu deh biar ga ilang. ijin ya mas.

Balas

hehehee itulah yang katanya daya tarik sebuah gambar pada postingan,,, nanti mba coba saya buat sama seperti dengan yang ada dicover kalo ada waktu luang ya...

Balas
Add Comment

Suka dengan postingan ini? Silahkan share postingan ini dengan cara klik Tombol SHARE THIS di atas, Terimakasih.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Anton Cabon? Keep us running by whitelisting Antoncabon in your ad blocker.

This is how to whitelisting Antoncabon in your ad blocker.

Thank you!

×
×
×