Girly Magazine


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(http://3.bp.blogspot.com/_sunpK_FtO1E/SmZu0EeiKrI/AAAAAAAAANM/joaDzltcrVw/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='http://4.bp.blogspot.com/_sunpK_FtO1E/SmLUaSyCm5I/AAAAAAAAAIo/171-xow2ueI/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&amp;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='http://4.bp.blogspot.com/_sunpK_FtO1E/SmLcNLRnB4I/AAAAAAAAAI8/T31xo25DqCQ/s1600/themeforest.jpg'/></a>
<!-- Ad2 start -->
<a class='ad2' href='#'><img src='http://4.bp.blogspot.com/_sunpK_FtO1E/SmLcNLRnB4I/AAAAAAAAAI8/T31xo25DqCQ/s1600/themeforest.jpg'/></a>
<!-- Ad3 start -->
<a class='ad3' href='#'><img src='http://4.bp.blogspot.com/_sunpK_FtO1E/SmLcNLRnB4I/AAAAAAAAAI8/T31xo25DqCQ/s1600/themeforest.jpg'/></a>
<!-- Ad4 start -->
<a class='ad4' href='#'><img src='http://4.bp.blogspot.com/_sunpK_FtO1E/SmLcNLRnB4I/AAAAAAAAAI8/T31xo25DqCQ/s1600/themeforest.jpg'/></a>


Change '#' to your targetted URL
Change http://4.bp.blogspot.com/_sunpK_FtO1E/SmLcNLRnB4I/AAAAAAAAAI8/T31xo25DqCQ/s1600/themeforest.jpg to your image URL

69 comments:

Haqielicious™ said...

Ebong mesti buat template girly

TemplateGoal said...

thank you again, bie.

Anonymous said...

Nice design.

Unknown said...

Templates are your biggest time saver and your easiest way to standardize. You already probably use templates and don't even realize it. When I started my blogs I did a lot of search and research on this and collected a big list of good sites (more than 250 sites) that have decent templates. If you are interested take a look at the below link.
http://markthispage.blogspot.com/2009/06/250-sites-to-know-about-blog-templates.html
Also, if you want to get more information about blogs (like submit URLs,,Website Widgets,Blog Widgets,Blog Copyright Laws,Blog Templates,Blogging, Blog Marketing,Blog Adwords,Blog Adsense,Blog Trends or Pulse,Blog Statistics,Blog Ranking,Top Blogs,Top Sites) go to my home page and check blogs section.

Roberta said...

I Have problems setting my twitter account on the top of the headr... can you please give other instructions? (i don't see anything in red in the code you wrote)

Bie said...

@loren: tick mark on expand widget template
change bietemplates to your own twitter account

Unknown said...

Thank you for such a detailed post. Is it possible to change the font in the header of the image of the girl?

Bie said...

@melanie: find this code

.headerleft h1 {
color:#fff;
font-family:georgia;
font-size:40px;
font-style:italic;
font-weight:bold;
line-height:normal;
margin:5px 5px 0;
padding:30px 0px 0px 170px;
}

just edit that's all font size, family, type, etc

egle said...

I did smth wrong... My post titles r not showing up... :( Could someone help me please???

Bie said...

@filette: re-upload it... or create new blog

egle said...

thanks! worth to try :)

aienn said...

yes u r right

Nutdoc said...
This comment has been removed by the author.
Nutdoc said...

Hi, wonderful template. I love it just perfect for two of my blogs. I just have two questions:

1. How would I change my link and hover color in the body of post?

2. I want to see the date of post, not just time.

Help. Thanks.

Bie said...

@fen: showing date header i guess not good idea for layout, just change your timestamp format to day format
setting>formatting>timestamp format choose date format

change after body
a:{
color:#colorcode;
}

Nutdoc said...

wow, thanks bie!

Dez said...

Some can't comment on my posts, there are errors on the password or something. how can I fix it? thanks

Bie said...

@dez:check your own setting
did you set verification word?
go to setting>comments
remove it all restricted setting

Mylia said...

I was wondering how do you change to top menu bar to what you want?

Mylia said...

Also, for the secound navigation bar. How do you get it to work, to set up a different page...

Mylia said...

Sorry another thing. How do you make it so the post are larger and clear. They look blurry. Also, the links don't show unless you press into continue reading.

Bie said...

that's using automatic readmore, so your post will looks neat than give your reader such a long post to view in homepage.
read nall avigation menu set up, i have wrote it all
to view in new window, add target="_blank"
so your link will be
a href='http://yourlink' target='_blank'

Stuart810 said...

I don't know what is that for

I don't know if I can erase it, because speak about sexy, too much.

in the zone skin>
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('http://img509.imageshack.us/img509/3131/sexysprite.png') no-repeat !important;

Bie said...

thats for social bookmarks icon under post

Anonymous said...

I want to make the post section bigger how can I do that?

Anonymous said...

It's me again is thera away to do away with the shortend post & just show the whole post instead.

Bie said...

you should adjust all css size
just lookin for main-wrapper, post, comment, sidebar, width size
adjust it all

you should read about autoreadmore to remove it all

Trina Perez said...

How do you insert banner ads in the square spaces you have on this template?

Bie said...

read installation setting pls

Jess (The Cozy Reader) said...

Loving this template! I switched it the other day from a previous template you created.

Visit my blog!

Bie said...

hi Jessica, thanks, this is collaboration with my friend

duchessberry said...

hi bie, I use this template for my new website. just want to ask how can i put my link at the top menu icon when people click on it ? thanks.

Bie said...

hi, you can follow instruction (I have wrote it) on top navigation menu section

Amarie said...

Beautiful design! I'd liketo know how to get my blog title on the header. Thanks!

Andrea said...

I would like to you use this template. Is there a way to keep my header & use this body?

Bie said...

@andrea: just change header image to your own

fairies angel said...

hii... aku mo tanya donk..
ko twitter update nya susah dirubah c..?
di xml filenya juga aq ga nemu kodenya..

Bie said...

@fairies: sudah di klik expand widget template, gunakan ctrl + F utk memudahkan mencari

fairies angel said...

owh udah^6 gak jadi..heheee

Anonymous said...

Why can't I move the page elements up and down? The only way I can move anything it to go into edit HTML and manually move the code to where I want it and I HATE to do that!

What's the key to making it easier????????

Other than that, I like the layout!

Annz said...

Hello I have only 1 question How can I remove this at the top header.

Fresh Magazine Demo download Installation Setting Discription Simply Fresh Magazine Another 3 column Simple http.....

Bie said...

@anonym:thanks, will update new xml file, and remove that bug

Lillian said...

Hello, I run a tween blog and really need help changing the "Sharing is sexy!" to like the one on this blog ("sharing is caring") if anyone canhelp me and help me fast, it would be appreciated!

Bie said...

replace image url
find this http://i43.tinypic.com/2ueii3t.png;
and replace with sharing is caring image URL

Lillian said...
This comment has been removed by the author.
Lillian said...

@Bie thanks! After I edit the template link list bar thing under the header, I get this error message:
The element type "li" must be terminated by the matching end-tag "".
Can anyone help?

Jess (The Cozy Reader) said...

Bie. My sexy-bookmarks thing has stopped working, specifically the logo pics are not showing up.

Can you help?

http://bookreviewsbyjess.blogspot.com/

Feel free to email me directly:

bookreviewsbyjess (at) gmail (dot) com

MellyMel said...

My sexy bookmarks have stopped working as well..

Snowflake said...

Hey bie! How can i remove the "continue reading"? I want the post to show up everything. I can't find the code to take it out. Please help!

admin said...

1.open edit html
2. tick mark on expand widget template

3. find these code
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span>

</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

4. replace with
<data:post.body/>

5. save

Lillian said...

Hi Bie,
Is there any way for the tabs to link to a way to show posts other than search/label/... like on Wordpress?

MellyMel said...

Hi Bie, I'm using another theme of yours which I would like to use the read more feature, I tried to do the opposite of the instructions you have above but that didnt work. (had to try!) Is it possible to set how much space will show before the read more setting is implemented? Thanks in advance!

Bie said...

@lilian: you can not create new page, but you can link it to your post URL..just replace search label etc to your post URL
@melanie :

1.open edit html
2. tick mark on expand widget template

3. find these code
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span>

</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

4. replace with
<data:post.body/>

5. save

The Frugalista Diva said...

Thank you for the template! I was not able to get the sharing is caring to work so I took it out. If there is a way to fix it or make it work, let me know. I did not want "sharing is sexy".

check out my blog to see the changes I made: www.thefrugalistadiva.com

The Frugalista Diva said...

why is it now that if I click on the title of my post it only shows the comment box instead of the full post and comment section? Please help!

Anonymous said...

Hello, excellent staff, I have a problem: how do to remove the following sentence: "Colorbold: Demo | DownloadDescriptionColorbold blogger template, 2 column layout with elegant design. Featured wit... http://bit.ly/dbKDqq 7 days ago"

Thanks, greetings from Caracas, Venezuela.

Fer said...

hey, i loved the template...I installed on my blog, but it appears on the reader WP Burn Blue: Demo | DownloadDescriptionWP burn blue blogger template, simple 2 columns layout for personal blogDe... http://bit.ly/cS53KM 5 days ago
how can i remove this?

Unknown said...

Very nice templates, i like very much. And it's very useful to me.

You may want to web templates at www.itemplatez.com Easy to download.

Sandy Soto said...

Hi, I have a problem the button of Read more only works in the main page, but not in the others ¿why?

That Dayum DeeDee said...

Is there a way to have the "previous" and "Next" button visible?

Mystee said...

When you do the read more, at the bottom of your post...the sharing is sexy area...there's nothing but jumbled stuff in there...no real clear wording or graphics...how can I fix this?

admin said...

@mystee: please hosted to your own hosting...
open this link
http://2.bp.blogspot.com/_ZndXpD4mctI/Svrk3WhMv3I/AAAAAAAAA-Y/Dn-mpBB2fVc/s1600/sprite.png
save the image
upload to your own imagehosting
replace
http://img509.imageshack.us/img509/3131/sexysprite.png
to your own image URL
@boutiq: yes, this is a conflict script, so you can remove the readmore if you want
@chick: open edit html, insert
clear:both;

under
#blog-pager{

threza said...

Hi admin....please help me remove this sentence from the header image on right side....Happily Ever After: Description:2 columns blog layoutWidgetized right sidebar columnBeautiful header designCust... http://bit.ly/gdXAUA about 6 hours ago
How to remove it..?

threza said...

The above bug has not been removed it seems...

Anonymous said...

Hello would you mind stating which blog platform you're using? I'm looking to start my own blog in the near future but
I'm having a hard time deciding between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your layout seems different then most blogs and I'm looking for something
unique. P.S My apologies for getting
off-topic but I had to ask!
Look at my webpage - www.monclerja2013.com

Anonymous said...

continuously i used to read smaller posts that as well clear their
motive, and that is also happening with this post which I am reading here.


My web blog: スニーカー nike

Anonymous said...

of course like your website however you need to test the
spelling on quite a few of your posts. Several of them are rife with spelling problems and I to find it
very bothersome to inform the reality however I will definitely come again
again.

my webpage :: nike schuhe air max

Anonymous said...

You're so interesting! I don't believe I've read through something like this before. So great to find someone with genuine thoughts on this topic. Really.. many thanks for starting this up. This web site is something that is needed on the internet, someone with a bit of originality!

Also visit my web-site - nike air max

Anonymous said...

I am really enjoying the theme/design of your weblog.
Do you ever run into any web browser compatibility problems?
A couple of my blog visitors have complained about my website
not working correctly in Explorer but looks great in Chrome.
Do you have any ideas to help fix this issue?

Also visit my homepage - ナイキ ランニングシューズ

Post a Comment


 

Recent Comments