Monday 30 September 2013
Wednesday 21 August 2013
How to Add Percentage Value to a Scrollbar in Blogger Blog
In the past, we have already shown you a way through which you can customize your Scrollbar using Web toolkit. Recently, one of our users asked us how to add percentage value to a Scrollbar in Blogger? It basically shows you the percentage of a page while scrolling. It might turn out to be extremely useful for your visitors to find out how much page they have scrolled, or how much content is left to be read. In this article, we will show you How to Add Percentage Value to a Scrollbar in Bloggers.The First thing you need to do is to login into your Google account making sure that your blogs are hosted on that particular account. Now go to Blogger Dashboard and select the blog in which you would like to add Percentage Value to a Scrollbar.
Go to Template >> Edit HTML and search for the ]]></b:skin> tag. Once you have found the ]]></b:skin> tag successfully, just above it paste the following CSS code.
#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: ” ”;
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}
After adding the CSS coding, search for the ending </head> tag and right after it paste the following code. (Tip: Make sure you paste the code between the ending </head> and opening <body> head tag.
<div id='scroll'></div>
Lastly, search for the ending </body> tag and just above it paste the following JavaScript code. This is the code which will ensure that your scrollbar shows the accurate percentage upon scrolling up or down the page. Once everything is done, save the template by pressing “Save Template” Button available on the top right corner of your screen.
<script type='text/javascript'>
/*<![CDATA[*/
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>
Congratulations: You have successfully added percentage value to a scroll bar in bloggers. Now go and check our blog to see the widget in action.
We hope this tutorial have helped to learn How to Add Percentage Value to a Scrollbar in Bloggers. Let us know if you have any suggestions by commenting them below. If anyone want quick help or support just messages us on our Facebook Fan Page.
Saturday 17 August 2013
How to Add Wikipedia Search Box Widget in Blogger Blog?
Apparently, you probably won’t get anything out of this widget, but it might grow user engagement because people can utilize this gadget to search the content in-depth. For example, you wrote an article about Google Panda, but users did not find it as useful or they wanted to know more comprehensive information on this topic. This tool can help users to search the same topic on Wikipedia so they can get comprehensive information on it.
The process of adding this widget into your blog is a lot straightforward. There is no need to tussle up with coding because it would be installed in just few clicks. Firstly, go to Blogger.com >> Your site >> Layout >> Add a Gadget >> More Gadget. Now from the list of widgets, on the top you will see a widget named “Wikipedia” just select it and press the “Save” button.
.png "Wikipedia Search Box Widget in Blogger Blog? www.sahisoft.blogspot.com")
Whenever someone would use Wikipedia search box, it would populate the search results below the search bar and link out to the corresponding Wikipedia article (in a new browser tab). This would benefit both you and your users.
According to the Blogger Officials,
Our latest addition to the Gadget Gallery is the Wikipedia gadget. It allows you to add a Wikipedia search tool into your sidebar, under the header, or above the footer. Do tell us, what you think about this latest addition in the inventory.
We hope you enjoy this new gadget. However, this is not the limit, there are numerous ways through which you can increase the credibility of your website it entirely depends on a person how he use them. Please let us know what you think about it.
Thursday 15 August 2013
How to Correctly Add JavaScript Codes in Blogger Blogspot?
The Blunder :
<script>jQuery(document).ready(function($) {---------------------------------------------------------------------------------});
Here, it can clearly be seen that the <script> tag is not followed by a proper closing </script> tag which is wrong. The correct technique is to close the tags properly, like we do in simple HTML. Let's go ahead and look at the right way of doing it.
How to Correctly Add JavaScript codes in Blogger?
<script type='text/javascript'>//<![CDATA[Your JavaScript coding here//]]></script>
Once the script is correctly added in your template hit the “Save Template” button, and this you would not face any errors. Which means that the JavaScript is correctly added in your blogger template.
We hope this tutorial has helped you in learning how to properly add javascript codes in blogger. Let us know about your experience? In case you have faced such errors too. Feel free to leave any error below that you are facing while adding new codes to your template.
Wednesday 14 August 2013
How to Add Adsense Ad in Pop Up Widget For Blogger
Hi Friends today i am going to share that how to use Scrolling Popup Facebook Like, Adsense Ad, Twitter follow, Email Subscribe Box Widget for Blogger and this widget will increase your facebook like, twitter follow, subscribe for your blog and increase your traffic too. In my previous post I shared Google Plus Slide Out with Hover Effect Widget & Now I'm going to share another useful widget. Its a Pop Out Facebook Like box with Twitter follow & Email Subscribe Box. this is really very cool & fully customized. you can change the widget color with below widget generator. its easy to add on blogger & also on wordpress. this widget comes with default setting of 15 days you can change this with you need.Don't choose to appear this widget on every visit because it ll make you visiting angry & this ll Irritate them.
So lets move to tutorial & add this beautiful pop out with to you blog / website without wasting any time.
- Go to your Blogger > Dashboard
- Select Layout tab.
- Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.
- Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.
<style type='text/css'>
#sahisoftFBpop {
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;
}
#sahisoftFBpop a.bsclose {
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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top
$('#sahisoftFBpop').animate({top:"50px"}, 1000);
// Widget by www.tricksteacher.blogspot.com
$('a.bsclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='sahisoftFBpop'>
<!-- Widget by www.sahisoft.blogspot.com Start -->
<center><b><a class="SahiSoft">Don't Forget To Join With Our Community</a></b></center>
<center>
Add Your Code
</center>
<!-- Widget by www.sahisoft.blogspot.com End -->
<a class='bsclose' href='#'>×</a>
<center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">Get this at</span></center></div><a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="http://sahisoft.blogspot.com/2013/06/popup-facebook-like-adsense-ad-twitter.html">Sahi Soft</a></center>
</div>
- Now Replace Add Your Code with Adsense Ad Code or Any other Code.
Friday 9 August 2013
Windows 8 Style Social Popup Widget For Blogger or WebSite
How can you tell that a blog or a website is successful? Obviously, some would say that it depends on the traffic, increase subscription rates, and develop loyal readership. We also follow that but design and ofcource Responsive Design is a key to be pro with web.Recently the release of windows 8 that have an awesome design metro style desktop that look so cute ever then before any version of windos even Win7 Dock menu.
What Is Metro Style?
Metro is an internal code name of a typography-based design language created by Microsoft, originally for use in Windows Phone 7. A key design principle of Metro is better focus on the content of applications, relying more on typography and less on graphics (“content before chrome”). Early uses of the Metro principles began as early as Microsoft Encarta 95 and MSN 2.0, and later evolved into Windows Media Center and Zune. Later the principles of Metro were included in Windows Phone, Microsoft’s website, the Xbox 360 dashboard update, and Windows 8.(Source:Wiki)What Are POP-Ups?
PoP-Ups are the divs that will be like a wall between the eyes of your reader and your content, It insist the visitor to see him first before any other thing on the site. Creating pop-ups for your website is not an easy task. You need to have knowledge of programming to be able to generate the codes that define your intended pop-up. Fortunately, there are lots of easily configurable pop-up codes available all over the internet with jQuery and JavaScript. But there are also CSS Based PopUp that even not contain Script tag Or JQuery file as we have shown you in our previous post.What We Have?
We just release our CSS based Social POPUP that contain all four most important big social network in Metro Style without any JavaScript code. In our POP-Up, we have Facebook Page Like buttom with count in framed content, Twitter Follow button with count in Script tag as they offically have, Google plus add to circle official button and rss email subscribtion form, These four are all about it and On-Haver effect is also enabled. It will increase your social existant and fans, It's also light weight, So without any more preface, just get the code by going throught features list and the live DEMO.Features:
- Awesome And Stylish POP-UP.
- Full CSS-Based, Without Script Tag Or jQuery File.
- Windows 8 Style Metro Type POP-Up.
- Facebook Like Button Included.
- Twitter Follow Button Included.
- Google Plus Add To Circle Button Included.
- FeedBurner E-Mail Subscribtion Included.
- Close Button Enabled.
- Quick To Load And Easy To Install.
- Hover Effect Also Enabled.
- Css3 Code Added.
- Works On All Working Browsers.
How To Add In Blogspot?
1.) Go To Your www.blogger.com2.) Open Your Desire Blog.
3.) Go To "Layout".
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.
How To Add In Website?
1.) Just Go To Your HTML File.2.) Now Copy The Below Code And Paste It Between "<body> </body>".
3.) Save It, Now You Are Done.
<!-- Windows 8 Style Social POP-Up Widgets by SAHI SOFT --><style type="text/css">* html #sspopupdiv{position:absolute} #sspopupdiv{z-index: 9999999;display:block;top:0px;left:0px;width:100%; height:100%; position:fixed; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpuUvr_uRaB79G8sR-D7DOBMZRDOsviounqVr3VgGWKXc03rL4-WXybKrRMCXmT5HWeRujXJWMZlNOoE9qpsa-831Ne9Tx7q4jQYyJBVK0QeKZbAqNu3z1YBC3u5qD4mWlFpjE2y1GaQ/s128/exeideasopacity0.5.png');margin:0;overflow-y:auto}#sspopup{overflow:none}.sspopup{width:700px;height:400px;position:fixed;top:50%;left:50%;margin-top:-200px;margin-left:-350px}#boxes{margin:0 auto;width:700px;height:400px}#ss-facebook{position:relative;float:left;width:445px;height:195px;color:#fff;font:15px Arial;text-align:center;background-color:#2C84EE;text-decoration:none;line-height:175px}#ss-facebook-hide{display:none;background-color:#2C84EE;color:#fff;position:absolute;top:0px;left:0px;width:445px;height:195px;box-shadow:0px 0px 6px 3px #2C84EE;-webkit-box-shadow:0px 0px 6px 3px #2C84EE;-moz-box-shadow:0px 0px 6px 3px #2C84EE;-o-box-shadow:0px 0px 6px 3px #2C84EE;-ms-box-shadow:0px 0px 6px 3px #2C84EE}#ss-twitter{position:relative;float:left;width:245px;height:195px;margin-left:10px;color:#fff;font:15px Arial;text-align:center;background-color:#00BBE2;text-decoration:none;line-height:175px}#ss-twitter-hide{display:none;background-color:#00BBE2;color:#fff;position:absolute;top:0px;left:0px;width:245px;height:195px;box-shadow:0px 0px 6px 3px #00BBE2;-webkit-box-shadow:0px 0px 6px 3px #00BBE2;-moz-box-shadow:0px 0px 6px 3px #00BBE2;-o-box-shadow:0px 0px 6px 3px #00BBE2;-ms-box-shadow:0px 0px 6px 3px #00BBE2}#ss-google{position:relative;float:left;width:245px;height:195px;margin-top:10px;color:#fff;font:15px Arial;text-align:center;background-color:#E51400;text-decoration:none;line-height:175px}#ss-google-hide{display:none;background-color:#E51400;color:#fff;position:absolute;top:0px;left:0px;width:245px;height:195px;box-shadow:0px 0px 6px 3px #E51400;-webkit-box-shadow:0px 0px 6px 3px #E51400;-moz-box-shadow:0px 0px 6px 3px #E51400;-o-box-shadow:0px 0px 6px 3px #E51400;-ms-box-shadow:0px 0px 6px 3px #E51400}#ss-rss{position:relative;float:left;width:445px;height:195px;margin-left:10px;margin-top:10px;color:#fff;font:15px Arial;text-align:center;background-color:#fd9f13;text-decoration:none;line-height:175px}#ss-rss-hide{display:none;background-color:#fd9f13;color:#fff;position:absolute;top:0px;left:0px;width:445px;height:195px;line-height:0px;box-shadow:0px 0px 6px 3px #fd9f13;-webkit-box-shadow:0px 0px 6px 3px #fd9f13;-moz-box-shadow:0px 0px 6px 3px #fd9f13;-o-box-shadow:0px 0px 6px 3px #fd9f13;-ms-box-shadow:0px 0px 6px 3px #fd9f13}.gradient{background:-moz-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);background:-webkit-gradient(linear,left top,right bottom,color-stop(0%,rgba(0,0,0,0.25)),color-stop(100%,rgba(0,0,0,0)));background:-webkit-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);background:-o-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);background:-ms-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);background:linear-gradient(135deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000',endColorstr='#00000',GradientType=1 )}.ssfixedfooteremailsubscribebox input.email{padding:7px 10px 7px 10px;font-family:"Arial","Helvetica",sans-serif;width:218px;font-size:12px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;width:400px}.ssfixedfooteremailsubscribebox input.subscribe{-moz-box-shadow:inset 0px 1px 0px 0px #fff;-webkit-box-shadow:inset 0px 1px 0px 0px #fff;box-shadow:inset 0px 1px 0px 0px #fff;background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#f0f0f0),color-stop(1,#c9c9c9) );background:-moz-linear-gradient( center top,#f0f0f0 5%,#c9c9c9 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0',endColorstr='#c9c9c9');background-color:#f0f0f0;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #dcdcdc;display:inline-block;color:#777;font-family:arial;font-size:13px;font-weight:bold;padding:6px 18px;text-decoration:none;text-shadow:1px 1px 0px #fff}.ssfixedfooteremailsubscribebox input.subscribe:hover{background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#c9c9c9),color-stop(1,#f0f0f0) );background:-moz-linear-gradient( center top,#c9c9c9 5%,#f0f0f0 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9c9c9',endColorstr='#f0f0f0');background-color:#c9c9c9}</style><!--[if gte IE 9]><style type="text/css">.gradient{filter:none}</style><![endif]--><!--[if lte IE 6]><style type="text/css"> html{overflow-x:auto;overflow-y:hidden}</style><![endif]--><div id="sspopupdiv"><div id="sspopup"class="sspopup"><!-- Windows 8 Style POP-Up Social Widget By Sahi Soft DIV Start --><div id='boxes'><!-- Windows 8 Style POP-Up Social Widget By Sahi Soft Boxes Start --><div id="ss-facebook"class="gradient"onmouseover="document.getElementById('ss-facebook-hide').style.display='block'"onmouseout="document.getElementById('ss-facebook-hide').style.display='none'"><img align="middle"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3VkasBtVebfKKw0df_AeqZ_NdS7ewb9JVz3uBC0alebqVcyvSghX4FGZ357R9bNvXHyXmPKaPKR8xjrWyetlczyIwWfjAhaZMbMJcoG_mDqg2hIaWQZ04Rb0SHlS6gD74tAfr4emywA/s64/facebook-white-64-64.png"width="64px"height="64px"alt="Facebook"/>Facebook<div id="ss-facebook-hide"><!-- Facebook Like --><div style="margin-top:80px;"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FSahiSoft&send=false&layout=button_count&width=100&show_faces=false&font&colorscheme=light&action=like&height=90"scrolling="no"frameborder="0"style="border:none;overflow:hidden;width:100px;height:90px;"allowtransparency="true"></iframe></div><!-- Facebook Like --></div></div><div id="ss-twitter"class="gradient"onmouseover="document.getElementById('ss-twitter-hide').style.display='block'"onmouseout="document.getElementById('ss-twitter-hide').style.display='none'"><img align="middle"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-cnhe8AOPrkKW7fCPmrIJaVXGbcyaHjAH4TtecezCLejQBccR3hsB8N6VSLw9LhmMpPZy-1NTppVypF_NrDdQzKZswQK9yVZe7jiKOwFPx3xLClDGTVb2mJvnyGNl260f6vR9uPC5vw/s64/twitter-white-64-64.png"width="64px"height="64px"alt="Twitter"/>Twitter<div id="ss-twitter-hide"><div style="margin-left:50px;margin-top:10px;"><a href="https://twitter.com/Sahi_Soft"class="twitter-follow-button"data-show-count="true"data-size="medium">Follow</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs)}}(document,"script","twitter-wjs");</script></div></div></div><div id="ss-google"class="gradient"onmouseover="document.getElementById('ss-google-hide').style.display='block'"onmouseout="document.getElementById('ss-google-hide').style.display='none'"><img align="middle"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgji9N-kGe1ktptGIqlcLigJZ-qqeN0sUu1Tsj5nsyNlAdYRvqJ9LkWthu1duG4erCZQiKHt7fxTUu0883xQA3l9bJIGLX787f6l0pVWWjJ2qCf7EiwcxkqvcvPkpri8xHOwisT3WxAGA/s64/googleplus-white-64-64.png"width="64px"height="64px"alt="GooglePlus"/>Google Plus<div id="ss-google-hide"><div style="margin-top:20px;"><a target="_blank" href="//plus.google.com/106169240381116534004?prsrc=3"rel="publisher"style="text-decoration:none;display:inline-block;color:#333;text-align:center;font:13px/16px arial,sans-serif;white-space:nowrap;"><span style="display:inline-block;font-weight:bold;vertical-align:top;margin-right:5px;margin-top:8px;">Add on</span><img src="//ssl.gstatic.com/images/icons/gplus-32.png"alt="Google+"style="border:0;width:32px;height:32px;"/></a></div></div></div><div id="ss-rss"class="gradient"onmouseover="document.getElementById('ss-rss-hide').style.display='block'"onmouseout="document.getElementById('ss-rss-hide').style.display='none'"><img align="middle"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx3nQ8nGv4dEqJN2ZkqIk1WYgovY9G0yrnvf6VlNvoLlx0Np9VhN7sxJcAkdSZcrUP1xQKfbyztSTyYM87prze4jIZN99A0EcfFXW303LdOzQZjVW4KvZXe7R18Z8iYJOfR8tBwOkSrw/s64/rss-white-64-64.png"width="64px"height="64px"alt="RSS"/>RSS<div id="ss-rss-hide"><div style="margin-top:50px;"><div class="ssfixedfooteremailsubscribebox"><form action="http://feedburner.google.com/fb/a/mailverify"method="post"target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ssfixedfootersocialicon','popupwindow','scrollbars=yes,width=550,height=520');return true"><input class="email"type="text"id="email"name="email"value="Enter Your Email Here.."onfocus="if(this.value==this.defaultValue)this.value='';"onblur="if(this.value=='')this.value=this.defaultValue;"/><input type="hidden"value="SahiSoft"name="uri"/><input type="hidden"name="loc"value="en_US"/><br /><input class="subscribe"name="commit"type="submit"value="Subscribe Us To Get Our News-Letter Directly Into Your E-Mail"/></form><center style="color:#333;margin-top:10px;font-size:10px;">E-Mail Will Be Delivered By FeedBurner.</center></div></div></div></div><!-- Windows 8 Style POP-Up Social Widget By SahiSoft Boxes End --></div><br /><center class="gradient" style="padding:10px;background-color:#66CD00;color:#fff;cursor:pointer;text-align:center" onmouseup="document.getElementById('sspopupdiv').style.display='none'">Thanks For Providing Me Your Social Networks Link, Let's Take Me In...</center><!-- Windows 8 Style POP-Up Social Widget By SahiSoft DIV End --></div></div><!-- Windows 8 Style Social POP-Up Widgets by SAHI SOFT-->
Customization:
- Change SahiSoft With Your Facebook Page Name.
- Change Sahi_Soft With Your Twitter USerName.
- Change 106169240381116534004 With Your Google Plus ID.
- Change SahiSoft With Your RSS FeedBurner User Name.
- Save And Done...
Provided You By: SAHI SOFT
Subscribe to:
Posts (Atom)