Header Ads

  • Breaking News

    Advance Author Box Widget For Blogger



    Showing a small info about the author at end of article will be more useful for readers. When readers (visitors) liked the article very well, they might have to know about the author who wrote? from where?. Therefore blog's author have to add author info box below every blog post. Even it can create a good affability with  readers well.
    Advance author box is an widget which show small info of blog author or writer with profile image and social icon. This widget is developed by softglad. Absolutely It's free of charge. You can use in your blog very easily. Only few simple codes have to add in your blog. It look elegance and premium. Even blog author can gain social media followers through this widget.




    LIVE DEMO



    1. Go to Blogger → Select a blog  Template  Edit HTML.
    2. Find (Ctrl + F)  <data:post.body/>  and add the following HTML code after it.



    Customize: you have to change few things from above HTML code. Replace all social media site URLs with your social media profile URLs . Replace profileimg.png  with your photo URL. Add your own info in between two <p> </p> tag.


    3. Now we have to style the author box by adding CSS code. 
    Again Find  ]]></b:skin>   and add following code before or above  it.

    .about-author {
        width: 100%;
    }
    .authorbox {
        overflow: hidden;
        padding: 0;
        background: #333;
        color: #ccc;
    }
    .authorbox .authorinfo {
        color: #ccc;
    }
    .authorbox .authorsocial {
        float: left;
    }
    .authorbox .authorsocial li {
        list-style: none;
        margin: 0;
        position: relative;
    }
    .authorbox .authorsocial li a {
        width: 32px;
        display: block;
        background: url("http://softglad.at.ua/images/social-logo32.png");
        height: 32px;
        margin: 0;
    }
    .authorbox .authorinfo img {
        float: left;
        margin: 4px 10px 4px 5px;
        border-radius: 100%;
        width: 17%;
        background: #fff;
        padding: 5px;
    }
    .authorbox .authorinfo p {
        margin: 0;
        font-size: 18px;
        padding: 0 5px;
        line-height: 25px!important;
        font: 15px "Armata", Arial;
        text-align: left;
    }
    .authorinfo p a {
        text-decoration:none;
        color:#fff;
    }
    .authorbox h3 {
        margin: 0;
        display: inline-block;
        background: #333;
        color: #fff;
        font: bold 20px Arial;
        padding: 5px 10px;
    }
    h3.boxtitle {
        background: #333;
        color: #fff;
        margin: 0 auto;
        width: 25%;
        padding: 2px 10px;
        font: bold 16px "Armata", Arial
    }
    .authorbox .authorsocial li .fb {
        background-position: 0px 0px;
    }
    .authorbox .authorsocial li .twitter {
        background-position: 0px -32px;
    }
    .authorbox .authorsocial li .google {
        background-position: 0px -64px;
    }
    .authorbox .authorsocial li .in {
        background-position: 0px -96px;
    }
    .authorbox .authorsocial li .in:hover {
        background-position: -32px -96px;
    }
    .authorbox .authorsocial li .google:hover {
        background-position: -32px -64px;
    }
    .authorbox .authorsocial li .twitter:hover {
        background-position: -32px -32px;
    }
    .authorbox .authorsocial li .fb:hover {
        background-position: -32px 0px;
    }
    .authorbox:hover img {
        background: #1BC3F8;
    }
    .authorbox .authorinfo img, .authorbox .authorsocial li a {
        -webkit-transition: .5s;
        -moz-transition: .5s;
        -ms-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
    }
    @font-face {
        font-family: 'Armata';
        font-style: normal;
        font-weight: 400;
        src: local('Armata'), local('Armata-Regular'), 
    url(http://themes.googleusercontent.com/static/fonts/armata/v3/FG9R9aX-RIX_AvJI8USOWg.woff) format('woff');
    


    Save template & that's all




    No comments

    Post Top Ad

    Post Bottom Ad