Free Blogger Templates and Layouts

Fashion Blogger Template - Fashion+ Plus

noreply@blogger.com (Unknown) — Sun, 03 Jun 2012 04:51:00 +0000

Feature of the Template

Page List menu at the top of the Template
Attractive Background Fashion Background
Automatic Label Navigation
Image and content Slider for Latest Fashion News
Cool Social Icons
Custom search inside Blog.

To add slider copy the code from the template folder and add a widget (HTML/javascript) above Blog post or Post Body.

View Demo Download

Sensitivity - Blogger Template | Layout

noreply@blogger.com (Unknown) — Thu, 15 Dec 2011 14:48:00 +0000

Feature of this Blogger Template

Google custom search
2 Header section to display ads or any other widgetDropdown and multi dropdown menu
Pages at the top of the Blog SEO friendly
RSS, Twitter, and Facebook subscribe
Social sharing and bookmarking icons
jquery slider with Post titles and Description (5 posts)
jquery tabs in sidebar of the Blogger template (popular,tags.archiving)
Automatic Read more with thumbnail of the post
Numbered page navigation menu at the bottom of the Posts
Good commenting system

View Demo Download

Cupid - Blogger Layout | Blogger Template

noreply@blogger.com (Unknown) — Tue, 13 Dec 2011 13:51:00 +0000

Features of the Blogger Layout

Created with css3
Beautiful and Attractive Backgrounds
Social Sharing and Bookmarking icons at the top of the Template
Automatic read more button..
Dropdown menu
4 column Footer Layout
Google search bar
Custom Fonts

View Demo Download

Mentor - Blogger Layout | Blogger template

noreply@blogger.com (Unknown) — Tue, 13 Dec 2011 09:04:00 +0000

Features of Mentro Blogger template

Two column sidebar
beautiful background image
Beautiful and attractive colors
Social Sharing icons at the top of the Template
Pages and Dropdown menu
Jquery tabs in sidebar
4 sectioned footer menu
Automatic read more with beautiful readmore button
Inside Google search made with css3

View Demo Download

Print Design Flast Blogger Template | Layout

noreply@blogger.com (Unknown) — Tue, 08 Nov 2011 07:25:00 +0000

Print Design is a Flash and jquery Blogger template having right sidebar with 3 columns. jquery tabs with three categories, social sharing and subscribe buttons on top of the template it also have jquery flash image slide show and Blogger multi Dropdown menu.. it is a good SEO friendly Blogger template.

Features:

Menu

Multi Drop Down Menu

Share Icons (Facebook,Twitter,Google+,email subscription,RSS feeds)

Adsense Header

Jquery Tabs menu with archives popular posts and categories

Flash jquery image slideshow.

Free Download

Jquery Lightbox for Blogger | Blogspot

noreply@blogger.com (Unknown) — Sun, 06 Nov 2011 10:56:00 +0000

jquery lightbox in blogger.. jquery may be difficult to apply to a Blogspot blog but it is not imposible. this simple way is to host files on google and link jquery to your blogger. i have added a jquery image gallery to my blog below is the demo of jquery image viewer, image gallery, it includes three parts .js file CSS part and Naming the image to work with jquery script.

Blogger jquery lightbox tutorial

Demo of lightbox in Blogger/Blogspot:

How to install lightbox in Blogger

step 1: adding jquery in Blogger:

Copy the below code and past it after the <Head> section in Edit HTML of the Blogger template

Incase lightbox does not work change the position of this code in head of the template... try adding above </HEAD> or after the title and meta tags...

<script src='http://jquery-hosting-blogge.googlecode.com/files/lightbox.js' type='text/javascript'/>

step 2: adding style to lightbox:

To add CSS code to your Blog, Go to Design>Edit HTML, find ]]</b:skin> past the code above it and Save Template

OR Go to Template Designer>Advanced>Add CSS, Past the code and click on Apply to Blog

#lightbox{
 background-color:#eee;
 padding: 10px;
 border-bottom: 2px solid #666;
 border-right: 2px solid #666;
 }
#lightboxDetails{
 font-size: 0.8em;
 padding-top: 0.4em;
 } 
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx4YIcVGv45hj47c-v7ep52ljkt5oAhHfCdSNtbdPJxnQ2sxuSy93bHJyFsE6AD9LMufSsef6cWHlVVgCuawZSaQTphxCRjydY7XI6tQT6US8lhL4FDz5R9WWNw-1eeTYHCEcdNdXspIOW/s1600/overlay.png); }

* html #overlay{
 background-color: #333;
 background-color: transparent;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifSxze0hBVfJ-CqDw3ChQbjMz6vEDTbZgXuQ8Es5VKu4uomY3PN4y9xLq6x6swklLxuwm9fEOLxxkwM0adNyPSyhvTsLOZI4HlmjbsRsJ2vvT2lF7WYEw8ZCkp358xRrEId95BVZp1CISA/s320/overlay.png", sizingMethod="scale");
 }

step 3: Adding rel="lightbox" to image:

Simply give image a rel rel="lightbox" attribution to the image

<a href="image-url" rel="lightbox" title="lightbox"><img src="url-of-image" width="150" Height="160"/></a>

upload all images and add rel="lightbox" to all images to make lightbox image gallery <a href="image-url" rel="lightbox"><img src="image"></a>

Styling the source code with css

noreply@blogger.com (Unknown) — Sun, 06 Nov 2011 07:54:00 +0000

If you want to display code into a beautiful way like this one you need to add a css into your template. The code you display is inside the <pre></pre> tags... therefor by adding style in the class pre we get awesome results... this is a cool way and visitors feel easy to copy the code and easily recognize the code..
this first style is the current one which i am using on this blog.. in second and third style a yellow pad and a black pad is used.. simple add this code to your design->Template Designer->advanced->add css...add css...

or Edit HTML of your template and paste the code above ]]</b:skin>

Current style:

pre {
     font-size: 12px;
     padding: 20px 0 15px 35px;
     margin: 0;
     background: #ccc;
     border-left: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
     line-height: 20px; /*--Height of each line of code--*/
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZQpLobZJ1ElwvwBTJe1VGE_aYKD9nzMXyhHU-7q1BI72TrDbJn81W262RbXZL0KpxZw72CNe-nkfcgmIyuizFjjCvgZW5LYYvnAkxlsY2A85pfvH_j8XuMpukmYsZJvfHj0z_9yj5fwa/s1600/pre-pad.gif) repeat-y left top; /*--Background of lined paper--*/
     width: 410px;
     overflow: auto; /*--If the Code exceeds the width, a scrolling is available--*/
     overflow-Y: hidden;  /*--Hides vertical scroll created by IE--*/
}

Yellow Pad Background:

pre {
     font-size: 12px;
     padding: 20px 0 15px 35px;
     margin: 0;
     background: #ccc;
     line-height: 20px; /*--Height of each line of code--*/
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKEReMTW-9rY7-jFuBxXiIhmrkNr1Etivg8kaltQiRtz38uP3PdeogUbr5ryC2IGb9xd9kNEab3zKM_Ay0F2_xP_n6HVPfEZhGrUh87ayWDgSwYPfZaF7p0E3cXOVBVJ-tFh1IgIJ40Tm4/s1600/pre-yellow.gif) repeat-y left top; /*--Background of lined paper--*/
     width: 410px;
     overflow: auto; /*--If the Code exceeds the width, a scrolling is available--*/
     overflow-Y: hidden;  /*--Hides vertical scroll created by IE--*/
}

Black Pad Background:

pre {
     font-size: 12px;
     padding: 20px 0 15px 35px;
     color: #ffff;
     line-height: 20px; /*--Height of each line of code--*/
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtCVsCCGNCkdkal7hCLsm7helgm0HhyphenhyphenxHYHeshFrE7bjNh0twZuxNjs6c4VPfoLk_AbsJuGNW0fmcEHakZjl-Px-sxXv4e7XL54QCjYfAihukPeEH-6-PeDulokMlYuG29_RrFri3EZPNC/s1600/pre-black.gif) repeat-y left top; /*--Background of lined paper--*/
     width: 410px;
     overflow: auto; /*--If the Code exceeds the width, a scrolling is available--*/
     overflow-Y: hidden;  /*--Hides vertical scroll created by IE--*/
}

Cellular Blogger Template - Layout

noreply@blogger.com (Unknown) — Sat, 05 Nov 2011 16:10:00 +0000

Cellular Blogger layout for photo bloggers, and for shopping blogs, if you want to show products and other things in cells this blogger template is best. with a single sidebar and beautiful design and colors....

Free Download

Glamour Photo Blogger Template - Layout

noreply@blogger.com (Unknown) — Sat, 05 Nov 2011 14:17:00 +0000

Glamour Photo Blogger template with no sidebar... simple and attractive...

Free Download

Vulcan Blogger Template | Blogspot Layout

noreply@blogger.com (Unknown) — Sun, 30 Oct 2011 16:03:00 +0000

3 column Blogger templates | Layout , Left and Right Sidebars with social connect and search box, beautiful page menu and a cool continue jump break link...Free to download Blogspot layouts..

Download Template

World News Blogger Layout | 2column Blogger template

noreply@blogger.com (Unknown) — Fri, 28 Oct 2011 14:57:00 +0000

2 Column Blogger template with a simple menu, Styled Search Box and Share icons...

Download Template

blogger jquery simple control gallery | Blogger flash image gallery

noreply@blogger.com (Unknown) — Sun, 28 Aug 2011 11:52:00 +0000

Blogger Jquery simple galley works when all the images are loaded. this is a simple gallery with controls, simple jquery blogger gallery plays images when you click on pause it stops and it also forwards and rewinds images which are inserted in simple jquery gallery. The Demo of simple control gallery in blogger is given below. you might have seen some of blogger templates and layouts that have flash image gallery beneath its header.

Demo of Simple control gallery in Blogger

How to install to Blogger?

blogger jquery Facebox and image viewer Gallery

noreply@blogger.com (Unknown) — Mon, 22 Aug 2011 12:52:00 +0000

Image Demo:

Image Eye

Content View Demo:

View DIV with id="mydiv" on the page

How to install to blogger

Step 1:

Go to EDIT HTML and Past the below code above </head>

step 2:

past the below css code above ]]></b:skin> or Go to Design>Template Designer>Advanced>Add CSS past the code and Apply to Blog

/*--facebox
-------------------------*/
#facebox .b {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkPu-lrXniLWrWcAZMtn3F4RpDNHCyMP5QJff8NpDLdRxenQltvz93jLTVxXjXsZrR6GHEinit26pBHmAexs_UUTQmWpe1YWp3he2SIFuqExdlPZsZ9feh48jaYOSB2Mb1-SxxmRqniOW9/s1600/b.png);
}

#facebox .tl {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4_B57tqzjbR514q1puzyFAXrYOs8zW1TyGr7kaXjCTV7kf75GKQRb92MUVYc2LTIu8Ch9TxH7PjtCQujHJvrC1ybi6ruOpXgXmGPFd8J9shKN0zLkZQD3QcbuGxl1_rvUqYW29zUNOAI_/s320/tl.png);
}

#facebox .tr {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiENbqHcSUlbze7yDpjhZjKzNiI9D7jbXJfpStGf3h8K5J6bOuTyF0suoWTzfxcxywBT5xbsAYMGYNHPHViSUavhluNxKptncQQVk9AiUYv7cmHu-Y46VAlMvXoaVIyjhKdi11tqUCy3hb0/s1600/tr.png);
}

#facebox .bl {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVY8yKbk1FG7_-By3ql2nElRkXiVjDW-dzDe8orT_jU3FrAmnEO13iuEVpyz64kCnb0CponpE9lkEkhEQiMILQTjoPw0O7h3wGLxVRZRgO1htR_ggP7RNGLpPca6JMKBjnZ50OhWj-yV_R/s320/bl.png);
}

#facebox .br {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgimswBOEb9ysMVbCoFS4UUZw72Yy-38NXKclv6OLD8IINjvdeBuKoNM3Os2R559yDCMFk1lkX7mHFhJotxVhK0-k9rG5UGckwOtLdLOMDh8J48fu-F-JTJ7_GvLW28tLAEX-84nKHQPSqM/s320/br.png);
}

#facebox {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 100;
text-align: left;
}

#facebox .popup {
position: relative;
}

#facebox table {
margin: auto;
border-collapse: collapse;
}

#facebox .body {
padding: 10px;
background: white;
width: 370px;
}

#facebox .loading {
text-align: center;
}

#facebox .image {
text-align: center;
}

#facebox img {
border:0;
}

#facebox .footer {
border-top: 1px solid #DDDDDD;
padding-top: 5px;
margin-top: 10px;
text-align: right;
}

#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
height: 10px;
width: 10px;
overflow: hidden;
padding: 0;
}

for image gallery use this code:

<a href="image.jpg" rel="facebox">Image Eye</a>

div facebox jquery use:

<p><a href="#mydiv" rel="facebox">View DIV with id="mydiv" on the page</a></p> <div id="mydiv" style="display:none"> This is the contents of a hidden DIV on the page, with ID="mydiv" and style set to "display:none" <br />(you can add some adsense code here to be displyed when clicked) </div>

Wire Frame Aura Menu for Blogger

noreply@blogger.com (Unknown) — Sun, 21 Aug 2011 08:56:00 +0000

This is a beautiful Aura Blogger menu in this menu an eclips gradient is used when mouse is over a tab the gradient hovers.

Images used:

Light Green

http://4.bp.blogspot.com/-P46m0iOr3l4/TlDDF4rN5_I/AAAAAAAABTE/fj5F2CZF0y0/s1600/lightgreen.gif

Light Yellow

http://2.bp.blogspot.com/-DMiFkMuOs1Y/TlDDH6dZO8I/AAAAAAAABTM/dXf-qNhR2z4/s1600/lightyellow.gif

Light Red

http://3.bp.blogspot.com/-pVSrPjHCY5Y/TlDDHCHSu1I/AAAAAAAABTI/JYQYsjtriqM/s1600/lightred.gif

Demo:

How to add to Blogger?

step 1:

To add this CSS meun to Your Blog simply Copy the below code and go to Design>Page element>and add Html/Javascript widget, Past the code in it and click on Save, Drag the Widget below the Header.

<div class="wireframeauramenu">
<ul>
<li><a href="#">Css Blogger</a></li>
<li><a href="#">Blogger Menus</a></li>
<li><a href="#">blogger Layouts</a></li>
<li><a href="#">Blog Design</a></li>
</ul>
</div>

step 2:

To add CSS code to your Blog, Go to Design>Edit HTML, find ]]</b:skin> place the CSS code above it and Save Template OR Go to Template Designer>Advanced>Add CSS, Past the code and click on Apply to Blog, you can cnage CSS if you can, the changes done in the above CSS i frame will be displayed on your blog...You Have Done..!

.wireframeauramenu{
font-weight: bold;
font-size: 90%;
width: 100%;
}

.wireframeauramenu ul{
border: 1px solid #BBB;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
overflow: hidden;
}

.wireframeauramenu ul li{
display: inline;
}

.wireframeauramenu ul li a{
color: #494949;
padding: 6px 12px 6px 6px;
margin: 0;
text-decoration: none;
border-right: 1px dashed #BBB; /*right border between menu items*/
}

.wireframeauramenu ul li a:hover{
color: black;
background: transparent url(http://2.bp.blogspot.com/-DMiFkMuOs1Y/TlDDH6dZO8I/AAAAAAAABTM/dXf-qNhR2z4/s1600/lightyellow.gif ) center center no-repeat; /*background of menu item onMouseover*/
}

thanks to

Dynamic Drive

blogger | blogspot thick underline CSS menu

noreply@blogger.com (Unknown) — Sun, 21 Aug 2011 07:42:00 +0000

This is a simple CSS menu, in this meun bborder-bottom property is used in tabs and tabs:hovers.

Demo:

How to install to Blogger:

step 1:

Copy the Html code given below and past it in the new<b> HTML/JavaScript</b>widget in <b>Page element</b> of the <strong>Blogger</strong>Drag the widget under the Header of the Blog and save the <strong>Layout</strong>

<div class="underlinemenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">CSS Codes</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Webmaster Tools</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</div>

step 2:

Copy the CSS code given below and past it inside the skin <b> ]]></b:skin> </b> of the bloggeror go to
<b><i>Template Designer>Advanced>Add CSS</b></i> Past the code and click <b>Apply to Blog</b>....and you have done..!

.underlinemenu{
font-weight: bold;
width: 100%;
}

.underlinemenu ul{
padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: right; //set value to "left", "center", or "right"*/
}

.underlinemenu ul li{
display: inline;
}

.underlinemenu ul li a{
color: #494949;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
border-bottom: 3px solid gray; /*bottom border is 3px*/
}

.underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
border-bottom-color: black;
}

thanks to

DynamicDrive

Blogger | Blogspot CSS Circle Menu

noreply@blogger.com (Unknown) — Sat, 20 Aug 2011 12:33:00 +0000

CSS circle menu for blogger. the trick used to make circle is by setting very large radius, set to more than 50% of the height and width of the block.

Demo:

How to add to blogger:

step 1:

copy the HTML code and past it in HTML/Javascript widget and drag the widget to the place where you want the menu to be.

<div class="circlemenu"> <ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>DHTML</span></a></li> <li><a href="#"><span>CSS</span></a></li> <li><a href="#"><span>Forums</span></a></li> </ul> </div>

step 2:

this is the css part of the menu this lets the menu to work properly if you are good at css you can movify color and other values of the code simply copy the code and past it inside the ]]></b:skin> or go to Design>Template Designer>advanced>add css. Past the code and click on Apply to Blog.

.circlemenu{ width: 100%; overflow:hidden; } .circlemenu ul{ margin: 0; padding: 0; font: bold 14px Verdana; list-style-type: none; text-align: center; /* "left", "center", or "right" align menu */ } .circlemenu li{ display: inline; margin: 0; } .circlemenu li a{ display:inline-block; text-align:center; text-decoration: none; color: white; background:#b72d23; margin: 0; margin-right:5px; /*right spacing between each link */ width:100px; height:100px; border-radius: 400px; /*really large border radius to create round borders*/ -moz-border-radius: 400px; -webkit-border-radius: 400px; } .circlemenu a span{ position:relative; top:40%; } .circlemenu li a:visited{ color: white; } .circlemenu a:hover{ background: #a71b15; }

Thanks to :

Dynamic Drive

Blogger Arrow Underline CSS Menu

noreply@blogger.com (Unknown) — Thu, 18 Aug 2011 10:24:00 +0000

Blogger Arrow underline Css menu let you to underline your UL and LI listing menu this menu is made on CSS triangle technique..

Demo:

How to add to blogger:

step 1:

copy the HTML code and past it in HTML/Javascript widget and drag the widget to the place where you want the menu to be.

<ul class="arrowunderline">
<li><a href="#">Home</a></li>
<li><a href="#">New</a></li>
<li class="selected"><a href="#">Revised</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">CSS</a></li> 
<li><a href="#">Forums</a></li> 
</ul>

step 2:

this is the css part of the menu this lets the menu to work properly if you are good at css you can movify color and other values of the code simply copy the code and past it inside the ]]></b:skin> or go to Design>Template Designer>advanced>add css. Past the code and click on apply to blog.

ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
font: bold 16px Georgia;
}

ul.arrowunderline li{
display:inline;
margin-right:25px; /* spacing between each menu item */
}

ul.arrowunderline li a{
position:relative;
color:black;
padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */
text-decoration:none;

}

ul.arrowunderline li a:hover{
border-bottom:3px solid purple; /* style of arrow underline */
}

ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px; /* value should match border-width below */
bottom: 0;
border-width:5px; /* value should match margin-left above */
border-style:solid;
border-color: transparent transparent purple transparent; /* create up arrow */
}

Thanks to :

Dynamic Drive