Show About Author After Post In Blogger

This post witll teach you how to add information about author after blog posts.It is very usefull in Guest Postings.

Login to blogger:

Go to Design->Edit Html->Check Expand Widgets

Find   

 ]]></b:skin> (Use Ctrl+F to Find)


Just Above it post the bellow code(Css)

.about-author { background:#EBF3FB none repeat scroll 0 0; border:1px solid #D4E2E8; font-size:1em; line-height:1.5em; margin:0 0 20px; padding:10px; } .about-author img { background:#FFFFFF none repeat scroll 0 0; border:1px solid #9ED0DE; display:inline; float:left; margin:0 15px 0 0; }

After that Find<div class='post-footer-line post-footer-line-1'>

Paste the bellow code after<div class='post-footer-line post-footer-line-1'>

<div class='about-author'>

        <img alt='Rashin' height='100' src='Image Url' width='100'/>  

          <h4>Author: <a href='Ur Profile Url' target='_blank'><data:post.author/></a></h4>

                        <p> Short Discription About You</p>

</div>

</b:if>

Replace The Bellow Values:

Image Url: Link to ur profile image

Ur Profile Url: (Can Be A Link To Ur Facebook Profile)

Short Discription About You: Write somethingvabout you

Create Multi Level Drop Down Menu In Blogger

This is our 5th drop down menu,after sharing two versions of drop down menus here we are sharing another cool drop down menu designed by dynamicdrive and bloggerizedmybloggertricks.This is a multi level drop down menu so that it will help you a ot to organize your categories and some important links,also it will help your readers to easily navigate through your blog.The HTML structure of this menu is so easy as you have to use only <ul> and <li> tags,but you have to add a different ul id for a new drop down,that is the little negative point of this menu.Just follow below steps carefully,you will easily add this menu to your blog.Now lets see how to add it to blogger blog,First take a demo of the menu.

Live Menu Demo

How To Add Multi Level Drop Down Menu To Blogger

1. Go to Blogger Dashboard > Layout
2. Click on Add a Gadget (below header)
3. Select HTML/JavaScript
4. Paste below code inside it,

<script src='http://code.helperblogger.com/dd-level-menu.js'
type='text/javascript'></script>
<style>
/* ######### Drop Down Menu Bu HelperBlogger.com ######### */    
/* ######### Matt Black Strip Main Menu Bar CSS ######### */
.ddsubmenustyle, .ddsubmenustyle div {
        /*topmost and sub DIVs, respectively*/
    font: normal 13px Verdana;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background: white;
    border: 1px solid black;
    border-bottom-width: 0;
    visibility: hidden;
    z-index: 100;
}

.ddsubmenustyle ul {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    border: 0px none;
}

.ddsubmenustyle li a {
    display: block;
    width: 170px;
        /*width of menu (not including side paddings)*/
    color: black;
    background-color: lightyellow;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
}

* html .ddsubmenustyle li {
        /*IE6 CSS hack*/
    display: inline-block;
    width: 170px;
        /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover {
    background-color: black;
    color: white;
}

.downarrowpointer {
        /*CSS for "down" arrow image added to top menu items*/
    padding-left: 4px;
    border: 0;
}

.rightarrowpointer {
        /*CSS for "right" arrow image added to drop down menu items*/
    position: absolute;
    padding-top: 3px;
    left: 100px;
    border: 0;
}

.ddiframeshim {
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
}
    /* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul {
    margin: 0;
    padding: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    border-bottom: 1px solid gray;
    background: #414141;
    overflow: hidden;
    width: 100%;
}

.mattblackmenu li {
    display: inline;
    margin: 0;
}

.mattblackmenu li a {
    float: left;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 6px 8px;
        /*padding inside each tab*/
    border-right: 1px solid white;
        /*right divider between tabs*/
    color: white;
    background: #414141;
}

.mattblackmenu li a:visited {
    color: white;
}

.mattblackmenu li a:hover {
    background: black;
        /*background of tabs for hover state */
}

.mattblackmenu a.selected {
    background: black;
        /*background of tab with "selected" class assigned to its LI */
}
</style>
<div id="ddtopmenubar" class="mattblackmenu">
    <ul>
        <li>
            <a href="#">LINK1</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu1">LINK2</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu2">LINK3</a>
        </li>
        <li>
            <a href="#">Link4</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu3">LINK5</a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<ul class='ddsubmenustyle' id='ddsubmenu1'>
    <li>
        <a href='#'>LINK2 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 2</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 2.1</a>
            </li>
            <li>
                <a href='#'>LINK2 ITEM 2.2</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 3.1</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 4</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'>
    <li>
        <a href='#'>LINK3 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 3.1</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.2</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.3</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 5</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 5.1</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 5.2</a>
                <ul>
                    <li>
                        <a href='#'>LINK3 ITEM 5.2 1</a>
                    </li>
                    <li>
                        <a href='#'>LINK3 ITEM 5.2 2</a>
                    </li>
                    <li>
                        <a href='#'>LINK3 ITEM 5.2 3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 6</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu3'>
    <li>
        <a href='#'>LINK5 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 3</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 5</a>
    </li>
</ul>

How To Customize It?

• Here normal ul and li rules are applied
• To change background simply change background: #414141;
• Replace every # with your own link
• To create a drop down menu inside a Main Menu link simple add to it a rel attribute likerel="ddsubmenu1 Change the drop down number accordingly.

Use HTML Editor?

I highly recommend you to use the HTML Editor as you can edit and see live demo of your menu in HTML Editor.

Further Help?

Many newbies bloggers gets the problem while adding links and texts.If you are getting the same problem then simply provide a tree menu of your menu,I will build the HTML part for you.Also feel free to ask your any little query...

Top 10 Blogger Widgets Of 2012

In 2012 I have published/shared many great blogger widgets but as per new posts are coming they are going back and many of you are missing such great widget thats why I have decided to write today's post and I have collected some great blogger widgets for you.I hope all of you will surely like them :)

1. jQuery Popup For Facebok Like Box (V5)

2. Static Pop Out Facebook Likebox (V2)

3. Custom Facebook Like Box (V5)

4. Pinterest Pin It Buttons

5. Custom Facebook Like Box (V4)

6. Beautiful Social Sharing Widget Just Below Of Blogger Posts

7. Slide Out Social Bookmarking Gadget

8. Popup Email Subscription Form

9. Updated Mashable Style Widget

10. TechCrunch Style Widget

What Next?

In next post I will collect some drop down menus which I have published/shared on this blog,so stay connected by subscribing this blog and I hope you have liked this collection.