GirlyMagazine, Blogger Template ~ Easy HTML Tricks for Blogging

Description
Girly Magazine Blogger template, my new free blogger template. Its unique header, combination of girl vector image (created by ipietoon) and pattern, become a main attractive section. This template designed multi column, and multi navigation menu, accomodate many categories, suitable for online shopping blog, cosmetic blog, and everything about girl or woman blog.

Installation Setting

Install Template

Download xml file, click on download link
Save to your desktop
Go to blogger dashboard, open Edit HTML, click on upload and choose your downloaded xml file
Save

Top Navigation Menu

Open Edit HTML, edit these code below

<div class='topnav'>
<ul id='topnav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://www.bietemplates.com/' target='_blank'>
Template Gallery</a></li>
<li><a href='http://dezigntuts.com' target='_blank'>Dezigntuts</a></li>
<li><a href='http://www.emocutez.com' target='_blank'>Emoticon</a></li>
<li><a href='http://blogger.com' target='_blank'>Login</a></li>
</ul>
</div>

Header Logo

If you want to set your own logo follow these instruction

create your logo image using image editor, size max width 400px height 100px
upload it through Page Element
click Edit on Header widget
upload your image, choose instead of tittle and description
save

If you just want to edit that girl image, access

.headerleft {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6xve6I6Jz8XNHvp36sLAc-NQD1ZqFEgsnKM6xE5X7T8AtBvpxWOinzHQ1braGphpMODvXpvQBij-CexXyu9n0JhHdQ3XcB1pIyzMum1QihZSywjmBAPt77ugTeA-VXMcchcPhF2LyYQw/s1600/girlmagz.png) no-repeat left bottom;
width: 480px;
height:250px;
float: left;
margin: 0;
padding: 0;
}

Change red text color to your URL image

Second Navigation Menu

Open Edit HTML, edit these code below

<div id='navbarmenu'>
<ul id='nav'>
<li><a href='http://your-link-here'>Photoshop</a></li>
<li>
<a href='http://your-link-here'>Freebies</a>
<ul>
<li>
<a href='http://your-link-here'>Icon</a>
<ul>
<li><a href='http://your-link-here'>Icon #1</a></li>
<li><a href='http://your-link-here'>Icon #2</a></li>
<li><a href='http://your-link-here'>Icon #3</a></li>
</ul>
</li>
<li><a href='http://your-link-here'>Pattern</a></li>
<li><a href='http://your-link-here'>Brush</a></li>
<li><a href='http://your-link-here'>Swirl</a></li>
</ul>
</li>
<li><a href='http://your-link-here'>Vector</a></li>
<li><a href='http://your-link-here'>Sketch</a></li>
<li><a href='http://your-link-here'>Wallpaper</a></li>
<li><a href='http://your-link-here'>Theme</a></li>
<li><a href='http://your-link-here'>Layout</a></li>
<li><a href='http://your-link-here'>Inkscape</a></li>
<li><a href='http://your-link-here'>Graphic</a></li>
<li><a href='http://your-link-here'>CSS</a></li>
<li><a href='http://your-link-here'>Community</a></li>
<li><a href='http://your-link-here'>Submit</a></li>
</ul>
</div>

Twitter Update Featured

You can put your twitter update on this template. Open Edit HTML. Tick mark on Expand Widget Template. Find these code below

<h2 class='sidebar-title' style='display:none;'>Twitter Updates</h2>
<ul id='twitter_update_list'/>
<a href='http://twitter.com/bietemplates' id='twitter-link' style='display:block;text-align:right;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPLmA7AAqvgAxTwwvNb_SMBHnbYnIYIdqP3vVi5KuT9BT-S58GBXP7tLMb6xGU1QKFEYTUl-qyW7LUyspgv6Itizqtg47hahWZ6mrPNIaaW1qK5vf2skEVbbDKq5CLcjlCRP4DWQtToRP-/s1600/twitter.png'/></a>
</div>
<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'/>
<script src='http://twitter.com/statuses/user_timeline/bietemplates.json?callback=twitterCallback2&count=1' type='text/javascript'/>

Change red text to your twitter username

Advertisement Banner 125x125

Open Edit HTML. Tick mark on Expand Widget Template. Find these code below

<a class='ad1' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaxpv3W3S03qzKRrevcovbvq1JwvVnzYMqe7n7eJQFbEeERuLAApUBTOJMkrP74at2AcSVD6A73TiLqdhxpdEmEOuZbqksHNnrCf2JHyvkSFT4W0XhjOFaPMx3ebpxEvba7HPj4Nx6YRRO/s1600/themeforest.jpg'/></a>

<a class='ad2' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaxpv3W3S03qzKRrevcovbvq1JwvVnzYMqe7n7eJQFbEeERuLAApUBTOJMkrP74at2AcSVD6A73TiLqdhxpdEmEOuZbqksHNnrCf2JHyvkSFT4W0XhjOFaPMx3ebpxEvba7HPj4Nx6YRRO/s1600/themeforest.jpg'/></a>

<a class='ad3' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaxpv3W3S03qzKRrevcovbvq1JwvVnzYMqe7n7eJQFbEeERuLAApUBTOJMkrP74at2AcSVD6A73TiLqdhxpdEmEOuZbqksHNnrCf2JHyvkSFT4W0XhjOFaPMx3ebpxEvba7HPj4Nx6YRRO/s1600/themeforest.jpg'/></a>

<a class='ad4' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaxpv3W3S03qzKRrevcovbvq1JwvVnzYMqe7n7eJQFbEeERuLAApUBTOJMkrP74at2AcSVD6A73TiLqdhxpdEmEOuZbqksHNnrCf2JHyvkSFT4W0XhjOFaPMx3ebpxEvba7HPj4Nx6YRRO/s1600/themeforest.jpg'/></a>

Change '#' to your targetted URL
Change https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaxpv3W3S03qzKRrevcovbvq1JwvVnzYMqe7n7eJQFbEeERuLAApUBTOJMkrP74at2AcSVD6A73TiLqdhxpdEmEOuZbqksHNnrCf2JHyvkSFT4W0XhjOFaPMx3ebpxEvba7HPj4Nx6YRRO/s1600/themeforest.jpg to your image URL