»

Cara Memasang Subscription Box di Blog atau Web




Hay sob , kembali lagi di web saya . Saya selaku author akan memberikan tutorial tentang mengedit atau mendesain blog agar lebih menarik . Kali ini, saya akan memberikan sebuah tutorial bagaimana cara memasang subscription box keren di bawah ( Footer ) blog . Langsung aja dah daripada basa – basi .
  1.        Pastikan Blogger sudah dibuka
  2.        Menu Template > Edit HTML
  3.        Tambahkan kode dibawah ini diatas kode ]]></b:skin> atau </style> 
    4. /* 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%;}

    ingat yang kode yang berbackground merah bisa diganti dengan kode warna kesukaan anda , sob
  4.             Selanjutnya tambahkan kode atau markup dibawah ini bebas diantara tag pembuka <body> dan tag penutup </body>
    5. <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=IDFeedAnda' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=IDFeedAnda&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='IDFeedAnda'/><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>
    Ingat kode yang berbackground warna merah ganti dengan ID Feedburner yang anda miliki
  5.                Setelah semua selesai simpan template dan lihat hasilnya

Apabila kebingungan meletakkan kode yang saya berikan di no.4 . saya akan memberikan referensi sebuah gambar yang saya miliki dan dimana saya meletakkannya
Aafi

Seorang Penulis Blog yang tidak pernah lelah untuk berbagi pengalaman dan ilmu

Postingan terkait:

— Add Comment — Edit Post

Belum ada tanggapan untuk "Cara Memasang Subscription Box di Blog atau Web"

Posting Komentar

Langganan: Posting Komentar (Atom)