In SEO Responsive and SEO Friendly Blogger Template
Template
Blogger harus benar-benar teliti dalam memilih template, harus paham template seperti apa yang bisa mendatangkan pengunjung yang banyak. Dibutuhkan template yang SEO friendly, yaitu template yang disukai mesin pencari seperti Google atau Bing.
Selain SEO, perlu juga untuk memperhatikan apakah template itu sudah mendukung tampilan responsive atau belum, template responsive penting bagi suatu blog untuk melayani pengunjung yang membuka blog dari perangkat mobile seperti smartphone dan tablet pc, yaitu agar blog bisa menyesuaikan dengan lebar dari perangkat tersebut, sehingga pengunjung tidak kesulitan saat membaca isi blog Anda.
Untuk Anda sobat blogger yang menggunakan platform blogspot, berikut ini saya akan membagikan template ke dua yaitu template In SEO yang sudah SEO friendly dan responsive yang bisa Anda gunakan dengan cuma-cuma.
Silakan lihat fitur, demo, dan link download template In SEO Responsive Blogger Template di bawah ini
| Features | Availability |
|---|---|
| Responsive | True Cek |
| Mobile Friendly | True Cek |
| Google PageSpeed Insights | True Cek |
| Google Testing Tools | True Cek |
| SEO Friendly | True |
| Personal Blog | True |
| 2 Column | True |
| Featured Post Widget | True |
| Recommended Post Widget | True |
| Breadcrumbs | True |
| Related Posts with Thumb | True |
| Search Box | True |
| Social Share Button | True |
| Email Subscribe Box | True |
| Back to Top Button | True |
Setingan Template
Pertama buka template editor, kemudian cari kode-kode di bawah ini :
Setingan widget
Buka tata letak > Salin kode ini di widget kosong bagian sidebar :
Widget Subscribe Box
<div id="subscribe-css">
<div class="subscribe-wrapper">
<h2>Newsletter</h2>
<p>If you like articles on this blog, please subscribe for free via email.</p>
<div class="subscribe-form">
<form action='https://feedburner.google.com/fb/a/mailverify?uri=seoindzign' class="subscribe-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=seoindzign', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="seoindzign" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email"/>
<input class="subscribe-css-button" title="" type="submit" value="Submit" />
</form>
</div>
</div></div>Ganti kode yang ditandai dengan nama feedburner blog Anda.
Buat post halaman statis > Salin kode ini di di tab HTML :
Widget Formulir Kontak
Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.
<form name="contact-form">
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" />
</div>
<div class='formcolumn2'>
<input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" />
</div>
<div class='formcolumn3'>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea>
</div>
<div class='formcolumn4'>
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</div>
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#ContactForm1{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{font-family:'Poppins';display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Poppins';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>Untuk setingan lainnya saya anggap Anda sudah mengerti. Terima kasih sudah membaca dan semoga bermanfaat.