Template Blogspot Keren dan SEO Friendly

Sabtu, Desember 22, 2012

Template Blogspot Keren dan SEO Friendly

Template Blogspot Keren dan SEO Friendly - Memiliki blog dengan tampilan yang menarik ? pastinya ktia semua sebagai blogger menginginkannya. Karena selain isi artikel dari blog, template sangatlah mempengaruhi citra blog. Dengan tampilan template blog yang menarik tentulah menjadi kepuasan tersendiri bagi kita sebagai pemilik blog. Tidak hanya pemilik blog, pengunjung juga akan lebih nyaman dalam menjelajahi blog anda. Maka dari itu, pemilihan template untuk blog memang harus diperhatikan juga. 

Bila anda adalah seorang blogger yang membuat blog untuk tujuan mencari traffic atau pengunjung, perlu diperhatikan untuk menggunakan template yang SEO friendly. Maksudnya SEO friendly adalah template yang dibuat berdasarkan standar SEARCH ENGINE. 

Kali ini saya akan memberikan 3 jenis variant warna : 

Template ini aslinya adalah karya BAMZ, seorang perancang template dari Indonesia. Kemudian diberikan beberapa tambahan oleh mas Ricky Pratama agar template ini menjadi lebih SEO friendly. Terpikirkan oleh saya untuk menambahkan beberapa tambahan untuk melengkapi template ini. Desain dari BAMZ ini cukup menarik, karena biasanya template SEO friendly memiliki tampilan yang sederhana. Berikut adalah fitur-fitur dari template ini :

• Image Slider
• 2 sidebar yaitu kanan dan kiri
• 2 kolom atau bisa di sebut 3 kolom
• Read More otomatis
• Breadcumb
• Menu Navigasi dibawah dan di atas Header
• Sidebar kanan dengan lebar 300px ( sangat cocok untuk pasang google adsense )
• Tampilan komentar sama persis dengan blog ini.

Tidak hanya itu, template ini keren dan seo friendly ini telah ditambahkan yang namanya MicroData. Sehingga nantinya dalam pencarian pada google akan muncul tampilan seperti ratting bintang.

Selain itu juga telah saya tambahkan script untuk memunculkan artikel terkait pada setiap artikel. Hal ini juga sangat berpengaruh pada SEO blog anda, dan pastinya menambah cantik tampilan. Dengan adanya artikel terkait ini, diharapkan pengunjung akan lebih mudah untuk menjelajahi blog anda.

Terakhir adalah saya juga menambahkan tombol share pada setiap artikel. Dengan ini, pengunjung anda akan dapat membagikan artikel anda dengan mengklik tombol share tersebut.

Dengan tambahan-tambahan diatas, saya rasa template ini sudah memenuhi standar SEO dan tentunya juga memberikan tampilan yang mnarik. Dan sekedar info, untuk menjaga agar teplate ini tetap SEO friendly.

1. Jangan memasang flash element pada blog anda.

2. Jangan sampai ada link yang rusak.. Artinya adalah link yang anda letakan di blog ini sudah tidak aktif lagi.

3. Hindari penggunaan iFrame pada blog ini.. Soal lengkapnya tentang iFrame bisa anda cari penjelasannya di google.

Nah, bagi anda yang tertarik untuk menggunakan teplate ini, anda bisa mendownloadnya dari linkyang saya sediakan di bawah ini.

Download Black Slider Template (Lihat Demo)
Download Blue Slider Template (Lihat Demo)
Download Green Slider Template (Lihat Demo)

Note : Diharapkan tidak menghapus link credit yang sudah tercantum ! Terima kasih

Oh iya, sekarang bagaimana cara mengganti gambar dan keterangan yang ada pada slide show gambar.. Berikut adalah langkah-langkahnya.

• Silahkan ke menu TEMPLATE, EDIT HTML
• Centang bagian EXPAND WIDGET
• Pada bagian slider, terdapat gambar yang besar dan gambar yang kecil.. Untuk mengganti gambar yang kecil, caranya adalah seperti ini. (Pastikan gambar yang anda siapkan berukuran 80px X 50px)

Bagian yang berwarna merah tersebut adalah link dari gambar. Silahkan ganti link tersebut dengan link gambar yang anda inginkan..

• Sekarang untuk mengganti gambar yang besar, beserta judul dan keterangan yang terdapat di dalamnya. Carilah kode berikut : (Pastikan gambar pengganti dari anda berukuran 450px X 250px)

Perhatikan kode berwarna di atas.. Untuk kode berwarna MERAH, itu adalah untuk link untuk gambar.. Kode berwarna BIRU untuk judul artikel anda, kode berwarna HIJAU untuk keterangan dari artikel anda.

Dan coba anda perhatikan kode '#' di dekat kode berwarna biru, ganti # dengan link menuju artikel yang anda inginkan.

• Setelah selesai langkah-langkah di atas, silahkan klik SAVE TEMPLATE.

Bagaimana Cara Menghapus Slider nya

Karena banyak para pengguna template yang merasa lebih cocok bila tanpa slider.. Berikut akan saya tambahkan bagaimana cara menghapus bagian slider dari template di atas :

• Masuk ke www.blogger.com dengan akun anda
• Menuju ke menu TEMPLATE, pilih EDIT HTML (untuk jaga-jaga, silahkan backup template anda)
• Jangan lupa centang bagian EXPAND TEMPLATE WIDGET
• Bila sudah, cari kode diberwarna hijau ini dengan menggunakan CTRL + F
• <div id='content'>
• Nanti kode yang didapatkan kurang lebihnya akan seperti ini 
• 
  

  <div id='content'><b:if cond='data:blog.url == data:blog.homepageUrl'>
  <div id='featured'>  
     <ul class='ui-tabs-nav'>  
          <li class='ui-tabs-nav-item ui-tabs-selectdd' id='nav-fragment-1'><a href='#fragment-1'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuuzycjOj-fBuwmv_zZ9cp9Qt_VhyphenhyphenH3eZOTpaC7pbyVMLChPtWDFXbU0cTGvtLwGK_2p2oUlQzHIZUSxzB6CATORu4ND_34SUbIyMepR8JG5ZEpA75_HYYvPh4ITzPiCEXLn9YnvpvxVi_/s0/image1-small.jpg'/></a></li>  
          <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip8pShUw3AYg9oa-ckbPsrZI_sjPcnVhMkuKHSoB0bskJ4xda9zJDi19VjHCfN1Ijtq8gARFdIentagKUZ5Dvy5n99x7DdarbKEMVixgY2BC0eZ0WafX-IgYHsY_Dx-2DpejBTRndbRWK6/s0/image2-small.jpg'/></a></li>  
          <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyFEp_Z0mbNtnlATMl0R5RZK8bqSM0I2Kn4vNukkZpGVK4IHh8Ze4CpE0m9L-oVfHuy_N34vUYtQcNwkIEawoLmZx7k6FWnz4-1dpFlG3-5SYVi3esmNwb278ym64t8tVsKJoFxVWOOLEn/s0/image3-small.jpg'/></a></li>  
          <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuv3A5dL_itYUD7AYRlHWRkkzAXxxfrzA031lTG8V_RoAPxDn4JqkdijdGkj_y-ABIQ3CUHIdep1j65ScquwRA5kLZ8sczPQpX3YnOAD3Rat7JzCe2GXucYyz-WOXtWujI_bTF38Cvc9Hn/s0/image4-small.jpg'/></a></li>    
      </ul>  
      <!-- First Content -->  
      <div class='ui-tabs-panel' id='fragment-1' style=''>  
          <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7jlJNWRa6CMkpUCxKLy26T0h01sCeXbnLQPvK2WhM7c1n679q3T8zPNKp3dnf9cXE82s3DawaSVuGAi_HYd7btC16nppdW91CNeWw9cjOW6liC0-fFGEGXC7HOGzgpvVZMduxmXXvWIXa/s0/1.jpg'/>  
          <div class='info'>  
          <h2><a href='#'>Masukkan Judul Artikel 1 di sini</a></h2>  
          <p>Panduan: Masuk ke Akun Blogger Anda (Tampilan Baru), Pilih TEMPLATE lalu Edit HTML, kemudian LANJUTKAN. Ganti judul dan panduan ini dengan Judul dan Ringkasan Artikel terbaik anda</p>  
          </div>  
      </div>
      <!-- Second Content -->  
      <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>  
          <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqccJodKj6EzD3XjuzIvMDMj4H4-b8DK9XrttSgY-MZCpp-u8TvuucvHHmYlU0NFPWKLMcopVMJn4Cf6fDvGmCVvVDNDeKECNqsQ9kzmkSlwUPtNYCQwSPpY69espsmSUXpatnJ6zOYHDf/s0/2.jpg'/>  
          <div class='info'>  
          <h2><a href='#'>Masukkan Judul Artikel 2 di sini</a></h2>  
          <p>Panduan: Masuk ke Akun Blogger Anda (Tampilan Baru), Pilih TEMPLATE lalu Edit HTML, kemudian LANJUTKAN. Ganti judul dan panduan ini dengan Judul dan Ringkasan Artikel terbaik anda</p>  
          </div>  
      </div>  
      <!-- Third Content -->  
      <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>  
          <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTBG5kwU-s_2UtNEA3CiPZS1indnV7oaxnDg1ZkV35qtj8Fkq8fdR4lyfC3zP5Dr_eT_5U4HvRfz-z4NSDEFTQpY307zxj_cTzW6cLLXNmFvJskdfJUQsiEPTBhrAm9OhOFdijZXxOX1QX/s0/3.jpg'/>  
          <div class='info'>  
          <h2><a href='#'>Masukkan Judul Artikel 3 di sini</a></h2>  
          <p>Panduan: Masuk ke Akun Blogger Anda (Tampilan Baru), Pilih TEMPLATE lalu Edit HTML, kemudian LANJUTKAN. Ganti judul dan panduan ini dengan Judul dan Ringkasan Artikel terbaik anda</p>  
          </div>  
      </div>  
     <!-- Fourth Content -->  
      <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>  
          <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWANY6nrix3qdZtn5p8kgrEEE11WGLxmyrAQoVwGRxd_5UaqQaFVi2XzcUyb78gZ7JIBAOjrKDAtN6I76xj1ganGzVcm3RKmUoZVxRqmTPMLL_f-kFPy-bQdM3FABGycg2Mn174ZPcytqQ/s0/4.jpg'/>  
          <div class='info'>  
          <h2><a href='#'>Masukkan Judul Artikel 4 di sini</a></h2>  
          <p>Panduan: Masuk ke Akun Blogger Anda (Tampilan Baru), Pilih TEMPLATE lalu Edit HTML, kemudian LANJUTKAN. Ganti judul dan panduan ini dengan Judul dan Ringkasan Artikel terbaik anda</p>  
          </div>  
      </div>  
  </div>
  </b:if>
  

• Bisa dilihat, ada kode yang berwarna hijau dan kode yang berwarna merah..
• Untuk mnghapus slider, hapuslah kode berwarna MERAH.. Untuk yang warna HIJAU jangan dihapus !!
• Setelah itu SIMPAN template anda dan lihat hasilnya..

Jika belum mengetahui Cara mengganti template blogspot, anda bisa membacanya disini !

Bagi anda yang mendapatkan kesulitan dalam mengganti gambar pada slider, silahkan bertanya pada kolom komentar ! Terima kasih telah membaca artikel Template Blogspot Keren dan SEO Friendly ..

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.