cara mendesain ulang atau redesign template blogger agar clean dan seo friendly

masAdmin    Desember 17, 2019    Blogger    11 comments   

Mungkin salah satu dari anda masih menggunakan template bawaan blogger atau masih menggunakan template gratisan yang anda download di google. Sebenarnya tidak masalah anda menggunakan kedua template template tersebut asal anda pintar mengolah dan mengoptimalkan template tersebut. Namun untuk hasil yang maksimal anda bisa membeli template premium, Untuk sekarang sudah cukup banyak yang menjual template premium seperti mas sugeng dan igniel.


Namun anda harus mengeluarkan biaya tambahan untuk membeli template premium tersebut, untuk harga template premium sekarang berada di kisaran 100-200 ribu rupiah pertemplate.  Namun jika anda belum yakin atau menginginkan template yang gratisan namun bisa optimal anda bisa mendesain template sendiri atau mendesain ulang template yang anda download di google.


mungkin beberapa dari anda belum tau cara untuk mendesain ulang atau redesign template, maka dari itu admin mau ngasih tau cara untuk meredesign template blogger, Berikut adalah caranya.

Cara redesign template blogger supaya clean, seo friendly, responsif, dan auto read more.

1. Log in ke akun blogger anda.

 jika anda anda belum memiliki akun blogger silahkan buat akun terlebih dahulu, caranya:

note: jika anda sudah memiliki blog anda bisa skip tutorial ini dan langsung ke tutorial redesignya dibawah

• Buka browser di hp atau pc anda (saya sarankan menggunakan browser google chrome untuk hasil tang lebih maksimal)
• Jika anda belum memiliki blog silahkan tekan buat blog baru/create new blog

• Silahkan log in menggunakan akun google anda

• Silahkan buat profil anda terlebih dahulu, lalu tekan lanjutkan ke bloger.

• lalu tekan buat blog baru

• masukan nama blog dan alamat url yang ingin anda gunakan dan pilih template sederhana.

• Anda sukses membuat blog baru anda.

Nah sekarang anda sudah memiliki blog, langkah selanjutnya kita akan me redesign template blog anda agar responsif, clean, seo friendly, dan auto read more.

2. Cara Mendesain ulang template blog

>Kita akan membuat auto read more terlebih dahulu, caranya:

• Silahkan buka menu tema/template di dashboard blogger anda.

• Lalu anda masuk atau tekan tombol edit html.

• Maka tampilanya akan seperti ini.

• Lalu copy kode di bawah ini dan paste di atas kode /head.

<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><style>.thumbnail-post {width:100px !important; height:80px !important; float:left; margin:0px 15px 5px 0px;} .post-footer,.date-header {display:none} </style></b:if></b:if>

• Lalu tekan tombol CTRL + F dan ketik <data:post.body/>
• Maka anda akan menemukan 2 kode, hapus dan ganti kode <data:post.body/> yang kedua dengan kode di bawah ini:

<!-- auto readmore start --><b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.firstImageUrl'><a expr:href='data:post.url'><img class='thumbnail-post' expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a><b:else/><a expr:href='data:post.url'><img class='thumbnail-post' expr:alt='data:post.title' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a></b:if><div class='post-snippet'><data:post.snippet/></div></b:if></b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if><!-- auto readmore end -->

• Lalu tekan tombol save/atau simpan tema, dan anda bisa melihat hasilnya dengan cara mengunjungi blog anda. namun anda harus memiliki setidaknya 1 artikel.

> Lalu kita akan membuat template menjadi responsif.

• Silahkan tambahkan kode ini diatas kode ]]></b:skin>

.header-inner .Header .descriptionwrapper { padding: 0 30px; } .header-inner .Header .titlewrapper { padding: 22px 30px 0; } .Header h1 { font: normal normal 36px Arial, Tahoma, Helvetica, FreeSans, sans-serif; color: #ffffff; text-shadow: 1px 2px 3px rgba(0, 0, 0, .2); }

• Cari kode dibawah ini (ada di bagian atas)

<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>

• Silahkan Hapus dan ganti dengan kode dibawah ini.

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

• Kemudian cari kode dibawah ini.
  

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

• Hapus dan ganti dengan kode dibawah ini:

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

• Copy dan paste kode dibawah ini diatas kode /head. 

<style>@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 only screen and (max-width:800px) { .main-inner .columns {padding-left: 0px;padding-right: 300px;} .main-inner .column-right-outer {width: 300px;margin-right: -300px;} .main-inner .fauxcolumn-right-outer {width: 300px;} .sidebar .widget,.sidebar .widget img {width:100%} .main-inner .columns {padding-left: 0px;padding-right: 300px;} .socials {display:none} } @media screen and (max-width: 603px){ .main-inner .columns {padding-right: 0!important;} .main-inner .column-right-outer {width: 95%;margin: 15px} .content-inner {padding:15px 0;background-color: #ffffff;} .post-thumbnails {margin: 0 15px 5px 0;width:72px;height:72px;} .post h2 {font-size: 17px;} } @media only screen and (max-width:480px){ body {padding: 10px;} main-inner .column-center-inner {padding: 0;} .main-inner .column-center-inner .section, .main-inner .column-left-inner .section, .main-inner .column-right-inner .section {margin:15px;} .post h2 {font-size:16px;} .post {margin: 0 0 10px 0;padding: 0 0 5px 0;height: auto;} } @media only screen and (max-width:320px){ .post h2 {font-size:14px;} } </style>

• Lalu klik save/simpan.

• Kemudian masuk ke menu tema
• Klik ikon gear
• Lalu pilih no untuk menonaktifkan tampilan seluler

> Langkah terakhir kita akan mengoptimasi SEO

Kita sudah selesai mendesain Template, sekarang saatnya kita mengoptimalkan SEO agar blog anda mampu bersaing di mesin pencari.

• Silahkan masuk ke menu Tema>Edit html.
• Cari dan hapus kode dibawah ini (ada di bagian atas).

<title><data:blog.pageTitle/></title>

• Ganti dengan kode dibawah ini

<b:if cond='data:blog.pageType == "index"'><title><data:blog.pageTitle/> - Template Blog Simple SEO Cepat</title><b:else/><title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

Selesai..... Sekarang anda sudah memiliki Template blog yang responsif, clean, dan SEO friendly, serta memiliki auto read more. Untuk desain-desain tambahan dan fitur-fitur tambahan anda bisa menambahkan nya sendiri, atau melalui Tutorial dibawah ini:

• Menu navigasi
• Breadcrumb
• Meta deskripsi, author, keyword
• Footer
• Widget

Terimakasih telah berkunjung di blog ini, saya mohon maaf jika terdapat kesalahan atau kekurangan di artikel ini.