Showing posts with label widgets. Show all posts
Showing posts with label widgets. Show all posts

Sunday, January 20, 2013

How To Show Blogger Widget Only In Homepage

In this Tutorial i will show you, how to show blogger (Popular Posts ) widget only in homepage. The reason for this is that, I have received many comments asking about how to show popular posts only in homepage. I also posted other tutorial about How to create Multi Column Footer Widget and How to add a Drop Down Menu to blogger. This is actually not easy to do for new comers but is still easy for old ones. Not only this you can also read other related articles/posts. Make your blog pretty simple and different from others so lets start our work and perform some easy steps:

1: Go To Blogger > Template > Edit HTML


2: Find (Ctrl+F) this code given below:


<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'><b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/></b:section>

3: Replace with this:

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'><b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/></b:section></b:if>

4: Now click on save template. You're done!


Posted by admin Pm001 at 11:22 AM 0 comments  

Labels: , , , ,

Thursday, January 17, 2013

How to Create Back To Top Button

In this Tutorial, i show you that how to create Floating Back To Top Button in Blogger/Wordpess. If your blog/wordpress (Website) page is long or if you write very lengthy posts then, you must add a Back To Top button to your blog/wordpress, by clicking which, users of your website will be taken straight to the top (Header) of your blog page. You can see my floating back-to-top button at the bottom-right corner of this page OnlineGames2Modo.
To add this button to your blog you will have to need two identical images (.png), one small and one large image. If you don't want different images of your button then use just one image URL for both images.



Create Floating 'Back To Top' Button:

1. Go To Blogger > Design > Page Elements
2. Select a HTML/JavaScript Widget.


3.  Copy and paste the following code in HTML/JavaScript.

<!--BACK-TO-TOP-STARTS-->
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='URL Of Your Larger Button Image'" src="URL Of Your Smaller Button Image" onmouseout="this.src='URL Of Your Smaller Button Image'"/></a>
<!--BACK-TO-TOP-STOPS-->

4. Replace the required detail with specific URLs of your Back-to-top button.
5. Save it and you are done!

Posted by admin Pm001 at 12:13 PM 0 comments  

Labels: , , ,

Monday, January 14, 2013

How To Add Floating Twitter Recent Tweets Widget

In the last Tutorial, i tried to show you that how to add Twitter Floating Fan Box Widget which basically was Twitter Fan Box. You can see that Tutorial here. In this Tutorial, i show you HOW TO ADD FLOATING TWITTER RECENT TWEETS Widget in Wordpress & Blogger. This Twitter Fan Box Is Similar To Facebook Like Box. This is Floating Twitter Recent Tweets Widget For WordPress & Blogger. When you move cursor on it, It pop out with Recent Tweets.



Adding Recent Tweets To Wordpess:
1. Go to Dashboard > Appearance > Widgets > Available Widgets.
2. Drag Text widget into a sidebar.
3. Paste in the code.
4. Save.


Adding Recent Tweets To Blogger:
1. Go to Dashboard > Design > Page Elements.
2. Click Add A Gadget. In window, select HTML/Javascript .
3. Copy the code below and paste it inside the box.
4. Click Save button.


<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#twitter_div{width:246px;height:353px;overflow:hidden;}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px;}#knfeedburner_div{width:300px;height:97px;margin-top:25px;overflow:hidden;}#kakinetwork_div{width:300px;height:97px;overflow:hidden;}

#twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px;}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0;}

#kakinetwork_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_right img{position:absolute;top:-2px;left:-101px;}/* left side style */#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}#twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px;}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0;}
#kakinetwork_left{z-index:10003;border:2px solid #303030;background-
color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_left img{position:absolute;top:-2px;right:-101px;}

</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>

<div id="on"><div id="twitter_right" style="top: 20%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoif9tpVl5GXZtBpA80UCjPQgtZ2cP2QG8YNQqIvjZH_otVHlZPGRP6ZM6oLidOLG3D-5OJ_HbvOJaJmsTpk3qB4qEf3KPc4IKxWnQuRXkCdCZ6UtS8iunh7MlLKFuVnEmMsfZlgTXFus/s320/allbloggingtips.com-twitter-icon.png" /><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 260,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('crackmodo').start();</script></div></div></div>

</div>

Replace the crackmodo with your twitter username.

You are done! That's it.




    Posted by admin Pm001 at 1:44 PM 0 comments  

    Labels: , , , , ,

    How To Add Floating Twitter Fan Box Widget


    In the last Tutorial, i tried to show you that how to add Twitter Floating Follow us Widget which basically was follow us box with image of Twitter bird on tree. You can see that Tutorial here. In this Tutorial, i am going to show you HOW TO ADD FLOATING TWITTER FAN BOX in Blogger. This Twitter Fan Box Is Similar To Facebook Like Box. This Floating Twitter Fan Box show recent 10 followers by default and your readers can follow you without leaving your Blog and that's why this widget is increasingly become popular. There are some steps and you have to follow these steps given below one by one. So lets start.



    1. Log in to your Blogger Account.
    2. Click Blog title > Template < Edit HTML.
    3. Click Proceed Button.
    4. Search following code using CTRL + F.

    </body>

    5. Replace the above code (</body>) with the code given below.

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script>
    <script type="text/javascript">
    jQuery(document).ready(function() {jQuery(".tehtbox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-235"}, "medium");}, 400);});
    </script>
    <style>
    .tehtbox{background:url(http://lh5.googleusercontent.com/-q9_zbB_3388/UCOvETdEQpI/AAAAAAAAA4o/F0CfR3hxuk0/s100/Twitter.png) no-repeat scroll left center transparent!important;float:right;height:250px;width:230px;z-index:99999;position:fixed;right:-235px;top:20%;padding:0 5px 0 40px}
    .tehtbox div{margin-right:-8px;border:3px solid #00bef6;background:#fafafa;padding:0}
    .tehtbox a{font-size:10px;margin-left:40px}
    </style>
    <div class="tehtbox">
    <script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script>
    <div id="twitterfanbox">
    <script type="text/javascript">fanbox_init("crackmodo");</script>
    <a href='http://www.techehow.com/2012/08/add-twitter-fan-box-to-blogger.html'>Get Twitter Fan Box Widget</a>
    </div> 
    </div>
    </body>

    6. Replace crackmodo With Your Twitter Username and click Save Template Button.

    That's it, you are done!




    Posted by admin Pm001 at 12:57 PM 0 comments  

    Labels: , , , ,

    How To Add Twitter Floating Widget

    This article contains some simple codes and steps which you have to follow in order to get Twitter Floating Widget. Do you want Twitter floating (Bird With Tree) widget? yes. then follow the following simple 3 steps and get your own Twitter floating widget on a left side of your blog.


    Like us on Facebook and Follow us on Twitter.

    Step 1. Go to Blogger Dashboard > Design > Page Layout.
    Step 2. Choose Add A Gadget > HTML/Javascript.
    Step 3. Paste below code and save it.


    <div style="position: fixed; bottom: 20%; right: 0%;"><a href="http://twitter.com/crackmodo" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXE4BIj7oWuwVsclGMB8Oxx_pkuaYgn40Kb4uH4_f52PVh-vF7W7CFT31rb-_YN0nnYVBqnjC7P9ToAx7_e9IyEFm0gPQtBULhc5ATZiLT6y4WtFjZJ-s3tkvbSa4JMKw6Rqw9XzMl9-M/s1600/btsnts-twitter-float.png"></a></div>


    Now replace crackmodo with your twitter username and save it.

    That's it. You are done.




      Posted by admin Pm001 at 12:17 PM 0 comments  

      Labels: , , , , ,

      Saturday, January 12, 2013

      Facebook Like Box At Bottom Of The Post

      Facebook like box is a fantastic plugin that lets Facebook users to indirectly subscribe to your blog updates via their Facebook accounts. Your website visitors will receive your blog updates on their Facebook Homepage. Before you add the Facebook like box below blogger posts or on any part of your blog, you will need to create a Facebook Like Page. If you have Facebook Page then follow these steps:
      1. Go To Blogger > Design > Edit HTML
      2. Backup your template
      3. Check the "Expand widget Templates" box
      4. Search for this,
      <data:post.body/>
      Just after it paste the code below,
      <iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMy-Blogger-Tricks%2F147104632016744&amp;width=590&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180' style='border:none; overflow:hidden; width:590px; height:180px;'/>
      Make this change please:
      • Replace the bolded blue text with your Facebook Like Page Link (Do not include http://)
      • In your Page URL replace all back slashes i.e ( / ) with %2F
      for example if your Like Page URL looks like this,

      then after replacing the back slashes with %2F it will look like this,

      www.facebook.com%2Fpages%2FMy-Blogger-Tricks%2F147104632016744
      •     To change the width, just adjust the value 590
      • 5.   Save your template and you are done!
      If you find any problem then comment us, we will respond you quickly.





      Posted by admin Pm001 at 4:31 AM 0 comments  

      Labels: , , , ,

      Multi Column Footer Widget For Blogger

      This widget can become three column, four column or with as many columns as you wish. Further this new footer widget has some great CSS effects added to it which makes it even better. So first you will have to add the CSS code to your blogger templates and then the HTML.

      1. Go To Blogger > Design > Edit HTML
      2. Backup Your Template
      3. Search for ]]></b:skin>
      4. Just above ]]></b:skin> paste the code below,
                    /*----- MULTI COLUMN FOOTER WIDGET -----*/
      #lower {
      margin:auto;
      padding: 0px 0px 10px 0px;
      width: 100%;
      background:#333333;
      }
      #lower-wrapper {
      background:#333333;
      margin:auto;
      padding: 20px 0px 20px 0px;
      width: 960px;
      border:0;
      }
      #lowerbar-wrapper {
      background:#333333;
      float: left;
      margin: 0px 5px auto;
      padding-bottom: 20px;
      width: 23%;
      text-align: justify;
      color:#ddd;
      font: bold 12px Arial, Tahoma, Verdana;
      line-height: 1.6em;
      word-wrap: break-word;
      overflow: hidden;
      }
      .lowerbar {margin: 0; padding: 0;}
      .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
      .lowerbar h2 {
      margin: 0px 0px 10px 0px;
      padding: 3px 0px 3px 0px;
      text-align: left;
      border:0;
      color:#ddd;
      text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
      }
      .lowerbar ul {
      color:#fff;
      margin: 0 auto;
      padding: 0;
      list-style-type: none;
      }
      .lowerbar li {
      display:block;
      color:#fff;
      line-height: 1.6em;
      margin-left: 0 !important;
      padding: 6px;
      border-bottom: 1px solid #222;
      border-top: 1px solid #444;
      list-style-type: none;
      }
      .lowerbar li a {
      text-decoration:none; color: #DBDBDB;
      }
      .lowerbar li a:hover {
      text-decoration:underline;
      }
      .lowerbar li:hover {
      display:block;
      background: #222;
      }

             5.    Now search for </body> and paste the following code just above </body>

      <div id='lower'>
      <div id='lower-wrapper'>

      <div id='lowerbar-wrapper'>
      <b:section class='lowerbar' id='lowerbar1' preferred='yes'>
      </b:section>
      </div>

      <div id='lowerbar-wrapper'>
      <b:section class='lowerbar' id='lowerbar2' preferred='yes'>
      </b:section>
      </div>

      <div id='lowerbar-wrapper'>
      <b:section class='lowerbar' id='lowerbar3' preferred='yes'>
      </b:section>
      </div>

      <div id='lowerbar-wrapper'>
      <b:section class='lowerbar' id='lowerbar4' preferred='yes'>
      </b:section>
      </div>

      <div style='clear: both;'/>
      </div> </div>
            6.   Save your template and you are done!
      Now go to Layout and add your widgets to the newly added Footer Widget that will look like this,


      You can see that there is a total of four columns by default and you can add as many widgets as you want to each column. If you wish to increase or decrease the number of vertical columns then follow the steps below.

      How to customized the widget:


      Well I will keep it simple. The only thing that you will need to adjust according to your template is the width of the widget and the number of vertical columns.
      1.  In order to reduce or increase the overall width of the widget simply change width: 960px;
      2.  If you wish to decrease the number of widgets to three then simply delete this part of the code,
      <div id='lowerbar-wrapper'>
      <b:section class='lowerbar' id='lowerbar4' preferred='yes'>
      </b:section>
      </div>
      3.  Or if you wish to add an extra column then add the code below just above <div style='clear: both;'/>
      <div id='lowerbar-wrapper'>
      <b:section class='lowerbar' id='lowerbar#' preferred='yes'>
      </b:section>
      </div>
      Remember that lowerbar# refers to the column number. So if you want to add a fifth column then simply replace  lowerbar# with lowerbar5.
      After you have added the fifth column then remember to change width: 23%; withwidth: 17%;

      You will repeat step 3 for as many columns as you wish to create. But three and four and five columns are a standard. Increasing them will make things look ugly so i suggest don't do this.





      Posted by admin Pm001 at 4:06 AM 0 comments  

      Labels: , ,

      Subscribe to: Posts (Atom)