Cara Membuat Subscribe Box Responsive Dan Seo Frendly

Di sini saya akan memberikan tutorial cara membuat Subscribe Box di blog responsive dan seo frendly, apa itu subscribe box ? subscribe box adalah menu blog untuk mengajak para pengunjung agar mengikuti perkembangan blog kita. Subscribe box fungsinya sama seperti subscribe yang ada di youtube yang fingsinya mengajak para pengunjung untuk berlangganan di blog kita.

Apa keuntungan dari subscribe box itu ? keuntungan memasang subscribe itu ialah pada faktor visitor, apabila ada orang yang berlangganan di blog kita otomatis kita memiliki pengunjung tetap di blog kita, gimana bermanfaat bukan.

Pada tutorial ini saya akan membuat subscribe box responsibe dan seo frendly seperti tamplate arlina design. Pasti dari kaliaj semua yang pernah memakai salah satu tamplate arlina design pernah melihat menu subscribe box bukan ? nah saya akan membagikan tutorial cara buatnya. Langsung tanpa basa basi kali kita menuju ke tutorialnya.

Baca Juga Kriteria Blog Yang Disukai Adsense Pada Tahun 2017

Cara membuat subscribe box responsive dan seo frendly.

1. Pertama kalian buka dasbhord blogger, cari menu tamplate dan edit tamplate. Lalu kalian cari kode </b:skin> atau </style> dan letakan di atas kode tersebut.

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#444;overflow:hidden;border-top:4px solid #eee:none}
.subscribe-wrapper{color:#ffffff;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:#555;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#30E0E7;color:#ffffff;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:#E73037;}
#subscribe-css p.subscribe-note{margin:10px;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
@media screen and (max-width:768px){
#subscribe-css p.subscribe-note{margin:0 0 20px 0;width:100%;}
.subscribe-wrapper {width:100%;}
}
@media screen and (max-width:640px){
#subscribe-css p.subscribe-note{font-size:140%}
form.subscribe-form{padding:0 10px}
.subscribe-css-email-field,.subscribe-css-email-button{padding:15px 0;text-align:center;margin:10px 0;width:100%}

2. Copy code di bawah lalu letakan di atas <div class='clear'/>footer atau terserah kalian mau letakan di mana saja asal tau script pembuka dan penutup agar tidak ada kesalah pas di simpan

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

Untuk yang bertuliskan merah kalian ganti dengan sesuka kalian, Untuk mendesain tampilan atau warnanya kalian bisa edit di bagian CSS tadi.

Naah kalian bisa langsung simpan tamplate, namun apabila ada yang eror pada script penutup kalian bisa menambahkan atau mengurangi </div>. sekian dari tutorial ini semoga bermanfaat bagi kalian.

Bagikan di Facebook

Bagikan di Twitter

Bagikan di Google+

Bagikan di LinkedIn