New Blogger Template : Stylify

Stylify Blogger Template ImageIts been really a while since i was trying to make a template.  I am really happy to release my first Blogger template. I have tried to make this template as simple as possible to use. This template is based on the current design of my blog and extensively uses CSS3 and jQuery. Its rich in features and easy to use.






See Demo



Download






After many days of working on this template I am finally happy to present this new blogger template “STYLIFY”. Its my first template and its a simple blogger template with extensive use of CSS3 and jQuery.

Features
  • Simple design
  • Cross browser compatibility 
  • Page Navigation
  • Widgets ready sidebar
  • One click Show/Hide side sharing options
  • ShareThis.com Sharing Buttons Pre-Installed
  • Its own Related Post widget
  • Stylish commenting system with comments having gradient background style
  • Attractive Post Title
  • Every image has Rounded edges 
  • jQuery powered "Back To Top" Button
  • Four column footer
  • Stylish Search Box
  • Use of BonBon Buttons
  • Reply feature for Blogger Comment system
  • Eye-catching Sidebar Design
  • Search Engine Optimized
So as you can see the theme is full of features




How To Install this on your Blog:


1. Download the template from the Download Link Above



2. In your Blog, Go to Design > Edit HTML and Then Click on Choose File and after selecting the Downloaded File ,Click on Open . After that Click on Upload.

3. During this process a Dialog-Box will appear asking Whether you want to Delete or Keep Your Widgets. Its up to you to decide. After this the template is installed. 


Configurable Features:

This templates has lot of customizations possibility. Its Features can be configured as per your Needs. In here I would be explaining how to modify features of this template according to your nrequirement. I would also be explaining some hidden features of this template.


1.Navigation


There is a Green Navigation bar present in this theme. To modify this Go to Design > Edit HTML. Tick the "Expand Widget Template" option. Now Search for ( Using CTRL+F ) the term navmenu. After that you can change the URLS and Names according to your Needs.


2.Pagination


To change the number of posts to be shown on using pagination find the term postperpage ( Using CTRL+F ) ,There will be a script something like this 

<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=3;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>

You can change the number values as you like in the above code.
var postperpage=9; → Changes the no of posts that will show up on clicking any page number.
var numshowpage=3;→ Changes the number of linking to show in the widget







Note: Make sure that you also set the value of Number of Posts on Main Page (Go to Design > Page Elements , Click on Edit option of Blog Post and then Number of posts on main page: ) to same as that of the postperpage value.



3.Rounded Edges of Image

By default any image added to the blog will have Rounded Edges. In case you want to disable this feature search for the term Rounded Edges ,it will be followed by a code like this


img {
 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 background-color: transparent;
}

img:hover { 
cursor:pointer !important;
filter:alpha(opacity=50); 
-moz-opacity: 0.80; 
opacity:0.8;
}


If you want you can delete it ,but if you want to use this selectively then I suggest add a .image attribute before img like this. 



.image img {
 -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 background-color: transparent;
}

.image img:hover { 
cursor:pointer !important;
filter:alpha(opacity=50); 
-moz-opacity: 0.80; 
opacity:0.8;
}
Now for applying this to any image just add class="image" into that image's HTML code




4.Link Nudging


There is a CSS code present in the template for using simple link Nudging . If you want to apply it in blog, then just see the following code:


<div class="css3_nudge nudge">
     <ul >
      <li><a href="#" target="_blank" >BlogLovin</a></li>
      <li><a href="#" target="_blank" >Bloggers</a></li>

     </ul>
</div>

You can see the demo of Link Nudging in the Demo Blog's Sidebar.



5.Floating Sharing Widget


On the post pages there is a Side floating Sharing Widget present on the left side of the Blog. It uses SharThis.com Buttons. To modify it just search for the </body> tag and above it there will be a code like this


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#pageshare {position:fixed; top:25%; left:5px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#f8f8f8;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

span.linkopacity {
filter:alpha(opacity=0.1);
-moz-opacity: 0.1; 
opacity: 0.1;
-khtml-opacity: 0.1;}

span.linkopacity:hover {
filter:alpha(opacity=100); 
-moz-opacity: 1.0; 
opacity: 1.0;
-khtml-opacity: 1.0; }
</style> 
<div style='margin-left: auto; margin-right: auto;'>
<div id='pageshare'><input class='button' onclick='fade(&apos;pageshare&apos;, this)' type='button' value='Close'/>

<script>

function fade(div_id, button) {



 if(button.value == &#39;Close&#39;) {

  $(&#39;#&#39; div_id).fadeOut(&#39;slow&#39;);

  button.value = &#39;Reappear&#39;;

 }

 else {

  $(&#39;#&#39; div_id).fadeIn(&#39;slow&#39;);

  button.value = &#39;Close&#39;;

 }

}

</script>
<br/><br/><span class='st_facebook_vcount' displaytext='facebook'/><br/><span class='st_twitter_vcount' displaytext='tweet'/><br/><span class='st_digg_vcount' displaytext='digg'/><center><span class='st_delicious_vcount' displaytext='save'/><br/><span class='st_stumbleupon_vcount' displaytext='share'/></center></div></div>
<!-- floating page sharers End -->
</b:if>


To change the buttons just get code from the ShareThis website and place it in the above code.  
There are two more sets of Share Buttons present in the Blog, one above the Post and the Other Below the Post.





6.Enabling Reply option for the comments


The the reply option in the comment will have to enabled . Just search for the term class='MBT-replycomments' ( using CTRL+F ). Below it you will see "blogID=XXXXXXXXXXXX" replace this XXXXXXXXXXX number with your Blog's ID. [To find your Blog's ID just Open Design Tab and in the Address bar of your browser there will be a very long number , just paste that here]



7.Modifying Header Text




To modify this Go to Design > Edit HTML. Tick the "Expand Widget Template" option. Now Search for ( Using CTRL+F ) </header> tag. Below it you will find code something like this 





Now just change the Underlined Word with the Title of your Choice
If you find any problem with the template please do tell us by leaving a comment below.





See Demo



Download

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment
Up said...

hi i have downloaded and going to use soon

cool

Cool!! Thank´s for sharing.

@Up @Pr. Aldenir Araújo

Thanks for Liking my work

I love the Post Title design, sidebar widget designs and the comment form design. What i don't like is the width of the post body. I think it should be shrink to at least 800px width.

Kim said...

REally nice design and its features is also superb!! i am gonna to download this template !! Free Automobile Themes

Elvirah said...

Thats commendable you have good designing skills, i must say, and would love to follow your blogs

Kelvin said...

This is a good template. And his right. The body post width is too wide. May be you could use this for lengthy post.

Well, with the problems on the post width, you can modify the codes on Blogger. Go to edit HTML> find the post width code and change the number to 800. That was simple. But be sure to backup your template in case of errors.

it's your templates right?
ck ck ck ^^

Thanks everybody for liking my work :)

@Prayag Verma - How did you put the social media buttons on the left sidebar? I want to learn that too. Mind if you share. Thanks!I'm also using Blogspot blogs on my other blogs.

@Allen | Kankakee Injury Lawyer - just make a Google search with these keywords " Adding floating social media buttons on blogger"
Then just follow the steps. Installing the widget is easy.

@Allen | Kankakee Injury Lawyer
Check out the following Post to see how to add it into your blog

MUXLIMO said...

Well done, Bro.. and this blog's new template too.. love it!

rahul roy said...

Great work, keep up your good work!

Aakash said...

great template :)

G.G.G said...

Hi Prayag,

Thank you for such a wonderful template. I uploaded it in my blog. But I need your help in fixing some issues.

1) The tags shown in each post are not aligned in a line. It is over writing the blog post itself. If you see my blog, you will know what I mean. Can you please tell me how to bring the tags to below the post.

2) I want to change the Blog Title Font to a simpler one.

3) If you notice, the Search column in my blog is jutting out of the main header banner...Probably it is because of the bold font used..

Thanks in advance

@G.G.G

1)in Edit HTML, tick Expand Widget Preview, and search (Using CTRL+F) for post-header-line-1
Under it you see the following code:

<div id='cat' style='font-size:17px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a align='right' expr:href='data:label.url &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if></div>

Replace it with:

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span style='position:relative;top:-20px;font-family:&apos;Nova Mono&apos;, arial, serif;'><a expr:href='data:label.url &quot;?&amp;amp;max-results=4&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:…

G.G.G said...

@Prayag Verma

Hi Prayag...

Thank you for the reply.

Unfortunately the first solution you provided is not working. When I replace the code with the one given by you, it is removing the blog posts itself. I had to re do the template upload work all over again.

Kindly advice.

I just need the tags/labels shown on each post to be moved to below the posts and not appear on top. And it has to align in one line rather than how it is shown now.

Please do check my blog and you will get a better idea.

Thanks in advance

Unknown said...

how into link nudging to blog....

@indoB
Just add class="css3_nudge nudge" to your links

@G.G.G

Search for the following code in the Edit HTML of the Blog


#cat { position:absolute; top:25px; left:644px; font-family: 'Sue Ellen Francisco', cursive;text-decoration:none; }


change the position from absolute to relative

is there a way to change the navigation menu color and style???

Aakash said...

Coool :-)

Navneet said...

baba meri bhi help kar

@Navneet Pandey
To remove the whole footer from the blog remove all the content inbetween footer tag and also to remove the b:sections with id="footer-2-1" till id="footer-2-4"

santhosh said...

I like this usefull information, I’ll follow your blog even more when you’ll keep up the good work!

Very stylish template PV and nice work for you !! I have a plan to change my template with Stylify begin New Year 2012. But I prefer with your template footer in the footer of this than in Stylify. Lastly if it does not matter if I add the breadcrumbs on Stylify template ?

@Share With Irfan
Thanks for the compliment , and you are free to change the template to suit your needs and taste

cardiacku said...

Nice tempalate...I like it

Anonymous said...

Please I'm having a big problem
This first link my blog:http://9ooo9le.blogspot.com/
We have identified the number of Entries that appear in the Home 8 blog entries and when I became the number of Entries Entries appear randomly, sometimes shows only 1 and sometimes 3 or 5 or 8 I want to show is always 8 blog entries per page
The second problem is I want to enlarge the font size in a box labels how do I do this?
Thank you for this Desertification

@Ahmed Nwera
This might help for the pagination problem http://blogging.nitecruzr.net/2011/10/auto-pagination-being-triggered-by-post.html
,while seeing your Source I found that a lot of code is present , which is being used nowhere , delete that too

About the Label font size, try this CSS code:

.lable-size {font-size:200%;}

Unknown said...

How To Reduce The Width Of Template

@Have A Nice Day Friend
Go to Templates > Customise (If you are using Old Interface go to Design > Template Designer)

Go to Adjust Widths

and select the width accordingly

Unknown said...

Finally I Made It, See My Blog
http://moviesdownloads4free.blogspot.com/
Some Doubts

1.I Want To Appear The Slider(PieceMaker2)Only On Homepage

2.I Want To Reduce The Width Of Template

Unknown said...

@Prayag Verma Thank You, It Worked, Many Templates Doesnt Support This

@Have A Nice Day FriendThe width issue is solved

Where you have inserted the Piecemaker code , enclose the whole code inbetween the following tags

<b:if cond='data:blog.url == data:blog.homepageUrl'>
------The code----
</b:if>


Please host the scripts on your DropBox account and also host the images present in the slideshow on blogger, or they will load slow

Unknown said...

@Prayag Verma
Thank You Prayag, My Problem Is Solved, Now Iam On Modyfing The Search Box

Thank You For Your Quick Reply

Unknown said...

This template is awesome!! I really liked it!!
I would also like to design such beautiful template!! Would you please write a step by step tutorial on how you designed this template, tools that you used and other things!! I am really looking forward to go into designing but the only thing I need is a little help!!

@Ashutosh DaveFirst of all thanks !!
I will do a series on how make templates soon

Thanks for sharing this great templates.

web design company india

Unknown said...

beautiful themes, but i cant use reply comment dont work...

Unknown said...

the link appea http://www.blogger.com/comment.g?blogID=6830113266928510362&postID=8088618170746272819&isPopup=false&postBody=@%3Ca+href%3D%22%23c3069278718687207180%22%3EChiara%C2%BBGoldenVi0let%3C/a%3E

I checked your blog , you haven't changed the blog ID with your blog's . Just follow 6th point under Configurable Features in this post
Your BlogID is 3916857787516724686

Unknown said...

ah ok...now i'm change, it s normal in text area appear this

@Chiara»GoldenVi0let

Unknown said...

it s possible aswer like this post? with any popup

This is the new Threaded Comment system for Blogger. To enable it refer this atricle

Ashish said...

Hi
I am recently using this blogger template designed by you in my new blog http://fullsap.blogspot.in/ but in that "more" button is not working. It vanished and full blog post is visible in home page.
I haven't altered code.
Let me know what could be the possible reason and how to rectify it.
Also i want to know how your Recent post gadget is not present in your home page but when i open and post it appears.
Can you please explain.
Thanks

Pradeep said...

You need to add jump break to all your posts!!

It looks like your previous template might have had a Auto-Read-More hack in it so you might not manually added it through the Post Editor.

About the Recent Post gadget ,that is due to use of conditional tags , You can check about them near the end of This Post

Anonymous said...
This comment has been removed by a blog administrator.
Unknown said...

I have the same mistake, on my blog disappear all read more, comment, share button after topic. How to fix it?

Follow the post here http://www.bloggersentral.com/2009/11/blogger-auto-read-more-with-thumbnail.html to make the Read more thing automatic

And Caygri , what problem are you facing , Can you explain a bit because I see the Comments as well as the share buttons

Hi! I installed your template and I have a few questions.

(http://www.writersaffirmation.com )

I like the search box on the top and I would like to place the custom search engine in it. Is there a way to place it to look good? (I tried with my other blog but it look like cr* so I decided to put the whole thing in the fix float menu.)

My Read More button on the front page got additional letters ( a-c). I know that there is something in the template but I have no idea what and I'm afraid that I would broke down the rest of the page if I temper to much.

Thank you so much!!!!

To make the Custom search engine work with that search see this post http://www.stylifyyourblog.com/2011/07/customize-google-custom-search-box.html , see the Design No. 6

For fixing the a-c text from Read More , go to Edit HTML and tick the Expand widget preview option. After that search for jump-link and you will come across the following code

<div class='jump-link'>
<a align='right' class='button blue morph' data-icon='â%u2013%u015F' href='Something..'>Read More</a>
</div>


here either remove the data-icon attribute or put something like > or →

aschatria said...

Thanks a lot, I will certainly chew up the cse link!
I change my template again, and I'm installing the effects on the go.
Hopefully my blog will get the effects and looks I am hoping for.
Cheers!

Soheir said...

The templet search box on my blog not working properly. What Should i do???

Hi

Search for <form in the Edit HTML (With Expand Widget Preview ticked) and you will see something like this

<form action='http://stylify1.blogspot.com/search' id='search' method='get'>

Now change it to

<form action='nokia-genration.blogspot.com/search' id='search' method='get'>

very nice template for blogger keep this good work :)

Anonymous said...

hi very nice template...

but i just want to use nudging link feature in my template, so would you please tell me how can i do this...?

Thanks
http://premium-area.blogspot.com

Could there be any option to expand a template so that it would cover all the screen width?