Template Ringan dan Keren

Dalam membuat blog peran sebuah template sangat besar pengaruhnya gan. Selain tampilannya harus keren juga template tersebut harus ringan dan SEO friendly tentunya. Kenapa harus ringan dan SEO friendly, alasannya sederhana kalo loading blog kita cepet, pengunjung pasti ngerasa seneng. Dan SEO friendly tentu biar blog kita di sukai sama mesin pencari gan.

Buat seorang blogger tujuan membuat blog tentu biar blognya nomor satu di Google, dan juga bikin tampilan blognya sekeren mungkin ya gak gan. Di luaran sono banyak banget situs yang nyediain template Blogger gratis, dan hampir semuanya keren menurut gw gan.

Pada kesempatan kali ini gw pengen berbagi template ringan SEO friendly gratis gan. Template ini hasil karya gw sendiri dan tampilannya lumayan gak jelek-jelek amat. Template gratis ini gw namain Ciyus 1st Edition gan.

Setelah beberapa hari gw utak-atik akhirnya tempalte ringan SEO friendly ini beres juga dan siap di edarkan gan. Template ini gw usahain buat seringan mungkin dengan meminimalis pengunaan javscript, jadi gak banyak fitur widgetnya. Untuk fitur lengkapnya silahkan di baca di bawah ini dan dicek juga demonya gan.

Fitur Template Ciyus 1st Edition :

1. Template 2 Kolom.
2. Layout Krem dan Biru.
3. Ringan dan SEO Friendly.
4. Sidebar Kanan.
5. Tab Menu Atas Dropdown.
6. Halaman Konten & Sidebar Lebar.
7. Navigasi Melayang.
8. Slot Ads 468x60 di Header.
9. Slot Ads 125x125 di Sidebar ( Eksternal Kode ).
10. 4 Widget di Footer.
11. Social Icon di Header.
12. Widget Related Post di Bawah Postingan.
13. Facebook Comment Keren Plus Blogger Comment.
14. Widget Back To Top.

License / Lisensi : Template ini gratis dan boleh digunain buat keperluan komersil maupun non komersil. Bagi pengguna di haruskan untuk tidak menghapus atau merubah link atribut dari author di footer template.

 DEMO | DOWNLOAD

Pengaturan Template Ciyus 1st Edition :

1. Header ( Judul, Banner 468x60 dan Social Icon )

Untuk Judul dan Banner 468x60 langsung aja di edit dari Layout blog kalian gan. Buat Social Icon kalian tinggal cari kode di bawah ini dan ganti tanda # dengan URL profil sosial media kalian. Sekedar info aja kalau social icon di template ini bisa juga kalian download di blog ini gan.

<div class='socialhead'>
<a href='#' rel='nofollow' target='_blank' title='Like Us on Facebook'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9mS4yuIY8x_3YG6m8xn3-cZTN3fFiBcIVQEq0qv03tluIzFujdXsMbfBadX_pvp8JkqtAea1n3UHR6nRdw3lbCm6O3tQjn_gT_FLrjkxIglGQ65qLKlBW1_jozSNtXPPShb4tSjqEY9rX/s1600/SC+facebook+icon64.png'/></a>
<a href='#' rel='author' target='_blank' title='Follow Us on Google+'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUIYY1mcPfin2dGXmAHr3BmOZR8NMHudl2SneAOaX555DrxPfSSeWEb0qi1VyMpv9YX1BuJQhxTK-Z67c4RVWCnOk1l3TRg_dE6dOWV6U1aumQWsBu_fpHVQMwZWcnG6P51gNl9r_qtA7c/s1600/SC+google++icon64.png'/></a>
<a href='#' rel='nofollow' target='_blank' title='Follow Us on Twitter'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhutEnMmw-8U6irz9LB211DT7s0UEHiqMZOEJ-pWexVg5URadoGO0TPWDGEsTr9XUBpVSUstuoDR3ooHWTxldW5JHmIBdBI9PoiZP3jHdfUE0TGi9HtVhOorfXHheNQerncG1v5EWwqFh7g/s1600/SC+twitter+icon64.png'/></a>
<a href='#' rel='nofollow' target='_blank' title='Subscibe Via RSS Feed'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSKWlBKu1DGfn7ya09as0IN0Cw5LTBRSweGuV0QBGQcVUX3c_kDzA7ripxVcVUtNgZn_g1NHFCnvb9F9mZkkoEPp6MxY3bT1tF3IT7zIIstAuRU35x-FTqRc50rYLfc6Faju3lJ2IP8I8k/s1600/SC+rss+icon64.png'/></a>
</div> 

2. Tab Menu

Buat ngedit Tab Menu tinggal cari kode di bawah ini dan rubah tanda # ganti dengan url yang sesuai dengan isi blog dan judulnya silahkan diganti juga gan. Kalo mau ditambahin menunya silahkan aja gan disesuaiin aja sama kebutuhan.

<div class='menu-primary-container' id='submenu'><div class='menu' id='menu-primary'>
<ul>
<li><a href='#'>News</a></li>
<li><a href='#'>Tutorials</a>
<ul>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>WordPress</a></li>
<li><a href='#'>SEO</a></li>
</ul>
</li>
<li><a href='#'>Service</a>
<ul>
<li><a href='#'>Web Design</a></li>
<li><a href='#'>SEO Service</a></li>
<li><a href='#'>Template Maker</a></li>
</ul>
</li>
<li><a href='#'>Freebies</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>About</a></li>
</ul>
</div></div>

3. Sidebar Slots Ads 125x125

Ini Slots Ads 125x125 gw pake kode tambahan jadi tinggal nambahin di widget sidebar aja gan. Kalo kalian suka silahkan dipasang kodenya ada di bawah ini, tinggal diganti URL Iklan dan gambarnya gan.

<div align="center">
<table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#fff">
<tbody><tr>
<td><center><a href="URL Iklan" rel="nofollow" target="_blank"><img border="0" alt="Deskripsi Iklan" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuuAmZ6E1I7PHHL-3z26ZF65Gd9tHran-idy7iW61XpKgr98EjUE8IL8Mbw3i3M_me0AcLukB-W2DPSzqWM1vXCnA7oEsnlerVYAdwc78zKDQNkfhYjwNRx4J-UPpmMArGzRjSv85HS7XC/s1600/ads.jpg" height="125"/></a></center></td>
<td><center><a href="URL Iklan" rel="nofollow" target="_blank"><img border="0" alt="Deskripsi Iklan" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuuAmZ6E1I7PHHL-3z26ZF65Gd9tHran-idy7iW61XpKgr98EjUE8IL8Mbw3i3M_me0AcLukB-W2DPSzqWM1vXCnA7oEsnlerVYAdwc78zKDQNkfhYjwNRx4J-UPpmMArGzRjSv85HS7XC/s1600/ads.jpg" height="125"/></a></center></td>
</tr>
<tr>
<td><center><a href="URL Iklan" rel="nofollow" target="_blank"><img border="0" alt="Deskripsi Iklan" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuuAmZ6E1I7PHHL-3z26ZF65Gd9tHran-idy7iW61XpKgr98EjUE8IL8Mbw3i3M_me0AcLukB-W2DPSzqWM1vXCnA7oEsnlerVYAdwc78zKDQNkfhYjwNRx4J-UPpmMArGzRjSv85HS7XC/s1600/ads.jpg" height="125"/></a></center></td>
<td><center><a href="URL Iklan" rel="nofollow" target="_blank"><img border="0" alt="Deskripsi Iklan" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuuAmZ6E1I7PHHL-3z26ZF65Gd9tHran-idy7iW61XpKgr98EjUE8IL8Mbw3i3M_me0AcLukB-W2DPSzqWM1vXCnA7oEsnlerVYAdwc78zKDQNkfhYjwNRx4J-UPpmMArGzRjSv85HS7XC/s1600/ads.jpg" height="125"/></a></center></td>
</tr>
</tbody></table>
</div>

4. Komentar Facebook

Ini fitur tambahan keren yang gw isi di template ini gan. Ada kotak komentar facebooknya berdanpingan sama komentar blog yang asli. Mungkin loe udah sering liat di blog laen yang kayak beginian tapi yang satu ini beda lebih keren karena sudah gw modifikasi gan.

Cara settingnya gampang tinggal cari kode di bawah ini lalu loe ganti  Facebook Profile ID sama ID facebook loe dan Aplikasi Facebook ID sama ID aplikasi facebook loe. Kalo bingung silahkan baca cara membuat komentar facebook keren terbaru di blog gan.

<meta content='Facebook Profile ID' property='fb:admins'/>
<meta content='Aplikasi Facebook ID' property='fb:app_id'/>

5. Related Post

Widget Related Post di template ini gw udah isi sama icon smiley gan, kalau kalian mau ganti misal dengan favicon silahkan aja. Tinggal cari kode di bawah ini lalu ganti background : url sama url gambar loe gan.

#screlated-post ul li {
display : block;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGsVVZPYvDhu8lznrdlpx0qZCjLoaE669bhkIIqlHu74Q7ZG623nlRTPcRlSAcHHrBQg0ms2AIDNYKN_0oh9-7tCZlFht5E-9495yVxmsDn79Ua3Wy23-9tv17wZcwExgh5pThcxpDttJs/s1600/stupid-idea-icon.png) no-repeat 0 0;

6. Footer

Untuk nambahin widget di footer langsung aja dari Layout dashboard blog gan.

7. Meta Tag

<meta content='Index, Follow' name='robots'/>
<meta content='Your home page description' name='description'/>
<meta content='your keywords, keywords1, keyword2' name='keywords'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.url' rel='canonical'/>

Tambahan aja untuk edit meta tag, silahkan ganti description dan keywords sesuai isi blog loe. Di template ini gw cuma isi beberapa meta tag, kalau mau lebih silahkan ditambahkan sendiri. Bagi yang udah lama blogging, pasti udah tau cara nambahinnya. Tapi buat yang baru ngeblog dan mungkin bingung, silahkan disimak postingan gw tentang cara membuat meta tag gan.


Mudah-mudahan template ini berguna buat loe yang pengen buat blog. Harap di maklumi kalo masih banyak kekurangan dalam hal design dan fitur di template ini. Untuk widget-widget yang laen sengaja gak gw isi karena itu tergantung selera masing-masing, jadi silahkan berkreasi dan di edit sendiri templatenya gan.

Sekian dulu yang bisa gw share dan mudah-mudahan kalian suka dengan template ringan gratis ini. Kalo ada masalah dalam penginstalan atau yang gak di mengerti silahkan ditanyakan dan jangan lupa ninggalin komentar gan.

» Loe suka postingan ini? Silahkan di link back dengan mengcopy kode dibawah gan.

URL :

HTML link kode :

» Luangin waktu 5 detik donk gan buat share postingan ini.

Sumber: http://seociyus.blogspot.com/2013/02/template-ringan-keren-dan-seo-friendly-gratis.html#ixzz2VZJreFGc
Under Creative Commons License: Attribution Non-Commercial
Follow us: @SEOCiyus on Twitter