Cara Mengedit Sendiri Template Blog Bawaan Blogger

Cara Mengedit Sendiri Template Blog Bawaan Blogger: Menjadikan Responsive plus Tambahan Widget Related Posts dan Breadcrumbs.

MENGEDIT sendiri template blog default blogger sangat mengasyikkan. Jika hasilnya bagus, maka Anda bisa membagikannya kepada blogger lain sekaligus promosi blog Anda melalui credit link, misalnya Edited by Blogger Pedia.

Mengedit Sendiri Template Blog Bawaan Blogger juga menjadikan blog Anda bebas link credit desainer blogger yang biasa ada di bagian bawah blog. Credit link itu tidak boleh dihapus jika gratisan atau free download.

Blogger memberikan panduan cara edit atau modifikasi template di laman Bantuan Google: Mengubah Desain Blog.

Ringkasannya:
1. Di dashboard blogger Anda, klik menu Template lalu klik Customize (Sesuaikan)
2. Akan muncul halaman baru untuk mengedit desain template.

Saya sarankan Anda pilih template SIMPLE saat pertamakali membuat blog dan memilih template. Selain itu, lakukan edit template blog ini di blog baru. Artinya, buatlah blog baru khusus untuk belajar desain tampilan blog.

Menjadikannya Responsive

Setelah mantap mengatur ukuran lebar blog (sebaiknya antara 960 - 980 pixel), memilih jumlah kolom, jenis dan ukuran huruf, warna, dan sebagainya, langkah pertama yang bisa dilakukan adalah membuatnya responsive atau ramah seluler (mobil-friendly).

Caranya sebagaimana dishare oleh Kompi Ajaib berikut ini:

1. Nonaktifkan navbar Blogger. Klik Layout (tata letak) kemudian edit gadget Navbar. Pilih option OFF untuk menonaktifkan navbar.


Kini masuk ke kode template: Klik Template > Edit HTML
2. Membuat gambar postingan menjadi reponsive. Silahkan cari kode di bawah ini.

.post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);
}
Kemudian silahkan ganti kode di atas dengan kode di bawah ini

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

3. Cari kode di bawah ini (di bagian atas template)

    <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 di bawah ini

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

4.  Simpan kode di bawah ini 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: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
</style>

5 Save! Simpan Template!


Widget Tambahan dalam Edit Template

Dalam mengedit template, tambahkan sejumlah widget atau elemen yang tidak ada di template bawaan blog, terutama widget  Artikel Terkait (Related Posts).

Sangat banyak tips membuat atau menambahkan widget Related Post, mulai dari yang simple hingga yang plus gambar thumbnai.

Memasang Related Posts
Salah satu rujukan membuat Related Post ada di DTE. Ada enam jenis tampilan di sana plus cara memasangnya. Klik menu Buka Generator Widget yang ada di tengah postingan.

Memasang Breadcrumbs
Widget lain yang tidak ada di template bawaan blogger adalah Breadcrumbs. Lakukan langkah berikut ini untuk memasangnya, sebagaimana dishare Creating Website.

1. Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin>

        .breadcrumbs{
        padding:5px 5px 5px 0;
        margin:0;font-size:95%;
        line-height:1.4em;
        border-bottom:4px double #cadaef}

2. Cari kode seperti ini :

        <div class='post hentry'>

3. Letakkan kode berikut ini tepat setelah kode <div class='post hentry'>

        <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

4. Simpan Template. Selesai!

Demikian panduan "sementara"  Cara Mengedit Sendiri Template Blog Bawaan Blogger dengan menjadikannya responsive plus tambahan widget posting terkait dan breadcrumbs.*

Share:

Related Posts

Disqus Comments