3 Adding Social boomark ( album 2 vs Jquery ) Posted by vuluganck | at Monday, May 25, 2009

This is the next part about adding social bookmark to your blog including anywhere on your blog or beneath each post.But there is 1 difference between this 2nd part and the 1st part, that's Jquery.

In this part I will guide you how to create Social bookmark with jquery.But what is the difference feature between the normal code with Jquery code?
Jquery code will make your blog to load faster, more beautiful and specially, they are unique.


Ok let's go to the 1st tip:




1.Jquery Bookmark (simple)

Download this file, CLICK HERE

Extract them then you will see 2 js files : jqbookmark and jquery-1.2.6.min
Next, upload them on your favorite host to get the direct link.

Ok log in your blogger account, go to your source template and paste this code before </head> tag:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>

<script src="js/jqbookmark.js" type="text/javascript"></script>

Important:
-Notice the red code, that's the place you have to put your direct link to 2 js file.


Ok when you add successful the parsed code above, create a HTML/Javascript and add this code:

<div>
<ul>
<li><a href="http://www.google.com" title="Google.com" class="jqbookmark">Google bookmark</a></li>
<li><a href="http://www.yahoo.com" title="Yahoo search engine" class="jqbookmark">Yahoo bookmark</a></li>
<li><a href="http://calisza.wordpress.com" title="A wonderful Blog" class="jqbookmark">Blog bookmark</a></li>
<li><a href="http://www.zenplate.blogspot.com" title="Microsoft">Will not be bookmarked</a></li>
</ul>
</div>

Done, after all you will see it looks like this
You can add more social services if you want.

Website: http://calisza.wordpress.com


2.Half image social icon



This is one of the latest style of social bookmarking, very nice and lovely.At this, I will expand whole the code here so you don't have to download anything, but I advise you should make a js file and upload it to any host because using external script will reduce the loading time for your blog.That's my idea, all the code in every tip can be moved to external link and my blog-Zenplate is doing that.

Ok log in your blogger account and go to your source code, find the ]]></b:skin> and paste this CSS code before it:

div.sexy-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}
div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') 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('http://img509.imageshack.us/img509/3131/sexysprite.png') 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;
}

Next , find <data:post.body/> ( if you can not find it , please find the similar code like it, and if you have more than one <data:post.body/>, find the last one) and add this code beneath it:

<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>

Done, Save now and join.
Website:Unknown

3.Smooth social bookmark bar

*This is the hardest in 3 tips about Jquery social bookmark but if you try your best, you will get the best result.This is the demo of the tip, look at it before you decide to pick it.

-Ok download this zip file now,click here

-Extract them you will see the 4 files : Image , Js , index.html and style.css, don't care about the index.html and style.css, we will not use them, they are not necessary, just for you to compare and option if you like.

-Up load 2 js files and get the direct links.
-Next go to your source template and add this code before the </head> tag :

<script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>


Important note:
The pink code is the direct link of the 2 js files.

-Next add this CSS code before the ]]></b:skin>


/* CSS Document */
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
outline: none;
font-size: 1em;
text-decoration: none;
}
body {
background-color: #FFFFFF;
padding-top: 5px;
font: 11px/16px "Lucida Grande", Verdana, sans-serif;
color: #999;
text-shadow: #fff 0 1px 0;
overflow: -moz-scrollbars-vertical;
overflow: -webkit-scrollbars-vertical;
-webkit-text-size-adjust: none;
}

a {
color: #666;
text-decoration: underline;
}
a:hover {
color: #000;
}

h2 {
height: 40px;
font: 20px/40px Helvetica Neue, Helvetica, Arial, sans-serif;
color: #FFFFFF;
padding: 0 25px;
clear: both;
}
.leftBoxHeading_Off {
position:absolute;
width: 295px;
height: 35px;
color: #94c93d;
font-size: 100%;
cursor: pointer;
left: 350px;
top: 26px;
}
div#top div#nav a.mca{
float:left;
width:118px;
height:28px;
text-indent:-9999px;
margin:11px 10px 0 0;
}
div#media-centre-holder{
z-index:50;
width:700px;
height:419px;
overflow:hidden;
position:absolute;
margin:0 0 0 10px;
}
div#media-centre-holder div#media-centre{
top:0;
left:0;
width:550px;
height:419px;
position:absolute;
}
div#media-centre-holder div#media-centre-controls{
top:8px;
right:5px;
width:550px;
height:400px;
position:absolute;
}
#content {
padding: 0 20px;
overflow: hidden;
}

div#content div.wrap{
min-height:550px;
padding-top:15px;
}
div#content h2{
float:left;
width:400px;
height:16px;
display:inline;
line-height:16px;
margin:5px 0 0 5px;
text-indent:-9999px;
background-position:0 0;
background-repeat:no-repeat;
}
#networks {
width: 650px;
float: left;
}

#networks li {
width: 235px;
height: 60px;
float: left;
}

#networks li a {
width: 225px;
height: 45px;
padding: 10px 0 5px;
text-decoration: none;
}

#networks li a:active {
padding: 12px 0 3px
}

#networks li a img {
float: left;
margin: 0 10px 0 15px;
-webkit-transition: margin-left 0.25s linear;
}

#networks li a strong {
color: #000;
font: 18px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
float:left;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;

}
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#top div#nav a.mca{
float:left;
width:249px;
height:37px;
display:inline;
text-indent:-9999px;
margin:10px 20px 0 0;
}

div#media-centre-holder{
left:27%;
top:75px;
z-index:50;
width:550px;
height:419px;
overflow:hidden;
position:absolute;
margin:0 0 0 10px;
}
div#media-centre-holder div#media-centre{
top:0;
left:0;
width:550px;
height:419px;
position:absolute;
}
div#media-centre-holder div#media-centre-controls{
top:8px;
width:550px;
height:400px;
position:absolute;
}
h1 {
font: normal 310%/110% Garamond, Georgia, serif;
letter-spacing: -2px;
text-transform: uppercase;
text-align: center;
padding: 20px 0 0;
margin: 0;
}
.credits {
font: 130%/110% Garamond, Georgia, serif;
text-align: center;
color: #999;
width: 300px;
margin: .5em auto 1.5em;
padding-top: 8px;
border-top: 1px solid #ededed;
letter-spacing: 2px;
}
.credits em {
color: #999;
}
.credits a {
color: #333;
text-decoration: none;
text-transform: uppercase;
}
.credits a:hover {
text-decoration: underline;
}
#Layer2 {
position:absolute;
left:83px;
top:309px;
width:861px;
height:172px;
z-index:2;
}


-Finally, create a HTML/Javascript and add this code:

<div class="leftBoxHeading_Off">
<a href="#" id="mc" class="mca" onclick="mc.toggle(1);return false;"><img src="images/left-box-heading-off.png" /></a>
</div>
<div id="media-centre-holder">
<div id="media-centre">
<div id="media-centre-controls">
<script type="text/javascript">if(window.mc){mc.auto_open=false;}</script>
<div id="content">

<h2>Networks</h2>
<ul class="node" id="networks">

<li><a href="http://delicious.com/ravindra1982" rel="me">
<img src="images/delicious_48.png" width="48" height="48" alt="Delicious" /><strong>Delicious</strong>delicious.com/ravindra1982</a></li>

<li><a href="http://www.facebook.com/people/Ravindra-Misal/623481114" rel="me"><img src="images/facebook_48.png" width="48" height="48" alt="Facebook" /><strong>Facebook</strong>facebook/Ravindra-Misal</a></li>

<li><a href="http://www.mixx.com/users/ravindra1982" rel="me"><img src="images/mixx_logo_48.png" width="48" height="48" alt="Mixx" />
<strong>Mixx</strong>mixx.com/ravindra1982</a></li>

<li><a href="http://twitter.com/ravindra1982" rel="me"><img src="images/twitter_icons_48.png" width="48" height="48" alt="Twitter" /><strong>Twitter</strong>twitter.com/ravindra1982</a></li>

<li><a href="http://www.digg.com/users/rajuworld" rel="me">
<img src="images/digg.png" width="48" height="48" alt="Digg" />
<strong>Digg</strong>www.digg.com/rajuworld</a></li>


<li><a href="http://www.reddit.com/user/rajmalhotra1982" rel="me"><img src="images/reddit.png" width="48" height="48" alt="Reddit" /><strong>Reddit</strong>reddit.com/rajmalhotra1982</a></li>

<li><a href="http://rajthecoolperson.stumbleupon.com" rel="me"><img src="images/stumble-upon.png" width="48" height="48" alt="Stumble-UpOn" /><strong>Stumble-UpOn</strong>rajthecoolperson</a></li>

<li><a href="http://technorati.com/people/technorati/ravindra1982" rel="me"><img src="images/technorati.png" width="48" height="48" alt="Technorati" /><strong>Technorati</strong><br />Raj on Technorati</a></li></ul>

</div>
</div>
</div>
</div>

Important Note:
Notice the orange code: Open the images file, you will see the whole images you need to upload and get the direct link to these images, paste them into the orange code.If you don't paste the image URL , it wont be worked.Remember that!

Website :http://www.dreamcss.com

Done, this article is about 3 different social bookmarks from easy to hard, if you have any problem on each kind, please leave me a comment below.Hope you like this, subscribe me to get more monster tips for blogger.
Zen


Requirements:Jquery
Website : Unknown
Convert to Blogger: Zenplate

7 Add floating bar on top Posted by vuluganck | at Tuesday, May 12, 2009

Floating bar-Maybe some blogger have heard about this but there was a little error when adding it to source in the previous version.Therefore, can not use it on blogger.

Today I decide to guide you how to make floating bar always on top at the screen even you scroll down.It's feature is you can put the "Subscribe" request or feedback, notice...It just like the floating bar at the bottom that I had published for a long time ago.If you would like to know how to make floating bar at the bottom you can view here.
This kind of floating bar is from dynamicdrive.com so thanks for share.To view demo you can click here


Ok let's do it.

Open your source code and add this code before the ]]></b:skin> tag:


#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;


<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
*Make it works on blogger by Zen :http://zenplate.blogspot.com
***********************************************/

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 && 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 && 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>

Ok Save all and create a HTML/Javascript and add this:

<div id="topbar">
<a href="#" onclick="closebar(); return false"><img src="http://www.gigaimage.com/images/6gxult9ji6pxr9r7wo.gif" align="right" border="0" />
<a href="http://www.site5.com/in.php?id=69188-42" onclick="closebar(); return true">Join Site5-The trusty and best affiliate to make money online with Zen now
</div>

Now you are successful added it to your blog , just save and join but there are some spots that you have to know:Look at the red code, the symbols "&&", that is the reason to make it error on your blog if you add the whole code to your source.The green code is the place you have to option it by your own, you can put Feed,Twitter follow request....up to you.

I hope it will help you much,if you still have any problem please leave a comment below, I will help you soon.
Thanks my friends and don't forget to subscribe and follow me on Twitter to receive the cool daily tips.
Zen

Requirements:Jquery
Developer: Roy Whittle
Website :http://www.dynamicdrive.com/

4 Create a Jquery box to contain texts Posted by vuluganck | at Sunday, May 10, 2009

This is the next cool tip using Jquery code on blogger.As the name appears on the title, can you imagine how it looks and what is it used for ? Do you see the "Spread" button ? click on it you will see the result.
With smooth effect ( the familiar effect in Jquery), this box can be used instead for the tip "put code in a frame" that I have published for a long time.

1. You have to add this script to your source template, before the </head> tag:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">$(function(){$("#butToggle").click(function(){$('#dvt').toggle(1000);});});</script>

2.Next, add this CSS code before the </body> tag :

#dvt{width: 200px;height: 100px;border: solid 1px black;background-color:LightGrey;text-align:center; display:none;}

3.Finally ,create a HTML/JavaScript then add this code or you can add it to your entry too :
<div id="dvt">Put your codes, texts here...</div>
<button id="butToggle">Spread</button>


Look for the red code ,that is the place you need to put text and option the size of the box.
Save and have fun.

You like it ? Yeah , you have got an interesting tip for blogger with Jquery, i love designing and getting these on blog,I hope you like it.Please subscribe me to receive my daily tips and comment below.Thanks
Zen


Requirements:Jquery
Website : http://Zenplate.blogspot.com
Convert to Blogger: Zenplate

4 Create scrolling (running)news ticker using Jquery Posted by vuluganck | at Saturday, May 09, 2009

Hello everyone, have you ever seen this kind of tip ? I am sure you have seen it on some websites , or you have known how to make it on blogger.But let me explain to you what is the different from the old and this.

I don't know where the old running text come from , but I am sure that is not attractive much, you will be dizzy when you look at the running text.So that is the difference ,with this post, I will guide you how to make a completely new Scrolling news ticker with smooth effect that you will not be dizzy anymore.

• View live demo


• Download

That's it ! Now lets go to make it:
1.First you have to add this script code before your </head> tag :

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>


2.There are 2 types of scrolling :
-If you want the scrolling to stop when the cursor is over it, use this code and add it before the </body> tag or paste it in HTML/Javascript in Layout.

<DIV ID="TICKER" STYLE="overflow:hidden; width:520px" onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">
Your text here!
</DIV>
<script type="text/javascript" src="webticker_lib.js" language="javascript"></script>

-If you don't want the ticker stop when the cursor is over it , try this code add paste at the same place I told you above:

<DIV ID="TICKER" STYLE="overflow:hidden; width:520px">
Your text here
</DIV>
<script type="text/javascript" src="webticker_lib.js" language="javascript"></script>

Note:
-Download the js file above (click on Download link), you will get 1 js file, upload it to your favorite host and get the direct link, i offer you some good hosts as 110mb.com, hotlinkfiles.com...Then paste the link instead of the red code.
-You have to put long text,if your texts are not long enough, it will not run!

Ok now , if you want to change a little bit about the "scrolling text" style , you have to open the webticker_lib.js file then look for these lines:

TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 2;
TICKER_STYLE = "font-family:Arial; font-size:12px; color:#444444";
TICKER_PAUSED = false;

You can edit the file webticker_lib.js and change the values for the following variables:

TICKER_RIGHTTOLEFT

Set to true if the text is in Arabic, Hebrew or other right-to-left writing language.

TICKER_SPEED

Set the scrolling speed. Default value is 2.

TICKER_STYLE

Set the default style for the scrolling text.

TICKER_PAUSED

When this variable is set to true, the scrolling ticker is paused.
This value can be changed at runtime, for example when the mouse is over the ticker.

Now you have owned one of the greatest tip for blogger.If you have any problem please leave a comment below I will help you.Please subscribe me to get more these tips.
Zen


Requirements:Jquery
Website: http://www.mioplanet.com/
Developer : Mioplanet
Convert to Blogger: Zenplate

8 Create "Scroll to Top" button using Jquery Posted by vuluganck | at Tuesday, May 05, 2009

Hi, most of you have known about scroll to top and its feature is very useful for who has long blog.Adding a "scroll to top" button is very great idea.Today I will guide you to add it to your blog. Maybe you are using "scroll to top" button already but it seems very dry.So, this button will have the different look from the old buttons, with "smooth" effect you will feel your blog is so sweet hah hah! You will like it ! Love it, and don't worry, it is all lightweight, it will load very fast and just 1 click it your screen will fly along from bottom to the top. So great!

This code I have found from
Craig Wilson, Ph.Creative
Thank you very much!

1.Ok to make it , take a look in your source code now and find the </body> tag then add following code before it:

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

The red code is the words appear with your button, you can change it by another words.

2.Now add this CSS code before ]]></b:skin> tag :

/* to top */
#toTop { 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; }

Yeah yeah so easy huh, just add and add.....

3.Final step, add this Jquery codes before </body> tag:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
* Bring to you by Zen from http://zenplate.blogspot.com
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
* Do not delete these infomation
* Version: 1.0, 12/03/2009
-----------------------*/

$(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>
Now Save it and try it,do you want to see the demo?My blog-Zenplate is now using it , you can see it at the right corner, click on it you will see the efftects
Hope you like it.Subscribe me now to get more cool tips
Zen


Requirements:Jquery
Website : http://zenplate.blogspot.com
Convert to Blogger: Zenplate

4 Expandable summary post using Jquery Posted by vuluganck | at Sunday, May 03, 2009

Hi , have you ever heard the word "Read more"? You are owning a blog and you don't know what "Read more" means? You are having a long content with many posts but you still don't know anything about "Read more" form?Or you know "Read more" but you feel it is very hard to implement it to your blog ? This is the 3rd tip and this is the easiest way to make it , these are 2 others tips about creating Read-more:" Auto Read more-the newest version" or " Basic Read more" .

This Read-more instruction is not similar to the others , it's using Jquery code which is the fastest and lightweight language in blog/website designing.And its special style is always have smooth effect , you can feel that effect every time you click on it.

Now lets try it now..
Log in you blogger account and go to Layout > Edit HTML > Expand Widget Templates.



Now find the </head> tag then paste this code right before it :

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$('.excerpt').expander({
slicePoint: 280, // default is 100
expandText: '[Read More...]', // default is 'read more...'
});

});
</script>

Notice the red code, 280 is the number of summary words, the minimum is 100 and the maximum is 400 , up to you.
Change the Read More by another word you like as Click here , View full here....( you can't change it by an icon,image..,just word).

Next find this whole code :

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

And replace it by this new code:

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

You have Done , now Save and join it.Leave me a comment if you are in trouble with this tip.
And follow me on Twitter here to get more new tips

Requirements:Jquery
Website : http://zenplate.blogspot.com
Convert to Blogger: Zenplate