Kumpulan Template Blogger SEO Friendly & Responsive Terbaik 2014

Kumpulan Template Blogger SEO Friendly & Responsive Terbaik 2014 - Pas tanggal 1 Desember 2014, 1 bulan lagi tahun 2015 akan datang.. Cepat sekali waktu ini berjalan... key.. selama 2014 ini saya mengamati beberapa blog dan ternyata dari sekian banya blog yang saya kunjungi rata-rata mereka menggunakan template-template berikut ini, dan tentunya template yang digunakan adalah template yang SEO Friendly dan responsive

Template Blogger Fastest Magz v3.5 Premium
Siapa yang tidak tahu dengan template blogger yang satu ini, satu-satunya template yang saya ketahui yang menjadi korban para Clonner yaitu penjiplak bentuk dan tampilan template blog. Ya, template buatan mas Sugeng ini sudah banyak di clonning bahkan mungkin template aslinya pun sudah dibagi-bagikan secara gratis. Pada bulan November kemarin, template seo friendly dan responsive ini telah di update lagi dengan penambahan fitur Perancang Template yang memungkinkan mengedit warna atau background template ini tanpa harus menyentuh kode-kode di dalam template. Untuk menggunakan template blogger ini, Anda harus membelinya seharga Rp 50.000,.

Template Blogger Kompi Males Gratis
Seandainya template Kompi Males ini dijual juga, mungkin nasibnya akan saya dengan templatenya mas Sugeng, namun mas Adhy Suryadi secara sukarela membagikan template SEO Friendly dan responsive ini secara cuma-cuma dan hasilnya, Template Kompi Males ini menjadi template mainstream bahkan terlalu mainstream karena hampir semua blogger menggunakan template ini

Template Blogger Droid Plus Gratis
Template hasil karya Kang Ismet ini memiliki banyak fitur yaitu Responsive, Valid HTML5 pada Homepage,Valid HT ML5 pada postingan, Valid CSS3, SEO skor 100% untuk template Droid Plus ini dan tentunya fast loading. Template ini dibagikan secara gratis, namun jika Anda ingin menggunakannya secara penuh seperti menghilangkan link credit, Anda bisa menebusnya seharga Rp.50.000,.

Template Blogger Sevida v1.7 Premium
Ada 10 item template blogger yang dijual di Themeforest dan Sevida merupakan template yang paling banyak pembelinya. Pemilik template yang dikenal dengan SatanMKR ini sungguh seorang designer template yang top banget karena mampu menjual templatenya di marketplace sebesar Themeforest karena untuk menjadi seller item disanan dibutuhkan perjuangan dan tidak semabrangan menjual item yang kita miliki. Namun, untuk beberapa templatenya seperti Sevida ini banyak juga ilegal dan ada yang mengaku hasil buatan blogger India. Jika Anda tertarik menggunakan template responsive dan SEO friendly ini, silahkan buy its on Themeforest, only $21 :)

Template Blogger Pertamag Responsive Magazine Gratis
Blogger dari Suarabaya yang dikenal dengan nama Uong Jowo ini tidak perlu diragukan lagu dalam mengolah design templatenya, banyak template yang telah dibuatnya dan hampir kesemua template yang dihasilkan memiliki aliran Magz yaitu tampilan template blog yang mengarah pada tampilan berita. Dan salah satunya adalah template Pertamag yang responsive dan SEO friendly ini. Jika Anda ingin memiliki template-template buatan mas Uong Jowo ini, Anda bisa membuak blognya dan memilih salah satu template yang Anda inginkan dan berkomentar di artikel template tersebut dengan komentar permintaan template yang disertai dengan email Anda karena template akan dikirim via email dan tidak ada link download untuknya :(

Template Blogger Maha SEO Responsive v1.1 Premium
Meruapakan Blogger dari Pandeglang yang dikenal sebagai Rama Banten dengan nama blog Abah Template yang menyediakan berbagai macam jenis template yang SEO Friendly dan responsive. Mungkin belum banyak yang mengenal salah satu designer template blogger ini, jika Anda ingin menggunakan template hasil karyanya silahkan datang ke blognya karena template yang saya suka dari buatan Rama Banten ini adalah penggunaan warna kombinasi yang sangat padu yang membuat tampilan templatenya enak dipadang, sangat indah untuk dilihat :)

Template dari Panduan Template Blog ini
Lama tidak membuat template, apakah saya sudah berhenti membuat template untuk Blogger? Memang saya lama sudah tidak membuat template namun tidak sepenuhnya saya berhenti membuat template blog, minggu kemarin saya sudah membuat template dengan tampilan seperti berikut ini

Template yang saya buat tersebut dalam kategori Portofolio dan Landpage yang saya gunakan untuk bisnis affiliate dan tidak akan saya sediakan untuk umum

Dari kelima template yang saya infokan diatas, sengaja memang saya tidak menyertakan link downloadnya atau blog pemiliknya. Jika Anda ingin memiliki salah satu template diatas, silahkan gunakan Katakunci + Pemilik template tersebut di search engine. Misalnya; template kompi males adhy suryadi kompi ajaib. Dengan begitu akan membantu menaikkan nilai search untuk template yang dicari

Itulah Kumpulan Template Blogger SEO Friendly & Responsive Terbaik 2014 yang saya nilai sesuai dengan penilaian saya sendiri dengan mengacu pada banyaknya Blogger yang menggunakan, di cloning, di-ilegalkan dan pendatang baru dengan tampilan baru yang menarik. Semoga bermnafaat

Duh, Kode Template Blog Semakin Banyak

Kode Template Blog Semakin Banyak - Keberadaan blog ini tidak hanya sampai disini dan saya juga tidak menjamin blog ini akan bertahan selamanya karena saya dan juga teman-teman blogger tidak tahu sampai kapan kita hidup. Sehingga saya tidak tahu pasti apakah saya akan selamanya mengurus blog ini atau bisa juga kemungkinan akan diteruskan oleh yang lain. Nah, mengenai keberadaan blog ini maka salah satu hal yang harus saya perhatikan adalah kode template blog yang digunakan di blog ini. Kenapa?

Kenapa saya harus memperhatikan kode template blog ini? Melihat tipe blog yang saya kelola ini, tentu sangat berbeda dengan tipe-tipe blog yang hanya menyajikan informasi secara umum seperti berita atau blog-blog yang menyajikan artikel dan gambar. Namun bagaimana dengan Panduan Template Blog ini? Jika dilihat dari tampilan, sekilas memang seperti blog-blog yang lain namun jika ditelurusi lebih lanjut, sungguh keberadaan blog ini membuat saya kuatir. Kenapa?

Kenapa saya kuatir dengan keberadaan blog ini? Saya kuatir bukan karena Google atau yang lainnya atau karena originalitas artikel blog ini tapi saya kuatir akan konten blog ini secara keseluruhan, khususnya kode template blog. Ada dengan kode template blog ini? Panduan Template Blog ini adalah salah satu blog yang membahas tentang Blogger yang berisi beberapa panduan cara membuat dan mengedit blog, beberapa panduan yang menggunakan kode CSS, kode JavaScript dan kode HTML. Khusus penggunaan kode template blog, tidak dipungkiri, setiap membahas artikel yang memuat kode template blog tersebut yang disertai dengan demo-demo langsung dari setiap artikel, hal ini memaksa saya untuk melakukan semua itu, yaitu memasang kode-kode tersebut secara langsung kedalam template blog. Nah, disinilah permasalahan artikel ini...

Memang sebagian kode template blog ini sudah saya "titipkan" di Google Drive tapi hal itu juga yang membuat saya kuatir khususnya kode script, bagaimana jika kode-kode script yang ada di Google Drive tersebut dihapus oleh Google? Entah seperti apa wujud blog ini nantinya. Selain kode secript, yang lebih membuat saya kuatir lagi adalah kode css yang juga saya titpkan disana, bagaimana jika kode-kode itu dihapus oleh Google.. Hancurlah tampilan blog ini. Memang kode-kode itu bukanlah kode utama dari blog ini tapi tetap sebagai pembentuk dari tampilan blog ini

Dan hal yang tetap paling penting yang perlu saya pikirkan adalah jumlah kode-kode template baik css dan javascript yang semakin hari semakin banyak yang saya simpan didalam template blog ini, tidak bisa saya bayangkan bagaimana kedepannya blog ini. Apakah saya tetap membuat artikel dengan demo langsung atau hanya artikel yang berupa teori tanpa adanya demo? Padahal awal membuat blog ini, saya ingin memberikan yang berbeda dari blog-blog yang memiliki konten sejenis dengan blog ini. Memang ada blog demoa yang telah saya siapkan tapi sebenarnya saya tidak ingin menampilkan konten dari artikel blog ini berada di tempat lain, itulah kenapa saya hampir jarang menggunakan blog demo sebagai peraga

Entahlah, jika ada beberapa kode template blog yang saya simpan di tempat lain seperti Google Drive, Dropbox, dan lainnya yang dihapus oleh yang bersangkutan setidaknya saya telah melakukan manajemen file untuk blog ini. Apa itu manajemen file blog?

Itulah curhatan saya mengenai keberadaan blog ini, semoga ada yang bisa memberikan solusi yang lebih baik mengenai bagaiamana cara mengatasi kode template blog yang semakin banyak di blog ini, khususnya kode CSS dan JavaScript. Saya sudah melakukan konvert terhadap 2 kode tersebut, namun saat dijalankan, tampilan blog jadi berantakan,,, Adakah solusi yang lebih baik selain melakukan konvert kode template blog?

B1:A - Template Blogger Minimalis Responsif

B1:A adalah templat Blogger responsif minimalis dua kolom. Pemilihan font Saya fokuskan pada Source Sans Pro, Oswald dan font ikon dari Fontawesome.

Lihat Gambar Demo Unduh Template

Gambar demo yang lebih besar seharusnya bisa Anda dapatkan di dalam file unduhan.

Konfigurasi

1. Mengubah Teks “Read More”

Masuk ke halaman Tata Letak, kemudian lihat pada widget Posting Blog. Klik tombol pengeditan yang terletak di sebelah pojok kanan bawah. Teks “Read More” bisa diganti pada bagian ini:

Editor widget posting.

2. Mengubah Teks “Search”

Saat Anda berada di halaman Editor HTML templat, pastikan kursor teks sedang aktif di dalam area kode. Tekan CTRL + F lalu ketik class='submit-button. Kode yang Saya beri tanda di bawah ini adalah yang harus diganti:

<button class='submit-button' type='submit'><i class='icon-search'/> Search</button>

3. Memodifikasi Menu Navigasi

Tekan CTRL + F lalu ketik id='site-nav untuk menemukan deret kode seperti ini:

<nav class='nav' id='site-nav'>
  <ul>
    <li><a class='home-menu' expr:href='data:blog.homepageUrl' title='Home'><i class='icon-home icon-2x'/><span class='screen-reader'> Home</span></a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Archive</a></li>
    ...

4. Mematikan Fitur Responsif

Untuk yang tidak suka dengan tema responsif, pada tag <html> terdapat atribut kelas seperti ini:

<html expr:class='data:blog.languageDirection + &quot; no-js rwd&quot;' expr:dir='data:blog.languageDirection'>

Untuk mematikan fitur responsif, buang kode yang Saya beri tanda.

Template Blogazine 21.04.92

Pembaharuan 19 Maret 2013: Memperbaiki framework templat dengan menyusun ulang satuan-satuan elemen yang lebih fleksibel + mengaktifkan hack meta deskripsi Blogger. Saya sarankan Anda untuk mengunduh ulang/melihat ulang blog demo framework templat Blogazine ini!

Setelah beberapa bulan melakukan penelitian sendiri, merasakan bagaimana sulitnya membuat posting unik dan mengetahui apa yang bisa dipermudah dan apa yang membuat Saya merasa sulit untuk membuatnya, pada akhirnya Saya memutuskan untuk merilis templat blogspot khusus Blogazine yang diharapkan bisa menjadi standar:

Lihat Demo Unduh Templat

Tampilannya memang sangat sederhana, tapi justru itulah tujuan Saya. Saya membuat halaman muka templat ini polos, dan bisa dibilang tidak memiliki unsur desain sama sekali. Saya harap kalian bisa memodifikasi tampilan halaman muka sesuka hati dan menciptakan identitas kalian masing-masing. Sebagai catatan, disarankan untuk tidak menyentuh bagian-bagian kode CSS di dalam <b:skin> karena Saya sudah merancangnya agar bisa mempermudah pembuatan posting unik pada halaman item. Untuk mengedit/mendesain tampilan halaman muka, kalian bisa mencoba berkreasi pada bagian ini:

<!-- MODIFIKASI TAMPILAN HALAMAN MUKA DI SINI! -->
<style type='text/css'>

/* General */
body {}

/* Header */
#headace {
  text-align:right;
  padding:2em 2.5em;
}
#headace h1 {
  margin:0 0;
  font-size:400%;
}
#headace p {
  font-size:120%;
  margin:.5em 0 0;
}

/* Posts */
.post {
  margin:0 0;
  padding:0 0;
}
.post-outer {margin:0 5%}
.post .post-title {
  margin:0 0;
  font-size:120%;
  text-align:left;
}
.post-footer {margin:.5em 0 1.5em}
.date-header {display:none}

</style>

Sistem Grid

Saya menggunakan sistem grid 1140px Grid dari Andy taylor yang juga Saya gunakan dalam blog Blogazine Saya. Dengan sistem grid, kalian tidak perlu lagi membuat peraturan media queries berkali-kali pada setiap posting, karena sistem grid sudah disusun dalam satu paket di dalam templat. Berikut ini adalah konsep dasar pembuatan kolom pada posting:

Pertama-tama buat pembungkus luar berupa elemen .row:

<div class="row">
    ...
</div>

Setelah itu kalian tentukan sendiri, akan menggunakan model grid berapa kolom. Dalam sistem grid ini ada setidaknya sebelas macam ukuran. Masing-masing dibagi dalam kelas yang berbeda seperti ini:

1. onecol untuk standar 12 kolom sama lebar
2. twocol untuk standar 6 kolom sama lebar
3. threecol untuk standar 4 kolom sama lebar
4. fourcol untuk standar 3 kolom sama lebar
5. fivecol
6. sixcol untuk standar 2 kolom sama lebar
7. sevencol
8. eightcol
9. ninecol
10. tencol
11. elevencol

fivecol, sevencol, eightcol, ninecol, tencol dan elevencol digunakan untuk layout kolom lanjutan. Misalnya jika kita ingin membuat dua kolom dengan lebar yang berbeda. Contoh sederhana, untuk membuat dua kolom sama lebar, kita bisa menggunakan .sixcol seperti ini:

<div class="row">
    <div class="sixcol">
        ...
    </div>
    <div class="sixcol last">
        ...
    </div>
</div>

Catatan: Jangan lupa untuk menyertakan kelas .last pada setiap akhir kolom. Itu digunakan untuk menghilangkan margin-right yang berlebih pada kolom terakhir.

Gambaran selengkapnya mengenai hasil penerapan kelas-kelas grid di atas bisa kalian lihat di halaman ini:

Lihat Demo

Perataan Gambar dan Teks

Sistem perataan gambar dan teks sudah Saya buat dalam satu paket CSS di dalam templat. Tugas kalian hanya tinggal menerapkan kelas-kelasnya saja pada elemen yang dikehendaki:

/* CSS Float */
.clear {clear:both} /* clear float */
.left {float:left} /* left alignment */
.right {float:right} /* right alignment */
.hidden {display:none} /* hidden element */
.visually-hidden {
  position:absolute !important;
  top:-9999px;
  left:-9999px;
} /* accessible hidden element */

/* Text Alignment */
.text-left {text-align:left} /* text-align left */
.text-right {text-align:right} /* text-align right */
.text-center {text-align:center} /* text-align center */

/* Image Alignment */
img.left {margin:0 1em .2em 0} /* left alignment */
img.right {margin:0 0 .2em 1em} /* right alignment */
img.center {margin:0 auto} /* center alignment */

Sebagai contoh, jika kalian ingin menerapkan perataan gambar ke samping kiri, tambahkan kelas left seperti ini:

<img class="left" src="gambar.jpg" alt="" />

Sisanya perataan kanan dan tengah Saya rasa bisa dengan mudah dipahami:

<img class="right" src="gambar.jpg" alt="" />
<img class="center" src="gambar.jpg" alt="" />

Editor Blogger biasanya akan menyisipkan elemen .separator pada setiap gambar yang berhasil diunggah. Jadi, dibandingkan menerapkan kelas pada gambar secara langsung, Saya lebih menyarankan kalian untuk menerapkan kelas perataan pada elemen .separator seperti ini:

<div class="separator center">
    <a href="#"><img src="gambar.jpg" alt="" /></a>
</div>
<div class="separator left">
    <a href="#"><img src="gambar.jpg" alt="" /></a>
</div>
<div class="separator right">
    <a href="#"><img src="gambar.jpg" alt="" /></a>
</div>

Hapus semua inline-style bawaan dari editor Blogger (Misalnya: style="margin-left:1em;margin-right:1em;"). Kita cukup menggunakan kelas perataan pada setiap elemen.

Perataan teks tidak sulit, cukup buat elemen baru kemudian tambahkan kelas perataan, atau tentukan elemen mana yang ingin diberi kelas perataan:

<div class="text-right"> ... </div>

<div class="row">
    <div class="fourcol text-right">
        ...
    </div>
    <div class="fourcol text-center">
        ...
    </div>
    <div class="fourcol last">
        ...
    </div>
</div>

Lihat Demo

Lainnya

Formulir komentar tersembunyi dan fitur thread-commenting bawaan Blogger siap pakai.

Lisensi

http://creativecommons.org/licenses/by/2.5/ - Artinya bahwa Anda boleh mengubah nama pembuat, mengubah identitas templat dan footer namun dengan syarat tetap mempertahankan keterangan sumber. Tidak perlu repot-repot membuat tautan aktif yang dipasang di catatan kaki blog, cukup biarkan semua atribusi yang ada di dalam kode. Selebihnya terserah Anda: Tidak ada lisensi/tidak mewajibkan atribusi, kecuali sistem grid, kalau mau.

Unduh Templat