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

Friday, December 23, 2011

How to Add Recommended Post slider in each post?:Blogger Tips


Hi friends, Recommended post slider in each post is interesting widget.  It keeps readers to read more page from your blog.  The widget is originally developed by bloggerplugins, i just modified little bit in the widget .



How to Add this widget?

Step 1:
Click the following  Add to Blogger  image





and Select in which blog you want to place the widget(if you have multiple blogs).
Click the add widget option

Step 3(optional):

The slide will come out whenever you scroll down to a particular point. By default , it is bottom of the page.

if you want slide come out whenever you reach the end of post, then try this:

  • Click the Template->Edit HTML(if you are using old blogger interface,then Design->Edit HTML)
  • Click the "Expand Widget"
  • Find one of the following line:

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

    or

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

    or

    <data:post.body/>



  • Immediately below any of these, add the following code and save Template:

    <b:if cond='data:blog.pageType == "item"'>

    <div style='display:none' id='recslide_place_holder'></div>

    </b:if>

That's all . now you can see the Recommended slide in your blogger post. If you have any queries , just share your comment.


    Continue   Reading>>

    Thursday, December 22, 2011

    How To Add Christmas Snow Fall Effect in Your Blogger ?


    This is Christmas time, everyone ready to enjoy this Christmas.. With Christmas snow effect , you can also convey Christmas wishes to your readers.

    Steps to add Snowfall effect widget:
    Method 1:
    Step 1:
    • Login into your blogger Dashboard
    • Click the Deisgn page and click any "Add a Gadget" link
    • It  will open the small window
    • Click the Add HTML/javascript option.

    Step 2:
    now copy the any one of following code in the box.
    <script src="http://dl.dropbox.com/u/31627100/BLOG%20Data/snowfall.js" type="text/javascript"></script>
    Click the Save button.

    Now you can see the snow falls in your blogger...



    Continue   Reading>>

    Sunday, November 20, 2011

    Amazing Blogger Slider Widget from BreakTheSecurity ~Blogging Tips


    When i start blogging, I have divide the blogging tips and tricks in my sub domain.  unfortunately i don't have time to maintain that blog.  So From now i am going to combine both of the topics in our main Doamin.  

    One of My Link partner asked for the slider widget code.  So i am starting the blogging tips from here.  You want demo of this slider?just press refresh, because you already seeing the slider. You want the screenshot? Just press Prt Scr button.

    Do you like the above slider? if you say, then you may curious to know about installing this widget.  Ok let me start the tutorial now.

    Download these files:
    1. Style Sheet
    2. Javascript 

    Steps for Installing the Slider Widget:
    Steps 1:
    Login to your Blogger Dashboard.
    Click the Design Tab.  Now click the Edit HTML Tab.
    Click the Download Full Template , this will take backup of your current template.

    Step 2:

    Pres Ctrl+f(for search) and Search for "]]></b:skin>" .

    Open the Stylesheet you download, copy the content and just place above ]]></b:skin>

    Step 3:
    Now copy the Javascript code from the javascript file downloaded.  Paste the code above </head>

    Step 4:
    • Now search for  <div id='content-wrapper'>.
    • copy the following code above or before the  <div id='content-wrapper'>.
    <!--slider content starts-->
    <script type='text/javascript'>
    var $jx = jQuery.noConflict();
    $jx(function() {
     $jx(&quot;.mygallery&quot;).jCarouselLite({
     btnNext: &quot;.nextb&quot;,
            btnPrev: &quot;.prevb&quot;,
        visible: 5,
        speed: 1000,

        easing: &quot;backout&quot;
           
        });

    });
    </script>

    <div id='slidearea' style='height:242px;overflow:hidden;margin:0px 20px 0 20px;position:relative;width:950px;background:#F2F2F2;border:1px solid #E9E9E9;right:20px'>

    <div id='gallerycover'>
    <div class='mygallery'>
            <ul>

    <li>
            <div class='mytext'>
            <a href='http://Your-Post-Link1'>
            <img class='sidim' src='http://Your-Image-Link1'/>
            </a>
            <div class='clear'/> 
            <h2><a href='http://Your-Post-Link1'>Post Title</a></h2>
            <p>Post content summary</p>
            </div>      
            </li>
         <li>
            <div class='mytext'>
            <a href='http://Your-Post-Link2'>
                  <img class='sidim' src='http://Your-Image-Link2'/>
            </a>
            <div class='clear'/> 
            <h2><a href='http://Your-Post-Link2'>Post Title</a></h2>
            <p>Post content summary</p>
            </div>      
            </li>

            <li>
            <div class='mytext'>
            <a href='http://Your-Post-Link3'>
                    <img class='sidim' src='http://Your-Image-Link3'/>
            </a>
            <div class='clear'/> 
            <h2><a href='http://Your-Post-Link3'>Post Title</a></h2>
            <p>Post content summary</p>
            </div>      
            </li>

            <li>
            <div class='mytext'>
            <a href='http://Your-Post-Link4'>
                    <img class='sidim' src='http://Your-Image-Link4'/>
            </a>
            <div class='clear'/> 
            <h2><a href='http://Your-Post-Link4'>Post Title</a></h2>
            <p>Post content summary</p>
            </div>      
            </li>

            <li>
            <div class='mytext'>
            <a href='http://Your-Post-Link5'>
                    <img class='sidim' src='http://Your-Image-Link5'/>
            </a>
            <div class='clear'/> 
            <h2><a href='http://Your-Post-Link5'>Post Title</a></h2>
            <p>Post content summary</p>
            </div>      
            </li>

      </ul>

        <div class='clear'/> 
      
    </div>
    </div>

       <a class='prevb' href='#'/>
       <a class='nextb' href='#'/> 

     </div>
    <!--slider content from BreakTheSecurity ends-->
    Save the Template.
    Step 5:
    Change the http://your-post-link1,2,3,4,5 with your links to your post.
    Change the http://your-image-link1,2,3,4,5 with your post image link.
    and change the Post content summary and post title with your post title and summary.

    Your Review:
    • Having doubts or got problem? just share your comment here.  
    • Want to say thanks? Then share this post with your friends(i don't accept thanks comments , if it look like  a spam comment)
    Continue   Reading>>
    Older Post Home
     

    © Break The Security. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com