Blogger Template : Blak Magik

always admire unique design. I've converted it to blogger template. Here's the screenshoot

Setting and installation
Go to Setting>Formatting>Timestamp Format
Choose this format, example : Sunday, 28 February 2009.
Go to Layout>Edit HTML. Check on Expand Widget Template checkbox

Header Setting
Preparing your own image header size 496x109 pixel, upload to your own imagehosting such as photobucket.com

a. Edit this Code
#headerimg {
padding-left:40px;
margin: 0;
width: 45%;
height:111px;
float:left;
background:transparent url(http://YOUR-LINK-HEADER-IMAGE-HERE) no-repeat left;
}
and then
<div id='header'>
<div id='headerimg'>
<h1><a expr:href='data:blog.homepageUrl'/></h1>
<div class='description'>YOUR-BLOG-DESCRIPTION-HERE</div>
</div>

Toplinks Setting

Toplinks contain home, RSS, contact link element.
Edit this code

<div class='toplinks'>
<a expr:href='data:blog.homepageUrl'>Home</a>
<a class='topnav_rss' href='http://YOUR-FEED-HERE'>RSS</a>
<a class='topnav_contact' href='YOUR-CONTACT-HERE'>Contact</a>
</div>
Navigation Bar Menu

Edit this code
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='http://YOUR-LINK-HEADER-IMAGE-HERE ttp://'>Sample Page</a>
</li>
<li><a href=' http://YOUR-LINK-HEADER-IMAGE-HERE '>Sample Post</a></li>
<li><a href=' http://YOUR-LINK-HEADER-IMAGE-HERE '>Blog Page</a></li>
</ul>
</div>
Bottom Menu Setting

Edit this code

<div id='creditright'>
<ul id='cred'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='http://YOUR-LINK-HEADER-IMAGE-HERE ttp://'>Sample Page</a>
</li>
<li><a href=' http://YOUR-LINK-HEADER-IMAGE-HERE '>Sample Post</a></li>
<li><a href=' http://YOUR-LINK-HEADER-IMAGE-HERE '>Blog Page</a></li>
</ul>
</div>

Cara Membuat Horizontal Menu Dropdown

Membuat Horizontal Menu Dropdown, pada posting sebelumnya saya telah membahas Tentang Artikel ini yaitu Cara Membuat Horizontal Menu Dropdown . penjelasan berikut:

1. Silahkan Login Blogger

2. Langsung menuju Edit HTML

3. Jangan lupa Backup Template anda terlebih dahulu

4. Contreng Expand Widget Template

5. Cari kode ]]></b:skin> dan letakkan kode berikut sebelum kode ]]></b:skin>

Slider menu dengan menampilkan gambar

Sebelumnya saya sudah pernah membahas cara membuat slider menu, kali ini saya akan coba berikan yang sedikit berbeda. Slider ini hanya menampilkan gambar saja tanpa dibubuhi keterangan atau diskripsi dari link atau gambar tersebut, namun saya rasa slider menu dengan image ini tampilannya lebih efektif ketimbang slider menu yang dulu pernah saya jelaskan.

Tampak gambar akan bergerak sendiri sesuai dengan delay atau waktu yang telah di setting pada kode javascript-nya. Untuk membuat cukup mudah, bagi yang suka yang bereksperimen dengan template-nya silahkan dicoba tutorialnya berikut ini.

Silahkan Login Blogger dengan ID anda.

Langsung menuju ke Edit HTML