Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

How to Add An Awesome Sitemap Plugin In Blogger Blogs

Sitemap is one of the most essential blog tool to use in your blog. It helps a lot in reducing bounce rate by providing a direct navigation link to label of a specific post, for instance the sitemap plugin we'll be adding today in this tutorial shows a list of articles on the latest published order under each categories which is very cool. The plugin is based on ajax so it will load fast and will not have effect on the performance of your blog.
Let's take the lesson together and am sure by the end of the day you will be satisfied.

Step 1: As usual login into your Blogger account and go to >> Templates >> then>>Edit HTML and click anywhere inside the html are then press CTRL+F to search for  ]]></b:skin> tag and then just above it paste the following code.
.mapasite {
    margin-bottom: 10px;
    background-color: #F8F8F8
}
.mapasite.active .mapa {
    display: block
}
.mapasite .mapa {
    display: none
}
.mapasite h2 {
    background-color: #EEE;
    color: $(primary.color);
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 2px;
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 700
}
.mapasite h2 .botao {
    font-size: 18px;
    line-height: 1.2em
}
.botao .fa-minus-circle {
    color: #f30
}
.mapapost {
    overflow: hidden;
    margin-bottom: 20px;
    height: 70px;
    background-color: #FFF
}
.mapa {
    padding: 40px
}
.map-thumb {
    background-color: #F0F0F0;
    padding: 10px;
    display: block;
    width: 65px;
    height: 50px;
    float: left
}
.map-img {
    width: 65px;
    height: 50px;
    overflow: hidden;
    border-radius: 2px
}
.map-thumb a {
    width: 100%;
    height: 100%;
    display: block;
    transition: all .3s ease-out!important;
    -webkit-transition: all .3s ease-out!important;
    -moz-transition: all .3s ease-out!important;
    -o-transition: all .3s ease-out!important
}
.map-thumb a:hover {
    -webkit-transform: scale(1.1) rotate(-1.5deg)!important;
    -moz-transform: scale(1.1) rotate(-1.5deg)!important;
    transform: scale(1.1) rotate(-1.5deg)!important;
    transition: all .3s ease-out!important;
    -webkit-transition: all .3s ease-out!important;
    -moz-transition: all .3s ease-out!important;
    -o-transition: all .3s ease-out!important
}
.mapapost .wrp-titulo {
    padding-top: 10px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3em;
    padding-left: 25px;
    padding-right: 10px;
    display: block;
    overflow: hidden;
    margin-bottom: 5px
}
.mapapost .wrp-titulo a {
 
}
.mapapost .wrp-titulo a:hover {
    color: #f30;
    text-decoration: underline
}
.map-meta {
    display: block;
    float: left;
    overflow: hidden;
    padding-left: 25px;
}
.mapasite h2 .botao {
    float: right
}
Step 2: In the template, search for the </body> tag  and just above it paste the following HTML Coding.
<script type='text/javascript'>
//<![CDATA[
var text_month = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var no_image_url = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxJHaRTRpplZBJ2XQsGWfV632wWX8TwMs3mI7pGENpheStBPpO8eUZXV9bx7qjLfA4RW_0A8_xTIcu8li7iPRu4yE4Nm8W09Ho_QezLI-nnlaZ6WttDlc_wvN-pOuOE2SsKD-7HVENkxM/s1600-r/nth.png";
var static_page_text = $.trim($('.static_page .post-body').text());
if (static_page_text === "[sitemap]") {
var postbody = $('.static_page .post-body');
$.ajax({
url: "/feeds/posts/default?alt=json-in-script",
type: 'get',
dataType: "jsonp",
success: function(dataZ) {
var blogLabels = [];
for (var t = 0; t < dataZ.feed.category.length; t++) {
blogLabels.push(dataZ.feed.category[t].term)
}
var blogLabels = blogLabels.join('/');
postbody.html('<div class="siteLabel"></div>');
$('.static_page .post-body .siteLabel').text(blogLabels);
var splabel = $(".siteLabel").text().split("/");
var splabels = "";
for (get = 0; get < splabel.length; ++get) {
splabels += "<span>" + splabel[get] + "</span>"
}
$(".siteLabel").html(splabels);
$('.siteLabel span').each(function() {
var mapLabel = $(this);
var mapLabel_text = $(this).text();
$.ajax({
url: "/feeds/posts/default/-/" + mapLabel_text + "?alt=json-in-script",
type: 'get',
dataType: "jsonp",
success: function(data) {
var posturl = "";
var htmlcode = '<div class="mapa">';
for (var i = 0; i < data.feed.entry.length; i++) {
for (var j = 0; j < data.feed.entry[i].link.length; j++) {
if (data.feed.entry[i].link[j].rel == "alternate") {
posturl = data.feed.entry[i].link[j].href;
break
}
}
var posttitle = data.feed.entry[i].title.$t;
var author = data.feed.entry[i].author[0].name.$t;
var get_date = data.feed.entry[i].published.$t,
year = get_date.substring(0, 4),
month = get_date.substring(5, 7),
day = get_date.substring(8, 10),
date = text_month[parseInt(month, 10)] + ' ' + day + ', ' + year;
var tag = data.feed.entry[i].category[0].term;
var content = data.feed.entry[i].content.$t;
var $content = $('<div>').html(content);
var src2 = data.feed.entry[i].media$thumbnail.url;
htmlcode += '<div class="mapapost"><div class="map-thumb"><div class="map-img"><a href="' + posturl + '" style="background:url(' + src2 + ') no-repeat center center;background-size: cover"/></div></div><h3 class="wrp-titulo"><a href="' + posturl + '">' + posttitle + '</a></h3><div class="map-meta"><span class="p-author">' + author + '</span><span class="p-date">' + date + '</span></div></div>'
}
htmlcode += '</div>';
mapLabel.replaceWith('<div class="mapasite"><h2>' + mapLabel_text + '<span class="botao"><i class="fa fa-plus-circle"></i></span></h2>' + htmlcode + '</div>');
$(document).on('click', '.mapasite h2', function() {
$(this).parent('.mapasite').addClass('active');
$(this).find('.botao .fa').removeClass('fa-plus-circle').addClass('fa-minus-circle');
});
$(document).on('click', '.mapasite.active h2', function() {
$(this).parent('.mapasite').removeClass('active');
$(this).find('.botao .fa').addClass('fa-plus-circle').removeClass('fa-minus-circle');
});}});});}});}
//]]></script>
After you are done save you template then go back to pages.
N/B :- the widget works on jquery therefore male sure you have installed jquery plugin.

Step 3: At the final step we need to create a new page. Go to your blogger dashboard >> Pages >> Add New Page.

On the new page content, create the page title the disable comments using options links, then switch to HTML section and add the following code in the page content area.
[sitemap]
Use the image below for more and better elaborations.

Okay now save your work and tell how you find it...awesome eeeh right!!!!@ See you on the next post.
Share:

How to Add A Stylish Cloud Label Widget In Blogger

Cloud Label is one of official blogger'd=s widget actually they are then only blogging platform providing the widget. Anyway their widget comes with no styling and sometime can give you blog n odd look. Therefore in this post you are going to learn 'How to Add A Stylish Cloud Label Widget' in your blogger blog, This widget helps to grouping your blog content in perfect standard way and also notifying you visitor which post is related to which. On the hand too it also helps to manage your blog bounce rate. Let's go forward and learn how to add this widget to you blog today.

N/B: Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

Step 1: The First thing you need to do is to login into your Blogger account and go to >> Layout >> Add Label Widget From the Layout and put the settings just like show in the picture below.

Step 2: In the template, search for the ]]></b:skin> tag  and just above it paste the following Coding.
.cloud-label-widget-content {
text-align: left
}
.cloud-label-widget-content .label-count {
background: #2b2b2b;
color: #fff!important;
margin-left: -3px;
padding-right: 3px;
white-space: nowrap;
border-radius: 2px;
padding: 1px 4px !important;
font-size: 12px !important;
margin-right: 5px;
}
.cloud-label-widget-content .label-size {
background: #ebebeb;
display: block;
float: left;
font-size: 11px;
margin: 0 5px 5px 0
}
.cloud-label-widget-content .label-size a,
.cloud-label-widget-content .label-size span {
height: 18px !important;
color: #2b2b2b;
display: inline-block;
font-size: 12px;
font-weight: 500!important;
padding: 6px 8px
}
.cloud-label-widget-content .label-size a {
padding: 6px 10px
}
.cloud-label-widget-content .label-size a:hover {
color: #000!important
}
.cloud-label-widget-content .label-size,
.cloud-label-widget-content .label-count {
height: 30px!important;
line-height: 19px!important;
border-radius: 2px
}
.cloud-label-widget-content .label-size:hover {
background: #2b2b2b;
color: #fff!important
}
.cloud-label-widget-content .label-size:hover a {
color: #fff!important
}
.cloud-label-widget-content .label-size:hover span {
background: #ebebeb;
color: #2b2b2b!important;
cursor: pointer
}
.cloud-label-widget-content .label-size-1,
.label-size-2,
.label-size-3,
.label-size-4,
.label-size-5 {
font-size: 100%;
opacity: 10
}
Note that the CSS code only works for Cloud Label Widget and not for list label widget.
Share:

How to Add Simple And Elegant Social Sharing Widget In Blogger

Social sharing widgets are an essential part of blog especially when you are considering to do much of promotional work through social media. They are shortcuts to sharing the whole post. In this tutorial today you are going to learn 'How To Add an Elegant Social Sharing Widget In Blogger' and it's simple to use. This widget will help you and your visitors to share your blog content easily all over the internet via various social media sites they own. Okay, let's roll on further and see how we can add this widget/plugin to you blog. Keep in mind this widget will appear below your article or just above the author profile.

Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

Step-1: The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.
.share-box {
position: relative;
padding: 10px;
}
.share-title {
border-bottom: 2px solid #777;
color: #010101;
display: inline-block;
padding-bottom: 7px;
font-size: 15px;
font-weight: 500;
position: relative;
top: 2px;
}
.share-art {
float: right;
padding: 0;
padding-top: 0;
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
}
.share-art a {
color: #fff;
padding: 3px 8px;
margin-left: 4px;
border-radius: 2px;
display: inline-block;
margin-right: 0;
background: #010101;
}
.share-art a:hover{color:#fff}
.share-art .fac-art{background:#3b5998}
.share-art .fac-art:hover{background:rgba(49,77,145,0.7)}
.share-art .twi-art{background:#00acee}
.share-art .twi-art:hover{background:rgba(7,190,237,0.7)}
.share-art .goo-art{background:#db4a39}
.share-art .goo-art:hover{background:rgba(221,75,56,0.7)}
.share-art .pin-art{background:#CA2127}
.share-art .pin-art:hover{background:rgba(202,33,39,0.7)}
.share-art .lin-art{background:#0077B5}
.share-art .lin-art:hover{background:rgba(0,119,181,0.7)}

Step-2: In the template html section, search for the <data:post.body/> tag  and just below it paste the following HTML Coding. In case, you are unable to find <data:post.body/>,  then you can paste it just below <div class='post-footer'> or <div class='post-footer-line post-footer-line-1'></div> depending with you template design.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-box'>

          <h8 class='share-title'>Share This:</h8>
               <div class='share-art'>
<a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>
<a class='twi-art' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a>
<a class='goo-art' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a>
<a class='pin-art' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a>
<a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a>
</div>
         </div>
               
      <div style='clear:both'/>
</b:if> 
N/B If you want to display the widget in every page ( Homepage, postpage, indexpage, searchpage, archive page etc.) Then remove the lines which are marked in blue from the above code.

Step-3:  ( Adding Fontawesome ) The widget works on fontawesome icons, therefore I would suggest to install fontawesome in your blog as follows.

In the template, search for the </head> tag  and just above it paste the following HTML Coding.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
I hope this article has been useful to you. Please sharing and suggest friend to come by for tutorials. In case of extra support please use the comment box below.
Share:

How to Add Email Subscription Widget In Blogger

Email Subscription widget helps to improve blog followers and also have loyal readers therefor in today's post I will show you 'How to Add Email Subscription Widget' in your blogger blog, This is a simple and elegant looking newsletter widget and has simple styling to match any design . Okay, Let's move forward and take the steps. Most this widget will work well for those who are using sortemplate themes where they have awesome products for free and premium.

Adding The Widget

The first thing you need to do is to login into your Blogger account and go to >> Layout >> Click add a gadget any where into your layout >> Add HTML/JAVASCRIPT widget and paste the below code in the blank space. This widget can be placed on the sidebars of you templates.
<style>
#soratemplates-sbox-v2 {
padding: 0;
padding-bottom: 5px;
font-family: inherit;
display: block;
margin: 0;
border-radius: 1px;
border: 5px solid #FFD439;
}
#soratemplates-sbox-v2 p {
font-size: 15px;
color: #000;
line-height: 27px;
padding: 5px 10px 5px;
text-align: center;
width: 80%;
margin: 5px auto 20px;
border-bottom: 2px solid #ebebeb;
border-radius: 20px;
}
#soratemplates-sbox-v2 .rssform {
padding: 0;
margin: 0 auto;
display: block;
}
#soratemplates-sbox-v2 .rssform input {
padding: 8px;
margin: 20px auto 15px;
font-size: 13px;
color: #000;
text-align: center;
display: block;
font-family: inherit;
font-weight: normal;
width: 90%;
height: 38px;
text-transform: uppercase;
outline: none !important;
border: 1px solid #ebebeb;
border-radius: 1px;
background-color: #FCFCFC;
box-sizing: border-box !important;
}
#soratemplates-sbox-v2 .rssform .button:hover {
opacity: 0.7;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
}
#soratemplates-sbox-v2 .rssform .button {
background: #222;
color: white!important;
margin-top: 15px;
outline: none !important;
transition: all .3s ease-in-out;
padding: 5px 2px !important;
float: none;
text-transform: uppercase;
font-size: 18px;
font-weight: normal;
cursor: pointer;
}
#soratemplates-sbox-v2 form {
margin-bottom: 10px !important;
}
</style>
<div id="soratemplates-sbox-v2">


<p>Get All The Latest Updates Delivered Straight Into Your Inbox For Free!</p>
<div class="rssform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=soratemplates', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" name="email" placeholder="Enter your email address..." vk_14173="subscribed" vk_1e723="subscribed">
<input type="hidden" value="soratemplates" name="uri">
<input type="hidden" name="loc" value="en_US">
<input value="Join Now" class="button" type="submit">
</form>
</div>

</div>
N/B Change soratemplates with you desire feedburner name.

You made it?. yeah that's for sure and now you have learnt How to Add Email Subscription Widget In Blogger. You can now visit your blog and check the awesome widget live in action and I hope you liked this tutorial, if you enjoyed then please share it with your friends and in case of help!..please use the comment box below.

Share:

Random Post Widget With Thumbnails For Blogger

Random Posts Widgets are great tools for enhancing post performance. This widget will keep displaying different posts every time the blog is updated, refreshed or even when visiting anothe post time to time. As for sure this will increase your traffic as visitor will be seeing different topics at a time and therefor wanting to read the post. 


  • Installation: Log into your blogger account>>>go to layout>>>click on it and pop up shows>>>choose HTLM/Javascript.


Copy the code below and page in the widget the click save and you are ready to go.

<style>
#random-posts img {
    border-radius: 10px;
    float: left;
    margin-right: 5px;
    width: 75px;
    height: 75px;
    background-color: #F5F5F5;
    padding: 3px;
    transition: all 0.2s linear 0s;
}
#random-posts img:hover {
    opacity: 0.6;
}
ul#random-posts {
    list-style-type: none;
    padding: 0px;
}
#random-posts a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 0px auto 5px;
}
#random-posts a:hover {
    text-decoration: none;
}
.random-summary {
    font-size: 11px;
    background: none;
    padding: 5px;
    margin-right: 8px;
}
#random-posts li {
    margin-bottom: 10px;
    border-bottom: 1px solid #EEEEEE;
    padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 110;
var randomposts_details = 'yes';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {
    total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue() {
    for (var i = 0; i < randomposts_number; i++) {
        var found = false;
        var rndValue = get_random();
        for (var j = 0; j < randomposts_current.length; j++) {
            if (randomposts_current[j] == rndValue) {
                found = true;
                break
            }
        };
        if (found) {
            i--
        } else {
            randomposts_current[i] = rndValue
        }
    }
};
function get_random() {
    var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
    return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
    for (var i = 0; i < randomposts_number; i++) {
        var entry = json.feed.entry[i];
        var randompoststitle = entry.title.$t;
        if ('content' in entry) {
            var randompostsnippet = entry.content.$t
        } else {
            if ('summary' in entry) {
                var randompostsnippet = entry.summary.$t
            } else {
                var randompostsnippet = "";
            }
        };
        randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
        if (randompostsnippet.length < randomposts_chars) {
            var randomposts_snippet = randompostsnippet
        } else {
            randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
            var whitespace = randompostsnippet.lastIndexOf(" ");
            randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";
        };
        for (var j = 0; j < entry.link.length; j++) {
            if ('thr$total' in entry) {
                var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
            } else {
                randomposts_commentsnum = randomposts_commentsd
            }; if (entry.link[j].rel == 'alternate') {
                var randompostsurl = entry.link[j].href;
                var randomposts_date = entry.published.$t;
                if ('media$thumbnail' in entry) {
                    var randompoststhumb = entry.media$thumbnail.url
                } else {
                    randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3IrZs9hiPZQG3vARskqstGDcdxZCW02HP3z_v-K0girSEOXT6uMZn9TZ-X_5G-7Zb5RlYG43Pvq6CtyPvxG4k7RrASzrCW1mksWsKZjz0Cn4_SGwK_Fn7t589JFJ59SLdn4pvy56ZfM/s1600/no_thumb.png"
                }
            }
        };
        document.write('<li>');
        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
        if (randomposts_details == 'yes') {
            document.write('<span><div  class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
        };
        document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
    }
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
    document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>
Random Posts Option

  • Thumbnail dimensions: to change the size of the thumbnail in pixels, replace the 75px value
  • Summary length: you can set the length of the summary(characters) by changing the 100px value form var randompost_chars=100;
  • Post info: post date and comment count options change 'yes' from var randomposts_details='yes'; to 'no';
  • Font size for post titles and summary: modify the font size for the pot snippet change the value 11px to your choice value.
Share:

How to Create a Floating "Sticky" Sidebar Widget in Blogger


Sidebar widgets that float along your screen are pretty cool and attention grabbing. They are more commonly known as the “Sticky” floating widgets that stick to your screen as you scroll and tend to have a higher click through rate. In this article, I will show you how to create a floating “sticky” Sidebar widget in Blogger?

Remember: This works pretty well with all kinds of widgets present in your sidebar. It is not necessary that a person can only use if for email subscription boxes. You can use it for promotion of your items, galleries, popular posts, Instagram photos, and basically everything that you wish for.

Step#1: Adding a New Widget: 

The First thing you need to do is to add a new widget in your sidebar so that later on you can make it sticky. Go to Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript >> and name the widget as “My Sticky Gadget”. Now writing anything in the HTML body and once everything is down press “Save” button located at the end of the page.

Step#2: Installing a “Sticky” Plugin:

Now after properly adding a new widget in your blog, it’s time for some serious work. This time go to Template >> Edit HTML >> and search for the ending </body> tag and just above it paste the following JavaScript code.
<script>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Syed Faizan Ali & Revised by Levynson Otunga
(function($) {
    var defaults = {
            topSpacing: 0,
            bottomSpacing: 0,
            className: 'is-sticky',
            center: false
        },
        $window = $(window),
        $document = $(document),
        sticked = [],
        windowHeight = $window.height(),
        scroller = function() {
            var scrollTop = $window.scrollTop(),
                documentHeight = $document.height(),
                dwh = documentHeight - windowHeight,
                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
            for (var i = 0; i < sticked.length; i++) {
                var s = sticked[i],
                    elementTop = s.stickyWrapper.offset().top,
                    etse = elementTop - s.topSpacing - extra;
                if (scrollTop <= etse) {
                    if (s.currentTop !== null) {
                        s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
                        s.currentTop = null;
                    }
                }
                else {
                    var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
                    if (newTop < 0) {
                        newTop = newTop + s.topSpacing;
                    } else {
                        newTop = s.topSpacing;
                    }
                    if (s.currentTop != newTop) {
                        s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
                        s.currentTop = newTop;
                    }
                }
            }
        },
        resizer = function() {
            windowHeight = $window.height();
        };
    // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
    if (window.addEventListener) {
        window.addEventListener('scroll', scroller, false);
        window.addEventListener('resize', resizer, false);
    } else if (window.attachEvent) {
        window.attachEvent('onscroll', scroller);
        window.attachEvent('onresize', resizer);
    }
    $.fn.sticky = function(options) {
        var o = $.extend(defaults, options);
        return this.each(function() {
            var stickyElement = $(this);
            if (o.center)
                var centerElement = "margin-left:auto;margin-right:auto;";
            stickyId = stickyElement.attr('id');
            stickyElement
                .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
                .css('width', stickyElement.width());
            var elementHeight = stickyElement.outerHeight(),
                stickyWrapper = stickyElement.parent();
            stickyWrapper
                .css('width', stickyElement.outerWidth())
                .css('height', elementHeight)
                .css('clear', stickyElement.css('clear'));
            sticked.push({
                topSpacing: o.topSpacing,
                bottomSpacing: o.bottomSpacing,
                stickyElement: stickyElement,
                currentTop: null,
                stickyWrapper: stickyWrapper,
                elementHeight: elementHeight,
                className: o.className
            });
        });
    };
})(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
   $(document).ready(function(){
    $("#mblfloater").sticky({topSpacing:0});
   });
 </script>

Step#3: Creating a Widget “Sticky” in Blogger:

After adding the JavaScript code, you have to search for the name of your widget. Since, we have named it as "My Sticky Gadget". Therefore, in the template coding search for "My Sticky Gadget". To be able to search correctly it is essential that you must use the built-in search box provided by the Blogger template editor.

Note: To enable the search box click anywhere in the template editor and press "CTRL+F". Now on finding "My Sticky Gadget" you will able to see a code similar to the the following one.
<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
            <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
          </b:widget>
Now after finding the code as mentioned above, just replace it completely with the following coding.
<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
            <b:includable id='main'>
<div id='mblfloater'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>  </div>
</b:includable>
          </b:widget>
Remember: The ID of your widget should be unique. For example, if you are using id='HTML32' in any of your widget then you cannot use the same ID for others.

All done: Once everything is done, press the "Save Template" button to finish the process.

Sticky floating sidebar widgets can bring a lot of growth in your sign ups. They help in increasing user engagement. You can also use multiple floating widgets in sidebar. However, this act might annoy your visitors. Make sure you have a balanced design, so that it don't annoy your users

We hope that this article have helped you in creating a Sticky floating sidebar widget in your Blogger website. This plugin is robust enough to be used in any element of your sites. Let us know what you think in the below comments.

This article was published at mybloggerlab and revised by blogakona

Keep in Mind you can also get get some come stuff from mybloggerlab too.
Share:

How to Display Disqus Comment Count

Disqus is a comment system that has proven it's efficiency among many blogs and websites. Many of sites have now switched to Disqus comment system as it is fast, easy and simple to use, but sometime it can be frustrating when you don't see the comment counts in homepage until you go all way down to open the post. Comment counts are best way to prove to readers that your blog has a value of being viewed thus increasing you impression.

Okay saying that let's see how we can add the disqus comment count on your homepage. However you should note Disqus no longer supports import and syncronize for comment through blogger platform this is because Google has updated it's application that authenticate the access logged data with the latest OAuth 2.0 since April 2015.

Anyways you should not worry to much as I will be giving you tips on how to bring up the number of Disqus comments on the index page or your post.

First and most importantly be sure to get a disqus account.

If you haven't install disqus in your blog already please follow these steps:
1. Log in to Disqus profile > then click the Settings icon> Admin> Settings> Install> Universal Code> Then scroll to the bottom and find the phrase 'How to display the comment count'. Then copy the code immediately before the </body>

Please follow the step below 

Go to Blogger -> Template -> Edit HTML.

Place this Javascript code above </body>.
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES * * */
    var disqus_shortname = 'blogakona';
   
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = '//' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
</script>
Replace the blue background text above to your Disqus shortname example: blogakona from blogakona.disqus.com is the shortname.

2. The next step you should look for comment markup something like this (This code is taken from Blogger's default template, for the rest match the template comment markup you use)
<span class='post-comment-link'>
<b:include cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;} and data:post.allowComments' data='post' name='comment_count_picker'/>
</span>
Then replace all the above code with the code below:
<span class='post-comment'><a expr:href='data:post.url + &quot;#disqus_thread&quot;' title='Comments'/></span>
In case the above code doesn't function in you template, you might want to use the code below instead. This is because some template have different comment functions.

Find this code:
<b:if cond='data:post.allowComments'>
              <span class='comment-info'>
              <i class='fa fa-comments-o'/> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Add Comment </b:if> <b:if cond='data:post.numComments == 1'>1 Comment</b:if><b:if cond='data:post.numComments &gt; 1'><data:post.numComments/> Comments</b:if>
              </a>
              </span>
            </b:if>
And replace with the one below:
 <b:if cond='data:post.allowComments'>
              <span class='comment-info'>
              <i class='fa fa-comments-o'/> <a expr:href='data:post.url + &quot;#disqus_thread&quot;' expr:onclick='data:post.addCommentOnclick' title='Comments'> <b:if cond='data:post.numComments == 0'> Add Comment </b:if> <b:if cond='data:post.numComments == 1'>1 Comment</b:if><b:if cond='data:post.numComments &gt; 1'><data:post.numComments/> Comments</b:if>
              </a>
              </span>
            </b:if>
Save you template and reload to see the effect. There you are done, check me if you need more help
Share:

How To Installing Responsive Slider Recent Post


Installing Responsive Slider Recent Post - Well this time I will share about how to install a recent post that has been responsive slider.

Immediately, the way it is applied.

1. Log in to your blog> Template> Edit HTML Then copy and paste the code below just before or

]]></b:skin></style>

/* CSS Responsive Slider Recent Post */
#featuredpost {margin:15px auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:50%}
#slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
#slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
#slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
#slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
In the above CSS I used the font Oswald, please change and adjust to the theme of your blog.

2. Copy and paste the code below just above

</body>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"URL-BLOG-URL",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]></script>
Replace URL-BLOG-URL with your blog url.

3. Copy and paste the code below wherever free.
<div id="featuredpost"></div>
4. . Finally save the template and view the results.

If you want to bring up the slider is just a recent post on the main page only, please wrap HTML code with a special conditional tag main page.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="featuredpost"></div>
</b:if>
Learn more about the application of conditional tags You can see here 

Some function Conditional Tags In Widgets

And if anyone feels difficulties with its implementation, here I've been providing practical version. You can simply copy all the code below into the Layout> Add Gadget> HTML / JavaScript and paste all the code there Save
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="featuredpost"></div>
</b:if>
Learn more about the application of conditional tags You can see here.
Some function Conditional Tags In Widgets 
And if anyone feels difficulties with its implementation, here I've been providing practical version.
You can simply copy all the code below into the Layout> Add Gadget> HTML / JavaScript and paste all the code there> Save
<style>
/* CSS Slider Recent Post */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:50%}
#slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
#slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
#slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
#slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"URL-YOUR-BLOG",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]></script>
For application, save right on the widget Posting Blog in the Layout.

If you want to bring up the slider is just a recent post on the main page only, please wrap the widget with a special conditional tag main page. Example

Example: Click Templates> Open edit HTML> If you are a slider widget code #HTML4

<b:widget id='HTML4' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable> </b:widget>
Add tags conditional on the widget to be like this:
<b:widget id='HTML4' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable> </b:widget>
Information :
  • MaxPost: The number of all the posts that will appear in the list
  • Imagesize: The maximum size of a picture (The larger the size the more clear the image pixel density will appear, but the more time it takes to load the page)
  • Interval: The time needed when the post moves (Example: 10000 means 10 seconds)
  • Autoplay: (True) Post will switch automatically, (False) Post will not switch automatically.

Any Problem? Comment below I will be glad to help.

Share:

SIMPLE FLAT UI EMAIL SUBSCRIPTION BOX FOR BLOGGER


As it is recommended by pros to build email list, bloggers are trying out different methods for it. We've also shared some of them which you might have read previously. One of the most popular reason for it is that we can easily make money with email list but having a great number of subscribers is important. Email subscribers can be increased by adding attractive subscription box on such areas where every visitor's eye must reach and offering something interesting is also great technique to get email subscribers. At this time, everyone is using sidebar subscribe box and you should implement that too. Just recently, we've made simple Flat UI email subscription box for blogger. Let's learn about it's features and also tutorial of inserting it in blogger blog.

Simple Flat UI Email Subscribe Box

This is just simple Flat UI email subscription or newsletter widget which will help you to gain more subscribers and monetize them. It's design is not much gorgeous but have simplicity and Flat UI style which attracts people to become your subscriber. First, it has unique header and descriptive message below header. After that, it contains two input fields which are name and email. Whenever someone comes to write his/her name or email, it gives a beautiful shadow effect which beauty the subscriber's name or email. At the end or bottom, it has big cute sign up button with Flat effect. This widget is made with pure HTML and CSS3.(source: as from codiblog)


How To Add This in Your Blog?


  • Go To Blogger >> Layout >> Add a Gadget
  • Choose HTML/JavaScript
  • Paste The Following Code in Content Box.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>

<div id='byard-emailsubsocial'>
<div class='heading'>
Sign Up in Seconds
</div>
<p>Sign up with your email address to receive hot updates straight in your inbox.</p>
<div class='emailsub'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BloggerYard', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type='text' name='name' placeholder='Your Name' />
<input type='text' name='email' placeholder='Your Email' />
<input type="hidden" value="BloggerYard" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input value="Sign Up Now!" class="button" type="submit" />

</form>
</div>

<p id='credits'>Powered By : <a href='http://www.bloggeryard.com'>Blogger Yard</a></p>

</div>

<style type='text/css'>
#byard-emailsubsocial {
width: 300px;
height: 330px;
border: 1px solid #ddd;
border-radius: 5px 5px 0px 0px;
}
#byard-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
}
#byard-emailsubsocial p {
font-family: open sans;
font-size: 13px;
color: rgb(170, 170, 170);
line-height: 25px;
padding: 10px 20px 0 20px;
margin: 0;
}
#byard-emailsubsocial .emailsub {
padding: 0px 20px 10px 20px;
}
#byard-emailsubsocial .emailsub input {
color: rgb(170, 170, 170);
padding: 10px;
margin-top: 10px;
font-size: 15px;
font-family: open sans;
width: 92%;
border: 1px solid #ccc;
border-bottom: 2px solid #ccc;
border-radius: 5px;
transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#byard-emailsubsocial .emailsub input:focus {
border-color:#F4836A;
outline: none;
box-shadow: 0 0 2px 1px #F4836A;
}
#byard-emailsubsocial .emailsub .button {
background: #F4836A;
color: white!important;
border:none;
outline: none;
border-bottom: 3px solid #B3614E;
transition:background .4s linear;
width: 90%;
margin-right: 5%;
margin-left: 5%;
font-weight: 600;
cursor:pointer;
}
#byard-emailsubsocial .emailsub .button:hover{
background: #DD7761;
}

#credits {
margin: 0 auto!important;
margin-top: -10px!important;
width: 160px;
}


  • Replace BloggerYard With Your Feedburner Username.
  • N/B: With kind consideration of hard work done by the owners of the widget, please do not attempt to remove the credit without their permission.
  • Finally click Save and you all set up to receive new subscribers
Happy blogging
Share:

How To add Sidebar Blogger Widget With Automatic Changing Ads Banners

Hey there, I was lately asked by one of my readers on how to add automatic changing banners to either blogger sidebar or footer bar. Well! have you ever wondered how you could put several ads banner in one widget?. Yes indeed it's very simple and by the way this widget could help you keep you blog clean and somehow awesome. 

The widget is a java script coded which works in amazing way. It allows you to tidy your sidebars, footer bars as well as the header bar widgets not forgetting you can also set the ratio value to you needs and according to your blog theme style too.

I have come across most blog and frankly I got frustrated on how their theme style appears. First the blog page would load much slower and then finally you get this picture with clumsy look-no offense though. That indeed can scare away your visitors as it doesn't give that willing of the visitors coming back again to read your blog. Also it will be troublesome viewing your blog through other devices. such as smartphone and tablet also mobile phones.

For a advice before using this widget, I would suggest you to please try and choose responsive themes that would easily load faster through different browsers and devices too.

Okay, with that well noted let's see how you can use this widget:

Step one: Copy and paste the below code in your notepad for editing
-----start blogakona.blogspot.com---
<script language="JavaScript"> 
images = new Array(2);
images[0] = "<a href = 'ENTER URL FOR SITE 0' rel='nofollow' target='_blank'><img src='ENTER URL FOR BANNER 0' border='0' height='200px' width='600px' alt='Banner Title'></a>";
images[1] = "<a href = 'ENTER URL FOR SITE 2' rel='nofollow' target='_blank'><img src='ENTER URL FOR BANNER 1' border='0' height='200px' width='600px' alt='Banner Title'></a>";

index = Math.floor(Math.random() * images.length); 
document.write(images[index]); 
</script
----end blogakona.blogspot.com----
Step #2: Find the coloured section for customization, Keep in mind after pasting this code in your notepad the colours will disappear therefore use this post are reference when editing.

Step #3: Change the coloured section to your desire needs:- 

  • images = new Array(2); This section defines the number of banners to be displayed, therefore if displaying for than two banners then there is need to change the value.
  • images[0] = This helps you to name which banner corresponds to the specific given banner code. Therefore it's important to label each banner to avoid editing confusion. What you need to do is to change the [0] value- you can also use alphabet(a,b,c...) or roman numerical(i.ii,iii..).
  • ENTER URL FOR SITE 0 Change this section with your site URL(e.g yourdomain.com)
  • ENTER URL FOR BANNER 0 Change this section with you banner image URL.
  • To configure height and width (height='200px' width='600px') change the value of px to you desire set.
  • Banner title are importance to set too, so go a head and change Banner Title with your own words.
The above code only shows two section of banners as displayed below:
images[0] = "<a href = 'ENTER URL FOR SITE 0' rel='nofollow' target='_blank'><img src='ENTER URL FOR BANNER 0' border='0' height='200px' width='600px' alt='Banner Title'></a>"; 
images[1] = "<a href = 'ENTER URL FOR SITE 2' rel='nofollow' target='_blank'><img src='ENTER URL FOR BANNER 1' border='0' height='200px' width='600px' alt='Banner Title'></a>";


Therefore to add more than two banner codes copy either one of the code above and paste below the second code as shown in the diagram below. Repeat this procedure to whatever number of codes you want.



Uploading to blogger widget:

First go to you blogger account and sign in as usual, then proceed to you blogger dashboard and no further from that.
  • Open HTML/JAVASCRIPT widget, This can be from whatever position you want the banner to appear.
  • Copy the code from notepad and paste it in the widget.
  • Save the widget
  • Reload you blog to see the effect
The effect can be noticed each time a page is loaded a different banner image appears.


And there you are. Well done. any help just comment below and i will reach out to you as soon as I can. 
Share:

Trending

Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Pages

Theme Support

Need our help to upload or customize this blogger template? Contact me with details about the theme customization you need.