January 2012 ~ karimbujang

Tuesday, 31 January 2012

Get The Monster Social Bookmarking Widget For Your Blog

Tuesday, January 31, 2012 Tutorial No comments

In this post we have another great social bookmarking set of buttons for your blog, but this time were going BIG.A lot of blogs are taking the 'Bigger is better' approach to social bookmarking and so can you.This bookmarking widget includes large bookmarking buttons for the top seven social networks and bookmarking sites with two counter style buttons.While the Bookmark icons are cool its the large 'Share It !' banner that sets this gadget apart from the rest.

With all blogs now offering social bookmark options they have become invisible to most readers but this set will defiantly stand out.Once you follow the steps below the monster bookmarks will be below all your posts.

This is a screen shot of the gadget :

You can also see a demo of the gadget on a live blog : Live Demo

Looks Great !

How to have the monster Share It Bookmarks to your blog

Step 1. In your dashboard click 'Layout' > 'Edit Html' > Tick the 'Expand Widget Templates' box

Step 2. Find the following code in your blogs html :
(Click Ctrl and F for a search bar to help find the code - More Info)

<data:post.body/>

Step 3. Place the following code Directly Below/Under <data:post.body/>
(If <data:post.body/> is in your template twice place it below the second one)

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxFa3i4E0aJmZLvYGSW2rFbNX53Ccdk-oGV1KDLd72XrllVj17ya6SZWNAoaM5HbtWdPvVV4CJO9IkimqtngwpaHfZuPDmBlEsNiJN73jKHh3Gi8pFkOdz0NHA6K-SmUD4_CIk71rXi6h/s1600/best+blogger+tips.png'/></a><br/>
<a href='http://www.spiceupyourblog.com/' target='_blank'><img alt='Monster Share Gadget' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrhpFNJfhHstGRc6i-pu8IkdAjCL49ioMcdJCAKlmQADfwyUgMl3Sd4k5CFSbZDdgwPkb8qwLPV-hLOs-rYFoqcwzH0_aEcrdPZ7fl56R9gIM385gGFtsJN3fE7qJeQoz6-vh87EL-9upl/s1600/shareit.png'/></a>
<div style='clear:both; '>
<div style='width:60px; float:left;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<div style='width:60px; float:left;'>
<script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/stumble.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/delicious.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/technorati.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/twitter.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/facebook.gif' style='padding:0;margin:0;border:none;'/></a>
</div></div><small><a href='http://www.spiceupyourblog.com/2010/02/social-bookmarking-widget-share-it.html'>Blog<br/>Gadget</a></small><br/>

Once you have the code in place save your template.

The Monster Bookmark Set is now below all your posts !

Pop Up Fixed Bookmarking Gadget For Blogger

Tuesday, January 31, 2012 Tutorial No comments

In this post we see how to add a very cool Social Bookmarking gadget to your blog.But unlike most Social Media gadgets, Sharing gadgets and Bookmarking gadgets that are placed above or below posts this gadget is fixed at the bottom of your blog and can be used at any time for readers to Bookmark and Share your blog.The gadget displays 8 of the most popular social sites at all times and slides up to reveal 16 more options for your readers.Other options include a minimize button for the reader to hide the buttons and pop them back up when required.Installing the gadget on your blog is quick and easy and will help get you more exposure and more visitors.

See The Live Demo - Pop Up Social Bookmark Gadget Demo

Screenshot -

Add Pop Up Bookmarking Gadget To Your Blog

Step 1. In your dashboard click 'Design' > 'Add A Gadget'

Step 2. From The Pop Up Menu Select 'Html/Javascript'

Step 3. Copy The Code Below And Paste It Into The Area Provided - See Image Below Code.

<a href="http://www.spiceupyourblog.com"><small>Grab Bookmark Gadget</small></a><a href="http://web.informer.com/button/providers/list"><img id="Webinformer_FavoritesButton_Button" src="http://s.web.informer.com/images/b2.gif" alt="Web Informer Button" style="border: 0" /></a>
<script src="http://s.web.informer.com/favorites-button.js?glass," type="text/javascript" charset="UTF-8"></script><a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxFa3i4E0aJmZLvYGSW2rFbNX53Ccdk-oGV1KDLd72XrllVj17ya6SZWNAoaM5HbtWdPvVV4CJO9IkimqtngwpaHfZuPDmBlEsNiJN73jKHh3Gi8pFkOdz0NHA6K-SmUD4_CIk71rXi6h/s1600/best+blogger+tips.png'/></a>

Step 4. Save The Gadget - You can now drag and drop the gadget anywhere on your design page and it will still appear in the same location on your blog.

Note - If you only want the gadget to be on your post pages and not on the home page see this post - Add Gadget To Only Home Or Post Pages.

Thats it a cool expandable Pop Up Bookmark and Share gadget fixed on your blog.Check out more of the great Bookmarking Gadgets we have for your blog here - Social Bookmark Gadgets.Let us know if you have added it to your blog !

Floating Back To Top Button For Blogger

Tuesday, January 31, 2012 Tutorial No comments

The 'Back To Top' button is quiet popular on Blogs and websites and i this post we will see how to add a back to top button to Blogger.Once added the Button Will float down the page as the reader scrolls n rest at the foot of the page until needed.Adding the Back to top button to blogger just requires some code added to a html/javascript gadget in your designpage.We will be using an image button for the back to top and i will show you how you can change this image to any button you like.

Demo - Check Out A Demo Of The Back To Top Button Here , you should see the button fall as you scroll.

Add Back To Top Button To Blogger

Step 1. In your dashboard click 'Design' > 'Add A Gadget' > Choose 'Html/Javascript' from the pop up menu.

Step 2. Copy The Code Below And Paste It Into The Html/Javascript gadget.

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxFa3i4E0aJmZLvYGSW2rFbNX53Ccdk-oGV1KDLd72XrllVj17ya6SZWNAoaM5HbtWdPvVV4CJO9IkimqtngwpaHfZuPDmBlEsNiJN73jKHh3Gi8pFkOdz0NHA6K-SmUD4_CIk71rXi6h/s1600/best+blogger+tips.png'/></a><script type="text/JavaScript">
var topMargin = 300
var slideTime = 1200
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
window.setInterval("main()", 10)

function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
}
}

function main() {
if (ns4) {
this.currentY = document.floatLayer.top;
this.scrollTop = window.pageYOffset;
mainTrigger();
} else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').style.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
mainTrigger();
}

}
function mainTrigger() {
var newTargetY = this.scrollTop + this.topMargin
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY
floatStart();
}
animator();
}

}
function floatStart() {
var now = new Date()
this.A = this.targetY - this.currentY
this.B = Math.PI / ( 2 * this.slideTime )
this.C = now.getTime()
if (Math.abs(this.A) > this.findHt) {
this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt
this.A = this.A > 0 ? this.findHt : -this.findHt
} else {
this.D = this.currentY
}
}
function animator() {
var now = new Date()
var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D
newY = Math.round(newY)
if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
if ( ie4 )floatLayer.style.pixelTop = newY
if ( ns4 )document.floatLayer.top = newY
if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px"
}
}
//-->
</script>
<div id="floatLayer" style="position: absolute; height:20px; width:15; left:650px; top:400px; z-index: 100"><a href="#"><img vspace="0" border="0" hspace="0" alt="Back to Top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXxoY1OxcYjep9zSDbZr6GGqu1suHfO77y56Y5CQdl-8pnEZ8it-aES5x2c0G2qjlAMpXNI9aj9rXQTCGiuW2YuHrmclb8I6KyN1fA1vneEwlZM_T2_MiCbkxFD8KR1hGzVrelS2sibbC1/s1600/TOP+BUTTON.gif" title="Back To Top Of Page" /></a></div><a href="http://spiceupyourblog.com" target="_blank"><small>Blogger Top Gadget</small></a>

Important

If the button stops in the middle of your page and not at the bottom increase the number in red at the start of the code, for example in the demo i had to set that number to 500.

left:650px; = How far from the left the button appears you can increase and decrease it to suit your blog.

top:400px; = How far from the top it appears.

You can change the image used for the button by changing the image URL in blue to any image you wish to use.

Step 3. Save your template - You can drag and drop the gadget to the bottom of your design page as position wont effect the gadget.

That's it your Back to top button has been added to your blog.Check out more of our Gadgets and Resources for Blogger.

A Simple Stylish JQuery Featured Slideshow For Blogger

Tuesday, January 31, 2012 Tutorial No comments

Earlier this week i brought you a very cool jQuery Featured Image Slider that can slide images and videos.In that post i explained how i hadn't covered featured sliders or slideshows too much but was gonna make up for it.So here we have another featured slider slash slideshow slash image carousel.The slideshow in this post has a simple style but that gives us some extra options, the main one is you can easily make it any size to suit your blog or the images you want to use.

In the demo i have made it quiet small so it will fit above the posts section.But you can have it fit neatly above your posts or you can have it span across your full blog in the cross column zone.

Pretty nifty, credit goes to Sohtanaka and the download for Wordpress or other platforms can be found there.Lets see how you can add it to Blogger.

Add The Simple Stylish Featured Slideshow To Blogger

Step 1. In your Blogger dashboard click Design > Edit Html

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

]]></b:skin>

Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>

/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:250px; width: 500px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzZJtmbF2wajmKGRRZkFZqf0dYtLBqTpJ1ewziVbCY9sHbIuiT7G2omdg7Yq-02CcHncwk7i7diOSqAIIDFftBSO1evSfTNjOmN-hJJCYIdwvUGJ_XVpN2PYRsjasN5WYvErDIK6hZ-sNs/s1600/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

Change the size - I currently have the size set to 500x250 as highlighted in the code above.You can change this to make it bigger and remember that size is also the size of the images you add.

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

</head>

Step 5. Copy and Paste the following code Directly Above / Before </head>

Step 6. Save your template.

That's the Script and Css added to your template to make the slider work now we add the html.

Step 1. OK back to your blogs design page and click Add A Gadget > Choose Html/Javascript :

Step 2. Copy and Paste the following code into the Html/Javascript gadget ;

<div class="container">

<div class="folio_block">

<div class="main_view">

<div class="window">
<div class="image_reel">

<a href="http://www.spiceupyourblog.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-lQAnwnyTk2-MFCObWI8Z8_yeCjU9PovyhRwM5i7SLm7D5P0Y4lWHA7nM_Cuy3XBClOXlAv4ZuhhEjfvf7-IO5jpEl0wAWQBDX6tG1KEYX_M320888TO6fQs_aqxD79TOWC7cxFtfIB4/s1600/slider-image-1.jpg" alt="" /></a>

<a href="http://www.spiceupyourblog.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZGqeVeXNhex-PPu0BCKpdHP8nbW4o-3TIR4WKh6S26txzXZedJWIQvvHVU7AkJFBeH2PFGztjcvvz52jZ0HDPusQzmu49FMBv01nwqkaca3J3DRqQAW-IkaNy8ZkqfjHM2P6cUL6UzKSM/s1600/slider-image-2.jpg" alt="" /></a>

<a href="http://www.spiceupyourblog.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj23Qx5ll7LgC9I9ceA8ATjahkVGG8tMsoFBCLjeGB4WbEaIBtKXeCkyf3do3UMP9KVHlQIzr-kcwLrT6rscPKoYjygkV4qI8GQ4I0eORi4R2Epdlp25SjWqjCPKP3gyuh2VCEkGsY11ycT/s1600/slider-image-3.jpg" alt="" /></a>

<a href="http://www.spiceupyourblog.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhIoM23P2RMQwxjUTKcm7qRaJRr9fM0if7kdlapS01uQc3GdrPUTpx7w2gsxKH6EdOq96wVfy4mGLH2maCoZynMiM-Qd9PpGzvFt6RmzYOQFV3yXTeqYjplY-Kd_w4Wtu3Qj8kwOpFK1Co/s1600/slider-image-4.jpg" alt="" /></a>

<a href="http://www.spiceupyourblog.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1LtpkHriwrXrYMIfR5P4dz_8W5SIyeTFpMjvcFEXvXpLnhrwoqdJQ3FYB3oIfxSgzGqvs5CyOXJRwJ2wtDSUEiAnGjvgQGjzNmASRwXxflN6bBn3tIDgpAZtAmnft-pK-E7_hu6MqZw3f/s1600/slider-image-6.jpg" alt="" /></a>

</div>
</div>
<div class="paging">

<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>

</div>
</div>

</div>

</div>

Adding Your Slides

Highlighted in red are the URLs this is were the image will lead to when clicked.
Highlighted in green is the Image URLs replace these with the URLs of your images.

To add more than 5 slides simply add another link and image the same as the ones there now.But make sure to add another number to the pager highlighted in blue.So at the moment there are 5 slides and the pager in blue goes to 5.If you added a 6th slide you would add it like this :

<a href="#" rel="6">6</a>

Once you have your images and links added save the gadget and drag and drop it into position.

That's your simple jQuery slider added to Blogger

karimbujang

Tuesday, 31 January 2012

Get The Monster Social Bookmarking Widget For Your Blog

Pop Up Fixed Bookmarking Gadget For Blogger

Floating Back To Top Button For Blogger

A Simple Stylish JQuery Featured Slideshow For Blogger

Add The Simple Stylish Featured Slideshow To Blogger

Labels

Blog Archive

karimbujang

Tuesday, 31 January 2012

Get The Monster Social Bookmarking Widget For Your Blog

Pop Up Fixed Bookmarking Gadget For Blogger

Floating Back To Top Button For Blogger

A Simple Stylish JQuery Featured Slideshow For Blogger

Add The Simple Stylish Featured Slideshow To Blogger

Social Profiles

Labels

Blog Archive