"*+.iTDoctor4u.+*": Blogger Tricks

How To Add MultiColor Popular Post in Blogger

<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOVbhDCuRTkz7HKiuMUOeeHTlImlZ-6dPKbWL3AT6b9bnaluDUMtwK667hZVAccXE_vaKk9tZXYRnL60y_vh66pc-jPDZFfod9KKPLnhVK3eOYwc20ZO1c-BvRvyrZAH8dUF7IwHSl3yw/s1600/multicolor+headings.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOVbhDCuRTkz7HKiuMUOeeHTlImlZ-6dPKbWL3AT6b9bnaluDUMtwK667hZVAccXE_vaKk9tZXYRnL60y_vh66pc-jPDZFfod9KKPLnhVK3eOYwc20ZO1c-BvRvyrZAH8dUF7IwHSl3yw/s640/multicolor+headings.png" width="292" /></a></div>
</div>
<h1>
How To Add MultiColor Popular Post</h1>
 
<ul>
<li>Log in <a href="http://www.blogger.com/">www.blogger.com</a></li>
<li>Goto Template>>Edit HTML>>Press Ctrl+F and Find ]]></b:skin>

</li>
<li>Copy Below Code and Paste before/above ]]></b:skin> </li>
<li>And Save Your Template</li>
</ul>
 
<doctype itdr4u="">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>

<div id="flip">
Click Me For Slide down</div>
<div id="panel">

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
</div>
</body>
</html>
</doctype>

Blogger Tricks How To Add MultiColor Popular Post in Blogger

How To Add MultiColor Popular Post Log in www.blogger.com Goto Template>>Edit HTML>>Press Ctrl+F and Find ]]></...

How To Add Stylish h1,h2.h3,h4,h5,h6 Headings in Blogger

22:12 Unknown 3

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbj52e3x8gQ_4kx70ewUAhZ3FmkYIlQqGLitl8BMIbAkoWuLsaIj6rePAwyQ42U6KfbJ36Gu0ufZpKseRDwXaZDO5bHiYIR6Y5UdsjXgsJR8t41DWqpaY1MfSPxf68wUZpVIz6g3pp38U/s1600/Project+CSS+copy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbj52e3x8gQ_4kx70ewUAhZ3FmkYIlQqGLitl8BMIbAkoWuLsaIj6rePAwyQ42U6KfbJ36Gu0ufZpKseRDwXaZDO5bHiYIR6Y5UdsjXgsJR8t41DWqpaY1MfSPxf68wUZpVIz6g3pp38U/s640/Project+CSS+copy.png" width="640" /></a></div>
<div style="text-align: center;">
 </div>
<h1>
Install h1,h2,h3,h4,h5,h6 heading atonce</h1>
<ul>
<li>First of all Log in To www.blogger.com</li>
<li>Click Template>>Edit HTML and Press <kbd>Ctrl+F</kbd></li>
<li>A box will be appear then find ]]></b:skin></li>
<li>Then given below code paste before/above on ]]></b:skin></li>
</ul>
<h1>
Demo Here of All Headings</h1>
 
<h1>
Heading h1</h1>
<h2>
Heading h2</h2>
<h3>
Heading h3</h3>
<h4>
Heading h4</h4>
<h5>
Heading h5</h5>
<h6> Heading h6</h6>
 
<h1>
Heading Codes</h1>
<blockquote class="tr_bq">
/* The Creator of this code is www.itdr4u.blogspot.com Don't change anything without Autor's permission */ 
.post h1{ font-family: Emmett; color:#FF0000; text-align: center; border-bottom:2px solid #FF0000; font-size: 18pt; padding:5px; } .post h2{ font-family: Emmett; color:#000; text-align: left; border-bottom:2px solid #000; font-size: 15pt; padding:1px; } .post h3{ font-family: Emmett; color:#06CB19; text-align: center; border-bottom:2px solid #06CB19; font-size: 15pt; padding:1px; } .post h4{ font-family: Emmett; color:#5484FF; text-align: center; border-bottom:2px solid #5484FF; font-size: 14pt; padding:3px; } .post h5{ font-family: Emmett; color:#F7B400; text-align: center; border-bottom:2px solid #F7B400; font-size: 14pt; padding:3px; } .post h6{ font-family: Emmett; color:#129321; text-align: center; border-bottom:2px solid #129321; font-size: 13pt; padding:3px; }</blockquote>
 
<div style="padding: 10px;">
<div style="background: #fff; color: black; font-family: Emmett; font-size: 200%; height: 49px; line-height: 49px; text-align: center; text-shadow: 0px 0px 2px #000; width: auto;">
Important Changes Read Carefully
</div>
I have make just Bottom border headings in which i have use just border-bottom:2px solid #129321; and if you want to make top and bottom border headings then simplay paste this code border-top:2px solid #129321; above that code border-bottom:2px solid #129321; 
If you want to make rounded border heading, simply paste these codes   
border-left:10px solid #666; 
border-right:10px solid #666; 
padding:3px 5px 3px  20px; 
border-radius:15px; 
-moz-border-radius:15px; before the close curly bracket } . 
And if you want to add shadow also in your headings then paste these code 
box-shadow:0px 0px 13px #666; 
-webkit-box-shadow:0px 0px 13px #666; 
-moz-box-shadow:0px 0px 13px #666; before close curly bracket }. </div>
<h1>
A Perfect Rounded Border Shadow Heading</h1>
Complete h3 shadow border heading code look like that 
 
 
<div style="text-align: center;">
<a class="demobutton button" href="http://www.blogger.com/Link%20Here" rel="nofollow" target="_blank">Live Demo</a></div>
 
<blockquote class="tr_bq">
.post h3{ font-family: Emmett; color:#5484FF; text-align: center; border-top:2px solid #5484FF; border-bottom:2px solid #5484FF; font-size: 14pt; padding:3px; border-left:10px solid #5484FF; border-right:10px solid #5484FF; padding:3px 5px 3px  20px; border-radius:15px; -moz-border-radius:15px; box-shadow:0px 0px 13px #5484FF; -webkit-box-shadow:0px 0px 13px #5484FF; -moz-box-shadow:0px 0px 13px #5484FF; }</blockquote>
<ul style="text-align: justify;">
<li>In above code there are three main sensitive parts for heading style.</li>
<li>which Text is Red, used for top,bottom broder and left,right radius area shadow</li>
<li>The 2nd one is Green Text,it show that style of left and right border thickness and radius</li>
<li>If you want to make a dotted heading instead of thick line then simplay Replace Dotted with Solid keywords.</li>
<li>You can also change the radius by use the values in border-radius:15px; or whatever.</li>
<li>Now the last is Top and bottom border text which color is Yellow. if you want to make a top border heading then remove the bottom-border code and if you want to make a bottom border heading like me then remove the top-border code.</li>
<li>You can use you desired color by using HTML Color Code Generator. </li>
</ul>

Blogger Tricks How To Add Stylish h1,h2.h3,h4,h5,h6 Headings in Blogger

Install h1,h2,h3,h4,h5,h6 heading atonce First of all Log in To www.blogger.com Click Template>>Edit HTML and Press Ctrl+F A ...

How To Make Beautifull CSS Download Button in Blogger

21:32 Unknown 0

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs-4ULKNGAcADCbckvhTc8R9NjCIRrByNB_d0Jk6tzV3bZ48ieOaRbBn4s-GnV8pDAGQ9tC3gcmyXXyWOSDUUyQ4U4MJrtUxu9NtlGTM-mAtHsuikgYX5Y9r8p24tlpVvoPPI37LnhPjo/s1600/download+button.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs-4ULKNGAcADCbckvhTc8R9NjCIRrByNB_d0Jk6tzV3bZ48ieOaRbBn4s-GnV8pDAGQ9tC3gcmyXXyWOSDUUyQ4U4MJrtUxu9NtlGTM-mAtHsuikgYX5Y9r8p24tlpVvoPPI37LnhPjo/s640/download+button.png" width="640" /></a></div>
<div style="text-align: justify;">
 </div>
 
<div style="text-align: center;">
</div>
<ul>
<li>Log in <a href="http://www.blogger.com/">www.blogger.com</a></li>
<li>Goto Template>>Edit HTML>>Press Ctrl+F and Find ]]></b:skin>

</li>
<li>Copy Below Code and Paste before/above ]]></b:skin> </li>
<li>And Save Your Template</li>
</ul>
 
<div style="text-align: center;">
 </div>
<div style="text-align: center;">
<a class="button downloadbutton" href="http://itdr4u-demoes.blogspot.com/2013/11/css-buttons-demo.html" rel="nofollow" target="_blank">Live Demo</a></div>
 
<blockquote class="tr_bq">
.button { -moz-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); background:scroll 0 0 #05bc27; border-bottom:1px solid rgba(0, 0, 0, 0.25); color:#FFFFFF !important; cursor:pointer; font-weight:bold; line-height:1; overflow:visible; font-size:17px; padding:8px 19px 9px; position:relative; text-decoration:none; text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25); width:auto; } .demobutton { background-color:#3094f2; text-align:center; width:100px; } .demobutton:hover { background-color:#EB7D05; } .downloadbutton { background-color:#3094f2; text-align:center; width:100px; } .downloadbutton:hover { background-color:#00AC00; } .homebutton { background-color:#3094f2; text-align:center; width:100px; } .torrentbutton { background-color:#3094f2; text-align:center; width:100px; } .torrentbutton:hover { background-color:#0f0404; } .homebutton:hover { background-color:#ef1515; } .button:hover { -moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); -webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); box-shadow:0 1px 11px rgba(0, 0, 0, 0.45); }</blockquote>
<div style="text-align: center;">
For Make Demo Button</div>
<blockquote class="tr_bq">
<div style="text-align: justify;">
<div style="text-align: center;"> <a class="demobutton button" href="Link Here" rel="nofollow" target="_blank">Live Demo</a></div></div>
</blockquote>
<div style="text-align: center;">
For Make Download Button 
<blockquote class="tr_bq">
<div style="text-align: justify;">
<a class="downloadbutton button" href="Link Here" rel="nofollow" target="_blank">Download</a></div> <div style="text-align: center;"> </div>
</blockquote>
 
For Make Homepage Button 
<blockquote class="tr_bq">
<div style="text-align: justify;">
<a class="homebutton button" href="Link Here" rel="nofollow" target="_blank">Homepage</a></div> </div>
</blockquote>
 
For Make Torrent Button</div>
<div style="text-align: justify;">
 </div>
<blockquote class="tr_bq">
<div style="text-align: justify;">
<a class="pushbutton button" href="Link Here" rel="nofollow" target="_blank">Push Me</a></div></div>
</blockquote>

Blogger Tricks How To Make Beautifull CSS Download Button in Blogger

How To Make UL List With Hover Background CSS3 Effect

04:32 Unknown 0

<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-WTUHXgRqn8Z5RLJn3j23qWVpl5BBrbLGV-w8nS7gb-iG1UjTt9seguIRY-BHJV03J7MqTTsts0qbiUxcpJYv3yl3ozWDAOTdOVzmlOg6jWd251fvXxT5Ox5GGDQIBSDzE4O4XJ2wfk0/s1600/css1+copy.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="326" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-WTUHXgRqn8Z5RLJn3j23qWVpl5BBrbLGV-w8nS7gb-iG1UjTt9seguIRY-BHJV03J7MqTTsts0qbiUxcpJYv3yl3ozWDAOTdOVzmlOg6jWd251fvXxT5Ox5GGDQIBSDzE4O4XJ2wfk0/s640/css1+copy.jpg" width="640" /></a></div>
<div style="text-align: center;">
 </div>
<div style="text-align: justify;">
The UL List Animations uses CSS3 which works in Mozilla Firfox, Google Chrome, Safari, IE10+,Opera Mini Browsers.</div>
<div style="text-align: center;">
 
<div style="text-align: center;">
<a class="demobutton button" href="http://itdr4u-demoes.blogspot.com/2013/11/how-to-make-ul-list-with-hover_6440.html" rel="nofollow" target="_blank">Live Demo</a></div>
 </div>
<ul>
<li>Log in <a href="http://www.blogger.com/">www.blogger.com</a></li>
<li>Goto Template>>Edit HTML>>Press Ctrl+F and Find ]]></b:skin>

</li>
<li>Copy Below Code and Paste before/above ]]></b:skin> </li>
<li>And Save Your Template</li>
</ul>
<div style="text-align: center;">
HTML Code </div>
 
<blockquote class="tr_bq">
.post ul{ 
 margin: 0; 
 padding: 0; 
 list-style: none; 
} 
 
.post ul li{ 
 width: 100%; 
 clear:left; 
 overflow: hidden; 
} 
 
.post ul li:hover{ 
 color: #fff; 
 background: #ce3e3e; 
 border-left: 8px solid darkred; 
 min-width: 450px; 
 -webkit-box-shadow: 0 0 5px gray; 
 -moz-box-shadow: 0 0 5px gray; 
 box-shadow: 0 0 5px gray; 
 -webkit-transition: all 0.3s ease-out; 
 -moz-transition: all 0.3s ease-out; 
 -o-transition: all 0.3s ease-out; 
 transition: all 0.3s ease-out; 
} </blockquote>
<ul>
<li>Now Create New Post and Hit HTML Button </li>
<li>Now add ul li list in Post section</li>
</ul>
<div style="text-align: center;">
HTML Code For Post Section</div>
<blockquote class="tr_bq">
<ul> 
<li>List Test 1</li> 
<li>List Test 2</li> 
<li>List Test 3</li> 
<li>List Test 4</li> 
</ul> </blockquote>
<div style="text-align: center;">
Customization </div>
<ul>
<li>To Change Text Color Replace HTML Colour Code </li>
<li>To Change Side Bordered Color Replace HTML Colour Code </li>
<li>To Change Width Color Replace HTML Colour Code </li>
<li>To Change Background Color HTML Colour Colour Code  </li>
</ul>

Blogger Tricks How To Make UL List With Hover Background CSS3 Effect

The UL List Animations uses CSS3 which works in Mozilla Firfox, Google Chrome, Safari, IE10+,Opera Mini Browsers. Live Demo Lo...

How To Make Stylish Sub Headings In Blogger

21:44 Unknown 1

<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiioFo0hUi7ecnDv9sTqdw7AwCn_SvTMItoHDiKsrPpqCZd5XnoWfl-9WYU0BAHRCXvRKSm20qHnMUN88Mfz-0_fM2Gd-aKTGRZJe94-u-nk5O1gN048n62rto0mFvcj9uI7lIerT8W1VQ/s1600/headings+copy.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiioFo0hUi7ecnDv9sTqdw7AwCn_SvTMItoHDiKsrPpqCZd5XnoWfl-9WYU0BAHRCXvRKSm20qHnMUN88Mfz-0_fM2Gd-aKTGRZJe94-u-nk5O1gN048n62rto0mFvcj9uI7lIerT8W1VQ/s640/headings+copy.jpg" width="640" /></a></div>
 
Customize Post Title Heading</div>
 
<div style="text-align: center;">
<a class="demobutton button" href="http://itdr4u-demoes.blogspot.com/2013/11/headingsub-headingminor-heading-demo.html" rel="nofollow" target="_blank">Live Demo</a></div>
 
<div style="text-align: justify;">
Go to blogger dashboard>>Design>>EDIT HTML</div>
<div style="text-align: justify;">
Now press Ctrl+F and search .post h3/h3.post and replace with Below code</div>
<div style="text-align: justify;">
 </div>
<blockquote class="tr_bq">
<div style="text-align: justify;">
/* The creator of this code is www.vmtricks.blogspot.com.com please 
don't change any thing without owner permisson */ .post h3 { 
text-align:left; font-size: 18px; font-family: Oswald; 
font-weight:normal; color:#000; padding: 3px 10px 3px 10px; text-shadow:
 0 1px 0 #CCC; border: 3px solid #980303 ; -moz-border-radius: 90px; 
-webkit-border-radius: 90px; border-radius: 90px;-moz-box-shadow: 0 1px 
2px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset; 
-webkit-box-shadow: 0 1px 2px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 
0.4) inset; box-shadow: 0 1px 2px #5bb5f0, 1px 1px 0 rgba(255, 255, 255,
 0.4) inset; margin: 15px 3px; text-transform: uppercase; line-height: 
1.3; background:white; transition:background 2s; 
-moz-transition:background 2s; /* Firefox 4 */ 
-webkit-transition:background 2s; /* Safari and Chrome */ 
-o-transition:background 2s; /* Opera */ } .post h3 a, #content h1 
a:visited { color: #000; font-size:17px; font-family: Georgia, Times New
 Roman; font-weight: normal; margin: 0 0 2px; padding: 4px 0 0; } .post 
h3:hover { color:#FFF; font-size:18px; text-decoration: none; 
background:red; border: 3px solid #000; }  </div>
</blockquote>
<div style="text-align: center;">
 Customize Your Subheading</div>
<div style="text-align: justify;">
Go to blogger dashboard>>Design>>EDIT HTML</div>
<div style="text-align: justify;">
Now press Ctrl+F and search .post h2/h2.post and replace with Below code.</div>
<div style="text-align: justify;">
 </div>
<blockquote class="tr_bq">
<div style="text-align: justify;">
.post h2 { background: 
url("http://aux3.iconpedia.net/uploads/6930445441486693898.png") 
norepeat 2px center transparent; font-size: 20px; font-family: Oswald; 
font-weight:normal; padding: 3px 10px 3px 10px; color: #0274be; 
background:white; border: 3px solid #5bb5f0; text-shadow: 0 1px 0 #CCC; 
-moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 
60px; -moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 
0.4) inset; -webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 
255, 255, 0.4) inset; box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255,
 255, 255, 0.4) inset; margin: 15px 3px; text-transform: uppercase; 
line-height: 1.3; transition:background 2s; -moz-transition:background 
2s; /* Firefox 4 */-webkit-transition:background 2s; /* Safari and 
Chrome */ -o-transition:background 2s; /* Opera */ } .post h2:hover { 
background: 
url("http://aux3.iconpedia.net/uploads/6930445441486693898.png") 
norepeat 6px center transparent; background:#06F; color:#FFF; 
border-color:#FFF; } </div>
</blockquote>
<div style="text-align: center;">
 Customize Your Minor Heading</div>
<div style="text-align: justify;">
Go to blogger dashboard>>Design>>EDIT HTML</div>
<div style="text-align: justify;">
Now press Ctrl+F and search .post h4/h4.post and replace with Below code</div>
<div style="text-align: justify;">
 </div>
<blockquote class="tr_bq">
<div style="text-align: justify;">
.post h4 { background-size:20px 20px; font-size: 12px; font-family: 
Oswald; font-weight:normal; padding: 3px 10px 3px 10px; color: #0274be; 
border: 2px solid #CCC; text-shadow: 0 1px 0 #CCC; -moz-border-radius: 
30px; -webkit-border-radius: 30px; border-radius: 30px; -moz-box-shadow:
 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset; 
-webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 
0.4) inset; box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255,
 0.4) inset; margin: 15px 3px; text-transform: uppercase; line-height: 
1.3; transition:border 2s; -moz-transition:border 2s; /* Firefox 4 */ 
-webkit-transition:border 2s; /* Safari and Chrome */ 
-o-transition:border 2s; /* Opera */ } .post h4:hover { border:#5bb5f0; } </div>
</blockquote>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
<ul>
<li>If You could not find .post h4/h4.post and .post h2/h2.post.</li>
<li>Then simply paste laste two heading codes of Sub Heading and Minor Heading just below the First Post Title Heading code.</li>
</ul>
</div>
<div style="text-align: justify;">
 </div>
<div style="text-align: justify;">
 </div>

Blogger Tricks How To Make Stylish Sub Headings In Blogger

Customize Post Title Heading Live Demo Go to blogger dashboard>>Design>>EDIT HTML Now press Ctrl+F and search .pos...

How To Add MultiColor Popular Post in Blogger

How To Add Stylish h1,h2.h3,h4,h5,h6 Headings in Blogger

How To Make Beautifull CSS Download Button in Blogger

How To Make UL List With Hover Background CSS3 Effect

How To Make Stylish Sub Headings In Blogger

Popular Posts

Comments

All Posts