June 22, 2017

In SEO Responsive and SEO Friendly Blogger Template

In SEO Responsive and SEO Friendly Blogger Template

In SEO Responsive and SEO Friendly Blogger Template - Dalam memilih template untuk blog itu tidak bisa sembarangan, karena template yang kurang tepat bisa berpengaruh pada kesuksesan sebuah blog, bisa sukses atau bisa gagal.

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.

In SEO Responsive and SEO Friendly Blogger Template

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='http://feedburner.google.com/fb/a/mailverify?uri=seoindzign' class="subscribe-form" method="post" onsubmit="window.open('http://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.
In SEO Responsive and SEO Friendly Blogger Template
4/ 5
Oleh