Yes I'm back with more blogger customization hacks, the past couple of months I've been over at my friend blog
http://www.wierdwalker.blogspot.com/ posting some guest post, not some but 1, but expect more to come from the future. So what are suggestion sliders, suggestion sliders are little unique sliders that can improved the function-ability and interactivity within your blog, adding these widgets can increase like's, subscriber count, and support foreign languages leading to more traffic from those areas. This is genius and makes your site more user friendly.
End of Page Suggestion Slider’s
The idea for the “End Of Page Suggestion Slider” is to make your content more accessible and help users quickly subscribe to your Facebook Fan pages, and or YouTube Channel. The Translation section is idea for other language barriers, letting them translate your site to any other language.
Working Demo Pages Below.
Facebook Demo : Link: *Scroll Down To See It In Action*
YouTube Subscribe Section Demo: Link: *http://news-story-seo.blogspot.com/*
Translation Section Demo: Link: *http://thesis-seo-theemolab.blogspot.com/*
Learn To Install One Of The Three Suggestion Sliders.
The Css Code:
1.Go to Design, continue to Edit HTML , check on Expand Widget Templates
2.Insert the below code right before ]]></b:skin>
#slidebox{ width:300px; height:130px; padding:10px; background-color:#fff; border-top:3px solid #000; position:fixed; bottom:0px; right:-430px;-moz-box-shadow:-2px 0px 5px #aaa;-webkit-box-shadow:-2px 0px 5px #aaa;box-shadow:-2px 0px 5px #aaa}#slidebox p,a.more{ font-size:11px; text-transform:uppercase; font-family:Arial,Helvetica,sans-serif; letter-spacing:1px; color:#555}a.more{ cursor:pointer; color:#E28409}a.more:hover{ text-decoration:underline}#slidebox h2{ color:#E28409; font-size:18px; margin:10px 20px 10px 0px}a.close{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1wgKBBFD6KLWiAlJ1xUiAEoh9-4wuFENyWJOf__9A9b71c1c060My9K1gAG-k7RqIXTSI7gEf8-UZmwueNdeNxzVRZO0fuuFCP9drOeQ_HpGQDXVF_BaL1Sxx6msfK0e7tVKdl9SjkBE/s400/close.png) no-repeat top left;width:13px;height:13px;position:absolute;cursor:pointer;top:10px;right:10px}a.close:hover{background-position:0px -13px}
The JavaScript
Find the ]]></b:skin> tag and paste the below code just after.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Page Element
Add a gadget “HTML/JavaScript” where you want the popup to begin and paste the below code into it and save it.
<p id="last"> </p>
My choice is located in the middle. When visitors scroll down, once they hit the middle section the slider starts. Experiment with this and you will understand and optimize your site for best results.
Now choose between Facebook like box, YouTube Subscribe Box and or the Translation Section.
Facebook Like Box Installation
Find the </body> tag and paste the below code just before it.
<div id='slidebox'><a class='close'/><p>Follow Us On Facebook!</p>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FTheEmoLab%2F162515220426188&width=230&colorscheme=light&show_faces=false&stream=false&header=false&height=62' style='border:none; overflow:hidden; width:230px; height:62px;'/>
</div> <span style='font-size: 50%;'>Created By:<a href='http://www.theemolab.com/'>TheEmoLab.Com</a></span>
<!-- The JavaScript -->
<script type='text/javascript'>
$(function() {
$(window).scroll(function(){
/* when reaching the element with id "last" we want to show the slidebox. Let's get the distance from the top to the element */
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});
/* remove the slidebox when clicking the cross */
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
</script>
Replace everything in red with your Facebook Like Box.
You can generate your Facebook Like Box Code Via
Like Box – Facebook Developers
Link:
http://developers.facebook.com/docs/reference/plugins/like-box/
UN-Check both Show Faces and Show Stream.
YouTube Subscribe Box Installation
Find the </body> tag and paste the below code just before it.
<div id='slidebox'><a class='close'/><p>Our YouTube Channel</p>
<center><iframe src="http://www.youtube.com/subscribe_widget?p=YOUR-YOUTUBE-USERNAME" style="overflow: hidden; height: 130px; width: 260px; border: 0;" scrolling="no" frameborder="0"></iframe></center>
</div> <span style='font-size: 50%;'>Created By:<a href='http://www.theemolab.com/'>TheEmoLab.Com</a></span>
<!-- The JavaScript -->
<script type='text/javascript'>
$(function() {
$(window).scroll(function(){
/* when reaching the element with id "last" we want to show the slidebox. Let's get the distance from the top to the element */
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});
/* remove the slidebox when clicking the cross */
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
</script>
Replace
YOUR-YOUTUBE-USERNAME with your YouTube username.
Translation Section Installation
Find the </body> tag and paste the below code just before it.
<div id='slidebox'><a class='close'/><p>Translate This Blog!</p>
<center><div id='google_translate_element'/><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/></center>
</div> <span style='font-size: 50%;'>Created By:<a href='http://www.theemolab.com/'>TheEmoLab.Com</a></span>
<!-- The JavaScript -->
<script type='text/javascript'>
$(function() {
$(window).scroll(function(){
/* when reaching the element with id "last" we want to show the slidebox. Let's get the distance from the top to the element */
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});
/* remove the slidebox when clicking the cross */
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
</script>
You Are Done!
