Heading Tag With Drop Shadow and Mouse Hover Effect

Blogger blogs has the free option of editing the style sheet. Fortunately you can play around the codes to give your blog any look you want. Last year I shared various ways of customizing the heading tags i.e. H3. We use H3 tags inside posts to write headlines and important sections of the posts. Today we would learn how to create a custom headline that will change colour on mouse hover. We will use CSS3 effects to produce a drop shadow effect along with mouse hover effect. This will give your headlines a neon look. So lets do it!

Create Post Heading Tags In Blogger

1. Go To Blogger > Design > Edit HTML
2. Backup your Template
3. Search for this,

]]></b:skin>

    4.    Just above it paste the following code,
-------------------------------------------------------------------------------------------------------------

/*----MBT Heading Tag----*/

h3{
font-family:veranda !important;
font-style:italic !important;
}
.post h3 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666; padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;

}
.post h3:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F; box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 13px #FF133F; }

-----------------------------------------------------------------------------------------------------------

Note:- Delete any code inside your template that may look like .post h3
Make these changes:

• To Change font type edit verdana and replace it with any font family you like.
• To change font style replace italic with either normal or bold
• To change text color and left/right border colors in active mode then change #666 and replace it with a color of your choice
• To replace text and border colors on mouse hover then change #FF133F
• To change box shadow color in active mode change #666
• To change box shadow color on mouse hover mode change #FF133F

     5.    Save your template and you are almost done!

How to use Heading Tags inside Posts?

1. Create a new post as you normally do
2. Now use the following code wherever you want to add a headline

<h3>Write Headline Text here</h3>

     3.  When you publish the post, you will find the magic working just perfectly. Enjoy!
I hope this little trick helps you in better writing quality posts. More variation will be introduced soon. Do let me know if you needed any help.

Beautiful New Page Navi For Blogger With Scroll

Bismillah (in the Name of Allah), Alhamdulillah (All Praise to Allah)
After Long time not post in my Blog. I didna’t post anything because I was busy for my Dissertation for my Doctor Defense. Alhamdulillah now I’m graduated (not in web designer, my major is not related with web designer)
Now I want to give all of you beautiful Page Navigation. Like I said before in my comment I’ll make new Page Navigation that can support more than 500, and now this Page Navigation can support more than 500, Alhamdulillah.
To make it beautiful I used New Pugin from WP Paginator
This Plugin call Paginator 3000
- idea by ecto (ecto.ru)
- coded by karaboz (karaboz.ru)
To see the result open This
Demo

Step 1 : Apply Style

1. Login to Blogger Dashboard and navigate to Layout > Edit Html
2. Dona’t click the checkbox which says “Expand Widget Templates”
3. Find this

]]></b:skin>

and replace it with

--------------------------------------------------------------------------------- 
.paginator {
 margin-top:60px;
 font-size:1em;
}
.paginator table {
 border-collapse:collapse;
 table-layout:fixed;
 width:100%;
}
.paginator table td {
 padding:0;
 white-space:nowrap;
 text-align:center;
}
.paginator span {
 display:block;
 padding:3px 0;
 color:#fff;
}
.paginator span strong,
.paginator span a {
 padding:2px 6px;
}
.paginator span strong {
 background:#ff6c24;
 font-style:normal;
 font-weight:normal;
}
.paginator .scroll_bar {
 width:100%; height:20px;
 position:relative;
 margin-top:10px;
}
.paginator .scroll_trough {
 width:100%; height:3px;
 background:#ccc;
 overflow:hidden;
}
.paginator .scroll_thumb {
 position:absolute;
 z-index:2;
 width:0; height:3px;
 top:0; left:0;
 font-size:1px;
 background:#363636;
}
.paginator .scroll_knob {
 position:absolute;
 top:-5px; left:50%;
 margin-left:-10px;
 width:20px; height:20px;
 overflow:hidden;
 background:url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG843o8-TI/AAAAAAAAAAM/

tAE1hAOX6Ys/s1600/slider_knob.gif) no-repeat 50% 50%;
 cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
 position:absolute;
 z-index:1;
 top:0; left:0;
 width:0; height:3px;
 overflow:hidden;
 background:#ff6c24;
}

.fullsize .scroll_thumb {
 display:none;
}

.paginator_pages {
 width:600px;
 text-align:right;
 font-size:0.8em;
 color:#808080;
 margin-top:-10px;
}
]]></b:skin>
---------------------------------------------------------------------------------

Step 2 : Aplly Javascript

Find This :

</body>

Replace with :

---------------------------------------------------------------------------------
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/

paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/

paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
</body>
----------------------------------------------------------------------------------

Change based on your blog setting :
-------------------------------------------------------------------------------------------------------------
var postperpage=7;
var numshowpage=6;
-------------------------------------------------------------------------------------------------------------
Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

Step 3 : Customize Label (if you already use my previous Page Navi don’t use this step)

Go to the Edit HTML page and “Expand Widget Templates”
Find this

'data:label.url'

and Replace with this

'data:label.url + "?&max-results=7"'

Change 7 base on how many post every page
only That, I hope it can work and make your blog easy to navigate, amiin

For All My Page Navi Can read from Read this :

1. Six Styles Page Navigation for Blogger
2. Numbered Page Navigation For Blogger New Script
3. Page navigation for Blogger with Google Style
4. Page Navigation for Blogger (Problems Solved)