2014 Help

Today we provide you tutorial about Add Image Slider in Blogger Post. You can easily add image slider in your blog post just follow some steps to add Image Slider. In this slider you get a ribbon at the left corner and it’s also contains with a slice effect. You can also edit it as you wish to perfectly for your blog.

Add Image Slider in Blogger Post

Step 1

Step 2

Go to Layout then Click on Add A Gadget as shown in below picture.

Step 3

Select HTML/JavaScript as shown in below picture.

Step 4

Step 5

Add Facebook Like Popup Box widget for Blogger

Step 1

Step 2

Step 3

</body>

Step 4

<style type='text/css'>
#haakblogFBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#haakblogFBpop a.haakblogclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).bind(&quot;load&quot;, function() {
// Animate Top
$(&#39;#haakblogFBpop&#39;).animate({top:&quot;150px&quot;}, 1000);
// Widget by www.haakblog.com
$(&#39;a.haakblogclose&#39;).click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='haakblogFBpop'>
<!-- Widget by www.haakblog.com Start -->
<center>
<b>Don&#39;t Forget To Join US Our Community</b></center>
<center>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F2014Help&amp;width=300&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=196282097100252' style='border:none; overflow:hidden; width:300px; height:258px;'/>
</center>
<!-- Widget by 2014help.blogspot.com End -->
<a class='haakblogclose' href='#'>&#215;</a>
<center style='float:right; margin-right:10px;'>
<span style='font-size:xx-small; color:#000; text-decoration:none;'></span>
<a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="blogger"><img src="https://bitly.com/haakblog" alt="blogger" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href='http://www.haakblog.com/2013/10/add-facebook-like-popup-box-for-blogger.html' style='font-size:xx-small; color:#3B78CD; text-decoration:none;' target='_blank'>Widget</a></center>
</div>

Step 5

How to Add Related Posts Widget

Step 1

 

Step 2

Step 3

</head>

Step 4

<!--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;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/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-->

Step 5

<div class='post-footer'>

Step 6

<!-- 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://www.haakblog.com'><img alt='Blogger Tricks' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="blogger"><img src="https://bitly.com/haakblog" alt="blogger" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.hon99.com" rel="dofollow" target="_blank" title="blogger"><img src="https://bitly.com/haakblog" alt="blogger" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://www.haakblog.com/2013/06/simple-related-posts-widget-for-blogger-with-thumbnails.html" target="_blank" title="Widget">Related Posts Widget</a></div>
<!-- Related Posts with Thumbnails Code End-->

Step 7

• Go to your blogger blog Dashboard > Template > Edit HTML 
• Search (CTRL + F)  for the following code:

]]></b:skin>

• And just before ]]></b:skin> paste the CSS code below:

.column-right-inner { position: fixed; }

• Save Template. We're Done!

2. Let's see, how to make Sidebar Sticky+Animating with jQuery

• Go to your blogger blog Dashboard > Template > Edit HTML 
• Search (CTRL + F)  for the following code:

</body>

• And just before </body> paste the following jQuery code:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type="text/javascript">
        $(function() {
            var offset = $(".column-right-inner").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $(".column-right-inner").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $(".column-right-inner").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    </script>

• Save Template. We're Done!

3. Let's see, how to make a Widget Sticky with jQuery

•  At first find-out your widget ID (ex. HTML7)
• Go to your blogger blog Dashboard > Template > Edit HTML 
• Search (CTRL + F)  for the following code:

</body>

• And just before </body> paste the following jQuery code:

<script src='http://resources.infolinks.com/js/infolinks_main.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>
    <script type='text/javascript'>
        $(function() {
            var offset = $(&quot;#HTML7&quot;).offset();
            var topPadding = 35;
            $(window).scroll(function() {
                if ($(window).scrollTop() &gt; offset.top) {
                    $(&quot;#HTML7&quot;).stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $(&quot;#HTML7&quot;).stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    </script>

Note: Replace #HTML7 With Your Widget ID

• Save Template. We're Done!