Pak Softonic: March 2012

How to add Flying "Scroll to Top" button to your Blogger blog using Jquery

STEP #1 Log in to Blogger, go to Layout -> Edit HTML Now find this code:

</body>

And immediately BEFORE/ABOVE it, paste this code:

<a href="#" id="backtotop">^ Scroll to Top</a>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>

/*-----------------------

*Scroll to top


-----------------------*/



$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});



$(function() {

$("#toTop").scrollToTop();

});

</script>

and,Now find this code:

]]></b:skin>

Add before

#backtotop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }

Now Click Save Template

Simple Mouseover Effect Code For Images

DEMO: Hover mouse over the image!

Here are the codes:

If you have to place image with mouseover effect through "Add & Arrange Page Elements" section on Blogger use this code (this code may work on IE);

Code:

If you have to place image with mouseover effect through "Edit HTML" section on Blogger use this code (this code may not work on IE);

Code:

In the above codes replace the RED texts with the URL of the main image and the BLUE texts with the URL of the hover image.

Add AutoHiding Social Bookmarking Widget To Your Blog

You must have noticed Sharing is sexy/caring social bookmarking autohide widget on many blogs and websites. This widget is very different than other available social bookmarking buttons. The graphics looks very stylish and different. The button of this widget has autohide effect when hover on it. All that makes it a must have widget for any blog. Here in this post, i will explain how you can add Sharing is sexy widget to Blogger blog after every post.

STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:

</head>

And immediately before it, paste this code:

<style type='text/css'> div.sexy-bookmarks { height:54px; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbvQgs9RlxJsAcQAyMJuvoo8q_NoOIbi4at-sIbLLELIqYbeZknKpQPqZje7H3BtFpNJW_aSgQOnOt7d9YkcnVAgb3ePZPgqxKNRCPDpDwKfK89c5r5FgJui7c0cZuTxTXw94E7QPS9QWS/') no-repeat left bottom; position:relative; width:540px; } div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbvQgs9RlxJsAcQAyMJuvoo8q_NoOIbi4at-sIbLLELIqYbeZknKpQPqZje7H3BtFpNJW_aSgQOnOt7d9YkcnVAgb3ePZPgqxKNRCPDpDwKfK89c5r5FgJui7c0cZuTxTXw94E7QPS9QWS/') no-repeat right bottom; position:absolute; right:-17px; } div.sexy-bookmarks ul.socials { margin:0 !important; padding:0 !important; position:absolute; bottom:0; left:10px; } div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important; } div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important; font-size:0 !important; color:transparent !important; } .sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7gGPG-vX6QtyYr0YDszAQt_SQXXhLuH4w8prIXraHS1b-5QPLiZCSMvviIqhnegYIfEhzcd6F1sx6A5nEHEhKyIzAW4CnuX5Y11MpwLEPQCXetuG2FjEFL5MLi0vCyiNT4BaUY7XGoaJy/') no-repeat !important; } .sexy-furl { background-position:-300px top !important; } .sexy-furl:hover { background-position:-300px bottom !important; } .sexy-digg { background-position:-500px top !important; } .sexy-digg:hover { background-position:-500px bottom !important; } .sexy-reddit { background-position:-100px top !important; } .sexy-reddit:hover { background-position:-100px bottom !important; } .sexy-stumble { background-position:-50px top !important; } .sexy-stumble:hover { background-position:-50px bottom !important; } .sexy-delicious { background-position:left top !important; } .sexy-delicious:hover { background-position:left bottom !important; } .sexy-yahoo { background-position:-650px top !important; } .sexy-yahoo:hover { background-position:-650px bottom !important; } .sexy-blinklist { background-position:-600px top !important; } .sexy-blinklist:hover { background-position:-600px bottom !important; } .sexy-technorati { background-position:-700px top !important; } .sexy-technorati:hover { background-position:-700px bottom !important; } .sexy-myspace { background-position:-200px top !important; } .sexy-myspace:hover { background-position:-200px bottom !important; } .sexy-twitter { background-position:-350px top !important; } .sexy-twitter:hover { background-position:-350px bottom !important; } .sexy-facebook { background-position:-450px top !important; } .sexy-facebook:hover { background-position:-450px bottom !important; } .sexy-mixx { background-position:-250px top !important; } .sexy-mixx:hover { background-position:-250px bottom !important; } .sexy-script-style { background-position:-400px top !important; } .sexy-script-style:hover { background-position:-400px bottom !important; } .sexy-designfloat { background-position:-550px top !important; } .sexy-designfloat:hover { background-position:-550px bottom !important; } .sexy-syndicate { background-position:-150px top !important; } .sexy-syndicate:hover { background-position:-150px bottom !important; } .sexy-email { background-position:-753px top !important; } .sexy-email:hover { background-position:-753px bottom !important; } </style>

STEP #2

Now find (CTRL+F) this code in the template:

<data:post.body/>

And immediately BELOW/AFTER it, paste this code:

<div class='sexy-bookmarks'>

<ul class='socials'>

<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>



<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>



<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>



<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>



<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>



<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>



<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>



<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>



<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>



<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>



<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>



</ul>

<span class='sexy-rightside'/></div>

You may of course remove any button code, if you do not want to show it.

Now Click Save Template

Free Feedjit LiveTraffic Feed For Blogger

Ever wanted to see where traffic is coming from on your blog?
Live traffic widget can help you to show visitors’ traffic flow.
So you can see in real time, WHO, FROM WHERE coming on your site and ON WHICH ARTICLE!!
Feedjit is a free tracking tool that tracks visitors to a blog in real time and identifies what pages are visited. FFeedjit gives you up to the minute information about where they are from, the type of browser used, the landing page your visitors arrive at and where they exit from. It also displays the search keyword or keywords the visitor used to access your blog and will help you understand more about the content your visitors are interested in.Feedjit is one of the most popular website which provides the LiveTraffic Feed widget.You don’t need to send any email request or no need to even register yourself to get the widget.It is easy to place a Feedjit Live Traffic Feed widget into the sidebar or footer of your Blogger Blogspot blog. It only takes a few minutes to customize the look of the widget to suit your blog and paste the Feedjit javascript code into a gadget in your Blogger sidebar or footer.

Feedjit not only provides “Live Traffic Feed” widget,There is a choice of 4 different widgets: Live Traffic Feed, Live Traffic Map, Recommended Reading, and Page Popularity. Each of these widgets has different functions:

How To Install Free Live Traffic Feed From FeedJit On Your Blogger

Visit Feedjit

Select Live Traffic Feed.

Click on the Customize It link under Live Traffic Feed. This will allow you to enter colors to match the theme of your blog. If you are in doubt I have found that the easiest method to get the custom colors of a site is to go to the Layout > Page Elements screen in Blogger and click on Add a Gadget and then Adsense. From the configuration screen that pops up you can get the colors of the background, border, title (heading in Feedjit), URL, text. If you use these same colors in your Feedjit widget it will blend in with the rest of your site. You can preview your widget to make sure it looks as you would like it before adding it to your blog.

To automatically add the widget to Blogger select the Click to Add to Blogger Link and follow the instructions. Or to manually add it which I myself prefer right click the code in the box under the heading Live Traffic Feed and select copy.

Navigate to Layout > Page Elements in your blog if that page is not already open

Select Add a Gadget in the Sidebar and then HTML/Javascript

Paste the code by placing the mouse in the box and right clicking and selecting paste

Save the widget and then using the drag and drop feature of Blogger move it to your desired location. Note HTML/Javascript widgets are best placed after your other widgets for faster loading.

if you problem this Instructions To Follow:

STEP #1 Log in to Blogger, go to Layout

Add a Gadget of HTML/JavaScript type.

Then add this code in to it:.

<a href='http://bit.ly/work24'><img alt='Blogger Widgets' src='https://sites.google.com/site/bdlab12/24work/Blogspot%2BTutorial.png'/></a><script src='http://feedjit.com/serve/?vv=364&dd=fc3bbe1192899b27481a9335fd9c7c72&wid=c93f0588ad044ffa&pid=0&proid=c22c123c432dc620&bc=FFFFFF&tc=000000&brd1=FFFFFF&lnk=0000FF&hc=336699&ww=220' type='text/javascript'></script></div><span style="font-size:5px;position:absolute;"><a title='Blogger Widget' href="http://24work.blogspot.com" target='_blank'>Blogspot Tutorial</a></span>

Now click Save

Add a Floating Bar (Always On Top) To Your Blog

This script displays a floating bar that sits at the top of the window, gliding gently back into view when the page is scrolled. Regular HTML content can be shown inside of it. And to make the bar less intrusive, once it is closed (by clicking on the "x"), the bar can be set to dismiss for the entire duration of the browser session, by using cookies. Reloading the page won't bring it back. Sites like About.com use something similar to display important tidbits of information.

STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:

</head>

And immediately ABOVE/BEFORE it add these lines:

<style type="text/css">
#topbar{
position:absolute;






border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;
}
</style>

<script type="text/javascript">
/***********************************************
* Floating Top Bar script- Â© Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
* Code via http://bloggerstop.net
***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels






var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode &amp;&amp;
document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose &amp;&amp; get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

Now click Save Template
.,

And go to Layout -> Page Elements -> Click on "Add a Gadget" and select it as "HTML/JavaScript" type. And then paste this code in to it:

<div id="topbar"> <a href="#" onclick="closebar(); return false"><img src="http://i37.tinypic.com/2vd051i.gif" align="right" border="0" /> <a href="http://bdlab.blogspot.com/" onclick="closebar(); return true">Your content here. </div>

Now click Save

Pages

How to add Flying "Scroll to Top" button to your Blogger blog using Jquery

Simple Mouseover Effect Code For Images

Add AutoHiding Social Bookmarking Widget To Your Blog

Free Feedjit LiveTraffic Feed For Blogger

Add a Floating Bar (Always On Top) To Your Blog