Cara Menciptakan Subcribtion Box Responsive Di Blog
Cara Membuat Subcribtion Box Responsive Di Blog - Pada kesempatan kali ini saya akan membahas tutorial Bagaimana Cara Membuat Subcribtion Box atau Kotak Berlangganan Keren di Blog. Widget subcription blog ini sangat mempunyai kegunaan bagi pengunjung blog kita yang ingin berlangganan post kita via email. Nah, untuk tampilannya silahkan cek di bab footer / bab bawah blog ini.
Tutorial ini bahu-membahu sudah banyak di jelaskan oleh para Mastah-mastah blogger berpengalaman di bidang Blog, namun saya rasa tidak ada salahnya jikalau teman mencoba memasang Subscribtion Box ini di blog sobat, alasannya ialah widget ini telah saya lakukan sedikit modifikasi.
Cara Membuat Subcribtion Box Responsive Di Blog
- Pertama, Silahkan Login ke akun Blogger > Template > Edit HTML- Kedua, Copy dan Simpan Kode CSS di bawah ini di atas Kode </style> atau ]]></b:skin>
/* CSS Subscribe Box */ #subscribe-css{position:relative;padding:20px 0;background:#374760;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:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0} .subscribe-css-email-button{background:#3cc091;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:#37b185;} #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%;}Untuk ukuran font, warna dan sebagainya silahkan lakukan modifikasi kembali sesuai selera sobat.
- Langkah ketiga, copy markup di bawah ini dan simpan di antara tag pembuka <body> dan tag epilog </body>. Contohnya menyerupai yang ada di bab bawah blog ini, yakni di bab footer-wrapper.
<div id='subscribe-css'> <p class='subscribe-note'><span>BERLANGGANAN</span> <span class='itatu'>via</span>EMAIL</p> <div class='subscribe-wrapper'> <div class='subscribe-form'> <form action='http://feedburner.google.com/fb/a/mailverify?uri=masdsgn' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=masdsgn', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='masdsgn'/><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>
Silahkan ganti isyarat yang di tandai di atas dengan id feedburner blog sobat.
- Langkah terakhir, simpan setelan template teman dan cek hasilnya.
Demikian tutorial Cara Membuat Subcribtion Box Responsive Di Blog ini, biar bermanfaat dan hingga jumpa di tutorial selanjutnya.
0 Response to "Cara Menciptakan Subcribtion Box Responsive Di Blog"
Post a Comment