Membuat Judul Postingan Blog Yang Kedua

Setelah melaksanakan tutorial membuat template blogger menjadi responsive atau mobile friendly, nanti di bawah postingan akan kami jelaskan apa itu template responsive, dan menguraikan beberapa kelebihan, dan kekurangannya.

Kami membahas itu juga, barangkali ada pembaca blog ini yang belum mengetahui apa itu template responsive. oleh sebab itu, yang kita bahas terlebih dahulu, adalah tutorial merubah blog menjadi responsive, dan lebih seo friendly.

Tanpa panjang lebar, pertama yang perlu dilakukan, adalah

backup terlebih template yang anda gunakan saat ini.

Hal ini kami anjurkan, karena barangkali di template anda sudah terdapat kode kode penting, seperti kode google webmaster, bing, atau lainnya. Untuk melakukan backup, perhatikan gambar berikut

Perhatikan tulisan backup / download di atas sebelah kanan. Langsung saja di klik, dan kemudian tunggu hasil download hingga selesai.
Setelah di download, silahkan di simpan, atau boleh dijadikan sebagai praktek tutorial ini.

1. Menghilangkan Navgar Bawaan Blogger.

Salah satu penyebab template Blogger tidak responsive, adalah navgar. Jadi, hapus kode yang seperti berikut :

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
</b:includable>
</b:widget>
</b:section>

2. Setelah itu, cari kode seperti ini

.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}

Sekarang ganti dengan kode berikut:

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

3. Silahkan cari kode yang mirip seperti ini

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

Kemudian ganti dengan

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

4. Yang terakhir, simpan css berikut di atas kode </head>

<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width:800px){
.sidebar .widget,.sidebar .widget img {width:100%}
#menu {width: 95%;}
.main-inner .columns {padding-left: 0px;padding-right: 240px;}
.main-inner .fauxcolumn-right-outer {width: 230px;}
.main-inner .column-center-inner {padding: 0;}
.main-inner .column-right-outer {width: 250px;margin-right: -250px;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
.content {position: relative;word-wrap: break-word;width: 97%;margin: 0 5px;}
body {background:#fff}
}
@media screen and (max-width:400px){
.main-inner .column-center-inner {padding: 0 15px 0 0;}
.sidebar {margin:10px 0 5px}
}
@media only screen and (max-width:568px){
.post{height:auto;width:100%!important;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}
.main-inner .column-right-outer{width:100%!important;padding-bottom:50px!important;padding-top:50px}
}
@media only screen and (max-width:800px){
.main-inner .column-center-inner {padding: 0px;}
.main-inner .columns{padding-left:0;padding-right:310px;width:100%!important;position:relative;right:0!important}
.main-inner .column-right-outer{width:310px!important;margin-right:0!important;position:relative;right:10px!important}
.main-inner .column-right-outer{padding-top:50px!important;padding-bottom 50px!important}
}
@media only screen and (max-width:1010px) {
body .navbar {height: 0px !important;}
body{min-width:0!important;width:100%!important;padding:0!important}
.content{width:100%!important;min-width:0!important;overflow:hidden!important}
.header-outer{width:100%}
.fauxborder-left{width:100%!important}
html body .region-inner{min-width:0!important;max-width:100%!important;width:100%!important;padding-left:0}
.header-inner .section{margin:0;width:100%!important}
.footer-outer{width:100%!important}
.content-outer,.content-fauxcolumn-outer,.region-inner{min-width:0!important;max-width:100%!important}
#sidebar-right-1{width:100%!important}
.main-inner .column-right-outer{width:45%!important;margin-right:-310px;position:relative;right:10px!important}
.main-inner .columns{padding-left:0;padding-right:310px;width:70%!important;position:relative;right:20px!important}
#sidebar-right-1 a img{max-width:100%!important}
.post-body img, .post-body .tr-caption-container {max-width: 100%;height: auto;}
}
</style>

Css di atas gunanya untuk mengatur tampilan template sesuai yang anda harapkan. Dan, jangan lupa di save. Alhamdulillah, silahkan lihat template anda.

Apa itu template yang responsive, atau mobile friendly.

Template responsive, atau mobile friendly adalah template yang tampilannya mampu menyesuaikan perangkat yang digunakan pengunjung. Ketika pengunjung blog melalui android, maka tampilan menyesuaikan layar android. Dengan begitu, pengunjung merasa lebih nyaman ketika berkunjung ke blog kita meskipun menggunakan android.

Tidak hanya itu...

Ketika blog dikunjungi melalui komputer, maka tampilannya pun menyesuaikan layar komputer. Jadi, template responsive sangat nyaman dikunjungi, dan hal ini termasuk anjuran google kepada pemilik website.

Dalam artian,,,

Google sangat menyarankan kepada pemilik website, agar websitenya nyaman dikunjungi, dan membuat mereka betah berlama-lama di blog kita.

Asal kita tahu, kalau kita berusaha agar para pengunjung nyaman, betah di blog, dan merasa senang ketika membaca artikel yang kita sajikan, maka kita termasuk Blogger yang sedang melakukan teknik seo yang sehat, dan tentunya berdampak positif untuk jaka panjang.

Apabila anda ingin menjadi Blogger profesional, dan memiliki banyak pengunjung, maka yang harus dipertimbangkan, adalah kualitas artikel. Jika artikel yang anda buat dianggap berbobot, dan berkualitas baik, maka itu pertanda blog anda adalah blog yang hebat, dan kemungkinan besar anda akan sukses meskipun blog yang anda kelola, adalah blog gratisan.

Kalau berbicara tampilan website, itu hanya sebatas faktor pendukung. Yang mempengaruhi sukses, dan tidaknya sebuah website, adalah kualitas artikel, atau isi yang di dalamnya. Jadi, utamakanlah kepuasan pengunjung.

Kelebihan, dan kekurangannya template responsive buatan sendiri.

Sesuai dengan ucapan kami di atas, maka akan kami uraikan beberapa kelebihan, dan kekurangannya template buatan sendiri, namun sudah responsif, dan berikut adalah kelebihan yang kami ketahui :

1. Mengajarkan kita kreatif.
2. Tidak ada link websitenya orang lain.
3. Tidak perlu mengeluarkan biaya.
4. Tampilannya cukup nyaman, dan tidak berlebihan.

Sekarang tentang kekurangannya:

1. Kita harus mengetahui kode html, dan ini cukup membuat pusing bagi para pemula.
2. Harus banyak membaca artikel orang lain yang berkaitan dengan tampilan website.
3. Cukup menghabiskan waktu.

Demikian, yang dapat kami sampaikan, dan semoga bermanfaat.