scribble

Scribble

About Blog GitHub
‹
›

24 Sep 2011
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

Til next time,
Prayag Verma at 09:10

scribble

About Blog GitHub