Join this site

Download Template SEO Ready Terbaru 2013, Light Fastz

Hello, di pagi yang cerah dan di hari yang bahagia ini, saya admin Dedi Sinaga Blog ingin berbagi sebuah template kepada sobat semua, sebelum itu, admin ucapkan "Selamat Hari Raya Idul Fitri, Minal 'Aidin wal-Faizin" dan juga admin ingin meminta maaf kepada sobat semua, barangkali admin ada salah sama sobat. oke kembali ke topik, Template ini adalah template yang admin dapatkan dari mastah SEO luhurfatah10..
Langsung saja ke topik nya :

Template ini saya berinama Light Fastz, yang artinya Ringan Cepat atau Cepay Ringan, CMIIW, Z di belakang cuma sebagai bumbu pemanis saja :D, template ini di lengkapi dengan fitur fitur menarik, seperti SEO Ready ( Breadcumbs yang terindex oleh search engine, permalink dan artikel terkait) dan juga di lengkapi dengan menu drop down, read more otomatis, dan beberapa custom widget blogger, template ini memiliki beberapa pilihan warna yang bisa sobat pilih sesuai dengan keinginan dan juga warna kesukaan. ini dia screen shoot template light fast beserta fitur fitur dan ulasannya.

Fitur Template Light Fastz :

  • SEO Ready
  • Elegant
  • Light
  • Simple
  • Breadcumbs (Terindex oleh SE)
  • Permalink
  • Related Post (Artikel Terkait)
  • Auto Readmore
  • Menu Drop Down
  • Share Widget (G+)
  • Custom Widget Blogger
Template ini memiliki banyak fitur fitur menarik, seperti Menu Drop Down, Widget Share Google Plus, dan beberapa cumtom widget blogger, seperti label cloud dan lain lain, Kekurangan dari template ini adalah masih ada beberapa widget blogger yang belum rapi, seperti populer post dll. oke ini dia template Light Fastz besertta pilihan warnanya.

1. Biru

2. Merah

3. Hijau

4. Merah Muda

5. Ungu

Untuk Mendownload semua template di atas bisa klik link berikut :

Cara Pengeditan ( Menu, Meta Tag dll )

Meta Tag :
<meta content='KEYWORD BLOG ANDA' name='keywords'/>
Ganti KeyWordmu dengan keyword blog sobat, contoh Tutorial Blog, SEO, dan Tips Trik Blogging
<link href='http://URLMU/feeds/posts/default' rel='alternate' title='RSS Feeds' type='application/atom+xml'/>
Ganti http://URLMU/ dengan alamat blog sobat, contoh http://luhurfatah10.blogspot.com/

Meta Deskripsi sengaja saya hapus, karna menurut para master seo lebih bagus menggunakan deskipsi post kebanding meta deskripsi.
Menu :
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a class='trigger' href='#'>Menu</a>
<ul>
<li><a href='#' title='#'>Sub Menu</a></li>
<li class='hr'/>
<li><a href='#' title='#'>Sub Menu</a></li>
<li class='hr'/>
<li><a href='#' title='#'>Sub Menu</a></li>
<li class='hr'/>
<li><a href='#' title='#'>Sub Menu</a></li>
</ul>
</li>
<li><a href='#' title='#'>Menu</a></li>
<li><a href='#' title='#'>Menu</a></li>
<li><a href='#' title='#'>Menu</a></li>
<li><a href='#' title='#'>Menu</a></li>
<li><a href='#' title='#'>Menu</a></li>
<li><a class='trigger' href='#'>Menu</a>
<ul>
<li><a href='#' title='#'>Sub Menu</a></li>
<li class='hr'/>
<li><a href='#' title='#'>Sub Menu</a></li>
<li class='hr'/>
<li><a href='#' title='#'>Sub Menu</a></li>
<li class='hr'/>
<li><a href='#' title='#'>Sub Menu</a></li>
</ul>
</li>
</ul>
</div>
<div class='clear'/>
</div>
Untuk membuat tombol pada postingan bisa copy kode dan edit kode berikut sesui keperluan, lalu pastekan ke bagian HTML (klik tab HTML saat posting, yang berada di samping Compose)  :

<a class='button' href="URL TUJUAN">NAMA</a> akan menjadi seperti ini :

NAMA

Tambahan : 

Bagi sobat yang mau menambahkan widget pencarian, sobat bisa gunakan cara ini :
  • Login Ke Blogger, Pilih template lalu pilih Edit HTML
  • Cari Kode ]]></b:skin> (untuk mempermudah unakan F3 atau Ctrl+F)
  • Letakan Kode berikut tepat di atas kode ]]></b:skin>
#search{border:#ccc solid 1px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEeXd5VqyQSRKPSGpYEbZlL8W_5B_765oFUsMUfl57pASvhbGVg5H20n24ZR0D38cfVK3ETo73Q5Q1nP9d9ua4QIbDAVSujBhtMlxqs9sQTWIc70mxq5-6WmhnMBg8ehp8EHBubzTKtkCX/s0/search.png) 99% 50% no-repeat #fff; text-align:left; padding:2px 24px 4px 6px}#search #s{background:none; color:#979797; border:0; width:100%; padding:0; margin:0; outline:none} #content-search{width:300px; padding:15px 0}

  • Lalu cari kode berikut :
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a class='trigger' href='#'>Menu</a>
<ul>
<li><a href='#' title='#'>Sub Menu</a></li>
<li class='hr'/>
<li><a href='#' title='#'>Sub Menu</a></li>
<li class='hr'/>
<li><a href='#' title='#'>Sub Menu</a></li>
<li class='hr'/>
<li><a href='#' title='#'>Sub Menu</a></li>
</ul>
</li>
<li><a href='#' title='#'>Menu</a></li>
<li><a href='#' title='#'>Menu</a></li>
<li><a href='#' title='#'>Menu</a></li>
<li><a href='#' title='#'>Menu</a></li>
<li><a href='#' title='#'>Menu</a></li>
<li><a class='trigger' href='#'>Menu</a>
<ul>
<li><a href='#' title='#'>Sub Menu</a></li>
<li class='hr'/>
<li><a href='#' title='#'>Sub Menu</a></li>
<li class='hr'/>
<li><a href='#' title='#'>Sub Menu</a></li>
<li class='hr'/>
<li><a href='#' title='#'>Sub Menu</a></li>
</ul>
</li>
</ul>
</div>
<div class='clear'/>
</div>

  •  Letakan kode berikut tepat di atas kode yang saya kasih warna merah di atas,

<div style='float:right;padding:5px'>
<div id='search' title='Type and hit enter'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search";}' onfocus='if (this.value == "Search") {this.value = "";}' type='text' value='Search'/>
</form>
</div>
</div>

  • Save, widget ini akan berada di sebelah kanan menu, jika anda ingin membuat widget ini di sidebar, cukup copy kode berikut dan masukan ke, Tata letak, Tambah widget, HTML/java scrip
<div style='float:right;padding:5px'>
<div id='search' title='Type and hit enter'>
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search";}' onfocus='if (this.value == "Search") {this.value = "";}' type='text' value='Search'/>
</form>
</div>
</div>
 DAN JANGAN LUPA UNTUK TIDAK MENGGANTI CREDIT NYA


Gimana , bagus ga template nya langusng saja download.
Dan jangan lupa untuk tinggal comment :D

Sumber : luhurfatah10

Shiroi blogger template



Halo pengunjung setia Dedi Sinaga , apa kabar pasti baik kan..
Kali ini admin akan share template djogzs  yang berjudul "SHIROI BLOGGER TEMPLATE".
Kmarin admin sudah share template dari djogzs yang berjudul "Shingeki No Kyojin Blogger template"
Template udah di pake , kalau belum dipake dl ya...

Template responsive yang sederhana ini menggunakan warna dasar hitam,putih dan hijau miku~
Pada sidebar diberikan fungsi buka/tutup seperti template hatsune miku dan diberikan fitur Featured content slider yang agak" mirip dengan slider saya,slider original dapat dilihat disini .tidak boleh sama,nanti terlalu mainstream~xDD


Screenshot





1. Pengaturan menu
Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.

<div id='menujohanes'>
<ul>
<li class='selected'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a class='menu' href='#'>Download</a>
<ul>
<li><a href='#'>Naruto</a>
<ul>
<li><a href='#'>Episode 1</a></li>
<li><a href='#'>Episode 2</a></li>
<li><a href='#'>Episode 3</a></li>
</ul>
</li>
<li><a href='#'>Date A Live</a>
<ul>
<li><a href='#'>Episode 1</a></li>
<li><a href='#'>Episode 2</a></li>
<li><a href='#'>Episode 3</a></li>
</ul>
</li>
<li><a href='#'>Devil Survivor2</a>
<ul>
<li><a href='#'>Episode 1</a></li>
<li><a href='#'>Episode 2</a></li>
<li><a href='#'>Episode 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a class='menu' href='#'>Contact</a>
<ul>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Google plus</a></li>
</ul>
</li>
<li><a class='menu' href='#'>Multi sub</a>
<ul>
<li><a href='#'>Episode 1</a>
<ul>
<li><a href='#'>Episode 2</a>
<ul>
<li><a href='#'>Episode 3</a></li>
<li><a href='#'>Episode 4</a></li>
</ul>
</li>
<li><a href='#'>Episode 5</a></li>
</ul>
</li>
<li><a href='#'>Episode 6</a></li>
<li><a href='#'>Episode 7</a></li>
</ul>
</li>
<li><a class='menu' href='#'>Clients</a></li>
<li><a class='menu' href='#'>Email</a></li>
</ul>

pengaturan lebih lanjut mengenai menu ini,silakan baca di postingan ini :
http://djogzs.blogspot.com/2013/06/css-dropdown-menu.html


2. Setting SEO/Meta tag

setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah
<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>


Untuk pengertian setting seo/meta tag,anda bisa cari tahu di google atau disini dan disini


3. Setting Social media : facebook, Twitter, google,Pinterest.
*ganti url linknya

<div class='jorib'>
<a href='#' target='_blank'><div class='googlejo'/></a>
<a href='#' target='_blank'><div class='twitterjo'/></a>
<a href='#' target='_blank'><div class='facebookjo'/></a>
<a href='#' target='_blank'><div class='pinterestjo'/></a>
</div>


4. Pengaturan Slider

<div id='wrapper'>
<div id='featured'>
<ul class='ui-tabs-nav'>
<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOrY6GbHzqbZBUZgc3Llzs9FQIH6RbXx9nkzxQQ6N1j6koV6ZdjrHZcMKhjND6aPNwszNZ0g2zEAyLLUrW6EjY7B0pc_6sIgx9s9z8J8T7BTs9ABpeljM7bcZLGQlYPiU6wFXgR8hrVuQ/s1600/kurumi-tokisaki-icon.jpg'/>
<span>Kurumi Tokisaki</span></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/AVvXsEgGqF6-DK5lxttCn3dmZzP-MGHEyHLurURUrX2IQirWo-rA0C__G-Ly1xrmApVQeuNP3TqACypZPbilB3DY8Vgbh6T6QC2nVSm5uQ6IZcpRmKIFEcLqAYkuxvJbEQ6exPEboAlS1Ln01V0/s1600/Date-A-Live-icon.jpg'/>
<span>Date A Live</span></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/AVvXsEhBHg7e6EmteOCqZ_3n24G20NY1gEfB2pVUWmi9cPo4glsh9Q5n5gssXTTuyKWvNEZbsJoG_mCAugAMJ9hq2ZFKU36Sq08r8M-5wUVh_Rqs7_VMC5szLN0gPgFXy5CdRHtR8XOWXwhF8Tk/s1600/miku-icon.jpg'/>
<span>Hatsune Miku</span></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/AVvXsEjN6SOXs3yzujzTgP62r0WqxBI1xuilUHbhuxUrgNC30ImKbIh5m4ovK6bXAaMnDPH-SZ16Kakxwpcwczx-q1GKuf7URiLMxvE8wgGZgyk3LLweu6OhN86Fl7g07KN1437dASVeCpaQGR8/s1600/hentai-ouji-icon.jpg'/>
<span>Hentai Ouji</span></a></li>
</ul>
<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD3mm9WozEvxuADwD3GeWyUhucEM0Ifq35FHLpfwxfoJ0oN99I4mpiEXDzqVegeaQdQVIMU-wWZlH1JataP6r-xPrlT5IyYWV_Pn4FWXTj7HpQJbdn0rcLEApwAnRQJtuQ0LKsZ91WsNU/s1600/slide1.jpg'/>
<div class='info'><h2><a href='#'>Kurumi Tokisaki</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
</div></div>
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlvMzNqrVieqsAosnNTr1JJDRTFunn9MMkEy-NHOa767RfUirJlsQQaIFf6aIKcu3lCvvVZ6uxb2qfQwMkZxFg-O_Pu0xChZytNxNqFWxJnovEZNF6pYeJB7xT-Gi6_8BBFr3PoDDq-0g/s1600/slide2.jpg'/>
<div class='info'><h2><a href='#'>Date A Live</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit.</p>
</div></div>
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5CnL-rRcOSPU_p6sFK3DRYguBlFItTzITjvRwtIwAzfTqDvyGKpZkH5Z96XnqWSgtZ54nCYknV7uyOnMflWBfVBt1FdzPFNFU81IuXVIh3leUCmCw5o-j9DWgBOqcUPA40WkWnUkV6VM/s1600/slide3.jpg'/>
<div class='info'><h2><a href='#'>Hatsune Miku</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare.</p>
</div></div>
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpgDEkFA2bQ4riFSSoO7NQKbIDtYxfcIYmJARuG_JikAWRDo98ikC3cEOZ4ggiiMQeMpA2v3uKBAP4ObMhQkvc3VlYO6X22Z0IEm-fwdZ4v_e6xPL7szHYSDPr-XasP5h1eAPyaG-Pfqg/s1600/slide4.jpg'/>
<div class='info'><h2><a href='#'>Hentai Ouji</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales.</p>
</div></div></div>
*Merah: Judul Slider bagian kanan.
Biru : alamat gambar Thumbnail (yang kecil )
Orange : Deskripsi
Hijau : Url gambar slider
Ungu muda : Ganti tanda pagar '#' yang bewarna ungu dengan alamat link yang dituju.
*Ungu tua  : Judul slider bagian slide di kiri.


*Note : Judul Disamakan berdasarkan urutan.



Tertarik dengan Shiroi Blogger Template? silakan unduh template ini dan diterapkan pada blog anda,tapi ada baiknya untuk selalu membackup template anda sebelum menggunakan template ini.terima kasih.






Semoga bermanfaat untuk semuanya ^^ ,tapi tetaplah ingat,selalu bijak menggunakan template gratis dan STOP aksi PLAGIAT ,karena itu perbuatan yang merugikan dan sungguh memalukan. Sankyuu minna-san~ :)


Note:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html









YUI BLOGGER TEMPLATE

Hallo Pengunjung Setia Dedi Sinaga . Kali ini saya akan share Template djogzs  yaitu "YUI BLOGGER TEMPLATE"..

langsung aja 



New Version

Yui Blogger Template

1. Pengaturan menu
Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.


Contoh:
<li><a href='http://www.facebook.com'>Facebook</a></li>


<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>&#9835; Home</a></li>
<li data-role='dropdown'><a href='#'>About</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li><li data-role='dropdown'><a href='#'>Contact</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Download</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li>
<li><a href='#'>Report</a></li>
<li><a href='#'>Anime</a></li>
</ul>

2. Setting SEO/Meta tag

setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah
<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>




3. Setting tanggal posting / mengatasi undefined.

buka setting=> language and formating pada blog kamu seperti gambar dibawah ini.
Lalu ikuti format tanggal posting seperti contoh gambar dibawah ini :
Format
Date Header Format : 
Date Header Format :
Timestamp Format :
Timestamp Format :
Comment Timestamp Format :
Comment Timestamp Format

4. Setting Slider


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='slider3'>
<div id='mask1'>
<ul><li>
<a href='#' title='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC8uTR_8Oss1p2uesXoggOXBs41G-0soPWznlo-Y4oEI6rJxhz1kb9ygaQsMCN2skgqLAKPnZswxWm73EkXHfi8N40U0wgSyFrZOW6a8ozLFx4a63xHRBHLRHCIMJ3moZgEVWKuhfj5mo/s1600/slide1.jpg'/></a>
<div class='baka'>
<span><h2>Kurumi</h2></span>
<h3>Tamako Kitashirakawa is the eldest daughter of a family which runs a mochi shop in her town&#39;s bustling Tama-ya shopping district.</h3></div>
</li>
<li>
<a href='#' title='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjNxur9kJKLmsKQdtLh8K_qyRjKaQrw9vcC-eY7nj-eCOFlGRFYtzbiK3Oh0KESscm28M89Kk7O4Z-UH8SjzRUCjS-2BYNL1hcyMFgCkgEPHm_vvCfRAauxFET7uKUZT30BzcBguH5L4U/s1600/slide2.jpg'/></a>
<div class='baka'>
<span><h2>Tohka</h2></span>
<h3>The story is set in a futuristic and peaceful world made possible thanks to the invention of the Manifestation Engine (&#31034;&#29694;&#12456;&#12531;&#12472;&#12531; Jigen Enjin?), which solved an energy crisis five years prior.</h3></div>
</li>
<li>
<a href='#' title='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZyDVHjkCd5M3V0EuwrRpchvQynNaceH8nZjhGE8j18aQNnBV6YFiGCDVNLZ3Elrc3mVWtX0ZL9Dyc9pJJVHTZs0DolXUuyzySR5vAtjbK3Uj-fBAt3HvP9gQTSEoXMAQ6o5KBzrby3Kw/s1600/slide3.jpg'/></a>
<div class='baka'>
<span><h2>Snow Miku</h2></span>
<h3>Eita Kid&#333; enters high school with the aim to attend medical school. Due to his parents getting divorced and his intention to maintain his grades, he shuns anything to do with romance or love.</h3></div>
</li>
<li>
<a href='#' title='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizhZsFTlc2v5SSzJkwhsYSEKXbXVlMgJErrVBm7COqtyVyqnrZcHFsA-cfqWWp98WfGg3SQDKDTmExuPeaIduNK-J-X7Brnbz40oGmU5QgNdZ4f3Fa9S0MhJ7O3HedslBe1sGG76r4f_U/s1600/slide4.jpg'/></a>
<div class='baka'>
<span><h2>Tsukiko</h2></span>
<h3>The story is set in a world embroiled by war between Humans and Demons. The Humans&#39; greatest hero invades the Demon King&#39;s castle determined to vanquish her. However, instead of fighting back, the King proposes an alliance with the Hero.</h3></div>
</li>
</ul>
</div>
<div class='overlay1'>
</div></div></b:if>



Text bewarna Orange : Judul Slider
Text bewarna merah : Alamat situs/Link/url web
Text bewarna ungu : Url Gambar
Text bewarna biru : Deskripsi




Tertarik dengan Template Yui Blogger Template ini? silakan unduh template ini dan diterapkan pada blog anda,tapi ada baiknya untuk selalu membackup template anda sebelum menggunakan template ini.terima kasih.







Semoga bermanfaat untuk semuanya ^^ ,tapi tetaplah ingat,selalu bijak menggunakan template gratis dan STOP aksi PLAGIAT ,karena itu perbuatan yang merugikan dan sungguh memalukan. Sankyu minna-san~


Note:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.
Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.
http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.
Semoga bermanfaat untuk semuanya ^^ ,tapi tetaplah ingat,selalu bijak menggunakan template gratis dan STOP aksi PLAGIAT ,karena itu perbuatan yang merugikan dan sungguh memalukan. Sankyu minna-san~

Cara Bikin Template Blog Sendiri Bagian 3

Postingan kali ini adalah kelanjutan dari postingan sebelumnya tentang cara bikin template blog sendiri bagian 2. Kali ini kita akan memfokuskan pembahasan pada komponen lain di header. Silahkan simak tutorial berikut.


hasil template pada tutorial sebelumnya.


Kira kira seperti ini kode header secara keseluruhan.

#header-wrapper{
width:900px;
margin-bottom:10px;
border:1px solid #000000;}

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center; ( judul blog berada di tengah, ubah kekiri dengan menggunakan kode left )
  color:$pagetitlecolor; ( untuk mengubah warna dari judul blog, ubah dengan warna yang di sukai )
}

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont; ( jenis font dari judul blog )
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor; ( efek judul blog ketika di lewati pointer )
  }

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont; ( jenis font dari deskripsi blog )
  color: $descriptioncolor; ( warna dari deskripsi blog )
 }

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}
  • kode berwarna biru adalah kode yang biasa di edit untuk membagi 2 kolom header serta memodifikasi konten di dalam header secara keseluruhan.
  • kode berwarna ungu adalah kode untuk judul blog.
  • kode berwarna merah adalah kode untuk deskripsi blog
  • kode berwarna hijau adalah kode untuk efek hover pada judul blog
  • kode bercetak tebal digunakan untuk mengatur tampilan image atau gambar dalam header.

ganti kode di atas dengan kode berikut.

#header-wrapper{
width:900px;
margin-bottom:10px;
border:1px solid #000000;}

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header {
  margin: 10px;
  border: 0px solid $bordercolor;
  text-align: left;
  color:$pagetitlecolor;
}

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor;
  }

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
font-size:16px;
  color: $descriptioncolor;
 }

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

hasilnya akan seperti ini


Setelah membahas tentang header, sekarang kita masuk di Heading.

Seperti yang saya jelaskan pada cara bikin template blog bagian 1, bahwa heading adalah untuk mengubah tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar,judul widget-footer, dll.
berikut kodenya

h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}

ubah dengan kode berikut

h2{
margin:1.5em 0 .75em;
font:$headerfont;
line-height:1.4em;
border-bottom:1px solid $bordercolor;
text-transform:uppercase;
font-size:17px;
letter-spacing:.2em;
color:#000}
 kode bercetak tebal adalah kode yang di tambahkan.


berikut tempilannya...


Pada gambar di atas sobat sobat melihat beberapa konten di postingan dan di sidebar berada dalam satu kotak, kita akan mencoba membuat area postingan secara terpisah - pisah dengan mengedit kode berikut.

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }
.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

ganti dengan kode berikut
.post {
margin-right:px;
margin-bottom:10px;
color:#000;
background:#ffffff;
line-height:20px;
border:1px solid #222;
padding:5px;
}
.post h1{
margin:5px;
padding-right:10px;
 font-size:20px;
border-bottom:1px solid #000000;
font-weight:normal;
line-height:1.4em;
color:$titlecolor}

selesai dengan itu sekarang kita ke sidebar...

buat sidebar dalam kotak - kotak terpisah dengan mengedit kode berikut.
.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }

ganti dengan kode berikut
.main .widget{
border:0px solid $bordercolor;
background:#FFF;
padding:0 0 0em}

.sidebar .widget {
margin-bottom:10px;
color:#000;
background:#ffffff;
border:1px solid #222;
padding:3px 10px 10px 10px;
}

dengan kode di atas, tampilan template nya akan jadi seperti ini..


tunggu kelanjutannya di cara bikin template bagian 4..

Sumber : christiantatelu

Cara Bikin Template Blog Sendiri Bagian 2

Postingan kali ini adalah kelanjutan dari postingan sebelumnya yaitu cara bikin template blog sendiri. Kali ini kita akan membahas kode Css dan Wrapper. Membuat template blogger sebenarnya sangatlah mudah dan mengasyikan jika kita sudah menguasai css dan htmlnya, terutama arti - arti kode css ( Cascading Styles Sheet ) seperti margin, padding, border, dll. Berikut penjelasan singkatnya.

Margin : jarak/batas elemen dengan elemen lain
Padding : jarak elemen dengan isi elemen (elemen anak)
Border : border/gari tepi elemen (pengguaan solid, dotted, double dll)
Float : posisi konten ( penggunaan left, right,center, dll )
Color : warna
Background : latar belakang
Font : huruf
Font-family : jenis huruf
Font-size : ukuran huruf
Font-weigth : atribut huruf ( penggunaan bold, underline, strike dll)
Text-align : posisi text ( pengguaan left, right, center, bottom, top, $endside, dan $starside )
Text-decoration : hampir sama dengan font-weight
Img : image atau gambar
Width : lebar
Height : tinggi
Left : kiri
Right : kanan
Center : tengah;
Justify : sama rata kiri kanan
Bottom : bawah
Top : atas
Text-transform : ( penggunaan capitalize, uppercase, lowercase dan none )
Letter-spacing : jarak antar horisontal antara huruf

Sekarang kita mulai membuat template.

Langkah awal yang harus sobat lakukan untuk membuat template adalah menentukan warna latar belakang dari template tersebut. warna background bisa sobat atur pada css berikut.

body {
  background:$bgcolor; ( warna background )
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }
ubah warna background dengan kode warna yang sobat inginkan seperti
putih : #FFFFFF
hitam : #000000
biru : #FF0000
merah : #0000FF , untuk lengkapnya bisa sobat lihat di sini.

atau bisa juga dengan gambar,dengan penggunaan seperti berikut.
background : #000000; url (url gambar) no repeat-x;

Kemudian saatnya sobat menentukan dan meyamakan ukuran lebar header-wrapper, outer-wrapper dan footer-wrapper.

#header-wrapper {
  width:660px; ( lebar header )
margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}
  • Atur ukuran width atau lebarnya dengan ukuran 900px.

Kira - kira seperti inilah kodenya.
#header-wrapper {
  width:900px; ( lebar header )
margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

#outer-wrapper {
  width: 900px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

setelah itu sekarang kita mengedit wrapper lain dalam outer-wrapper, yaitu main dan sidebar wrapper.

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Atur lebarnya keduanya dengan memperhitungkan lebar header dan margin serta paddingnya. misalnya lebar header 900px maka lebar main-wrapper bisa sobat coba dengan 550px dan sidebar-wrappernya 350px.
550 + 350 = 900px. namun saya sangat anjurkan untuk sobat menggunakan padding dan margin ( contoh 10px ).

Berikut kodenya.

#main-wrapper {
  width: 530px;
  float: $startSide; ( main-wrapper akan berada di sisi kiri )
padding:10px;
margin-right:10px; ( memberi jarak antara main dan sidebar )
border:1px solid #000000; /* border tambahan */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 315px;
  float: $endSide; ( sidebar akan berada di sisi kanan )
padding:10px;
border:1px solid #000000; /* border tambahan */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Jadi singkatnya, keseluruhan wrappernya kira - kira seperti ini.

#header-wrapper {
  width:900px; ( lebar header )
margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

#outer-wrapper {
  width: 900px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 530px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 315px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#footer {
  width:900px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Dengan kode - kode di atas, tampilan blognya akan jadi seperti gambar berikut.

Berikut kode anjuran dari saya.

#header-wrapper{
width:900px;
margin-bottom:10px;
border:1px solid #000000;}


#outer-wrapper {
  width: 900px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 530px;
  float: $startSide;
padding:10px;
margin-right:10px;
border:1px solid #000000; /* border tambahan */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 315px;
  float: $endSide;
padding:10px;
border:1px solid #000000; /* border tambahan */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#footer {
  width:900px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Tampilan untuk kode anjuran di atas seperti berikut.



Lanjut ke cara bikin template blog sendiri bagian 3.

Sumber : christiantatelu

Cara Bikin Template Blog Sendiri


Cara Bikin Template Blog Sendiri - Template blog buatan sendiri adalah kebanggan bagi setiap blogger, Kali ini saya akan kasih tips membuat template blog sendiri yang saya pelajari selama mengutak - atiktemplate. Template yang akan kita gunakan adalah template minima.

Mengapa saya menggunakan template minima?? seperti kita ketahui bersama bahwa template minima adalah template tata letak yang paling banyak di gunakan para blogger dalam ber eksperimen. Berbeda dengan templae tata letak lain, seperti rounder, template minima mempunyai kode css yang tidak rumit dan tentu saja mudah di edit. Karna itu, tanpa basa - basi silahkan sobat ikuti tutorial membuat template blog sendiri berikut.

Pertama - tama kita membahas dulu bagian paling mendasar dari pembuatan template blog, yaitu pengenalan akan bagian - bagian template blogger.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Merupakan deklarasi file XHTML pada template Blogger dengan jenis Strict. XHTML jenis Strict digunakan untuk membuat halaman yang layout dan formatnya dikontrol penuh oleh CSS. Pada deklarasi ini tidak menggunakan tag font dan table


<head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    <b:skin><![CDATA[/*
Bagian kepala atau head template blog yang berisi judul blog dan awal dari kode CSS. Di sinilah tempat untuk meletakkan meta tag baik deskripsi, keyword, atau meta - tag lainnya.


body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }
Body adalah bagian paling dasar dari bagian-bagian template lainya, body pada template blog biasanya memenuhi halaman dari browser baru setelah itu tersusun bagian-bagian lainya.

a:link {
  color:$linkcolor;
  text-decoration:none;
  }
Kode ini untuk mengubah tampilan link pada template blog Anda.

a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }
Ini menubah tampilan link yang pernah di kunjungi


a:hover {
  color:$titlecolor;
  text-decoration:underline;
}
 Merubah tampilan link ketika pointer di atas link


a img {
  border-width:0;
  }
Mengubah tampilan link bergambar



/* Header
-----------------------------------------------
 */

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
Terdapat pada bagian atas template yang berisi judul dan deskripsi blog dan merupakan bagian pertama yang di baca serach engine.


#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}
mengubah tampilan header bagian dalam.


#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}
Mengubah tampilan judul blog dan deskripsi blog secara keseluruhan


#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}
Mengubah tampilan judul dan deskripsi blog tingkat 1


#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }
Mengubah tampilan link yang terdapat pada header


#header a:hover {
  color:$pagetitlecolor;
  }
Mengubah tampilan link pada header jika pointer mouse berada di atas link.


#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }
Mengubah tampilan deskripsi blog yang terdapat pada header. Biasanya pada tingkat 2 yaitu h2


#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}
Mengubah tampilan gambar header.

/* Outer-Wrapper
----------------------------------------------- */

#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }
berisi seluruh wrapper seperti header-wrapper, main-wrapper, sidebar-wrapper,  footer-wrapper dan content-wrapper.


#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
 adalah area postingan ( bagian yang dalamnya adalah artikel )


#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
Berfungsi sebagai tempat widget/gadget yang sobat pasang baik widget dari pihak blogger atau melibatkan pihak ketiga dengan fasilitas HTML/Javascript.


/* Headings
----------------------------------------------- */

h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}
Kode CSS ini mengubah tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar,judul widget-footer, dll.

sekarang kita masuk ke bagian post nya.


/* Posts
-----------------------------------------------
 */

h2.date-header {
  margin:1.5em 0 .5em;
  }
Mengubah tampilan tanggal artikel.


.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }
Mengubah tampilan artikel blog.


.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}
Mengubah tampilan judul artikel blog.



.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}
Mengubah tampilan link judul artikel.


.post h3 strong, .post h3 a:hover {
  color:$textcolor;
}
mengubah tampilan link judul artikel ketika di lewati pointer.


.post-body {
  margin:0 0 .75em;
  line-height:1.6em;
}
Mengubah tampilan bagian posting.


.post-body blockquote {
  line-height:1.3em;
}
 Mengubah / memodifikasi blockquote pada postingan blog.


.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  line-height: 1.4em;
}
Mengubah catatan kaki atau bagin footer pada postingan blog.


.comment-link {
  margin-$startSide:.6em;
}
Mengubah tampilan link komentar ( jumlah komentar ).


.post img, table.tr-caption-container {
  padding:4px;
  border:1px solid $bordercolor;
}
Mengubah tampilan image / gambar pada areal postingan.


/* Comments
----------------------------------------------- */

#comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }
Mengubah tampilan judul bagian komentar.


#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
Mengubah tampilan bagian keseluruhan komentar.


#comments-block .comment-author {
  margin:.5em 0;
  }
Mengubah tampilan link author atau link komentator


#comments-block .comment-body {
  margin:.25em 0 0;
  }
 Mengubah tampilan isi komentar.


#comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
Mengubah tampilan footer komentar. Comment-footer biasanya berisi tanggal komentar.


.deleted-comment {
  font-style:italic;
  color:gray;
  }
Mengubah tampilan komentar yang telah di hapus.


.feed-links {
  clear: both;
  line-height: 2.5em;
}
mengubah tampilan link feed


/* Sidebar Content
----------------------------------------------- */

.sidebar {
  color: $sidebartextcolor;
  line-height: 1.5em;
 }
 Mengubah tampilan sidebar secara keseluruhan.


.sidebar ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}
Mengubah tampilan daftar pada sidebar.


.sidebar li {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.25em;
  padding-$startSide:15px;
  text-indent:-15px;
  line-height:1.5em;
  }
Mengubah tampilan definisi daftar dari tag <ul>


.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }
Mengubah tampilan widget secara keseluruhan termasuk area postingan dan footer.


/* Footer
----------------------------------------------- */

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}
Pada dasarnya sam seperti sidebar namu lataknya yang berbeda. footer berada di bagian paling bawah atau di atas dari credits template blog ( hanya ada pada template yang di download ).


]]></b:skin>
Merupakan akhir dari kode css pada template blogger. Di bawah  kode ini,sobat bisa menyisipkan script. (seperti readmore, related post, dll )


</head>
Merupakan pasang atau tag penutup dari tag <head> pada dokumen HTML.


  <body>

Bagian ini di mulai dari kode berikut.
  <div id='outer-wrapper'><div id='wrap2'>
 Merupakan kode html dari outer-wrapper.


<div id='header-wrapper'>
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='tes tatelu (Header)' type='Header'/>
</b:section>
 </div>
Merupakan kode html dari header-wrapper.


<div id='content-wrapper'>
Bagian main-wrapper dan sidebar-wrapper berada dalam tag ini


<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
 </div>
Bagian antara header-wrapper dan content-wrapper.


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
 </div>
Kode html dari area postingan atau main-wrapper


 <div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>
 </div>
Kode html untuk sidebar-wrapper


<!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>
Mengatur ketinggian sidebar-wrapper dan main-wrapper supaya sama tinggi.


</div> <!-- end content-wrapper -->
akhir dari content-wrapper' .


<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
 </div>
Kode html untuk area footer-wrapper


  </div></div> <!-- end outer-wrapper -->
Akhir dari outer-wrapper.


<b:include data='blog' name='google-analytics'/>
jika sobat menemukan kode seperti ini, kode ini adalah kode google analityc, yaitu fasilitas untuk menghitung jumlah pengunjung blog.


</body>
Merupakan tag penutup dari tag body pada dokumen html.

</html>
Merupakan tag penutup dari dokumen html.

Baca kelanjutan cara membuat template blog sendiri pada bagian 2 nya....alu :D
Sumber : christiantatelu

Template Dark Black Creati

hallo sobat thumber-kreatif !! ketemu lagi sama admin yang ganteng ini XD
udah lama nih ga posting, dari pada garing mending posting template aja :v
awal mula sih cuma iseng2 buat nama templatenya, wkowkwo
ya jadi beginian deh,
oh ia, template nya dulu punya methodblaze dan di design sama si satria trus di redesign lagi sama saya :v
ini gambarnya



Password RAR : thumber-kreatif.blogspot.com
Bgimana ?? Keren ?? Jelek ??
kalo jelek ya gpp, itu kreasi saya XD
oh ia, untuk selebihnya bisa di atur atur sendiri , tpi jgn ganti footernya ya ! "maksudnya creadit nya"
selamat menerapkan

Speed SEO v.1 Template


Features:
  • SEO Friendly
  • Meta Tag Ready
  • Header Design Ready
  • BreadCrumbs Ready
  • Menu Navigation Ready
  • Comment Form Reply Wordpress Style
  • Search Button Ready
  • Tree Colums Footer
  • Two Colums Body
  • Button To TOP
  • Like Button
  • Auto Readmore
  • And More Features
Buat sobat yang gak bisa design header tenang aja sobat bisa download header saya tinggal diedit dikit menggunakan photoshop
Password: www.bit-xp.com | LIVE DEMO | HEADER | TUTORIAL EDIT TEMPLATE SPEED SEO
Download Speed SEO v.1 Template | MF

thanks to BIT-XP

Template Blue Yozers V.2

Yeah yeah yeah...
BAru lepas dari masalah nih..
Ya sebenarnya sih ga lepas...
Tapi biarin deh,kaga usah mikirin itu lagi! :v
Sekarang waktunya gue share template "Blue Yozers V.2"
Apakah kalian masih ingat ama template yang gue pake sebelum ini??
Itu tuh...
Yang warna biru gelap...
Hihihihi....
Itu yang akan gue share kali ini!!
Dan banyak fitur-fitur kerennya lho!!
Dan Saya tidak menjualnya,melainkan membaginya kepada yozers secara gratis alias "Free"
Hihihi...

Berikut Fitur-Fitur Yang Ada Di Template "Blue Yozers V.2"



  • Keren
  •  8 Slot Widget Banner Di Header Ukuran 88x31 
  • 3 Slot Widget Banner Di Header Ukuran 468x60
  • Widget Alexa Rank Di Bawah Menu
  • Widget Pagerank Di Bawah Menu
  • Widget Follow Di Bawah Menu
  • Widget Headlines Di Bawah Menu
  • Kotak Search Di Bawah Menu
  • Sidebar Sebelah Kanan
  • Auto Readmore
  • Auto Permalink
  • Auto Backlinks
  • Floatting Twitter
  • Scollbar Berwarna Biru
  • Back To Top
  • 3 Kotak Sidebar Di Atas Footer
  • DLL

Berikut Screenshot Dari Template Blue Yozers V.2
Di Bagian Header!
Di Bagian Postingan Dan Sidebar!
Di Bagian Footer!
Bagi kalian yang ingin mendownloadnya,silahkan klik link di bawah!
- Free Download
Untuk Mengedit Menunya,kalian cari kode berikut!

   <div id='menu14'>
<ul>
<li><a href='http://aryoz-comunity.blogspot.com/'>Home</a></li>
<li><a href='http://aryoz-comunity.blogspot.com/2013/01/link-exchange-new.html'>Link Exchange</a></li>
<li><a href='http://aryoz-comunity.blogspot.com/2013/01/desclaimer.html'>Desclaimer</a></li>
<li><a href='http://aryoz-comunity.blogspot.com/2013/01/my-profile.html'>About Me</a></li>
</ul>
</div>
NB*:
Untuk tulisan berwarna biru : Ganti dengan URL sobat
Untuk tulisan berwarna hijau : Ganti dengan judul menu sobat
Dan Saya berpesan jangan sampai ada yang mengganti credits footernya!!!
Hargailah hasil kerja keras orang lain jika hasil kerja keras kalian ingin di hargai!!
Sekan..
Thx... :D
 
Source : http://www.yozers.co.vu/2013/03/template-blue-yozers-v2.html

Dark RVstyle template




langsung aja yaah dari pada aku nangis berpisah dengan template ini ( X'D wkokwoko)
NOTE:

Templatenya di note aja yah .. Gak ada Demonya Mohon ma'af ini langsung di download aja sudah ada ScreenShotnya sudah pasti benar isi templatenya itu
Cari kode ini:

<link href=' https://sites.google.com/site/rvchanese/RVstyle.css' rel='stylesheet' type='text/css'/>
 Lalu ganti kode RVstyle.css Dengan kode .css punya kmu ..                                                                                                             


Sumber : nicky-zone
 
Thanks For Visiting Gunakanlah Google Chrome Untuk Tampilan Sempurna