Kamis, 23 Desember 2010

Blogger Template : Blak Magik

always admire unique design. I've converted it to blogger template. Here's the screenshoot
blak magik blogger template
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>

 

Info Fisioterapi Blak Magik is Designed by productive dreams for smashing magazine Bloggerized by Blogger Template © 2009