Kamis, 11 April 2019

Cara Membuat Kotak Berlangganan di Blog Responsive

Pada tutorial kali ini kami akan memberitahu Cara Membuat Kotak Berlangganan (Box Subscription) di Blog responsive, sebenarnya bagi kalian yang sudah faham coding bisa di cari di bagian inspect elements, atau Page Source dari halaman blog orang kalian ingin copy linknya. Tetapi bagi kalian ingin mengetahui step by step  Cara Membuat Kotak Berlangganan (Box Subscription) di Blog responsive mari simak penjelasan kami berikut ini
Langkah – langkah Cara Membuat Kotak Berlangganan (Box Subscription) di Blog responsive
1.      Seperti biasa kita masuk Blog – Template – Edit HTML
2.      Cari kode ]]></b:skin> dan letakkan script di bawah ini tepat di atasnya
/* 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%;}
3.      Jika kalian akan menempatkan di samping postingan cara selanjutnya masuk ke Blog – Tata Letak – Tambah Gadget HTML/JavaScript dan copy script di bawah ini ke konten Gadget HTML/JavaScript
<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWS ARTICLE</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=ShareItAja' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=ArlinaDesign&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=420&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='ShareItAja'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Masukan Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>
4.      Ganti semua tulisan “ShareItAja” yang ada di konten Gadget HTML/JavaScript dengan id feed burner kalian
5.      Simpat dan lihat perubahan blog kalian, untuk warna bisa kalian ubah menurut kesukaan masing – masing individu
Jika kalian ingin menempatkan di bagian bawah bisa kalian tempatkan di bagian Footer Wrapper dengan cara copy yang ada di konten Gadget HTML/JavaScript tersebut. Semoga bisa membantu Cara Membuat Kotak Berlangganan (Box Subscription) di Blog responsive

0 komentar:

Posting Komentar

 

Catatan Faris Java Copyright © 2011 | Template design by O Pregador | Powered by Blogger Templates