Cara Membuat Subscribe Box ala Arlina Design

Anda bisa melakukan berbagai hal untuk mendapatkan pengunjung, salah satunya adalah dengan memasang Subscribe Box di situs atau blog anda.

Subscribe box adalah suatu cara yang terbilang bagus dan paling ampuh untuk mendapatkan pengunjung-pengunjung setia. Dengan adanya subscribe box pada situs atau blog anda, pengunjung akan dengan mudah mendapatkan notifikasi Email mengenai update’an artikel terbaru anda. Apabila artikel anda menarik tentu pengunjung akan mengunjungi blog anda dan akan kembali lagi ketika anda membuat artikel baru lagi.

Baca juga :

• Cara Membuat Sitemap Otomatis di Blog

• Cara Memasang Meta Tag SEO Friendly Untuk Blogger

Untuk cara pemasangan subscribe box itu sendiri tidaklah sulit.

Ini dia cara membuat subscribe box minimalis yang tentunya keren dan terlihat professional. Ikuti langkah-langkah dibawah ini:

• Buka Blogger ( www.blogger.com )

• Pilih tab Tema/Tamplate > Edit HTML

• Letakkan Kode CSS dibawah ini tepat di atas atau sebelum kode ]]></b:skin> atau </style>

/* Subscribe Box */#subscribe-css{position:relative;padding:20px 0;background:#222;overflow:hidden;border-top:4px solid #eee;}.subscribe-wrapper{color:#fff;font-size:16px;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:#333;color:#ccc;margin:10px 0;padding:15px 20px;width:60%;border:0}.subscribe-css-email-button{background:#ff5722;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:#ef501e;}#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;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:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}#subscribe-css:hover p.subscribe-note span:before{width:100%;}

• Kemudian Letakkan Kode dibawah ini di tempat yang Anda inginkan, (Bebas & Terserah anda!). Kode tersebut juga bisa anda pasang di widget Tata Letak/Layout apabila anda bingung untuk memasang di Edit HTML.

<div id='subscribe-css'><p class='subscribe-note'><span>SUBSCRIBE</span><span class='itatu'>TO</span> OUR NEWSLETTER</p><div class='subscribe-wrapper'><div class='subscribe-form'><form action='http://feedburner.google.com/fb/a/mailverify?uri=TeoriNewbie' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=TeoriNewbie&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='ClickUnduh'/><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>

• Ganti Tulisan TeoriNewbie nya Dengan ID FeedBurner Anda. Setelah Itu klik Simpan Tamplate.

• Selesai

Apabila ada kesulitan dalam pemasangan subscribe box anda bisa meninggalkan komentar dibawah, apabila sempat, saya akan membalas. :)