Showing posts with label Blogger Design. Show all posts
Showing posts with label Blogger Design. Show all posts

Multi colored random posts Widget for Blogger EXCLUSIVE.!!!!

Posted by Unknown

Multi colored random posts Widget for Blogger
Random Posts widget is an awesome widget for your Blogger Blog.We posted about How to add random posts widget, 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.This is the modified version of the Random posts widget we posted earlier, one of our visitor "Yogesh Gamer" asked me to make this widget like Multi colored Popular posts Widget. So after that I just tried and it got success. Please do check this widget and comment your suggestions...



Check out Related Articles
Awesome Random Posts Widget For Blogger
Awesome Multi-Colored Popular Posts Widget for Blogger

Features of This Widget

  •  Flat UI colors used (it will attract users attention)
  • Automatic Post Numbering

  • Sign In to Blogger Dashboard
  • Go to Layout
  • 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;
}

</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://fe-blogger.blogspot.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>


More aboutMulti colored random posts Widget for Blogger EXCLUSIVE.!!!!

Related Posts Blogger Widget and LinkedWithIn for Blogger

Posted by Unknown

Related Posts Blogger Widget and LinkedWithIn for Blogger
Related posts Widget, as the title says , this Widget will generate the list of related posts. this Widget can be added either in homepage (under each posts) or inside the post. By placing this related posts Widget, there is chance the spread the other posts to visitors and they may have a tendency to take that post from the list, it will reduce the bounce rate of your blog and will keep your visitors from suddenly quit from your blog. Let's see how to add related posts widget to Blogger



Using LinkedWithIn Widget

  • It is very simple to add LinkedWithIn Widget
  • Go to LinkedWithIn website and follow the simple instructions
  • Give e-mail id, blog url, select platform as Blogger and select number of posts should be displayed.

 Add Related Posts Manually to Blogger

  •  Sign In to Blogger Dashboard
  • Go to Template -> Edit HTML
  • Find </head> 
  • Copy the below code above </head>

<!--Related Posts with thumbnails Scripts Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'> /* remove this */
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPR1B2VmsikrE-Yljlulbmt2du8ZxzUtKDMJc8kV56c-qzFdx_Fqwa2mpwbTtseEpXiimj-Uez0pMyt15jYzzNjH_6lCut7fU5ZESG_R6TrQa4tinu_0Int8W4WV-H4eIEtGtd2wQwyi4/s400/noimage.png";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script><a href="http://fe-blogger.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
<script src='http://netoopscodes.googlecode.com/svn/netoops-related-posts-with-thumbnails-blogger.js' type='text/javascript'/>
</b:if> /* remove this */
<!--Related Posts with thumbnails Script End-->

Customization

  • RED marked - remove red marked portion to add this Widget to Homepage
  • Brown - place the URL of the image in quotes to display if there is no image in the post.
  • maxresults=5 - change the value to change the number of posts to be displayed.
  • splittercolor="#DDDDDD" - change the color of splitter line between posts. Check here to see color codes selector
  • relatedpoststitle="Related Posts" - Change the Name of title.

 Add to Post Footer

  •  Find <div class='post-footer'> and copy the below code above it
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://fe-blogger.blogspot.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN36t6euPvndc3S9MEgljTJuhwJrG4kjsw2nAe-uQSj3w2nJ_FLWh8EgczpyXgTugIia1l44KL3zZImMLlnMno9m0uIs9nRMHbYkLq7SF1PtrqTIpLJgKkgAKWS3YqkinGRtUy0ikH71s/s1600/1x1juice.png'/></a>
</b:if></b:if>
    • Remove Orange marked to add related posts to homepage too.
    • Change RED marked to change the number of posts should be displayed
    I hope this article will help you. If so please like and share our blog. You can check here more Exciting Widgets.
    More aboutRelated Posts Blogger Widget and LinkedWithIn for Blogger

    Beautiful Page Navigation for Blogger Blog [new script]

    Posted by Unknown


    page navigation for blogger
    Blogger Page Navigation is an awesome trick to navigate your Blogger Blog Pages.It allows your users to Navigate Blog pages like Book,By using this your blog visitors can easily go to an appropriate page.By default Blogger allows Older Posts and Newer Posts link to Navigate between Blog pages.It is very difficult for your users to navigate deeper into your Blog's Posts, so the Page Navigation helps us to solve this problem.
     Let's see how to install it.Follow the steps below.

    1.How to install Page Navigation Widget

    • Log In to your Blogger Account
    • Go to Design-> Page Elements(Shown in the Picture)
    • In New Blogger Template Go to Layout -> Add Gadget
    • Click on Add Gadget (anyone) and look for HTML/Javascript take it.
    • Leave the Title as Blank(as shown in the figure)
    • Copy and paste the below code in it.
    <style type='text/css'>
    #blog-pager{height: 28px;
        padding: 10px 0 0;
    overflow:hidden;
    text-align:center;
    }
    .showpageArea a {text-decoration:underline;
    font-size: 16px;
           text-align: center;}
    .showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
    .showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}

    .showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}

    .showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
    .showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
    .showpage a:hover {text-decoration:none;background: #cccccc;}
    .showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>
    <script style='text/javascript'>var pageCount=7; 
    var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><a href="http://fe-blogger.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
    <script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script>
    you can change Red Highlighted texts when you need. pageCount=7;  determines how many Blog posts in each pages. you want to display in each pages.(Note:if you change this value '7' goto Settings->Formatting and change value of Show at most as you given in PageCount)
    And displayPageNum=5 determines how many additional Page Navigation numbers display on the page.
    • Click on save,You are almost clear.
    • Then Change the position of the Widget ,place under the Blog posts.(shown in the figure)
    •  
    • Done..your blog had a page navigation bar.
    The Page Navigation had been developed by Muhammed Rias and it was a good presentation.There are some bugs in that and Abu Farhan had solved it.Give them a big thanks for giving us a Beautiful Page Navigation Solution.
    More aboutBeautiful Page Navigation for Blogger Blog [new script]

    Add Animated Ramadan Lantern Widget/Ramadan Hanging Light to Blogger?

    Posted by Unknown

    Ramadan also known as Ramzan is a holy festival of Islam. This spiritual event is celebrated by fasting(every day sunrise to sunset) for a whole month.Ramadan is the month in which was sent down the Qur'an,
    as a guide to mankind, also clear Signs for guidance and judgment between right and wrong. So everyone of you who is present during that month should spend it in fasting. In this time have you ever think about designing / decorating your blog something special. If you have a wish like that don't wait, here I am going to show a tutorial about decorating your blog with Ramadan Lanterns.

     Before revealing this tutorial I would like to thank Syed Faizan Ali of MyBloggerLab.com, he made this animated Ramadan Lantern for blog users. Not only for blogger users but also can use this to Websites or Other blogging platforms(WordPress,Drupal etc) . This animated hanging light created in flash so your browser should support Flash Player,Otherwise you have to install Flash Player. In newer Operating Systems (Windows 7, Windows 8) Flash Player already installed it.Flash Animated Ramadan Lantern in top of our blog,you can see a hanging Lantern spinning to left to right then also back with a glowing Ramadan Kareem in background. This Ramadan Lantern looks very nice in Dark backgrounds,Blue,Orange Backgrounds.
    You can see the demo in top of our Blog

    How to add Animated Ramadan Lantern ?

    • Sign In to Blogger Dashboard
    • Go to Template -> Edit HTML
    • Find (Ctrl+F) </body>
    • Copy the Following code just above it
     <!--  Ramadan Lantern fe-blogger.blogspot.com -->
    <div align='center'>
    <table border='0' cellpadding='0' cellspacing='0' width='900'>
    <tr>
    <td height='0' width='900'>
    <div style='float:top right; position:absolute; overflow:visible; left:45px; top:0px; height:192px; width:144px z-index: 9999;'><a href="http://www.fe-blogger.blogspot.com"></a><object border='0' classid='clsid:D27CDB6E-AE6D-11CF-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0' height='144' id='obj2' width='192'><param name='movie' value='http://netoopscodes.googlecode.com/svn/branches/swf/ramzan-hanging-lanterns.swf'/><param name='quality' value='High'/><param name='wmode' value='transparent'/><embed height='144' name='obj2' pluginspage='http://www.macromedia.com/go/getflashplayer' quality='High' src='http://netoopscodes.googlecode.com/svn/branches/swf/ramzan-hanging-lanterns.swf' type='application/x-shockwave-flash' width='192' wmode='transparent'/></object>
    </div>
    </td>
    </tr>
    </table>
    </div>
    <!--  Ramadan Lantern By fe-blogger.blogspot.com -->
    Click on  Save. It's done. Check your Blog
    Here I  am posting this article in this holy occasion of Ramadan not only to reveal this trick but also to show respect ,Kindness to the atmosphere filled with spirit of mirth and love of Ramadan. In this holy occasion I heartily wishing you a Happy Ramadan.
    More aboutAdd Animated Ramadan Lantern Widget/Ramadan Hanging Light to Blogger?

    Head banner image changing on reload for Blogger Blog

    Posted by Unknown


    Head banner image changing on reload for Blogger Blog


    Today i am saying about an interesting thing .Head banner changing trick for blogger
    This is a simple blogger hack.when you add this, your blogger blog's header image will change after RELOAD the webpage on your browser.
     Follow the instructions :)

    • Sign In to your blogger account.
    • Go to Template->Edit HTML
    • Find ]]></b:skin> and paste the following code before it.
    #header {
    background: url("your header image url in quotes") no-repeat left bottom;
    margin:0;
    padding:2px;
    }
    • Then copy the below script  and place above the </head> tag:

    <script type="text/javascript">
    var banner= new Array();

    banner[0]="1st image url";
    banner[1]="2nd image url";
    banner[2]="3rd image url";
    banner[3]="4th image url";
    banner[4]="5th image url";
    var random=Math.round(4*Math.random());

    document.write("<style>");
    document.write("#header {");
    document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
    document.write(" }");
    document.write("</style>");
    </script>
    you are done...:)
    If any problem with this blogger trick please leave comment,don't hesitate to ask,we are happy to help you:)
    More aboutHead banner image changing on reload for Blogger Blog

    Awesome Random Posts Widget for blogger Blog

    Posted by Unknown

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






    Install Random posts widget

    Make sure you are Sign In to your Blogger Account.

    If you are a beginner in Blogger Editing ,use our one click Widget
    • Click the below Add to Blogger Button to install

    Manually Add Random posts Widget

    • Sign In to your Blogger Account.
    • Go to Design->Page Elements
    • Click on Add Gadget and look for HTML/Javascript take it
    • Give the title as you need(eg:Random Posts)
    • Copy and paste the below code to the content section
    <style type="text/css">
    .noop-random-posts ul li {
        list-style-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaO8Vp91KmGdU5ySxdA2gEr_alZVZjZbCVWEMt6JMyzPOHtMU4iT6lwJfO7o1AiYFV88JqG6EMUDDkg1SZUxugM5yADdmmYTpWTR1xrD43ENvbti28raO_2Wvn0KnrQZ-LQKcB5i-7Oxs/s1600/tick+list+style.png");
    }
    </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://fe-blogger.blogspot.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>

    Click on Save and its Done...If you have any doubts don't hesitate to ask.Please Comment.
    I hope you had enjoyed this post.Leave Comments...
    More aboutAwesome Random Posts Widget for blogger Blog