Cara Mengubah Tampilan Blog: Edit Template Auto Readmore, Responsive, SEO Friendly

Baca Juga

Cara Mengubah Tampilan Blog: Edit Template Blogger Jadi Auto Readmore, Responsive (Mobile-Friendly), dan SEO Friendly.

POSTING ini merupakan update tulisan sebelumnya, cara membuat auto read more di halaman depan blog di platform Blogger (Blogspot) milik Google.

Kali ini kode-kode untuk desain ulang template blog bawaan Blogger ini sudah saya edit. Langkah-langkahnya juga lebih lengkap plus pengoptimalan mesin telusur (SEO).

Sebelum ke langkah mengubah desain tampilan blog dengan mengedit template, kita bahas dulu istilahnya satu per satu.

• Template -- disebut juga tema (theme) -- adalah desain tampilan blog.
• Auto Readmore -- adalah istilah untuk tampilan halaman depan blog berupa ringkasan postinga, terdiri dari judul, gambar kecil (thumbnail image), dan ringkasan atau kutipan isi tulisan bagian awal (summary/snippet). Contohnya halaman depan blog ini.
• Responsive (Mobile-Friendly) -- adalah istilah yang merujuk pada desain blog/website ramah mobile.
• SEO Friendly artinya adalah ramah mesin telusur. SEO sendiri singkatan dari Search Engine Optimization atau Pengoptimalan Mesin Telusur, agar blog kita mudah dan cepat terindeks mesin pencari, seperti Google, sehingga mendatangkan banyak pengunjung/pembaca.

Cara Mengubah Tampilan Blog: Edit Template Blogger

Kita akan mengedit template blog dalam empat langkah, yaitu membuat blog bar di Blogger, memasang kode autoreadmore, mereponsivekannya, dan menjadikannya lebih SEO Friendly.

LANGKAH 1: Membuat Blog Baru

Jika Anda ingin langsung menerapkannya di blog Anda, lewati langkah No. 1 ini. Namun, saya sarankan Anda membuat blog baru. Lewati Langkah 1 ini jika Anda tidak membuat blog baru.

Cara Membuat Blog Baru:

1. Login ke akun Blogger Anda.

2. Klik tanda panah ke bawah yang ada di samping nama blog Anda saat ini

3. Scrool ke bawah lalu Pilih/klik New Blog (Blog baru).

Akan muncul jendela baru. Silakan buat blog baru Anda dengan mengisi Nama Blog (Title) dan alamatnya (Address).

Pilih tema Simple (Sederhana), lalu klik Create blog (Buat blog).

4. Beres!

Blog baru sudah jadi. Silakan isi dengan minimal 7 postingan agar blog tampil normal. Anda bisa menggunakan sample posting dari Spot Dummy untuk mengisi blog baru yang masih kosong itu.

LANGKAH 2: Membuat Auto Read More

Kini saatnya membuat auto readmore di halaman depan. Tampilan blog dengan template Simple bawaan blogger tadi masih menampilkan tulisan penuh (utuh) di halaman depan blog. Lihat Hasilnya.

Kita akan meringkasnya dengan cara sebagai berikut.

1. Klik Tema > Edit HTML

2. Simpan kode berikut ini di atas kode </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>

Lihat contohnya dalam gambar ini.

3. Cari (Ctrl+F)  kode <data:post.body/>
4. Anda akan menemukan dua kode. Hapus dan ganti kode <data:post.body/> yang kedua dengan kode berikut ini:

<!-- auto readmore start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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 == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>
<!-- auto readmore end -->

4. Save template!

Memasang auto readmore di halaman depan blogger sudah selesai. Lihat Hasilnya.

Optional

Jika gambar thumbnail buram (blur), maka tambahkan kode berikut ini di atas kode </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {$('.thumbnail-post').attr('src', function(i, src)
{return src.replace( 's72-c', 's640' );});});
//]]>
</script>

Jika gambar thumnail tidak buram, kode di atas tidak usah ditambahkan.

LANGKAH 3 - Membuat Template Jadi Responsive

Sebelumnya kita edit dulu tampilan blognya di menu Customize (Kustomisasi) untuk mengubah warna, jenis huruf, dll.

Klik Tema > Customize (Kustomisasi)

Lebarnya saya buat jadi 960 pixel. Sidebar 360 pixel. Warna latar dan link biru. Jenis huruf Arial (standar). Body layout 1 sidebar kanan. Footer layout 1 footer saja.

Hasilnya seperti ini:

Untuk mengubah tampilan header menjadi seperti di atas, tambahkan (copas) kode berikut ini di atas 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);
}

Saatnya kita memasang kode agar template blog kita responsive.

1. Hapus kode navbar seperti dalam gambar di bawah ini, milai dari kode <b:section dst.. hingga <b/:section>

2. Cari (ada di bagian atas kode template) kode berikut 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>

Ganti dengan kode ini:

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

3. Cari kode ini:

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

Hapus dan ganti dengan kode ini:

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

4. Simpan kode berikut ini di atas 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>

5. Save! Simpan Template.

Kini blog Anda sudah responsive. Pastikan setting template seperti gambar di bawah ini, dengan menonaktifkan template mobile bawaan blogger:

- Klik Thema/Tema
- Klik icon gear
- Klik "No"

Sekarang silakan cek blog Anda di laman Mobile-friendly Test Google. Untuk blog yang saya edit, Lihat Hasilnya.

Optional: Widget Popular Post Judul Saja

Untuk merapikan tampilan Popular Posts yang berupa judul saja, tanpa gambar, copas kode berikut ini di atas kode ]]></b:skin>

.widget .popular-posts ul {
    list-style: none;
    padding: 0;
    line-height: normal;
}

Untuk merapikan tampilan halaman utama agar tidak adagaris batas putih, copas kode berikut ini di atas kode ]]></b:skin>

.content-inner {
    padding: 0;
}

Optional: Memindahkan Judul ke Samping Gambar

Jika ingin memindahkan judul posting halaman depan ke samping gambar thumbnail:

1. Copas kode berikut ini di atas kode ]]></b:skin>

h2.post-title, .comments h4 {
font: normal bold 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: .75em 0 5px;
}
h1.post-title {font-size: 25px;
    line-height: normal;
}

2. Cari kode berikut ini yang ada di bawah kode  <b:includable id='post' var='post'>

    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h3>
      </b:if>   

Hapus dan Ganti dengan kode ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.title'>
      <h1 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h1>
      </b:if> 
      </b:if>

3 Tambahkan kode berikut ini di atas kode <div class='post-snippet'>

    <b:if cond='data:post.title'>
      <h2 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h2>
      </b:if>      

4.  Copas kode berikut ini di atas kode </head>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style>
.post-body {
    font-size: 100%;
    line-height: normal;
    position: relative;
    color: #666;
}
</style>
</b:if>

Save! Simpan Template.

Hasilnya seperti ini:

LANGKAH 4 : Optimalkan SEO

Sisi desain template sudah selesai. Kini saatnya membuat blog lebih ramah mesin telusur.

Di langkah memindahkan judul ke samping gambar di atas juga sudah optimalisasi SEO, yaitu menggunakan heading tag dimanis h2 untuk judul halaman depan dan h1 judul halaman dalam (single post).

Berikut ini kita optimalkan title tags-nya:

1. Tema > Edit HTML
2. Cari dan hapus kode ini (ada di bagian atas kode template)

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

Ganti dengan kode ini:

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

Save! Simpan template.

PENUTUP

Cara Mengubah Tampilan Blog (Edit Template) sudah selesai. Anda bisa melanjutkannya dengan menambahkan beberapa widget, seperti:

1. Related Post
2. Breadcrumbs

Demikian Cara Mengubah Tampilan Blog: Edit Template Auto Readmore, Responsive, plus SEO standar sehingga blog Anda lebih SE Friendly. Wasalam. (www.romelteamedia.com).*