Software Tuts

Show Random Headlines Inside Sticky Floating Bar

2014-04-07T02:46:00.001-07:00

Ever wondered to create a Sticky Floating Bar to show Random headlines on your blog? We recently developed a small plugin in wordpress which we have implemented on our third blog hosted on wordpress and also on BlogSpot blogs of our existing clients. We introduced several versions of sticky bars for blogger blogs in 2012 but this one adds an extra functionality. It will show a random post on each page refresh! It uses Feedburner JavaScript snippet to fetch recent headlines from your Feeds and then displays a title randomly when user refreshes the webpage or navigates between pages. Also contains a toggle button to show and hide the headlines. You can customize it easily and change its location to top of page or at footer. Works best with fluid and responsive designs. The analytics for our newly launched blog has shown an amazing 30% increase in Pageviews just after we installed this plugin. I have developed both static and dynamic versions of it for both Blogger and WordPress Genesis Framework.

How to Add Author-Box with Social Connection in Blogger

2014-04-06T20:43:00.002-07:00

Adding an Author box to blogs and websites has been a real deal now days where readers tend to know who's behind the content the read. Brief author bio widget enables the readers to make a better connection with the writer. Looking forward to that, we are laughing our, probably third author bio box. But this time, its even more classy, making use of the social media buttons (connections) that could either be used for the author personnel social connections or generally for the blog/website.

So why to wait any more? Lets get onto it and lets see how we can add it to our blogger blogs.

Hit the "Like" button if you liked the post. It helps a lot :)

SEE ALSO:

Step #1 How to Install?

Simply visit your Blogger blog Dashboard >> Template >> Edit HTML and click with in the template box. We are doing this to search with in the Edit HTML box from Blogger using CTRL+F.

Other wise, hitting CTRL+F would enable brower's search bar.

Now search for the code as shown below

<div class='post-footer-line post-footer-line-1'>

Once you find it (as shown in the images above), you're all set to paste the author-box blogger widget.

SEE ALSO:

Step #2 Paste Widget Code

Below is the widget code. Simply copy/paste it beneath the code we found in step #1.

<div class="beh-entry-author">
<div class="author-header main-color-bg">
<h4 class="title">
<a rel="author" href="#">Author name Here</a>
</h4>
</div>
<div class="author-wrap">
<div class="author-avatar">
<img class="avatar avatar-80 photo" width="80" height="80" src="Author profile image link here" alt="">
</div>
<div class="author-description">
Author bio goes here.
<div class="author-link">
<a rel="author" href="#">
Facebook
<span class="meta-nav">?</span>
</a>
</div>
</div>
</div>
</div>

<div class="entry-social">
<div class="fb">
<a target="_blank" href="Your_Facebok_Page">Facebook</a>
</div>
<div class="twitter">
<a target="_blank" href="Your_twitter_Profile">Twitter</a>
</div>
<div class="gplus">
<a target="_blank" href="Your_Googleplus_Follow">Google+</a>
</div>
<div class="linkedin">
<a target="_blank" href="Your_Linkedin_Profile">Linkedin</a>
</div>
<div class="pinterest">
<a target="_blank" href="You_Pinterest_Page">Pinterest</a>
</div>
<div class="delicious">
<a target="_blank" href="Your_Delicious_Profile">Delicious</a>
</div>
<p style=" line-height:0px; font-size:7px; font-weight:bold; text-align:right"><a style="color:#D3D3D3;" href="http://www.bloggingehow.com">blogger widgets</a></p>
</div>

<style>

.entry-social {
    margin-bottom: 20px;
    overflow: hidden;
}
.entry-social a {
    color: #FFFFFF !important;
    display: block;
    font-family: "Open Sans","Tahoma","Verdana","Arial",sans-serif;
    font-weight: 600;
    padding-left: 20px;
}
.entry-social div {
    float: left;
    margin-right: 10px;
    width: 138px;
}
.entry-social .fb a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxo7GXzzEwD-vBl0UU4DSXdYAPHOoFNkRNhOBtL4DEvzLlSFaxOyNUnDu9nSGAckVskjiX_-2d7Ta_44mNQ_l32P2fTzqZPBfZ2jQzVArquIKP588W9NFKLkA4whoJjMzLQdRimcxNzSzh/s1600/fb14.png") no-repeat scroll 10px center #3B5999;
    padding: 7px 10px 7px 26px;
}
.entry-social .fb a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxo7GXzzEwD-vBl0UU4DSXdYAPHOoFNkRNhOBtL4DEvzLlSFaxOyNUnDu9nSGAckVskjiX_-2d7Ta_44mNQ_l32P2fTzqZPBfZ2jQzVArquIKP588W9NFKLkA4whoJjMzLQdRimcxNzSzh/s1600/fb14.png") no-repeat scroll 10px center #324B81;
}
.entry-social .twitter a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAon-6fcD2HM6zraNB9SuulXeQpcPJacKca0bM6tw0lOvGQFoV150vE-k14lxeZw9nyfF2vqyN4_xaFY1cuAh3TCdVHqzr9zbaG3Q16OZuEsT_AkEhAZmVyDvkZJz4yJKdxRSgH-BBHA1/s1600/twitter14.png") no-repeat scroll 8px center #01BBF6;
    padding: 7px 10px 7px 32px;
}
.entry-social .twitter a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAon-6fcD2HM6zraNB9SuulXeQpcPJacKca0bM6tw0lOvGQFoV150vE-k14lxeZw9nyfF2vqyN4_xaFY1cuAh3TCdVHqzr9zbaG3Q16OZuEsT_AkEhAZmVyDvkZJz4yJKdxRSgH-BBHA1/s1600/twitter14.png") no-repeat scroll 8px center #01A7DE;
}
.entry-social .gplus a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyLCxUSV08A9xkzwE5fh0zFt11bf5yHuwJAKna7VzjjEYI6iaixOTHFAUCBLFZNR3_N4AKGo5TtONi9rrmsxPRiJzTcQRS4GuugA2tNXJv8sUfkxwFQPioIyUplI8wvvmNhyihHzIpAdK1/s1600/gplus14.png") no-repeat scroll 10px center #D54135;
    padding: 7px 10px 7px 32px;
}
.entry-social .gplus a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyLCxUSV08A9xkzwE5fh0zFt11bf5yHuwJAKna7VzjjEYI6iaixOTHFAUCBLFZNR3_N4AKGo5TtONi9rrmsxPRiJzTcQRS4GuugA2tNXJv8sUfkxwFQPioIyUplI8wvvmNhyihHzIpAdK1/s1600/gplus14.png") no-repeat scroll 10px center #BA3227;
}
.entry-social .linkedin a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FySTcSkqxw4T3M4vR-cFDut1V_f0e6R4qKWW7pYFTxQs_m6zCSmR9S-jMNvseiADftL0cbiRKwm-Rg3qRSRHGMu0Uoxtt18WjiO5SqK8vFoynQ18x8lOEiytJ6sbGWIvt6dgpwypWx8H/s1600/linkedin14.png") no-repeat scroll 10px center #167FB1;
    padding: 7px 10px 7px 35px;
}
.entry-social .linkedin a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9FySTcSkqxw4T3M4vR-cFDut1V_f0e6R4qKWW7pYFTxQs_m6zCSmR9S-jMNvseiADftL0cbiRKwm-Rg3qRSRHGMu0Uoxtt18WjiO5SqK8vFoynQ18x8lOEiytJ6sbGWIvt6dgpwypWx8H/s1600/linkedin14.png") no-repeat scroll 10px center #136F9B;
}
.entry-social .pinterest a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqksM1UJjluZWuPT1T8M-a0De4adkq56CAXoBtsqAOMd5aJ6enIEMMVu2qHKeVT5o8kDfmUD_jgEenOkAO17sWzW_g5otLG0WGsFyKuenoS9q2KwTQHz6DqgOsbVY0aR4tjaWSAYAG6YCW/s320/pinterest14.png") no-repeat scroll 10px center #CB2027;
    padding: 7px 10px 7px 32px;
}
.entry-social .pinterest a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqksM1UJjluZWuPT1T8M-a0De4adkq56CAXoBtsqAOMd5aJ6enIEMMVu2qHKeVT5o8kDfmUD_jgEenOkAO17sWzW_g5otLG0WGsFyKuenoS9q2KwTQHz6DqgOsbVY0aR4tjaWSAYAG6YCW/s320/pinterest14.png") no-repeat scroll 10px center #B01C23;
}
.entry-social .delicious a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQOzeRZI3iDYU5Nvt86AH4N8UPOPlva3OEo4eQdwfq423hVyFyecmnJW7Zl3tR5DWwKePmRUuUSs8yu1bykd2Cz3AOBKblaWPH2rXmKuMKyiZaEWEQQikQPSibR0pH0voxh0KomTEVvaJu/s320/delicious14.png") no-repeat scroll 10px center #3173D1;
    padding: 7px 10px 7px 32px;
}
.entry-social .delicious a:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQOzeRZI3iDYU5Nvt86AH4N8UPOPlva3OEo4eQdwfq423hVyFyecmnJW7Zl3tR5DWwKePmRUuUSs8yu1bykd2Cz3AOBKblaWPH2rXmKuMKyiZaEWEQQikQPSibR0pH0voxh0KomTEVvaJu/s320/delicious14.png") no-repeat scroll 10px center #2963B8;
}
.entry-social .delicious {
    margin-right: 0;
}

.beh-entry-author {
    margin-bottom: 20px;
}
.beh-entry-author .author-header {
    padding: 1px 15px;
}
.beh-entry-author .author-header h4 a:hover {
    color: #000000;
}
.beh-entry-author .author-header h4 a {
    color: #FFFFFF;
}
.beh-entry-author .author-header h4 {
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
}
.beh-entry-author .author-wrap {
    border: 1px solid #EEEEEE;
    overflow: hidden;
    padding: 12px 15px;
}
.beh-entry-author .author-avatar {
    float: left;
    height: 80px;
    margin-right: 30px;
    width: 80px;
}
.beh-entry-author .author-link {
    margin-top: 5px;
}
.main-color-bg {
    background: none repeat scroll 0 0 #2BBFF6;
}
.beh-entry-author a {
    color: #3A3A3A;
    outline: 0 none;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}
.entry-social a {
    color: #3A3A3A;
    outline: 0 none;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}

</style>

Customization: How to Use?

To add author image, author social links etc, you would have to edit the fields highlighted in the code above. Hope you liked the widget.

Let me know!

Do let me know what you think about the widget using the comment section below. Till next time, take care

Blogger Author Box

2014-04-06T08:37:00.002-07:00

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.

Did you think info about the person who gave you any valuable thing that you have expected for a long time? You might say Yes. Because it is our pleasure to know about those person who gave us valuable things. So In case of reading article, Readers should have a tasty to know about the author after reading the article.

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 me. 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 Download

I would recommend to add this author box below every blogger post. You can add anywhere, no problem! Below article is best place. Go through steps given below to add Advance Author Box in Blogger.

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.

<b:if cond='data:blog.pageType == "item"'>

<div class="about-author">

<h3 class="boxtitle">About Author</h3>

<div class="authorbox">

<div class="authorsocial">

  <li><a class="fb" href="http://facebook.com/SoftGlad" rel="nofollow"></a></li>

  <li><a class="twitter" href="http://twitter.com/soft_glad" rel="nofollow"></a></li>

  <li><a class="google" href="https://plus.google.com/114636838169087641091" rel="author"></a></li>

  <li><a class="in" href="http://sa.linkedin.com/in/ashiqhassan" rel="nofollow"></a></li>

</div>

  <div class="authorinfo">

<img src="profileimg.png" />

<p>He known as Ashiq Hassan, is the founder and the brain behind SoftGlad. A 16

year old teen from kerala, India. He provides high quality tutorials about latest

web design and technology trends. He loves music and likely to be a musician in

Vstars Band. <a href="#">Read More</a></p>

</div>

</div>

</div>

</b:if>

Customize: you have to change few things from above HTML code. Replace all social media site URLs with your social media profile URLs (line #5, 6, 7 and 8). Replace profileimg.png (line #11) 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');

}

4. Save Template. That's all.

I hope you like this widget. Do post your feedback in comment below and if you get any error tell me in comment. Do Share with your friend and enjoy.