image05 image06 image07

300x250 AD TOP

Feature Label Area

Sunday 23 February 2014

Tagged under:

How To Add Cool Drop Down Menu In Blogger

How To Add Cool Drop Down Menu In Blogger


  • Go To Blogger Dashboard
  • Click On Template
  • Edit HTML
  • Search For </header>
  • Copy the Below Script and Add it below the Closing Header tag ( </header>)

<div id='menubor'></div><center><ul id='menu'>
<li><a class='hmlink' href='#'>Home</a></li>
<li><a class='winlink' href='#'>Blogger Templates</a></li>
<li><a class='maclink' href='#'>Blogger Widgets</a></li>
<li><a class='andlink' href='#'>How To Tuts</a></li>
<li><a class='gamlink' href='#'>Privacy Policy</a></li>
<li><a class='seclink' href='#'>Guest Post</a></li>
<li><a class='linlink' href='#'>About</a></li>
</ul></center>
<style>
#menu li {               
 display: inline;               
 list-style: none;               
 padding: 0;           
 }                   

 #menu li a {                                 
 padding: 15px 20px 15px 20px;               
 text-decoration: none;               
  color:white;
  font-family: 'Noto Serif', serif;
-moz-box-shadow: inset 0 0 13px -2px #000;
-webkit-box-shadow: inset 0 0 13px -2px #000;
box-shadow: inset 0 0 13px -2px #000;
  font-size:18px;
  -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
  transition: padding-bottom .666s;
-webkit-transition: padding-bottom .666s;
-moz-transition: padding-bottom .666s;
-o-transition: padding-bottom .666s;
-ms-transition: padding-bottom .666s;
  
  
}
 #menu li a:hover {                                 

  padding-bottom:20px;
}
.hmlink{
  background:#24459A;
}
.winlink{
  background-color: rgba(9,173,217,1);
}
.maclink{
  background-color: rgba(108,109,112,1);
}
  .weblink{
    background:#EEEE00;
    color:black;
  }
.andlink{
  background-color: rgba(149,191,43,1);
}
.gamlink{
  background-color: rgba(212,2,43,1);
}
.seclink{
  background-color: rgba(0,158,62,1);
}
.linlink{
  background-color: rgb(123, 82, 138);
}
#menubor{
  border-top:1px solid black;
  margin-bottom:-1px;
}
  .header-outer{
    padding-bottom:20px;
  }
</style>

Changes



  • For Changing the Links Replace # with your Own Links and the Anchor text with your desired text
  • That's it , Save Your template and have fun !
  • If you are interested in adding extra <li> options for that add  <li><a class='desiredword' href='#'>text</a></li> between <ul> and </ul> tags.
  • After implementing the above step ,  you have to define the class in CSS for that define the class between the style container and hit save.
  • If you have any Question ask it freely !! Stay Blessed , Happy Blogging !
Tagged under:

HOW TO ADD EACH BLOG POST IN SEPARATE BOX

Add Each Blog Post in Separate box:

In many Blogger Templates you may have seen that there is not a separate box for every Post,but each post is completely shown as in Dynamic Blogger Templates.Here we will show you How to Add Each Post in a Separate Beautiful Box along-with many Color Schemes.Actually this hack can be applied by using CSS ,Applying this hack each post will be shown in a separate box and when ones hover mouse it will change the Border Color and When Again Hover it will automatically again change the Color.Now How to do it,Let me Elaborate it in some easy steps.


How To Add Each Blog Post in Separate box

How To Add Each Blog Post In Separate Box



  • Go To Blogger.com
  • Sign in There and Go To Blogger Dashboard
  • There Click on Template
  • Then Click On Customize
  • After that Click On Advanced Option
  • And Then Select CSS(i.e Add CSS)
  • Now Copy the below Code and paste it over there.

.post {
background:#FFFFFF;
border: 2px solid #000000;
padding-right:7px;
padding-left:7px;
}
.post:hover {
border: 2px solid #FF0000;
}
.post:active {
border: 2px solid #0004FF;
}
  • That's it

Customization :-

 If You are interested in Changing the background Color then Replace #FFFFFF with Your Own Color Code.And If you want to change the Border Color then Change #000000 #FF0000 #0004FF  to Your Desired Color Code

How To Add Each Blog Post In Separate boxLast Reviewed by The Gameron October 29 2013
Tagged under:

HOW TO ADD ANIMATED BUTTONS IN BLOGGER

Animated Buttons For Blogger 

Let's Do Something interesting , today we are going to share some beautiful style buttons which can be easily made by using CSS. Actually these buttons makes your "download links" attractive and stylish.For adding these buttons you have to add a Script in template HTML , so first backup your Blog Template and then implement this hack !



How To Add Animated Buttons In Blogger

  • Go To Blogger
  • Click On Template
  • Edit HTML
  • Search For  ]]></b:skin> 
  • Copy the Below CSS Script and paste it above  ]]></b:skin>

CSS Script
.button {display: inline-block;position: relative;padding: 10px 20px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;text-decoration: none!important;text-shadow: 1px 1px 0 rgba(255,255,255,0.4);font: 15px Calibri,Arial,sans-serif;white-space: nowrap;vertical-align: baseline;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png');background-position: bottom left;background-position: bottom left,top right,0 0,0 0;background-repeat: no-repeat;background-clip: border-box;-webkit-box-shadow: 0 0 1px #fff inset;-moz-box-shadow: 0 0 1px #fff inset;box-shadow: 0 0 1px #fff inset;-webkit-transition: background-position 1s;-moz-transition: background-position 1s;transition: background-position 1s;cursor: pointer;}
.button:hover {background-position: top left;background-position: top left,bottom right,0 0,0 0;}
.button:active {bottom: -1px;}
.button.big {font-size: 30px;}
.button.medium {font-size: 18px;}
.button.small {font-size: 13px;}
.blue.button {border: 1px solid #84acc3!important;color: #0f4b6d!important;background-color: #48b5f2;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7,#3faeeb);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(89,208,244,1) ),to(rgba(89,208,244,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#4fbbf7),to(#3faeeb));}
.blue.button:hover {background-color: #63c7fe;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe,#58bef7);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(109,217,250,1) ),to(rgba(109,217,250,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#63c7fe),to(#58bef7));}
.green.button {border: 1px solid #96a37b!important;color: #345903!important;background-color: #79be1e;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27,#74b317);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(162,211,30,1) ),to(rgba(162,211,30,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#82cc27),to(#74b317));}
.green.button:hover {background-color: #89d228;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31,#7fc01e);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(183,229,45,1) ),to(rgba(183,229,45,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#90de31),to(#7fc01e));}
.orange.button {border: 1px solid #bea280!important;color: #693e0a!important;background-color: #e38d27;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f,#d4821f);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(232,189,45,1) ),to(rgba(232,189,45,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#f1982f),to(#d4821f));}
.orange.button:hover {background-color: #ec9732;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746,#e18f2b);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(241,192,52,1) ),to(rgba(241,192,52,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#f9a746),to(#e18f2b));}
.gray.button {border: 1px solid #a5a5a5!important;color: #525252!important;background-color: #a9adb1;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca,#92989c);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(197,199,202,1) ),to(rgba(197,199,202,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#c5c7ca),to(#92989c));}
.gray.button:hover {background-color: #b6bbc0;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6,#9fa5a9);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwYPz5PEuvSl25tzwus6O1d7nb92ItuuFptAiEu7k5mAtiuLtFdRUQONCmghV9I-GIV4sEw-XKnOljos_elq0eGg3FpLaVeabfEwEABTd83PG5y4NCb4jjt3zCghXqrOGJ9Rf3s6IdJyZN/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(202,205,208,1) ),to(rgba(202,205,208,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#d1d3d6),to(#9fa5a9));}
  • After adding this CSS Script Save the template!
  • Now Add any of the below HTML Code/Script in Post where you want to appear the Buttons.

 HTML For Large Size Buttons

<a class="button big blue" href="#">text</a>
<a class="button big green" href="#">text</a>
<a class="button big orange" href="#">text</a>
<a class="button big gray" href="#">Text</a> 


HTML For Media Size Buttons



<a class="button medium blue" href="#">text</a>
<a class="button medium green" href="#">text</a>
<a class="button medium orange" href="#">text</a>
<a class="button medium gray" href="#">Text</a>
Customization : 
Replace # in the script(HTML) with the URL and Text with the Anchor Text . 

So What's Up :
 Adding these Bubble Buttons makes your post more attractive and Cool.So if You Can why not implement it?Stay Blessed , Happy Blogging!
Tagged under:

HOW TO ADD AUTOMATIC "READ MORE" BUTTON/HACK IN BLOGGER

Add Automatic Read More Button in Blogger

Although it's not a Big Deal that How To Add Read More Button in Blogger but some new bloggers can't fix this Problem and they are randomly searching for this hack. Let me elaborate it for you People , this is not as hard as "mesothelioma trial attorney " this word .This Hack just add "read more" option in every post. Actually you may have seen in some Blogger Templates that when you post some contents , it just show the whole contents i.e article from Start to the end but this Hack will wind up the article and will not show the whole article but read more button will be present there.So let's add this read more button in blogger.




How To Add Automatic "Read More" Button/Hack In Blogger

  • Go To Blogger Dashboard
  • EDIT HTML
  • Now Press CTRL+F and Search for </head>
  • Now Copy the below Script and paste it above </head> tag

 <script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 450;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/read-more_auto2.js' type='text/javascript'/>
  • You can change the number in red to your desire number. If a post doesn't have images then the length of the summary will be surely 500. If a post contains image, then of course the text length will be 450, And the 1st image that will be displayed will have these dimensions: width= 120, and height= 100.
  • Now Search for <data:post.body/>
  • Now Copy the Below Script and replace the above mentioned script with the below Script

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/><b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/><b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div><script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");</script>
<div style='clear: both;'/>
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read More... <data:post.title/> </a></span></b:if></b:if>
  • Now Save template and that's it :)
Tagged under:

HOW TO ADD BORDER TO POST TITLES

Add Border To Post Titles in Blogger:

Let's play with CSS and change the border of post titles in Blogger.You may have noticed the blog titles comes with "text-decoration:none" by default , in simple words no style is applied to the titles of the Blog Posts.Actually we can change the post titles and can decorate it with different CSS properties but here we gonna apply the border ! Border can be "groove" , "Solid" , "dashed" , or "dotted" having a specific color code and number of pixels.Don't confuse it is as easy as eating cake.
How To Add Border To Post Titles

How To Add Border To Post Titles

  • Go To Blogger Dashboard
  • Click On Template
  • EDIT HTML
  • Search for post-title or .post or only "post"
  • Search until you find the selector "Post Title" as shown below

 
  • Look at the above snapshot i added there the border Property i.e "border:groove 1px and color" Change these values to your desired values and save the template.You can even change the color of the post title just by simply changing the color code of "COLOR" property in the above script.
  • However here we have selected the border color Groove having gray color and width 1pixel.
  •  That's it !!
 Note : In many templates the POST TITLE Selector is .post-title but if you can't find or if this selector is not available then you have to find the exact and matchable selector i.e the selector which matches with the class or ID defined in the div tags! 
 
What's Up : Actually this hack will add a gray color border to all the post titles having 1 pixel width ,actually it adds 5 stars to the beauty and style of template.It has no effect on blog loading speed.Stay Blessed ,Happy Blogging!