Tips Sebelum Memilih/Mengganti Template Blog

Tips Sebelum Memilih/Mengganti Template Blog

All About Blogspot Templates :  Siapa yang tidak tergiur untuk berganti template, jika setiap saat bermunculan berbagai jenis themes blog dengan berbagai desain menarik. Belum lagi pengaruh fitur yang ditawarkan. Mulai dari SEO Friendly, Valid HTML5, Valid CSS3, Responsive desain, dan berbagai kelebihan lain dari templates standar.

Template blog merupakan komponen terpenting dan berharga dalam membangun blog, salah memilih template akan menimbulkan rasa tidak nyaman pengunjung saat berkunjung untuk membaca ataupun sekedar melihat-lihat blog kita.

Selain faktor tampilan yang menarik, ada beberapa unsur penting yang harus diperhatikan dalam menentukan pilihan template. Yang jelas, tema yang dipakai harus sesuai dengan konsep dasar blog bersangkutan. 

Bagaimana cara agar kita tidak salah memilih template blog?  Berikut Tips Sederhana Dalam Memilih Template Blog, agar dikemudian hari tidak menyesal sehingga harus kembali mengutak-atik
code HTML yang njelimet bin ruwet karena harus berganti template baru. Disisi lain, jika terlalu sering gonta-ganti template akan berpengaruh buruk terhadap blog dimata search enggine.

Ok… langsung saja kita kepokok pembahasan, beberapa point penting yang perlu dipertimbangkan dalam mengganti template:

1. Pilih warna dan background yang padu atau serasi, usahakan jangan terlalu banyak warna pada blog karena hanya akan menambah kesan berantakan.

2. Kurangi widget, aksesoris atau script yang tidak perlu pada blog karena akan membuat berat loading blog bertambah, pengunjung lebih suka blog yang mempunyai loading cepat. Demikian juga search enggine. Template yang termasuk dalam kategori SEO Friendly jelas harus fast loading.

3. Pertimbangan Template yang SEO Friendly, sedikit harus di utamakan. Karena untuk bersaing dengan jutaan blog sejenis dikancah dunia internet, unsur ramah search enggine sangat diperlukan. Untuk rekomendasi templates SEO Ready disini.

4.  Lebih Baik Pilih Responsive templates. Kenapa? Dewasa ini, seiring dengan perkembangan tehnolgi, dalam mengakses internet, visitor sudah tidak terpaku menggunakan PC atau Laptop. Sebagian menggunakan gadget berupa handphone, tab, atau lain. Templates yang didesain responsive mampu menyesuaikan dengan screen/layar tampilan yang digunakan visitor. Untuk lebih jelasnya tentang manfaat template responsive baca disini

5. Valid HTML5. Bagi beberapa blogger memvalidasi HTML merupakan langkah penting. Dengan begitu, kita memastikan bahwa halaman yang kita buat sudah sesuai dengan standar dan akan berjalan sempurna pada user agent dan browser web.

Membangun halaman web atau blog tidaklah sulit. Dengan perangkat lunak yang tersedia sekarang, kita dapat membuat halaman web dan itu pun dapat dicapai dalam waktu setengah jam atau malah kurang. Terus apakah kita perlu menjalankan validator HTML pada halaman yang kita buat untuk menemukan kesalahan? memang semuanya tidak perlu, akan tetapi jika kita ingin halaman tetap dapat dilihat sempurna melalui beberapa browser yaitu menampilkannya dengan benar, maka validasi HTML5 adalah sesuatu yang memang wajib di penuhi.

6. Tidak terlalu banyak banner, gambar, dan iklan yang terpasang. Kenapa? Karena keberadaan mereka cukup mengganggu fokus visitor dalam menikmati konten yang kita suguhkan. Jika pun harus, maka pertahankan yang memang benar-benar dianggap penting. Dan jangan berlebihan.

4. Cari referensi template blog yang dipakai oleh blogger professional, pelajari tata letak widget dan design blog mereka. Di blog ini banyak pilihan template he… he… promo dikit Mas Brooo…

Nah, demikian Tips Sebelum Memilih/Mengganti Template Blog ini. Sebenarnya, masih banyak lagi tips memilih template blog yang baik. Namun, pada intinya gunakan template yang enteng, ringan, dan rapi namun tetap elegan atau Anda juga bisa menggunakan template seo friendly yang sudah banyak disediakan para blogger. Sebagian gratis dan berkualitas tinggi.

Dan atau, jika anda rajin dan ahli coding, mungkin dapat melakukan modifikasi template sendiri. Agar, berbagai unsur penting sebuah template dapat terpenuhi. Cara ini jelas sangat baik, karena template yang digunakan bisa sesuai dengan selera, fungsi, dan keinginan sendiri.

Generator Kode Warna HTML : Color Wheel Untuk Blogger

Generator Kode Warna HTML untuk web/blog

I’m Blogger :  Bagi yang hobi dengan desain template jelas sangat akrab dengan code yang satu ini.

Namun tidaklah mungkin, kita harus menghapal seluruh code html untuk dapat bermain warna yang maksimal. Mungkin jika, hanya warna-warna dasar, seperti merah, kuning, hijau, biru, putih dan hitam, kita masih dapat mengingat, namun ketika sudah berbicara tentang kombinasi warna, jelas harus ada alat bantu.

Tampilan template blog sebagian besar bermain dengan warna agar terilhat menarik. Dalam dunia online/web, penempatan/pemasangan warna biasanya menggunakan code HTML. Memang, sebenarnya juga bisa menggunakan image, namun kurang efektif dan jelas menambah beban loading blog.

Kode Warna HTML sendiri, digunakan untuk mendeskripsikan dan melakukan spesifikasi dari warna-warna yang di inginkan dalam perancangan halaman web/blog. Untuk mempermudah seorang blogger dalam memilih warna yang akan digunakan untuk elemen-elemen web/blog-nya, diperlukan  tool berupa generator kode warna HTML.

Berikut adalah  Color Wheel for Blogger:

Cara membuat Responsive Image untuk Blogger Template Blogspot

Cara membuat Responsive Image untuk Blogger Template Blogspot
Cara membuat Responsive Image untuk Blogger Template Blogspot

Responsive Image Tricks For Blogger | Artikel ini adalah tips tentang cara mengubah semua gambar yang ada di blog menjadi responsive. Karena, pada beberapa template blog responsive sendiri terkadang image/gambar sering belum ikut tersentuh responsive desain. Apalagi template yang tidak responsive, sudah pasti itu.

Sehingga, gampar pendukung postingan yang ditampilkan pada gadget seperti Tab, Handphone, atau lainnya, sering terpotong atau tidak terlihat semua. Dan jelas hal ini sangat menggangu tampilan. Untuk itu, kita perlu sedikit memodifikasi template dengan melakukan beberapa editing code HTML pada blog.

Kita langsung saja ke pembahasan inti; DEMO Responsive Image

Pertama, login blogger terus edit HTML.

Lalu cari kode :

]]></b:skin>

Dan tambahkan kode css dibawah ini diatasnya:

img {
display: block;
max-width:100%;
height:auto;
width:auto9;} 

Setelah itu cari kode:

</head>

dan tambahkan javascript dibawah ini diatas kode tersebut:

<script type=’text/javascript’>
      /*<![CDATA[*/

    var cwResImg = function () {
  var cwBpArry = [1382, 992, 768, 480], //Image breakpoint arrays
      currIndex,
      cwResImgVal = Math.max(screen.width,screen.height),
      hdpi = window.devicePixelRatio > 1 ? window.devicePixelRatio : 1,
      rwdImgId = “rwdimg-“+Math.floor(Math.random()*1000),
      tpl='<img src=”{src}” alt=”{alt}” title=”{title}” id=”{rwdImgId}” {attributes}>’;

  cwBpArry.push(cwResImgVal);
  cwBpArry.sort(function(a,b){return a-b});

  if(Array.prototype.indexOf){
      currIndex = cwBpArry.indexOf(cwResImgVal) + 1;
  }else{
      for(var i in cwBpArry){
          if(cwBpArry[i] === cwResImgVal){
              currIndex = parseInt(i)+1;
          }
      }       
  }

  cwBpArry[currIndex] = cwBpArry[currIndex] || cwBpArry[currIndex-1];

  var imgWid = Math.max.apply(Math, cwBpArry) <= cwBpArry[currIndex] ? cwBpArry[currIndex-2] : cwBpArry[currIndex];

  return {
      imgWid : imgWid,
      hdpi: hdpi,
      id:rwdImgId,
      rwdImg:function(arg){
         
          var src = arg.src || arguments[0] || ”,
              src = src.replace(//sd*//, ‘/s’+imgWid * hdpi+’/’), //picasa image size replacing (s340 to device width)
              title = arg.title || arg.alt || arguments[1] || ”,
              alt = arg.alt || arg.title || arguments[2] || arguments[1] || ”,
              attributes = arg.attr || arguments[3] || ”,
              img = tpl.replace(‘{src}’,src).replace(‘{title}’,title).replace(‘{alt}’,alt).replace(‘{rwdImgId}’,rwdImgId).replace(‘{attributes}’,attributes);
              document.write(img)
      }
  };
}()
/*]]>*/</script>

setelah itu cari kode

</body>

dan tambahkan script dibawah ini di atasnya (ini digunakan untuk mengatasi terjadinya fallback jika javascript tidak support di peramban)

<noscript>
  <img src=”http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s720/Webpagetest-IE8-Octopress-Default-waterfall.png” alt=”Responsive images test”/>
</noscript>
<script>
  cwResImg.rwdImg(“http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s450/Webpagetest-IE8-Octopress-Default-waterfall.png”, ‘Responsive images text script’);

  —or—-

  cwResImg.rwdImg({src:’http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s450/Webpagetest-IE8-Octopress-Default-waterfall.png’, alt:’Responsive images text script’, title:’Responsive images text script’});
</script>

Demikian Cara membuat Responsive Image untuk Blogger Template Blogspot. Terimakasih atas kunjungannya dan semoga bermanfaat.

credits : http://decodize.com/html/simple-responsive-image-technique/

Cara Optimasi SEO On Page untuk Meningkatkan Peringkat Blog

Tips SEO On Page Blog | Search Engine Optimization (SEO) memang misterius. Namun tetap bisa dipelajari. Dan, pada dasarnya hanya ada dua langkah umum yang dilakukan untuk dapat bersaing di halaman pertama mesin pencari.

Optimasi SEO On Page untuk BloggerOptimasi SEO ini, dapat dilakukan dengan cara; mengoptimalkan halaman dalam su
atu website atau SEO on page dan halaman luar web itu sendiri atau dikenal dengan istilah SEO off page.

Di luar sana, sebenarnya juga telah banyak saran dan nasehat untuk membuat strategi tentang sistem optimasi tersebut. Namun pada Tips SEO ini, kita lebih berfokus tentang hal-hal yang berhubungan dengan Optimasi SEO On Page.

Kenapa harus lebih dahulu SEO On Page? Jika diibaratkan sebuah bangunan, membangun sebuah blog/website, maka yang harus terlebih dahulu dilakukan adalah sebuah pondasi yang kuat atau baik agar kelak bangunan tersebut menjadi kokoh serta tidak mudah tergoyahkan.

Begitu juga dengan membangun sebuah Blog, langkah awal yang harus menjadi pertimbangan adalah meneliti setiap bagian (internal) sebuah website dan berusaha untuk menjaga serta mengatur agar adanya keseimbangan sebelum melakukan Optimasi SEO Off Page.

Artinya kenapa kita harus terburu-buru dalam melakukan optimasi keluar (Off Page), jika landasan awalnya sendiri belum siap.

Untuk itu, sebelum melangkah jauh, berikut hal-hal yang harus menjadi landasan awal untuk diperhitungkan dengan baik dalam membangun blog.

Pemilihan Theme (template)

Template adalah kerangka awal dimana sebuah blog akan dibangun. Pada bagian ini kita dituntut untuk mengenal lebih dalam karakter sebuah Theme. Jangan memilih sebuah template hanya berdasarkan tampilan (layout) yang menarik, namun tidak atau kurang bersahabat dengan mesin pencari. Tips dalam memilih template blog

Pengaturan Tag Heading (H1 – H6)

Ini hal penting yang harus diatur sedemikian rupa. Sesuai dengan unsur yang dihendaki search enggine agar lebih dapat mengenali sebuah blog. Sebaiknya, hindari penggunaan dua atau lebih Tag H1 pada Single Post dan Page. Dan selanjutnya baru pada sub title kita gunakan Tag H2 (heading 2) dan begitu seterusnya hingga ke Tag H yang lebih kecil.

Sedangkan Cara Mengatur Tag H1, H2, H3, H4, H5, H6 pada Template Blogspot dapat dilihat disini.

Konten atau Isi

Content Is King demikianlah yang sering digadang-gadangkan oleh para pakar SEO di seluruh dunia. Dan menurut saya pun ini benar. Sekarang yang menjadi pertanyaan adalah Konten seperti apa yang bisa dibilang telah masuk dalam kategori berkualitas (Raja)?

Menurut beberapa rekomendasi, yakni; Konten Unik (original) bukan copy paste itulah yang sering kita dengar mengenai penilaian konten yang berkualitas. Namun tentunya tidak cukup hanya sekedar unik (asli) masih ada beberapa faktor lagi yang akan membuat konten tersebut menjadi berkualitas dimata search enggine tentunya. So…. untuk tips berkenaan dengan hal tersebut anda bisa mengunjungi Tips Artikel (blog post) SEO Friendly

Menu Utama atau Navigasi

Menu Utama atau Navigasi dapat kita ibaratkan sebagai langkah awal penuntun sang visitor untuk melangkah lebih jauh kedalam blog kita. Kita bisa bayangkan, jika sebuah hotel mewah tanpa seorang resepsionsis penyambut tamu. Benar sang tamu sudah mendapatkan yang ia cari. Yakni sebuah hotel. Tapi ia akan lebih banyak bengong harus bagaimana. Tamu tidak akan tahu fasilitas apa yang kita sediakan untuk membuat sang tamu bisa betah berlama-lama dihotel. Dan ada kemungkinan ia akan memutuskan untuk berpikir mencari hotel lain yang mampu memberi ide atau rekomendasi tentang hal yang dia butuhkan.

Navigasi tersebut bisa berupa informasi utama seperti Halaman Kontak, Tentang, dan satu lagi yang termasuk penting (wajib) Sitemap/Daftar Isi. Lalu dapat pula ditambahkan dengan menu untuk Kategori atau lainnya.

Dengan kelengkapan pada Menu tersebut maka akan sangat membantu pengunjung dalam menemukan informasi yang dicari. Serta akan menjadi semacam rekomendasi dari kita yang akan berkembang menjadi jalan penuntun bagi pengunjung untuk terus menjelajah setiap relung blog.

Tidak hanya itu, sistim navigasi yang baik akan membuka peluang sebuah website akan ditampilkan dengan Sitelink pada SERP khususnya Google.

Judul Artikel

Judul Postingan/Artikel mempunyai peran penting. Dan harus memenuhi unsur keyword. Dalam hal ini diperlukan kreatifitas dan ide, serta kemampuan membaca trend dan potensi keyword yang akan diketik oleh calon visitor di search enggine.

Unsur lain yang tidak kalah penting dalam penentuan judul artikel, adalah harus mempunyai relevansi dengan isi artikel/konten bersangkutan. 

Navigasi Link Pada Konten

Seperti yang kita ketahui, pada sebuah blog, link (tautan) yang menghubungkan satu halaman pada kehalaman lain, sangat berperan penting meningkatkan pagerank. Fungsi sedikit mirip dengan Menu Navigasi. Link tersebut berguna sebagai penunjuk (penuntun) bagi pengunjung sewaktu mencari lanjutan informasi. Biasanya link-link tersebut dapat dibangun berdasarkan kategori atau keterkaitan tema konten. 

Navigasi Link juga dapat dibangun menggunakan widget seperti Realeted Post (Artikel Terkait) pada bagian akhir konten. Atau widget link secara acak (You might also like) sebagai rekomdasi agar visitor mengunjungi konten lain pada blog, seperti widget linkwithin.

Pemasangan widget tersebut dapat pula dilakukan dengan : Cara Membuat Related Post/Artikel terkait SEO Friendly

Pemilihan Keywords – Kata Kunci

Kata Kunci atau keywords harus disesuaikan dengan Topik serta Judul Artikel. Secara umum, kata kunci utama yang kita bidik diupayakan mengandung unsur judul artikel dan relevan dengan isi konten. Dalam hal ini sedikit penambahan kata untuk menambah peluang menangkap pengunjung yang menggunakan mesin pencari untuk menemukan Informasi. Sebaiknya hindari kata kunci tunggal, karena hampir pada semua keywords tunggal selalu akan besar (berat) persaingannya.

Pengaturan atau Peletakan Keywords pada Konten

Pada sebuah artikel biasanya akan ada beberapa Paragraf, bagi dan atur keywords utama pada setiap paragraf dengan pas dan seimbang. Jangan menumpukkan kata kunci hanya pada beberapa paragraf saja.

Robot crawl tidak bodoh kawan… Dia mampu mengindentifikasi kata kunci tersebut natural atau curang (spamer). Jadi jangan berpikir untuk mendapat lirikan robot tersebut, lalu membanjiri kata kunci pada bagian konten. Rangkailah kata kunci tersebut se-natural mungkin dan tersemat secara merata pada beberapa bagian konten.

Lagian, jika pun muncul pada search enggine jelas akan mengecewakan pengunjung. Anda mau di nista visitor yang kecewa dengan resiko tidak dikunjungin lagi. 

Note: Memaksimalkan Meta Tag untuk Konten dan Keywords, sejauh ini masih menjadi kontroversi dikalangan webmaster atau blogger diseluruh dunia. Secara langsung Google pernah menyatakan bahwa Meta Tag Keywords tidak lagi dijadikan acuan bagi Algoritma Google dengan alasan karena banyak terjadi penipuan oleh para Webmaster atau Blogger yang menggunakan Keywords yang tidak Relevan dengan isi atau konten. Namun hingga kini masih banyak yang tetap menggunakannya, jadi pada kasus ini silahkan anda tentukan sendiri mana yang menurut anda lebih baik.

Cara Kompres HTML Pada Template Blog

Kompres HTML agar template blog fast loading dan SEO Friendly
Kompres HTML Template Blog

Cara Kompres HTML BlogHTML merupakan unsur utama pada template web/blog. Karena HTML, merupakan bahasa pemerograman yang digunakan untuk menyusun tampilan halaman, fitur, dan berbagai widget pada sebuah web/blog.

Unsur HTML pada template sangat berpengaruh terhadap loading sebuah blog atau website. Artinya semakin banyak kode yang digunakan maka semakin berat beban loading blog atau website bersangkutan. Hal itu jelas mempengaruhi tingkat SEO (Search Enggine Optimization).

Ada banyak cara sebenarnya untuk meningkatkan unsur SEO Friendly pada sebuah blog. Salah satunya dengan melakukan modifikasi template itu sendiri. Caranya dapat dibaca di; Cara Modifikasi Template Blog Menjadi Lebih SEO Friendly.

Namun kali ini, materi yang akan kita bahas adalah cara mengurangi beban loading sebuah blog. Yakni dengan cara mengKompres HTML Pada Template Blog sehingga template blog dapat dikatakan fast loading dan tentunya meningkatkan unsur SEO.

Karena, Loading blog/website sangat berpengaruh pada banyaknya visitor. Dan, tidak usah diperdebatkan lagi, he… he… Visitor lebih menyukai web/blog yang ringan, itu pasti. Apalagi di Indonesia akses internetnya boleh dikatakan cukup lemot….

Langsung saja kita menuju langkah-langkah untuk meng-Kompres HTML Pada Template Blog.

  • Seperti biasa…. Loggin Blogger
  • Ke Rancangan
  • Edit HTML
  • Klik Download template/Backup template agar jika terjadi kesalahan dapat dikembalikan
  • Copy kan semua kode HTML ( agar cepat tekan Ctrl + A )
  • Buka TextFixer  
  • Gampang Ikuti langkah-langkah berikut:
Langkah-langkah kompres HTML Blog/website
Langkah-langkah Kompres HTML Template Blog


Cara Modifikasi Template Blog Menjadi Lebih SEO Friendly

http://redaksiexpo2012.blogspot.com/2013/08/cara-modifikasi-template-blog-menjadi.html
Modifikasi Template Blog

Berkutat dengan template blogspot memang asik jika tidak mau dikatakan ‘candu’. Apalagi memodifikasi templates agar lebih SEO Friendly.

Ada beberapa hal utama yang harus terkandung dalam sebuah template agar dapat dikatakan cukup SEO Friendly.

Pertama Buat META Tag yang lebih dinamis

Seberapa pentingkah Meta Tag? Menurut saya, Meta Tag merupakan bagian yang sangat penting. Mungkin pendapat ini keliru. Tapi dengan banyaknya situs Meta Checker atau sejenisnya, membuktikan bahwa komponen Meta Tag yang tersusun dengan baik sangat diperlukan.

Menurut saya, meta tag merupakan langkah awal search enggine mengenali berbagai komponen didalam blog untuk di indeks. Dan merupakan unsur utama tema apa yang diusung sebuah blog atau situs. Sehingga diterjemah dan ditempatkan pada kategori apa nantinya dimata search enggine.

Apa Arti Meta Tag Dinamis?

Secara default, ketika kita akses Halaman Utama Blog ataupun halaman posting pada umumnya memiliki Title, Descripsi dan Keyword yang sama. Dengan membuat Meta Tag yang lebih dinamis artinya, setiap posting mempunya Title, Deskripsi dan Keyword yang berbeda-beda.

Hal ini berguna agar setiap konten atau artikel yang kita posting terlihat spesifik dimata Search enggine. Jelas hal ini lebih SEO Friendly. Lebih jelasnya dapat dilihat pada:
Cara Membuat Meta Tag Dinamis pada blogspot  pada postingan sebelumnya.

Struktur Tag Header : H1, H2, H3, H4, H5, H6

Struktur H1, H2, H3, dst juga mempunyai peran sangat penting dalam membantu sebuah blog menjadi SEO friendly.  Sehingga bisa bersaing di posisi SERP google. Bagaimana susunan Tag H1, H2, H3 dst yang bagus ? – Master SEO dari referensi yang saya baca berpendapat Tag Header harus berurutan dan rapi. Berikut saran dalam Cara Mengatur Tag H1, H2, H3, H4, H5, H6 pada Template Blogspot

Buat Navigasi Breadcrumb

Lalu apa pula Navigasi Breadcrumb tersebut?? Untuk menjelaskan apa itu Navigasi Breadcrumb, silahkan lihat ilustrasi di bawah ini :

Cara modifikasi template blogspot agar SEO Friendly
Navigasi Breadcrumb Dalam Kotak Warna Kuning

Lalu di cek dulu, apakah blog sobat sudah ada navigasi seperti yang di tandai warna kuning di atas ? – Jika sudah ada, maka Step ini bisa di lewati. Jika belum ada, ada baiknya mengikuti pembahasan ini sampai tuntas. Apa efek dari penambahan Navigasi Breadcrumb ini?, silahkan lihat capture salah satu blog di hasil pencarian google di bawah ini :

Cara memasang meta tag dinamis
Tampilan Hasil Pencarian di Google setelah blog di tambah navigasi breadcrumb

Seberapa penting navigasi breadcrumb di blogspot. Menurut saya sangat di anjurkan. Selain untuk lebih mempercantik penampilan blog, juga di sarankan karena blog lebih SEO Friendly dimata google.

Bagaimana menambahkan  navigasi breadcrumb di blog kita, silahkan masuk ke sini :Cara Membuat Navigasi Breadcrumb di blogspot

Demikian  Cara Modifikasi Template Blog Menjadi Lebih SEO Friendly. Mungin masih banyak cara metode lain yang lebih sempurna, atau  itu saran dan masukannya ditunggu di kotak komentar. Terimakasih atas kunjunganya…