Advertise

Showing posts with label Blogger Widgets. Show all posts
Showing posts with label Blogger Widgets. Show all posts
Thursday, 25 July 2013

Latest Blogger Widget : Static Menu Bar For Blogger

Posted by Unknown at 22:49 0 comments

Categories :

.


Hi Friends,

    In This Topic We Discuss About Latest Blogger Widget : Static Menu Bar For Blogger like my Website.


Step by Step Process How to add Static Menu Bar For Blogger

Step 1 :    Login to Blogger

Step 2:    Go to Dashboard >> Select the Template >> Click on Edit HTML

Step 3 :    Search for Below Code
]]></b:skin>

Step 4 :    After that Replce With Following Code.

.mashmenu ul { text-align: left; display: inline; margin: 0; padding: 15px 4px 17px 0; list-style: none; } .mashmenu ul li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; padding: 15px 20px; background: #2ea0cb; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;z-index:999999999999999; } .mashmenu ul li:hover { background: #ddf0f9; color: #fff; } .mashmenu ul li ul { padding: 0; position: absolute; top: 48px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } .mashmenu ul li ul li { background: #2ea0cb; display: block; color: #fff; } .mashmenu ul li ul li:hover { background: #ddf0f9; } .mashmenu ul li:hover ul { display: block; opacity: 1; visibility: visible; } .mashmenu a{ color:white; text-decoration:none; font-size: 14px; font-family: 'Nova Flat', cursive; text-transform: uppercase; } .mashmenu a:hover{ color: #0c74a6; } .mashmenu{ background: #2ea0cb; position:fixed; width:100%;z-index:999999999999999; -webkit-box-shadow: rgba(0,0,0,0.3) 0 2px 2px -1px; -moz-box-shadow: rgba(0,0,0,0.3) 0 2px 2px -1px; box-shadow: rgba(0,0,0,0.3) 0 2px 2px -1px; } 

]]></b:skin>
Step 5 :    Next, Search for
<body>

Step 6 :    Copy and Paste Below Code After <body> 
<div class='mashmenu'><ul>
           <li><a href='http://www.forlatestinformation.com'>Home</a></li>  
            <li><a href='http://www.forlatestinformation.com/search/label/Blogger%20Widgets'>Blogger</a>
<ul>
<li><a href='http://www.forlatestinformation.com/search/label/SEO'>SEO</a> </li>
<li><a href='http://www.forlatestinformation.com/search/label/Blogger%20Tips'>Blogger Tips</a> </li>
<li><a href='http://www.forlatestinformation.com/search/label/Blogger%20Templates'>Templates</a> </li>
              </ul>
 </li>
             <li><a href='http://www.forlatestinformation.com/search/label/Top%2010'>Top 10</a>
<ul>
<li><a href='http://www.forlatestinformation.com/search/label/Wonders'>World Wonders</a></li>
<li><a href='http://www.forlatestinformation.com/search/label/Beautiful%20places'>Beautiful Places</a></li>
               </ul>
</li>
            
            
<li><a href='http://www.forlatestinformation.com/search/label/Gods'>Gallery</a>
<ul>
<li><a href='http://www.forlatestinformation.com/search/label/Gods'>Gods</a></li>
            <li><a href='http://www.forlatestinformation.com/search/label/Hot'>Wallpapers</a></li>
<li><a href='http://www.forlatestinformation.com/search/label/Movies'>Movies</a></li>
  </ul>
</li>
        <li><a href='http://www.forlatestinformation.com/search/label/Gossips'>Gossips</a></li>    
            <li><a href='http://www.forlatestinformation.com/search/label/Review'>Reviews</a></li>
<li><a href='http://www.forlatestinformation.com/2013/06/privacy-policy.html'>Privacy</a></li>
 <li><a href='http://www.forlatestinformation.com/2013/06/Latest-Information-Contact-Form.html'>Contact</a></li>
         </ul>
</div>

Step 7 :    Save Template.


Thank You.
Happy Blogging.
Write Your Comments Below.


Read more...
Monday, 1 July 2013

Latest Information : What are the Most Popular Topics For Blogging

Posted by Unknown at 05:09 0 comments

Categories :

.


Before begin blogging you have got to information of some topics on that you'll post an oversized range of contemporary, distinctive and exquisite content. If you wish to make a blog and become a blogger than it's vital to possess multiple concepts on totally different classes. Blogging is increasing day by day and plenty of of blogs and sites ar ruined simply because to not post a high quality content. several of the skilled bloggers are whining that their sites or blogs ar stopped earning. Some folks forget their talent and to not posting on their blogs or sites. the rationale of of these is you don’t have an {ideal} idea and begin blogging and that’s not smart. you have got to 1st improve your writing skills and opt for a subject on that you'll write and be up thus far as a result of the web world is increasing day by day and new technologies seems. Here are some topics that Latest Information : What are the Most Popular Topics For Blogging.

Health & Beauty Tips

Health Beauty tips blog could be a smart possibility as a result of many of us face several unwellness  and if you're doctor or a artificer then you want to need to opt for a Health Beauty  tips blog.  If you're simply a traditional person then it doesn’t matter you will build a blog on Health,   Fitness and wonder tips blog as a result of virtually fashion, fitness and health tips blog ar most well liked in several countries.  If you write blog on this subject then you web site should be in style terribly very short time however the condition is you have got to form your site up thus far.

Blogging Tips & Tricks Latest Information : What are the Most Popular Topics For Blogging

Fashion

Health Beauty Tips blog ar restricted and visited by UN agency|those that|people who face diseases and people who ar fascinating in fitness. however the style blogs ar visited by an oversized range of individuals. as a result of every one wish to grasp the most recent fashion and latest fashion wears. folks everywhere within the world use web to grasp additional regarding the most recent fashion tweaks. I additionally visited several fashion blog and notice this image from a fashion clicks blog. several fashion blogs have an oversized range of daily guests as a result of the tell their guests all regarding new fashion wears.


Blogging Tips & Tricks Latest Information : What are the Most Popular Topics For Blogging

Celebrities & Entertainment

celebrities blogThe trend is dynamic  each moment many of us wish to grasp additional regarding their favorite celebrities and realize the gossips. folks additionally realize reviews, news, gossips and every one regarding their favorite celebrities. many of us wish to push their page on social media they use to form pages on celebrities as a result of celebrities page ar most well liked on social media.

Technology  Blog

The most in style topic is technology as a result of the planet of technology. the planet goes could be a pure technical world and if you wish succeeded you have got to remain up thus far with new technologies. several technology web site build thousands greenbacks of a month and 1,000,000 greenbacks of a year. once a replacement technology or device introduced all wish to grasp regarding it and if you write this device the an oversized range of traffic coming your web site. So, Technology blog could be a smart plan to form Associate in Nursing blog thereon.


Blogging Tips & Tricks Blog


Blogging Tips & Tricks Latest Information : What are the Most Popular Topics For Blogging

The field of Blogging is increasing each moment and each person wish to relate with  blogging. thus creating a web site} on Blogging tips  tricks could be a nice and big platform to settle on and attract folks regarding your site / blog. each entrant blogger wish to grasp additional regarding blogging and new blogger technology. If, you create a web site thereon and post a high quality content and new product of Blogger and different technology platforms. If you wish to form a blogging tips blog then you have got to basic information of markup language, CSS, and different internet Development languages.
All the on top of discussion is for build an inspiration of Blogging in your mind. opt for the one in every of the on top of topic and be genius and distill web site and earn cash.


 Thank You.
Have a Pleasant Day.
Write Your Comments Below.



Read more...
Tuesday, 25 June 2013

Latest Information : How to add Random Posts Widget with Summaries for Blogspot/Blogger

Posted by Unknown at 04:48 0 comments

Categories :

.

Hi Friends,
    In This Topic We Discuss About Latest Information : How to add Random Posts Widget with Summaries for Blogspot/Blogger


 Preview :
  Latest Information : How to add Random Posts Widget with Summaries for Blogspot/Blogger

Step by Step Process How to add Random Posts Widget with Summaries for Blogspot/Blogger

Step 1 :    Login to Blogger

Step 2 :    Go to Layout >> Click Add Widget >> Select HTML/JavaScript

Step 3 :    After that Copy the Below Code and Paste in Content Block
<script type="text/javascript">var randarray=new Array();var l=0;var flag;var numofpost=10;var wordnumber=5;</script><script style="text/javascript" src="http://yourjavascript.com/16621523381/latest-information-random-posts-widget.js"></script><script src="/feeds/posts/summary?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> <a href='http://www.forlatestinformation.com'><img style='border: 0px;padding:0;background:none;' src='http://img1.blogblog.com/img/blank.gif'/></a>



Step 4 :    Save Widget


Thank You.
Happy Blogging.
Write Your Comments Below.


Read more...

Latest Information : How to add Blog Statistics Widget for Blogspot/Blogger

Posted by Unknown at 04:25 0 comments

Categories :

.

Hi Friends,
    In This Topic We Discuss About Latest Information : How to add Blog Statistics Widget for Blogspot/Blogger

Preview :
Latest Information : How to add Blog Statistics Widget for Blogspot/Blogger


Step by Step Process How to add Blog Statistics Widget for Blogspot/Blogger

Step 1 :    Login to Blogger

Step 2 :    Go to Layout >> Click Add Widget >> Select HTML/JavaScript

Step 3 :    After that Copy the Below Code and Paste in Content Block
<script type="text/javascript">
function latestinformationnumberofposts(json) {document.write('Total Posts : ' + json.feed.openSearch$totalResults.$t + '<br/>');}
function latestinformationnumberofcomments(json) {document.write('Total Comments : ' + json.feed.openSearch$totalResults.$t );}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=latestinformationnumberofposts"></script>
<script src="/feeds/comments/summary?alt=json-in-script&callback=latestinformationnumberofcomments"></script>
<a href='http://www.forlatestinformation.com'><img style='border: 0px;padding:0;background:none;' src='http://img1.blogblog.com/img/blank.gif'/></a>

Step 4 :    Save Widget


Thank You.
Happy Blogging.
Write Your Comments Below.


Read more...

Latest Information : How to add Beautiful Page Navigation Widget for Blogspot/Blogger

Posted by Unknown at 03:09 0 comments

Categories :

.


Hi Friends,
    In This Topic We Discuss About Latest Information : How to add Beautiful Page Navigation Widget for Blogspot/Blogger

Preview :

Step by Step Process How to add Beautiful Page Navigation Widget for Blogspot/Blogger

Step 1 :    Login to Blogger

 Step 2:    Go to Dashboard >> Select the Template >> Click on Edit HTML

 Step 3 :    Search for Below Code

</head>

Step 4 :    After that Add the below line of code before </head> tag.

    <style type="text/css">
        .showpageArea{padding:10px;color : #003366;text-align : left;width : 100%;}
        .showpage a {float:left;background:url(http://1.bp.blogspot.com/-TdRwMLwclgk/UclgVwZqH1I/AAAAAAAAAX8/Wpr-3-PZNeY/s1600/Latest+information-button.gif) no-repeat 0 0;text-align : center;width : 127px;height : 42px;text-align : center;display : block;margin : 0 5px;color : #333;padding-top : 6px;}
        .showpage a:hover {color : #333;margin : 0 5px;padding-top : 6px;}
        .showpageOf{float:left;padding-top : 6px;}
        .showpageNum a {background:url(http://4.bp.blogspot.com/-TEWcGaQnbLI/UclgVz9L6UI/AAAAAAAAAYA/YBvGwVzcpqY/s1600/Latest+information+-pagenum.gif) no-repeat 0 0;width : 37px;height : 42px;display : block;text-align : center;float : left;margin : 0 5px;padding-top : 6px;text-decoration : none;color : #333;}
        .showpageNum a:hover {background : url(http://4.bp.blogspot.com/-TEWcGaQnbLI/UclgVz9L6UI/AAAAAAAAAYA/YBvGwVzcpqY/s1600/Latest+information+-pagenum.gif) no-repeat 0 100%;color : #fff;}
        .showpagePoint {background : url(http://4.bp.blogspot.com/-TEWcGaQnbLI/UclgVz9L6UI/AAAAAAAAAYA/YBvGwVzcpqY/s1600/Latest+information+-pagenum.gif) no-repeat 0 100%;width : 37px;height : 42px;display : block;float : left;text-align : center;margin : 0 5px;padding-top : 6px;font-weight : bold;color : #fff;}
        .showpageNum a:link, .showpage a:link {text-decoration : none;color : #cc0000;}
    </style>
    <script style='text/javascript'>
    var pageCount=5;
    var displayPageNum=1;
    var upPageWord="Previous";
    var downPageWord="Next";
    </script>
    <script type='text/javascript' src="http://yourjavascript.com/35314262015/latest-information-beautiful-page-navigation.js"/>

   Note : #var pageCount=5; ~ Number of posts per page

 Step 5 :    Save Template


 Thank You.
Happy Blogging.
Write Your Comments Below.
Read more...
Wednesday, 19 June 2013

Latest Information : How to add Auto Scrolling Recent Posts Widget for Blogspot/Blogger

Posted by Unknown at 05:50 0 comments

Categories :

.

Hi Friends,
    In This Topic We Discuss About Latest Information : How to add Auto Scrolling Recent Posts Widget for Blogspot/Blogger

Preview :


Step by Step Process How to add Auto Scrolling Recent Posts Widget for Blogspot/Blogger

Step 1 :    Login to Blogger

Step 2 :    Go to Layout >> Click Add Widget >> Select HTML/JavaScript

Step 3 :    After that Copy the Below Code and Paste in Content Block
<script type="text/javascript">
 var nMaxPosts =10;
        var nWidth = 100;
        var nScrollDelay = 50;
        var sDirection = "left";
        var sOpenLinkLocation = "N";
        var sBulletChar = ">>>";
</script>
<script type="text/javascript" src="http://yourjavascript.com/43231566164/latest-information-auto-scrolling-recent-posts-123.js"></script>
<script src="http://www.forlatestinformation.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10" type="text/javascript"></script>

Note :    Change www.forlatestinformation.com to Your Website/Blogger Home Page.

Step 4 :    Save Widget


Thank You.
Happy Blogging.
Write Your Comments Below.


Read more...
Tuesday, 18 June 2013

Latest Information : How to Replace Home, Older & Newer Navigation Links with Image Buttons for Blogspot/Blogger

Posted by Unknown at 03:32 0 comments

Categories :

. .

Hi Friends,
    In This Topic We Discuss About Latest Information : How to Replace Home, Older & Newer Navigation Links with Image Buttons for Blogspot/Blogger

Step by Step Process How to Replace Home, Older & Newer Navigation Links with Image Buttons for Blogspot/Blogger

Step 1 :    Login to Blogger

Step 2:    Go to Dashboard >> Select the Template >> Click on Edit HTML

Step 3 :    Search for Below Code
<data:olderPageTitle/>
Step 4 :    After that Replace With Below Code.
    <img src='http://3.bp.blogspot.com/-cbo2PpDeYhM/UcAP_KVmLiI/AAAAAAAAAU0/gA6Xdp2VF3s/s1600/latestinformation_next.png' style='border: 0 none;vertical-align: middle;'/>
Step 5 :    Next, Search for Below Code
<data:newerPageTitle/>
Step 6 :    After that Replace With Below Code.
<img src='http://1.bp.blogspot.com/-TUR5Ur5pmGY/UcAP_LK8LfI/AAAAAAAAAU8/ZyROikHuC_E/s1600/Latestinformation_prev.png' style='border: 0 none;vertical-align: middle;'/>
Step 7 :    Next, Search for Below Code
<data:homeMsg/>
Step 8 :    After that Replace With Below Code.
<img src='http://4.bp.blogspot.com/-PFHJAjYZbGI/UcAP_G4J6aI/AAAAAAAAAUw/yPb4XUyvlec/s1600/Latestinformation_home.png' style='border: 0 none;vertical-align: middle;'/>
Step 9 :    Save Widget

Note :    You can change your own icons by replacing the image Url in the above three codes.

Thank You.
Happy Blogging.
Write Your Comments Below.
Read more...

Latest Information : How to add Recent Comments Widget with Avatar/Image for Blogspot/Blogger

Posted by Unknown at 03:27 0 comments

Categories :

.

Hi Friends,
    In This Topic We Discuss About Latest Information : How to add Recent Comments Widget with Avatar/Image for Blogspot/Blogger

Step by Step Process How to add Recent Comments Widget with Avatar/Image for Blogspot/Blogger

Step 1 :    Login to Blogger

Step 2 :    Go to Layout >> Click Add Widget >> Select HTML/JavaScript

Step 3 :    After that Copy the Below Code and Paste in Content Block
<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
    numComments     = 5,
    showAvatar     = true,
    avatarSize     = 60,
    roundAvatar    = true,
    characters     = 40,
    showMorelink    = false,
    moreLinktext    = "More »",
    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-recent-comments-gravatar.js"></script>
<script type="text/javascript" src="http://www.forlatestinformation.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
Note :    Change www.forlatestinformation.com toYour Website/Blogger Home Page.

Step 4 :    Save Widget

Thank You.
Happy Blogging.
Write Your Comments Below.
Read more...

Latest Information : How to add 3D Label Cloud Widget for Blogspot/Blogger

Posted by Unknown at 03:23 0 comments

Categories :

.

Hi Friends,
    In This Topic We Discuss About Latest Information : How to add 3D Label Cloud Widget for Blogspot/Blogger

Step by Step Process How to add 3D Label Cloud Widget for Blogspot/Blogger

Step 1 :    Login to Blogger

Step 2 :    Go to Layout >> Click Add Widget >> Select HTML/JavaScript

Step 3 :    After that Copy the Below Code and Paste in Content Block
<div id="w2bFlashContent"><p style="display:none;">Flash Labels by <a href="http://www.forlatestinformation.com/">For Latest Information</a></p></div>
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
    blogurl        : "http://www.forlatestinformation.com/",
    color          : "000000",
    hoverColor     : "333333",
    backgroundColor: "FFFFFF",
    size           : 12,
    speed          : 100,
    width          : 250,
    height         : 300,
    transparency   : true
};
/*]]>*/
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-new-flash-label-cloud.js"></script>

Note :    Change blogurl to Your Website/Blogger Home Page.

Step 4 :    Save Widget

Thank You.
Happy Blogging.
Write Your Comments Below.
Read more...

Latest Information : How to add Facebook Fans Page Subscription Widget for Blogspot/Blogger

Posted by Unknown at 03:19 0 comments

Categories :

.

Hi Friends,
    In This Topic We Discuss About Latest Information : How to add Facebook Fans Page Subscription Widget for Blogspot/Blogger

Step by Step Process How to add Facebook Fans Page Subscription Widget for Blogspot/Blogger

Step 1 :    Login to Blogger

Step 2:    Go to Dashboard >> Select the Template >> Click on Edit HTML

Step 3 :    Search for Below Code
</head>
Step 4 :    After that Add the below line of code before </head> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Step 5 :    Save Template.

Step 6 :    Go to Layout >> Click Add Widget >> Select HTML/JavaScript

Step 7 :    After that Copy the Below Code and Paste in Content Block
   
<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;right: -47px;width: 47px;background-image: url("http://4.bp.blogspot.com/-Gk5xCSiXrlY/UcANYuo8e7I/AAAAAAAAAUg/AKkOIvw7sqE/s1600/LatestInformation_vertical-left.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-right-radius: 8px;-webkit-border-bottom-right-radius: 8px;-moz-border-radius-topright: 8px;-moz-border-radius-bottomright: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({left: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    left: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    left: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div> 
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fforlatestinformation&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#F5EBF5;" allowtransparency="true"></iframe>
</div>
Note :    Change forlatestinformation to Your FB Fans Page Name.

Step 8 :    Save Widget

Thank You.
Happy Blogging.
Write Your Comments Below.

Read more...
Monday, 17 June 2013

Latest Information : How to add Categories/Label Dropdown Box for Blogspot/Blogger

Posted by Unknown at 02:13 0 comments

Categories :

.


Hi Friends,
    In This Topic We Discuss About Latest Information : How to add Categories/Label Dropdown Box  for Blogspot/Blogger

Step by Step Process How to add Categories/Label Dropdown Box for Blogspot/Blogger

Step 1 :    Login to Blogger

Step 2:    Go to Dashboard >> Select the Template >> Click on Edit HTML

Step 3 :    Search for Below Code

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Step 4 :    After that Replce With Following Code.
    <b:widget id='Label1' locked='false' title='Categories' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>

    <br/>
    <select onchange='location=this.options[this.selectedIndex].value;' style='width:180px;'>
    <option>Select a Category Here</option>
    <b:loop values='data:labels' var='label'>
    <option expr:value='data:label.url'><data:label.name/>
    (<data:label.count/>)
    </option>
    </b:loop>
    </select>
    </div>
    </b:includable>
    </b:widget>
Step 5 :    Save Template.


Thank You.
Happy Blogging.
Write Your Comments Below.



Read more...

Latest Information : How to add Floating Menu Bar for Blogspot/Blogger

Posted by Unknown at 02:03 0 comments

Categories :

.


Hi Friends,
    In This Topic We Discuss About Latest Information : How to add Floating Menu Bar for Blogspot/Blogger

Preview



Step by Step Process How to add Floating Menu Bar for Blogspot/Blogger

Step 1 :    Login to Blogger

Step 2:    Go to Dashboard >> Select the Template >> Click on Edit HTML

Step 3 :    Search for Below Code
</head>
Step 4 :    After that Replce With Following Code.
<style>

#wctopdropcont{
  width:100%;
  height:40px;
  display:block;
  padding:0;
  margin:0 0 22px 0;

 z-index:100;
  top:0px;
left:0px;
 position:fixed;
    box-shadow:2px 2px 5px  #444444;
-moz-box-box-shadow:2px 2px 5px  #444444;
-web-kit-box-shadow:2px 2px 5px  #444444;
-goog-ms-box-shadow:2px 2px 5px  #444444;
background:#180000;
}

#wctopdropnav{
  float:left;
  width:700px;
  height:40px;
  display:block;
  padding:0;
  margin-left:40px;
}

#wctopdropnav ul{
  float:left;
  margin:0;
  padding:0;

}

#wctopdropnav li{
  float:left;
  list-style:none;
  line-height:40px;
  margin:0;
  padding:0
background:#180000;

}

#wctopdropnav li a, #wctopdropnav li a:link{
  color:#fff;
  display:block;
  margin:0;
font:16px georgia, verdana;
  padding:10px;
  text-decoration:none;
}

#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a  {
  color:#fff;
  padding:10px;
background: rgb(180,223,91); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(180,223,91,1) 0%, rgba(180,223,91,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,223,91,1)), color-stop(100%,rgba(180,223,91,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=0 ); /* IE6-9 */
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
  font-size: 12px;
background:#180000;
  color: #fff;
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
}

#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
  color: #fff;
background: rgb(180,223,91); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(180,223,91,1) 0%, rgba(180,223,91,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,223,91,1)), color-stop(100%,rgba(180,223,91,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=0 ); /* IE6-9 */
}

#wctopdropnav li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:170px;
  margin:0px;
  padding:0px
}

#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
  left:auto
}

#wctopdropnav li:hover, #wctopdropnav li.sfhover{
  position:static
}
#wctopdropsoc {
  float:right;
  width:220px;
  padding:0px 0px ;
  margin:9px 10px 0px 0px;
   }
#wctopdropsoc img
{
margin-left:5px;
margin-top:-2px;
height:26px;
border:none;
}

</style>
</head>
Step 5 :    Next,Search for 
<home>
Step 6 :    Copy and Paste Below Code After <home>

  <div id='wctopdropcont'>
     <div id='wctopdropnav'>
         <ul>
           <li><a href='www.forlatestinformation.com'>Home</a></li>
           <li><a href='#'>About us</a></li>    
           
           <li><a href='#'>Tools</a>
               <ul>
                  <li><a href='#'>Item 1</a></li>
                  <li><a href='#'>Item 2</a></li>
                  <li><a href='#'>Item 3</a></li>
                  <li><a href='#'>Item 4</a></li>
                  
               </ul>
           </li>
    <li><a href='#'>Categories</a>
              
             <ul>
                  <li><a href='#'>Widgets</a></li>
                  <li><a href='#'>Templates</a></li>
                  <li><a href='#'>SEO</a></li>
                  <li><a href='#'>Wordpress</a></li>
                  <li><a href='#'>Blogger</a></li>
                  <li><a href='#'>Customization</a></li>
               </ul>
           </li>
             <li><a href='#'>Contact us</a>           
           </li>
         </ul>
      </div>

      <div id='wctopdropsoc'>
         
<a href='http://feeds.feedburner.com/forlatestinformation' target='_blank'><img alt='Subcribe to our RSS feeds' src='http://2.bp.blogspot.com/-ea9ILzszTF0/UR3ySvlxd0I/AAAAAAAABMQ/4QBrWHbt0FU/s1600/feed.png'/></a>
<a href='http://www.facebook.com/Forlatestinformation' target='_blank'><img alt='Join Us on Facebook' src='http://1.bp.blogspot.com/-3wW_EmAR24w/UR3tVFL5fFI/AAAAAAAABLc/RMS76XM5sK8/s1600/fbb.png'/></a>
<a href='https://twitter.com/forlatestinfo' target='_blank'><img alt='Follow us on Twitter' src='http://1.bp.blogspot.com/-wSCdvgK8Ctw/UR3tWusvgyI/AAAAAAAABL0/FY3nUvdlJx0/s1600/tww.png'/></a>
<a href='https://plus.google.com/115831734681785634786' target='_blank'><img alt='Add to Circles' src='http://1.bp.blogspot.com/-YWI0K2Ebh2Q/UR3tVS1gDhI/AAAAAAAABLk/8hYaD0Yur_k/s1600/gpp.png'/></a>

      </div>
   </div>

Step 7 :    Save Template.

Thank You.
Happy Blogging.
Write Your Comments Below.
Read more...
Tuesday, 11 June 2013

Latest Information : How to add Awesome Search Box Widget for Blogspot/Blogger

Posted by Unknown at 04:56 0 comments

Categories :

.

Hi Friends,
    In This Topic We Discuss About Latest Information : How to add Awesome Search Box Widget for Blogspot/Blogger

Preview


Step by Step Process to add Search Box Widget for Blogspot/Blogger ?

Step 1 :    Login to Blogger

Step 2:    Go to Dashboard >> Select the Template >> Click on Edit HTML

Step 3 :    Search for Below Code
]]></b:skin> tag

Don't Forget : 
How to add Social Network Subscription Widget for Blogspot/Blogger
How to add Social Network Subscription Widget for Blogspot/Blogger - See more at: http://www.forlatestinformation.com/2013/06/latest-information-how-to-add-social.html#sthash.Ui4tB9yH.dpuf
How to add Social Network Subscription Widget for Blogspot/Blogger - See more at: http://www.forlatestinformation.com/2013/06/latest-information-how-to-add-social.html#sthash.Ui4tB9yH.dpuf

Step 4 :    After that Replce With Following Code.
#LatestInfoSearch {
    display: block;
    clear: both;
    margin: 10px 0;
}

#LatestInfoSearch #LatestInfoinput {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTp-O1C-B5qwPCw6JrN2Rf5a8x5Vy1ZbIkJ2bSEye8TzliW7716jVkUj3I9imMcfWX-14MeaShduhTA14Zk-SfRfoKhcf-rxTkbRvVILkPsIyDN52yO5pczE45038PtwA_1KU4mItXzpGV/s20/Search-icon.png") no-repeat scroll 8px center transparent !important;
    padding: 7px 15px 7px 35px !important;
    color: #444;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #D3D3D3 !important;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    -webkit-box-shadow: 1px 1px 2px #CCC inset;
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    box-shadow: 1px 1px 2px #CCC inset;
}

#LatestInfoSearch #LatestInfosubmit {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    padding: 6px 15px;
    border: 1px solid #D3D3D3;
    cursor: pointer;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    background: #fbfbfb;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
    background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
    background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

Step 5 :    Save Template.

Step 6 :    Go to Layout >> Click Add Widget >> Select HTML/JavaScript

Step 7 :    Give Title as Search Here

Step 8 :    After that Copy the Below Code and Paste in Content Block

<div id="LatestInfoSearch">
    <form action="/search">
        <input type="text" name="q" id="LatestInfoinput" />
        <input type="submit" value="Search" id="LatestInfosubmit"/>
    </form>
</div>
Step 9 :    Save Widget.

Thank You.
Happy Blogging.
Write Your Comments Below.

Read more...

Latest Information : How to add Social Network Subscription Widget for Blogspot/Blogger

Posted by Unknown at 02:10 0 comments

Categories :

.

Hi Friends,
    In This Topic We Discuss About Latest Information : How to add Social Network Subscription Widget for Blogspot/Blogger

Preview


Step by Step Process How to add Social Subscription Widget for Blogspot/Blogger

Step 1 :    Login to Blogger

Step 2:    Go to Dashboard >> Select the Template >> Click on Edit HTML

Step 3 :    Search for Below Code
]]></b:skin>

Step 4 :    After that Replce With Following Code.
    @import url("http://fonts.googleapis.com/css?family=Oswald&amp;text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");
.LatestinfoOldSocial ul {
 font-family: 'Oswald', sans-serif;
 margin: 15px 0;
 overflow: hidden;
}
.LatestinfoOldSocial ul li {
 float: left;
 width: 90px;
 padding: 0 0 0 55px !important;
 margin: 0 0 0 5px !important;
 line-height: 48px !important;
}
.LatestinfoOldSocial ul li a {
 font-size: 20px !important;
 text-decoration:none;
 padding:0 !important;
 margin:0 !important;
 text-decoration:none;
}
.LatestinfoOldSocial ul li a:hover {
 text-decoration:underline;
}
.LatestinfoOldSocial ul li.Latestinforss {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjquYnRIg08-P9GClNUzNCIFGCmEHNo83Gz8wHA4TCLeD9oo-uglDEM_Y07wVXDBw7cjCyflfyHOuWG4CoklJtA_B3dD9uIY9Wa_rIoOcTeEywTDf6rzxaXuoRJ9P3rMhh9BIPWNIAs7onc/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.LatestinfoOldSocial ul li.Latestinfomail {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-B-63PNGv1un-KqKmDpEJ0WzHKXcaxvaqC_LZqX3BJocVI_1kjJd6f6-IibaUfXZCCAN3UVkwS2SJstjN1Je1NkqDh5Nr0eEazaMyy07M6pAe8tOqVGJeXE4gQLQwjIQCqmGER8Vvqna/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.LatestinfoOldSocial ul li.Latestinfotwitter {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguBJ1C8W61Mh8kdQMeYdjYTk7baxW3Ahp6QB4b5aBtcyx0OPHpjc96N3V-V9YcEdRd_3g8YpJ6vfR8OYJ0f5SY6-08TYXCSSl73VfV2Y-242S1UT1lXwUmdgzbPLE4pSI8GNPGdddohP-u/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.LatestinfoOldSocial ul li.Latestinfofacebook {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1zzdWkrzaRYqilpbvCByRK5jYMghk8FRRQ4R_fM0IBo7uDQvnDPvbriubEbYtlkDqJQSUG_gw1UlNE_qfvFRhCg4mWmJz7K08xhpgmt2HkNU4rHVwGufnNb65jY6HN0_VA2GLK4fhyphenhyphenROH/s48/Facebook.png") no-repeat scroll left center transparent !important;
}
#LatestinfoEmailsub {
 display: block;
 clear: both;
 margin: 10px 0;
}
form.LatestinfoEmailform {
 margin: 20px 0 0;
 display: block;
 clear: both;
}
.emailText {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCrs_FWZ5PCOeFy_RXpUK4LNMrNCZ6zCZqStdaMQHSDdf9YbdnsDcCc4d6YQOhl4uogVT7kL4qrfHFfGQnqQIRpe3Sawh449JdnG4nhzjZTzOayY5LBL1nwl5iUAG-YlkQ3geWskMx5w9R/s28/Latestinfo-mail.png") no-repeat scroll 4px center transparent;
 padding: 7px 15px 7px 35px;
 color: #444;
 font-weight: bold;
 text-decoration: none;
 border: 1px solid #D3D3D3;

 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;

 -webkit-box-shadow: 1px 1px 2px #CCC inset;
 -moz-box-shadow: 1px 1px 2px #CCC inset;
 box-shadow: 1px 1px 2px #CCC inset;
}
.emailButton {
 color: #444;
 font-weight: bold;
 text-decoration: none;
 padding: 6px 15px;
 border: 1px solid #D3D3D3;
 cursor: pointer;

 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;

 background: #fbfbfb;
 background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
 background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
 background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
    ]]></b:skin>

Step 5 :    Save Template.

Step 6 :    Go to Layout >> Click Add Widget >> Select HTML/JavaScript

Step 7 :    Give Title as Subscribe Us

Step 8 :    After that Copy the Below Code and Paste in Content Block
  
    <div class="LatestinfoOldSocial">
 <ul>
  <li class="Latestinforss"><a href="http://feeds.feedburner.com/forlatestinformation">RSS</a></li>
  <li class="Latestinfomail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=forlatestinformation" >Email</a></li>
  <li class="Latestinfotwitter"><a href="http://twitter.com/forlatestinfo">Twitter</a></li>
  <li class="Latestinfofacebook"><a href="http://facebook.com/Forlatestinformation">Facebook</a></li>
 </ul>
</div>
<div id="LatestinfoEmailsub">
 <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=forlatestinformation', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="LatestinfoEmailform">
  <input type="hidden" value="Way2blogging" name="uri" />
  <input type="hidden" name="loc" value="en_US" />
  <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailText" />
  <input type="submit" class="emailButton" value="SignUp" title='' />
 </form>
</div>

  Note :
    After adding above Widget code Customize the RSS, twitter and other URLs as follows.!
        http://feeds.feedburner.com/forlatestinformation with your feedburner url
        http://feedburner.google.com/fb/a/mailverify?uri=forlatestinformation change the Feedburner ID
        http://twitter.com/forlatestinformation with your Twitter URL
        http://facebook.com/forlatestinformation with your Facebook Page URL
        <input type="hidden" value="forlatestinformation" name="uri" /> change the Feedburner ID with yours.

Step 9 :    Save Widget.

Thank You.
Happy Blogging.
Write Your Comments Below.


Read more...

Latest Information : How to add Related Posts Widget to Blogspot/Blogger With Thumbnail

Posted by Unknown at 00:21 0 comments

Categories :

.


Hi Friends,
    In This Topic We Discuss About Latest Information : How to add Related Posts Widget to Blogspot/Blogger With Thumbnail

Step by Step to adding the Related Posts Widget to Blogspot/Blogger With Thumbnail

Step 1 :    Login to Blogger

Step  2 :    Go To Blogger Dashboard >> Template >>Edit HTML;

Step 3 :    Search (CTRL + F) for this piece of code:
    </head>

Step 4 :    Copy and paste the below code just before/above </head>

    <!--Related Posts with thumbnails Scripts and Styles Start-->
    <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSzti418mJIXjpuncNa9aRCZycANxuvHXcZmkol2iAk0_ALNsHh3OgXOF2OtT5_9cGCf9Bpe4qiPnn9rNLnQvEFxEYA59MQThtupRllYVOLPvAdK19m6BnApA2C2YY8mnL-ybUieFKIYcB/s1600/no_image.jpg&quot;;
    var maxresults=5;
    var splittercolor=&quot;#DDDDDD&quot;;
    var relatedpoststitle=&quot;Related Posts&quot;;
    </script>
    <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
    <!-- remove --></b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->

Note :
- to change the default picture, replace the URL (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSzti418mJIXjpuncNa9aRCZycANxuvHXcZmkol2iAk0_ALNsHh3OgXOF2OtT5_9cGCf9Bpe4qiPnn9rNLnQvEFxEYA59MQThtupRllYVOLPvAdK19m6BnApA2C2YY8mnL-ybUieFKIYcB/s1600/no_image.jpg) with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in red if you want the related posts to be displayed in homepage too

Step 5 :    Now find the following code:


        <div class='post-footer'>


Step 6 :    And just above it, copy and paste the below code:

    <!-- Related Posts with Thumbnails Code Start-->
    <!-- remove --><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'/>
    <!-- remove --></b:if>
    <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
    <a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2prJXmIX61HjRQi4sCON5ZEDcc5f9MCdHgOmkiMYlZ-t_Yc51Wjf5EpvZf68ZaSwS9ynVh_CUkjHI-MnJn0qNZNna8oohq6O3UxkzGBbrY2trGOoCZ6pCxt-G8vJ7Fhd77qQVg9lXw3Tf/s1600/best+blogger+tips.png'/></a>
    </b:if></b:if>
    <!-- Related Posts with Thumbnails Code End-->

Note :
- change the 6 value from max-results=6 with the number of posts you want to be displayed.
- If you want the related posts to be displayed on homepage too, remove the code in red.

Step 7 :    Save the Template

Thank You.
Happy Blogging.
Write Your Comments Below.



Read more...
Subscribe to: Posts (Atom)

Labels

 
Movies Information © 2011 DheTemplate.com & Main Blogger. Supported by Makeityourring Diamond Engagement Rings

You can add link or short description here