Awesome colorful Random Post widget for Blog

Awesome colorful Random Post widget for Blog 

Awesome colorful Random post Widget your Blog. Random Posts widget is an awesome widget for  Blogger Blog. Most important feature of this widget is it lets your Blog visitors to surf more blog posts in your blog.Its let your users to spend more time in your Blog. Surely it increases your Blog's internal links that lets your blog higher traffic.

Installing Instruction :

*| sing in to your Blog Dashboard

*|

*|-> Go to your Layout Menu

*|

*|-> Click on Add Gadget and look for HTML/Javascript and select it

*|

*|-> Copy the below code inside it and click save

<style type="text/css">.noop-random-posts ul li {    list-style-image:none;}.noop-random-posts ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
.noop-random-posts ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
.noop-random-posts ul li:first-child {
background: none repeat scroll 0 0 #FF4C54;
width: 97%;
}
.noop-random-posts ul li:first-child:after {
content: "1";
}
.noop-random-posts ul li:first-child + li {
background: none repeat scroll 0 0 #FF764C;
width: 87%;
}
.noop-random-posts ul li:first-child + li:after {
content: "2";
}
.noop-random-posts ul li:first-child + li + li {
background: none repeat scroll 0 0 #FFDE4C;
width: 84%;
}
.noop-random-posts ul li:first-child + li + li:after {
content: "3";
}
.noop-random-posts ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 81%;
}
.noop-random-posts ul li:first-child + li + li + li:after {
content: "4";
}
.noop-random-posts ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #33C9F7;
width: 78%;
}
.noop-random-posts ul li:first-child + li + li + li + li:after {
content: "5";
}
.noop-random-posts ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #7EE3C7;
width: 75%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li:after {
content: "6";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F6993D;
width: 72%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F59095;
width: 69%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 66%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
.noop-random-posts ul li a {
color: #444444;
font-size: 13px;
text-decoration: none;
}list-style-type: none;margin: 0;padding: 5px 0;}.noop-random-posts ul li {border: 0 none;margin: 5px 0;padding: 10px;position: relative;}.noop-random-posts ul li:first-child {background: none repeat scroll 0 0 #FF4C54;width: 97%;}.noop-random-posts ul li:first-child:after {content: "1";}.noop-random-posts ul li:first-child + li {background: none repeat scroll 0 0 #FF764C;width: 87%;}.noop-random-posts ul li:first-child + li:after {content: "2";}.noop-random-posts ul li:first-child + li + li {background: none repeat scroll 0 0 #FFDE4C;width: 84%;}.noop-random-posts ul li:first-child + li + li:after {content: "3";}.noop-random-posts ul li:first-child + li + li + li {background: none repeat scroll 0 0 #C7F25F;width: 81%;}.noop-random-posts ul li:first-child + li + li + li:after {content: "4";}.noop-random-posts ul li:first-child + li + li + li + li {background: none repeat scroll 0 0 #33C9F7;width: 78%;}.noop-random-posts ul li:first-child + li + li + li + li:after {content: "5";}.noop-random-posts ul li:first-child + li + li + li + li + li {background: none repeat scroll 0 0 #7EE3C7;width: 75%;}.noop-random-posts ul li:first-child + li + li + li + li + li:after {content: "6";}.noop-random-posts ul li:first-child + li + li + li + li + li + li {background: none repeat scroll 0 0 #F6993D;width: 72%;}.noop-random-posts ul li:first-child + li + li + li + li + li + li:after {content: "7";}.noop-random-posts ul li:first-child + li + li + li + li + li + li + li {background: none repeat scroll 0 0 #F59095;width: 69%;}.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after {content: "8";}.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li {background: none repeat scroll 0 0 #C7F25F;width: 66%;}.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {content: "9";}.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {background: none repeat scroll 0 0 #353535;border-radius: 50% 50% 50% 50%;color: #FFFFFF;font-size: 25px;height: 30px;position: absolute;right: -17px;text-align: center;top: 1px;width: 30px;}.noop-random-posts ul li a {color: #444444;font-size: 13px;text-decoration: none;}</style><div class="noop-random-posts"><script type="text/javascript">    var randarray = new Array();var l=0;var flag;    var numofpost=5;function nooprandomposts(json){    var total = parseInt(json.feed.openSearch$totalResults.$t,10);    for(i=0;i < numofpost{flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";    document.write(item);}}    }document.write('</ul>');}    </script><a href="http://www.netoopsblog.com" style="font-size:0pt">Blogger Widgets</a><script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>

Save it and View your Blog  

Popular post Widget awesome style popular post widget for blog/blogger

Popular post Widget awesome style popular post widget for blog/blogger

You will have to edit the CSS as well the HTML for this new type of Popular Post widget.
The live demo of this widget can be seen by going to the below link and look at the right sidebar.


Demo


After seeing the demo it may be quite easier to know how it actually works. So the steps to add this widget to your blogger blog is given below.

Step 2 : Adding the CSS

Firstly go to Blog Title → Template → Edit HTML. Expand <b:skin>⋯</b:skin> if it is not expanded. Press Ctrl + F.  Type ]]></b:skin> in search box and press enter key. [As per the new HTML editor]

Add the below given code just above ]]></b:skin>

.popular-posts li,.popular-posts .item-content{float:left;display:inline;list-style:none;}
.popular-posts .item-snippet,.popular-posts .item-title,.feed-links{display:none;}p.description,aside li{font-size:12px;}.popular-posts ul li,.item-content,.item-thumbnail{margin:0!important;padding:0!important;}.sixcol,.left-main,.right-sidebar{width:50%;}
#PopularPosts1 img {background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;border-radius: 110px 110px 110px 110px;padding: 4px;}

After adding the above code Save the template.

3 Step: Editing The HTML:

Now search for  <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>⋯</b:widget> You may/may not expand this code. All you have to do is replace the whole code with the code given below.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Thats it, you are done now. You and your visitors can now see this different style of Popular Posts widget on your blogger blog. 

How To Make Floating Widget on your Blog and

How To Make Floating Widget on your Blog

Floating widget is a great widget, when visitors scroll down to a website then they can see the widget bar is floating to down. I have coded this widget for all kinds of widget that can be able to make float. And more importantly it won't use any hosted JavaScript (.js) file, so it won't  affect your templates loading time. And I have use this code to make floating popular post widget. Let's go to tutorial

HOW TO FIND THE WIDGET ID

Finding your each and every widget ID is very simple. Just log into your Blogger account and visit your blog. Now you can see the QuickEdit icon on bottom left corner of the every widget.

Now Click On Right Button and Click on Copy Link Location and Paste is in Notepad.

The code will be like below--

http://www.blogger.com/rearrange?blogID=8977425861298264234&widgetType=PopularPosts&widgetId=PopularPosts1&action=editWidget&sectionId=sidebartop

Step 1 Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML

Step 3 Now Find this code </body>  by pressing  Ctrl + F

Step 4 Paste the below code  Before/above </body> 

<script>
// Floating Widget By www.bloggerspice.com
//<![CDATA[
bsfloatingwidget("PopularPosts1"); // enter your widget ID here
function bsfloatingwidget(elem) {
    var bsfloat = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bsfloat.parentNode.insertBefore(scrollee, bsfloat);
    var width = bsfloat.offsetWidth;
    var iniClass = bsfloat.className + ' bsfloat';
    window.addEventListener('scroll', bsfloating, false);
    function bsfloating() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bsfloat.className = iniClass + ' bsfloating';
            bsfloat.style.width = width + "px";
        } else {
            bsfloat.className = iniClass;
        }
    }
}
//]]>
</script>
<style>
.bsfloating {background:#f2f2f2 !important; position:fixed; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3);}
</style>

CUSTOMIZATION

• Change PopularPosts1 with widget ID.
• Change f2f2f2 for floating widget background color

Feature Post Widget Automatic ad post to feature post widget

Feature  Post Widget Automatic ad post to feature post widget 

Feature post widget . a beautiful widget for blog  feature post widget. The widget  make your blog more attractive add the feature post widget. This Widget automatically added your new post in the Widget . No needed manually add post or image in widget. This widget supported HTML/JAVA script. 

 Feature Post Widget 

How to Installed this widget in your blog. 

Log In your Blog Dashboard
 Go to Layout then add widget click here . Open New Pop-up window. and HTML/ Java script  click add 
 Paste whole code in the box.

<style type="text/css">
ul.drdsr-feat-posts *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.drdsr-feat-posts{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.drdsr-feat-posts,ul.drdsr-feat-posts li{margin:0;padding:0;list-style:none;position:relative}
ul.drdsr-feat-posts{width:300px;height:450px}
ul.drdsr-feat-posts li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.drdsr-feat-posts li:nth-child(1),ul.drdsr-feat-posts li:nth-child(2),ul.drdsr-feat-posts li:nth-child(3),ul.drdsr-feat-posts li:nth-child(4){display:block}
ul.drdsr-feat-posts img{border:0;width:100%;height:100%}
ul.drdsr-feat-posts li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.drdsr-feat-posts li:nth-child(2){left:0;top:50%}
ul.drdsr-feat-posts li:nth-child(3){left:50.5%;top:50%}
ul.drdsr-feat-posts li:nth-child(4){width:100%;left:0;top:75%}
ul.drdsr-feat-posts  .overlayx,ul.drdsr-feat-posts li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.drdsr-feat-posts .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-color: #000; 
color: #fff; 
-moz-opacity: .5; 
-khtml-opacity: .5; 
opacity: .2; 
text-align:justify;background-position:100% 50%;background-repeat:repeat-x}
ul.drdsr-feat-posts 
ul.drdsr-feat-posts li:nth-child(1) .overlayx{background-position:50% 25%}

ul.drdsr-feat-posts .overlayx:hover{-ms-filter:Alpha(Opacity=90);filter:alpha(opacity=10);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;}

ul.drdsr-feat-posts h4{position:absolute;bottom:2px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:"Segoe UI",Verdana,"Trebuchet MS",Times,"Times New Roman";font-weight:normal}

ul.drdsr-feat-posts h4{color:#fff;background-color:#000; filter:alpha(opacity=60); opacity:.6;}

ul.drdsr-feat-posts li:nth-child(1) h4{position:absolute;bottom:30px;font-size:230%;color:#fff;background-color:#000; filter:alpha(opacity=70); opacity:.7;}
ul.drdsr-feat-posts li:nth-child(4) h4{font-size:170%}
li:nth-child(2) h4{font-size:120%}
li:nth-child(3) h4{font-size:120%}
ul.drdsr-feat-posts .label_text{position:absolute;bottom:10px;left:10px;z-index:2;font-size:120%;color:#fff;font-weight:normal;background-color:#000; filter:alpha(opacity=60); opacity:.6;}
.label_text .autname{color:#fff;right:2px;padding:2px;}

ul.drdsr-feat-posts li:nth-child(2) .autname,ul.drdsr-feat-posts li:nth-child(3) .autname{display:none} li:nth-child(3) .label_text{display:none}
li:nth-child(2) .autname{display:none} li:nth-child(2) .label_text{display:none}
li:nth-child(4) .label_text{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:124px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:128px}
</style>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript" data='cfasync'></script>
<script src="http://feat-posts.googlecode.com/svn/widgetjs"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://toneysoftblog.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:200,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>

 Change blog Address Red color http://toneysoftblog.blogspot.com/
Save It . Show the result your blog 

Awesome Multi Author Box for Blog Header or Footer

Awesome Multi Author Box for Blog Header or Footer

This gadget for the blog/blogger. this widget you can show your blog under of header, or under of post footer. Installing system . First login your blog dashboard. go to template, then press edit HTML. mouse press into the template code screen, then press Ctrl+F from keyboard. now type in the search box ]]></b:skin> press enter.  paste CSS code above in ]]></b:skin>

Add this CSS code just before above code:

//**.....................toneysoftblog.......................**//

#author-box {
margin:10px 0;
}
#author-box a:hover {
background:#006633;
color: #ccc;
border-left: 5px solid #bada55;
margin-right: 0;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
-webkit-box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, 0.05);
-moz-box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, 0.05);
box-shadow: -2px 2px 4px 0 rgba(0, 0, 0, 0.05);
}
#author-box .row-1 {
background:#f3f3f3;
position: relative;
z-index: 10;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border-right:5px solid#FB8630;
margin:3px 2px 2px 3px
padding:20px;
}
#author-box .row-1 .avatar {
float:left;
line-height:1;
-moz-box-shadow:0 0 10px #FFF;
-webkit-box-shadow:5px 0 10px #FFF;
box-shadow:0 0 10px #FFF;
border-left: 5px solid #B8B8B8 ;
border-right:5px solid#B8B8B8 0;
border-top:5px solid#B8B8B8 ;
border-bottom:5px solid#B8B8B8 ;
}
#author-box .row-1 .info {
margin:0 0 0 110px;
}
#author-box .row-1 .info h6 {
color:#134f5c;
font-size:20px;
margin:-4px 0 0;
}
#author-box .row-1 .info h6 span {
font-size:22px;
font-weight:400;
background:#274e13;
-webkit-border-radius:40px;
-moz-border-radius:40px;
border-radius:40px;
filter:alpha(opacity=60);
opacity:0.6;
margin:0 0 0 1em;
padding:1px 9px 2px;
}
#author-box .row-1 .info p {
color:#DDD;
font-weight:400;
font-size:14px;
margin:0;
}
//**.....................toneysoftblog.......................**//

Follow the Picture

Next

Save template 

Again type into search box 

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

Add below code just before above line:

<div id='author-box'>
            <div class='row row-1'>
                <div class='avatar'>
                    <a href='http://www.toneysoftblog.blogspot.com/2012/09/about-author.html'><img class='avatar avatar-90 photo' expr:src='data:post.authorPhoto.url' height='90' src='Image' width='90'/></a>
                </div>
                <div class='info'>
  <h6>Posted By:<span><a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
    <data:post.author/></a></span></h6>
    <p><strong><a expr:href='data:post.url'>
                              <data:post.title/>
      </a><hr/>
      <a href='facebool.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjumghLS9vLzwgcS0CqYU3HgHFOVLwIr-PLBwp8t2qyRWIa11YzLfs8ABx5la1wEYXMjSMZ5PQhYU0B0ZOZhCkSfAUrGyzBXUCe0oxztS6Uz3m-k0uCXdTBA3c4TLatB-sh_gBblTPyEm-q/s1600/facebook.png' title='Facebook'/></a>    <a href='Twitter.com/'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIDyn8XXmPaG-18buXPTLpWpYGjZrN4jbj-dJyr_3-IQk6hWzcsXNrU4h4_wy1JWsEOtK7Ne22KUwdzlwb0Kgsn1nMuNvJTQYfciQGyUUu1oPcvN5yMVw89veAsRtL1NTnnbIAvhdAqFs3/s1600/twitter.png' title='Twitter'/></a> <a href='https://plus.google.com/'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDE6UeEP90gtJjuagSq7fyBQnkh2cmTomq1m-pyF9EN_n3KfjlN7yF7-hLPSZNQSC7dCVEWQABBZAWxUpNus6523-cx2628nzWYsCA_s1qZyZRjowyJGfe40DxTsk8xp_p81FkE7DGeQzl/s1600/gplus.png' title='Google plus'/></a> <a href='LinkedIn.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4sREfQUljZj6RdYNyYIHszdg7mQYIdDJwaUHjpFlVqgGSt0km5mZVXEF-ucoRlaV9gzkMkDRWqTTDIAUp-CjW3uO26EGPghsuXr-4rga_u9Y9IuY12m2UqovKbm3eD9JmniB_ecHFB1IC/s1600/linkedin.png' title='LinkedIn'/></a> </strong> <strong><h2><a expr:href='data:post.authorProfileaboutUrl' itemprop='author' rel='about' title='author profile'>
      <data:post.author/></a></h2></strong></p>
                </div>
                <div class='clear'/>
           </div>
    </div>

Save your template

Show the result