Dua minggu yang lalu kita sudah membahas cara membuat blog gratis di Blogspot atau Blogger.com dan semoga sobat masih tetap semangat menulis di blog barunya. Selanjutnya kita akan membahas cara mengganti template di Blogger baik menggunakan template yang sudah ada atau template baru. Untuk mengganti template, pertama yang harus Anda putuskan adalah apakah Anda ingin menggunakan template yang sudah disediakan oleh Blogger.com, atau memilih untuk menggunakan template lain, mungkin hasil desain sendiri atau didapat dari situs lain. Jika Anda ingin menggunakan template sendiri maka sebaiknya unduh dari file template pilihan Anda terlebih dahulu. Namun jika Anda memilih menggunakan template yang sudah ada, maka Anda bisa langsung memulai proses perubahan template.
 Info Menarik: Resmi Diumumkan, Ini Dia Spesifikasi Lengkap Samsung Galaxy S5
Info Menarik: Nokia Umumkan ‘Keluarga Nokia X’ di MWC 2014: Nokia X, X+ dan XL
Untuk mempermudah penggantian template, saya merekomendasikan Anda untuk memilih template yang sederhana. Template yang rumit membutuhkan banyak proses modifikasi, dan jika terlalu sulit dikhawatirkan justru membuat Anda patah semangat dan meninggalkan blog yang baru Anda buat. Namun demikian, jika Anda memiliki waktu lebih untuk mencoba, sejatinya cara mengganti template di Blogger.com atau blogspot itu sangat mudah. Keep simple and happy blogging!
Cara mengganti template blogspot dengan template sendiri yang saya jelaskan berikut ini bisa menjadi petunjuk bagi anda untuk mengubah tampilan blog anda.
2. Lihat gambar di atas, gambar tersebut merupakan tampilan halaman www.btemplates.com. Cari template blogger yang anda inginkan, kemudian klik "download". 3. Setelah kita mendownload template blogspot yang kita inginkan. Lalu masuk ke akun blogger anda seperti di bawah ini :
4. Lihat gambar di atas, klik "tema"
5. Klik "backup/pulihkan"
6. Sebelum mengupload template blogger milik kita sendiri, terlebih dahulu kita download tema bawaan blogger, tujuannya ... kalau pada saat kita mengganti template template blogspot dengan template kita sendiri mengalami errorr, kita dapat mengatasinya dengan mengupload kembali template bawaan blogger tersebut. Klik "download tema". 7. Setelah template bawaan blogger sudah kita download dan tersimpan pada komputer kita, lalu klik "pilih file" , lalu pilih template blogspot yang tadi kita dapatkan dari www.btemplates.com , yang sebelumnya kita simpan pada komputer :
8. Kemudian klik "upload". Setelah proses upload selesai, akan tampil halaman seperti gambar di bawah ini :
9. Lihat gambar di atas pada bagian sebelah kanan, klik saja yang diberi tanda merah, lalu akan muncul tampilan seperti di bawah ini :
10. Klik saja opsi yang "tidak" , lalu klik "simpan". 11. Selesai. Proses cara mengganti template blogspot dengan template sendiri berhasil anda lakukan.
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.
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.
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. 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 != "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> 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 != "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>
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' );});}); //]]>Jika gambar thumnail tidak buram, kode di atas tidak usah ditambahkan. Sebelumnya kita edit dulu tampilan blognya di menu Customize (Kustomisasi) untuk mengubah warna, jenis huruf, dll. Klik Tema > Customize (Kustomisasi)
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>
<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'/>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;}} 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; 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;
<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>Hapus dan Ganti dengan kode ini: <b:if cond='data:blog.pageType == "item"'> <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> 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> 4. Copas kode berikut ini di atas kode </head> <b:if cond='data:blog.pageType == "index"'><style>.post-body { font-size: 100%; line-height: normal; position: relative; color: #666;}</style> 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 == "index"'><title><data:blog.pageTitle/> - Template Blog Simple SEO Cepat</title><b:else/><title><data:blog.pageName/> | <data:blog.title/></title> Save! Simpan template. PENUTUP Cara Mengubah Tampilan Blog (Edit Template) sudah selesai. Anda bisa melanjutkannya dengan menambahkan beberapa widget, seperti: Demikian Cara Mengubah Tampilan Blog: Edit Template Auto Readmore, Responsive, plus SEO standar sehingga blog Anda lebih SE Friendly. Wasalam. (www.romelteamedia.com).* Thanks for reading Cara Mengubah Tampilan Blog: Edit Template Auto Readmore, Responsive, SEO Friendly | Tags: Blogger Blogging Desain Blog Template Blog | Follow Romeltea on Twitter
Previous Article |
Untuk merubah tampilan Blogger pada gambar berikut adalah
Pos Terkait
Copyright © 2024 kemunculan Inc.
