Dedi Sinaga: Template | Blogger | Template Blogger

Home » Posts filed under Template

Download Template SEO Ready Terbaru 2013, Light Fastz

Diposting oleh Unknown -

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.

Untuk Mendownload semua template di atas bisa klik link berikut :

Download

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

2 Comments

Shiroi blogger template

Diposting oleh Unknown -

1 komentar

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.

Download via MediaFire

Demo

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

1 Comment

YUI BLOGGER TEMPLATE

Diposting oleh Unknown -

2 komentar

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

langsung aja

New Version

<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'>♫ 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 :

Date Header Format :

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'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 (示現エンジン 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ō 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' greatest hero invades the Demon King'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.

Download via MediaFire

Demo

-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~

2 Comments

Cara Bikin Template Blog Sendiri Bagian 3

Diposting oleh Unknown -

2 komentar

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..