Enjoy Bookmarking and Blogging!
1.First go to SocioFluid Website and preview the widget:
2.If you are not like it you can customize it,
You can change size of icon,add or remove icon,....
3.scroll down at the end of the page and press generate widget button:
4.Preview the widget on top of the page and if you like it Click on 'Add to Blogger' or 'Copy to Clipboard'.But if you want to add this widget below each blog posts click on 'Copy to Clipboard' to copy the code.
5.Now Log in to your dashboard--> layout- -> Edit HTML
6.Click on "Expand Widget Templates"
7.Scroll down to where you see this:
9.Now save your template and your done.It look like this.
Read More...
2.If you are not like it you can customize it,
You can change size of icon,add or remove icon,....
3.scroll down at the end of the page and press generate widget button:
4.Preview the widget on top of the page and if you like it Click on 'Add to Blogger' or 'Copy to Clipboard'.But if you want to add this widget below each blog posts click on 'Copy to Clipboard' to copy the code.
5.Now Log in to your dashboard--> layout- -> Edit HTML
6.Click on "Expand Widget Templates"
7.Scroll down to where you see this:
9.Now save your template and your done.It look like this.
1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:
4.After the above code , copy and paste the code below:
5.Click on "Save Templates" and refresh your site.
Read More...
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:
4.After the above code , copy and paste the code below:
<!-- SocialList.org BEGIN --> <script type="text/javascript"> sociallist_url = location.href; sociallist_title = document.title; sociallist_text = ''; sociallist_tags = ''; </script><script type="text/javascript" src="http://sociallist.org/widget.js?type=1&cols=3&rows=5&button_dx=300&button_dy=50&lang=en"></script> <noscript> <a href="http://sociallist.org/submit.php?type=1&lang=en&url=refpage&title=refpage&tag=refpage&text=refpage" target="_blank" title="Bookmark this Website"><img src="http://sociallist.org/buttons/en300x50.gif" border="0" width="300" height="50" alt="Bookmark" /></a> </noscript> <!-- SocialList.org END -->
5.Click on "Save Templates" and refresh your site.
1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see </head> tag.
4.Now add below code before </head> tag.
Note : If you use "Read more...." feature in your template,find second code like this( <data:post.body/> ).6.Now add below code immediately after <data:post.body/> .
7.Now save your template and you are done.
Read More...
2.Click on "Expand Widget Templates"
3.Scroll down to where you see </head> tag.
4.Now add below code before </head> tag.
<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP6d_rzS-OLWVqCZQ3qrecNrT9Jek7LuPXW4IgC4-x6RHQ9C5btU6_OcSJt2Oua2Na-B-O9RPtQGvum0mYSn5uBR1TRWW0wSvUiauqHwcg5NVdLiBU2Hztt3Sxmh_OqR8sFn3YWdYHmcM_/') 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/AVvXsEhP6d_rzS-OLWVqCZQ3qrecNrT9Jek7LuPXW4IgC4-x6RHQ9C5btU6_OcSJt2Oua2Na-B-O9RPtQGvum0mYSn5uBR1TRWW0wSvUiauqHwcg5NVdLiBU2Hztt3Sxmh_OqR8sFn3YWdYHmcM_/') 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/AVvXsEgRvD04gPPzYWWT8CVtHATAzQNG9wEYtW6JV3BerqaJmY6sfaIq1Z4WjnEPooYgOwZBHjTeF3cqCCnS29ANCESVucl8QRfBotugmWa-ZD6ad27JmITzOIudhpPv1KggN26E2XxO9rS7fjB2/') 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>
Note : If you use "Read more...." feature in your template,find second code like this( <data:post.body/> ).6.Now add below code immediately after <data:post.body/> .
<ul class='socials'> <li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + 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='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> </ul> <span class='sexy-rightside'/></div> |
7.Now save your template and you are done.
1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:
4.Copy below code and paste it immediately after the line <p><data:post.body/></p> .
Note : Remember to replace YOURBLOG with your real blog name.
5.Click on "Save Templates" and now you are done.Look at the below.
Read More...
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:
4.Copy below code and paste it immediately after the line <p><data:post.body/></p> .
Note : Remember to replace YOURBLOG with your real blog name.
5.Click on "Save Templates" and now you are done.Look at the below.
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see ]]></b:skin> tag:
4.Copy below code and paste it just before the ]]></b:skin> tag.
5.Scroll down to where you see </head> tag:
6.Copy below code and paste it just before the </head> tag.
7.Scroll down to where you see <p><data:post.body/></p> .
8.Copy below code and paste it just after the <p><data:post.body/></p> .
9.Click on "Save Templates" and now you are done.It will look like this.
Read More...
2.Click on "Expand Widget Templates"
3.Scroll down to where you see ]]></b:skin> tag:
4.Copy below code and paste it just before the ]]></b:skin> tag.
/* SosialBookmark
*/
#sharebox{
height:48px;
width:400px;
margin:0;
padding:5px 0;
}
ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;}
ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute;}
ul.sharebox li a { margin:0 0 0 -24px; display:block;}
ul.sharebox li a:hover { margin:0 0 0 -8px; }
ul.sharebox li img { border:none;}
5.Scroll down to where you see </head> tag:
6.Copy below code and paste it just before the </head> tag.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
(function($){
$.fn.sharebox = function(){
var element = this;
$(element).find("li").each(function(i){
$(this).css("z-index", 10- i);
if (i>0)
$(this).css("left", i * 24 + 100);
});
}
})(jQuery);
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#sharebox").sharebox();
});
</script>
7.Scroll down to where you see <p><data:post.body/></p> .
8.Copy below code and paste it just after the <p><data:post.body/></p> .
<ul class='sharebox' id='sharebox'> <li><img alt='Share this' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmkuLMrwEhI/AAAAAAAABm8/SF6x9UfvEJA/s800/sharethis.png'/></li> <li><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Digg' src='http://lh5.ggpht.com/_dfnTVAxeWMI/Smktud4qk8I/AAAAAAAABmk/z5vZVjTmD7k/s800/digg_48.png'/></a></li> <li><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to StumbleUpon' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuLCBTubI/AAAAAAAABm4/KwVHDJnT-EQ/s800/sumbleupon_48.png'/></a></li> <li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Delicious' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SmktubnHpoI/AAAAAAAABmg/b31Po_kEbnc/s800/delicious_48.png'/></a></li> <li><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Technorati' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SmkuK1y0_cI/AAAAAAAABm0/C8EExNM-xjE/s800/technorati_48.png'/></a></li> <li><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Sumbit to Reddit' src='http://lh3.ggpht.com/_dfnTVAxeWMI/Smkturrni-I/AAAAAAAABmw/AbGticB0wAs/s800/reddit_48.png'/></a></li> </ul>
9.Click on "Save Templates" and now you are done.It will look like this.
1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:
4.Copy below code and paste it immediately after the line <p><data:post.body/></p> .
5.Click on "Save Templates" and now you are done.
Read More...
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:
<p><data:post.body/></p>
4.Copy below code and paste it immediately after the line <p><data:post.body/></p> .
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Digg it !!!</a>
5.Click on "Save Templates" and now you are done.
1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:
4.Copy below code and paste it immediately after the line <p><data:post.body/></p> .
5.Click on "Save Templates" and now you are done.
Read More...
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:
<p><data:post.body/></p>
4.Copy below code and paste it immediately after the line <p><data:post.body/></p> .
<a expr:href='"http://technorati.com/signup/?f=favorites&Url=" + data:post.url' rel='nofollow' target='_blank'>Share on Technorati</a>
5.Click on "Save Templates" and now you are done.
1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:
4.Copy below code and paste it immediately after the line <p><data:post.body/></p> .
5.Click on "Save Templates" and now you are done.
Read More...
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:
<p><data:post.body/></p>
4.Copy below code and paste it immediately after the line <p><data:post.body/></p> .
<a expr:href='"http://www.facebook.com/sharer.php?&u=" + data:post.url' target='_blank'>Share on Facebook</a>
5.Click on "Save Templates" and now you are done.
Here is the 1 st collection of Beautiful Sets of Social Bookmarking
Icons for blogger and everyone.I found these beautiful templates while
surfing the internet. These are some of the best and effective social
network icons to be used on you blog and anywhere you want.
Click on the pictures to download Social Bookmark Icons sets.
A set consist of 30 individual icons of the popular social networks/Web 2.0 sites. The design was inspired on iPhone icons.
A set of 3d look social bookmarking icons available in adobe pdf vector format and PNG.
A set contains 3 of the most popular social network sites and an RSS on a an Ice Drop. Sizes are 512 x 512 pixels in PNG format.
A set contains 12 high quality icons. Sizes are 16×16px, 32×32px, 48×48px, 64×64px and 128×128px in 32-bit transparency PNG file format. This free icons set contains all the most popular social icons, placed inside a sticker, making them easy to use in all kinds of projects.
A set contains 3 of the most popular social network sites and an RSS on a Cake. Sizes are 512 x 512 pixels in PNG format.
The set of icons named “Location” which consist of 10 quality social media icons. Sizes are 32 x 32, 48 x 48, 64 x 64 and 128 x 128 pixels.
A set contains 12 “social” glasses. This set are available in PNG and EPS format. Cheers!!!
‘Handy’ is a set of 24 free and exclusive vector icons that can be used on websites, logos and more. The icons have a unique hand drawn feeling and look great in color or black and white.
A set contains of 12 beautiful icons for social media and others.
A set contains of 22 social icons in .png and in resolutions 16×16, 32×32, and 64×64 pixels.
A hand drawn social media icon set that contains 12 icons. Package contains icons for del.icio.us, Digg, Mixx, DesignBump, StumbleUpon, Reddit, Developer Zone, DesignFloat, Technorati, Twitter and RSS feed & Email icon
The set is consists of 11 icons including social networks sites in PNG format (64 x 64).
A set contains of 8 icons in PNG (128×128, 48×48, 32×32, 16×16) format.
A set contains 14 free hand drawn doodle icons for bloggers. These includes social media graphics for Delicious, Design Float, Digg, Facebook, StumbleUpon, Technorati and Twitter as well as commonly used icons such as RSS, Home, Comments, Contact and Wordpress.
A set contains 11 social network icons. Sizes are available 256×256px and 48×48px in .PNG format.
A set contains 15 origami style icons. The set are available in PNG, PSD and EPS format.
A set contains 11 social icons, designed in an autumn-style. The set includes icons for Twitter, Technorati, RSS, Reddit, Facebook, Delicious, StumbleUpon and Digg. The icons are available in the .PNG-format in various resolutions.
A set contains of social bookmarking buttons like digg,stumbleupon, facebook, and many more. All files are in PNG format.
A set contains of 16 different icons of social network sites. Sizes are 16 x 16, 32 x 32, and 64 x 64 in PNG format.
A set of 10 freeware “circular” icons of Web 2 Social Bookmarks ( Blinklist, Delicious, Digg, Flickr, Furl, Magnolia, Newsvine, Reddit, Stumbleupon, Technorati )for use in blogs, websites, desktops, softwares. The Linux version includes .PNG files sized from 512X512 to 16X16 pixels.
A set of 6 social icons (Digg, Twitter, Delicious, RSS, Reddit & Stumbleupon) are free to use on your websites and blogs. The icons are provided many different formats like PSD files, AI files,PNG, etc.
The set includes 10 icons featuring the logos of popular social bookmarking sites. The set was designed with a fresh, lively, green look in mind. The pack includes 512×512, 256×256, 128×128, and 64×64 icons in .png format.
Read More...
Click on the pictures to download Social Bookmark Icons sets.
Aquaticus Icons Package
A set consist of 30 individual icons of the popular social networks/Web 2.0 sites. The design was inspired on iPhone icons.
Vector Social Bookmark Icons Package
A set of 3d look social bookmarking icons available in adobe pdf vector format and PNG.
DelliCream Bookmark Icons Package
A set contains 3 of the most popular social network sites and an RSS on a an Ice Drop. Sizes are 512 x 512 pixels in PNG format.
Socialize Icons Package
A set contains 12 high quality icons. Sizes are 16×16px, 32×32px, 48×48px, 64×64px and 128×128px in 32-bit transparency PNG file format. This free icons set contains all the most popular social icons, placed inside a sticker, making them easy to use in all kinds of projects.
DelliCake Icons Package
A set contains 3 of the most popular social network sites and an RSS on a Cake. Sizes are 512 x 512 pixels in PNG format.
Location Icons Package
The set of icons named “Location” which consist of 10 quality social media icons. Sizes are 32 x 32, 48 x 48, 64 x 64 and 128 x 128 pixels.
Cheers Icons Package
A set contains 12 “social” glasses. This set are available in PNG and EPS format. Cheers!!!
Handy Icons Package
‘Handy’ is a set of 24 free and exclusive vector icons that can be used on websites, logos and more. The icons have a unique hand drawn feeling and look great in color or black and white.
Social Bookmark Icon set
A set contains of 12 beautiful icons for social media and others.
Heart Social Bookmark Icon set
A set contains of 22 social icons in .png and in resolutions 16×16, 32×32, and 64×64 pixels.
Handycons Social Bookmark Icon set
A hand drawn social media icon set that contains 12 icons. Package contains icons for del.icio.us, Digg, Mixx, DesignBump, StumbleUpon, Reddit, Developer Zone, DesignFloat, Technorati, Twitter and RSS feed & Email icon
Social Icons Made of Wood Icons Package
The set is consists of 11 icons including social networks sites in PNG format (64 x 64).
WebDev Social Bookmarks Icons Package
A set contains of 8 icons in PNG (128×128, 48×48, 32×32, 16×16) format.
Free Hand Drawn Doodle Social Bookmark Icons Package
A set contains 14 free hand drawn doodle icons for bloggers. These includes social media graphics for Delicious, Design Float, Digg, Facebook, StumbleUpon, Technorati and Twitter as well as commonly used icons such as RSS, Home, Comments, Contact and Wordpress.
Social Bookmark Icons
A set contains 11 social network icons. Sizes are available 256×256px and 48×48px in .PNG format.
Web 2.0rigami Social Bookmark Icons Package
A set contains 15 origami style icons. The set are available in PNG, PSD and EPS format.
The Leaves Fall Social Bookmark Icons Package
A set contains 11 social icons, designed in an autumn-style. The set includes icons for Twitter, Technorati, RSS, Reddit, Facebook, Delicious, StumbleUpon and Digg. The icons are available in the .PNG-format in various resolutions.
Social Bookmark Buttons Package
A set contains of social bookmarking buttons like digg,stumbleupon, facebook, and many more. All files are in PNG format.
Set of social icons Package
A set contains of 16 different icons of social network sites. Sizes are 16 x 16, 32 x 32, and 64 x 64 in PNG format.
Circle Social Bookmark Icons Package
A set of 10 freeware “circular” icons of Web 2 Social Bookmarks ( Blinklist, Delicious, Digg, Flickr, Furl, Magnolia, Newsvine, Reddit, Stumbleupon, Technorati )for use in blogs, websites, desktops, softwares. The Linux version includes .PNG files sized from 512X512 to 16X16 pixels.
6 Free New Social Icons Package
A set of 6 social icons (Digg, Twitter, Delicious, RSS, Reddit & Stumbleupon) are free to use on your websites and blogs. The icons are provided many different formats like PSD files, AI files,PNG, etc.
Nurture Social Bookmark Icons Package
The set includes 10 icons featuring the logos of popular social bookmarking sites. The set was designed with a fresh, lively, green look in mind. The pack includes 512×512, 256×256, 128×128, and 64×64 icons in .png format.
Wild Twist Social media Icon pack
Social Icon stickers Icons Package
Tabbed Social Media Icon Set
Gorgeous Mini Social Networking Icon set
Knobs Social Bookmark Icons Package
WHITE MAGIK Social Bookmark Icons Package
Elegant Social Media Icons Version 2.0
Black n white- Social Media Icons Version 1.0
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see below code:
4.Now Copy your Mixx it Button code and paste it just below the above code.
NOTE: If you can't find <div class='post-header-line-1'/> in your template paste your Mixx it Button code just before <data:post.body/> .
It will look like this:
Read More...
2.Click on "Expand Widget Templates"
3.Scroll down to where you see below code:
<div class='post-header-line-1'/>
4.Now Copy your Mixx it Button code and paste it just below the above code.
NOTE: If you can't find <div class='post-header-line-1'/> in your template paste your Mixx it Button code just before <data:post.body/> .
<div style='float:right; margin-left:10px;'> <img align='absmiddle' alt='Add to Mixx!' border='0' src='http://www.mixx.com/images/buttons/mixx-button4.png' style='margin-left:20px;'/> <a expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url'> Mixx it! </a> </div>
It will look like this:
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see below code:
4.Now Copy your DZone Submit Button code and paste it just below the above code.
NOTE: If you can't find <div class='post-header-line-1'/> in your template paste your DZone Submit Button code just before <data:post.body/> .
DZone Submit Buttons Codes:
CODE 1:
Result:
CODE 2:
Result:
You are done.
Read More...
2.Click on "Expand Widget Templates"
3.Scroll down to where you see below code:
<div class='post-header-line-1'/>
4.Now Copy your DZone Submit Button code and paste it just below the above code.
NOTE: If you can't find <div class='post-header-line-1'/> in your template paste your DZone Submit Button code just before <data:post.body/> .
DZone Submit Buttons Codes:
CODE 1:
<div style='float:right; margin-left:10px;'> <script type="text/javascript"> var dzone_url = '<data:post.url/>'; </script> <script type="text/javascript"> var dzone_title = '<data:post.title/>'; </script> <script type="text/javascript"> var dzone_style = '1'; </script> <script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"> </script> </div>
Result:
CODE 2:
<div style='float:right; margin-left:10px;'> <script type="text/javascript"> var dzone_url = '<data:post.url/>'; </script> <script type="text/javascript"> var dzone_title = '<data:post.title/>'; </script> <script type="text/javascript"> var dzone_style = '2'; </script> <script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"> </script> </div>
Result:
You are done.
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see </head> tag .
4.Copy below code and paste it just before the </head> tag .
5.Now again Scroll down to where you see below code:
6.Now replace above code with below code:
7.Save your template.
8.Now go to Layout-->Page Element and click on "Add a gadget".
9.Select "html/java script" and add the code given below and click save.
You are done.
Read More...
2.Click on "Expand Widget Templates"
3.Scroll down to where you see </head> tag .
4.Copy below code and paste it just before the </head> tag .
<style type='text/css'>
#content { width:100%; }
#content img { float:right; margin-left:20px; }
.ui-draggable { cursor:move; }
#tip { position:absolute; display:none; height:25px; padding:9px 9px 0px; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; background:#000; background:rgba(0,0,0,.5); }
#tip .arrow { width:0; height:0; line-height:0; border-right:8px solid #000; border-right:8px solid rgba(0,0,0,.5); border-top:8px solid transparent; border-bottom:8px solid transparent; position:absolute; left:-8px; top:9px; }
#targets { display:none; list-style-type:none; position:absolute; top:10px; z-index:99999; }
#targets li { float:left; margin-right:20px; display:block; width:60px; height:60px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Xx5ULM4qLREnaqZULM7EB7V5F4XVaUXyKfyeUnYjGNzoMlN0a362gUb7gEnL3BQ2hrCcURDp7l8nIEwFXz6otKJhAKBtJqUwH_OUDiyBKTOTJg6qQnq-L8AiMpI2qKm2BT5yPj-A7ppi/) no-repeat 0 0; position:relative; }
#targets li#delicious { background-position:0 -60px; }
#targets li#facebook { background-position:0 -120px; }
#targets li span { display:block; position:absolute; bottom:-40px; white-space:pre; color:#fff; }
#overlay { background-color:#000; position:absolute; top:0; left:0; width:100%; height:100%; z-index:99997; }
#helper { background-color:#c2c2c2; position:absolute; height:35px; padding:15px 70px 0 20px; color:#fff; font-family:Verdana; font-weight:bold; font-size:18px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; border:3px solid #7d7d7d; }
#thumb { width:50px; height:50px; position:absolute; right:0; top:0; border-left:3px solid #7d7d7d; }
.share { font-weight:bold; position:absolute; font-size:14px; font-family:Verdana; margin-left:-38px; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery UI 1.7.2
*
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://docs.jquery.com/UI
*/
jQuery.ui||(function(c){var i=c.fn.remove,d=c.browser.mozilla&&(parseFloat(c.browser.version)<1.9);c.ui={version:"1.7.2",plugin:{add:function(k,l,n){var m=c.ui[k].prototype;for(var j in n){m.plugins[j]=m.plugins[j]||[];m.plugins[j].push([l,n[j]])}},call:function(j,l,k){var n=j.plugins[l];if(!n||!j.element[0].parentNode){return}for(var m=0;m<n.length;m++){if(j.options[n[m][0]]){n[m][1].apply(j.element,k)}}}},contains:function(k,j){return document.compareDocumentPosition?k.compareDocumentPosition(j)&16:k!==j&&k.contains(j)},hasScroll:function(m,k){if(c(m).css("overflow")=="hidden"){return false}var j=(k&&k=="left")?"scrollLeft":"scrollTop",l=false;if(m[j]>0){return true}m[j]=1;l=(m[j]>0);m[j]=0;return l},isOverAxis:function(k,j,l){return(k>j)&&(k<(j+l))},isOver:function(o,k,n,m,j,l){return c.ui.isOverAxis(o,n,j)&&c.ui.isOverAxis(k,m,l)},keyCode:{BACKSPACE:8,CAPS_LOCK:20,COMMA:188,CONTROL:17,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,INSERT:45,LEFT:37,NUMPAD_ADD:107,NUMPAD_DECIMAL:110,NUMPAD_DIVIDE:111,NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106,NUMPAD_SUBTRACT:109,PAGE_DOWN:34,PAGE_UP:33,PERIOD:190,RIGHT:39,SHIFT:16,SPACE:32,TAB:9,UP:38}};if(d){var f=c.attr,e=c.fn.removeAttr,h="http://www.w3.org/2005/07/aaa",a=/^aria-/,b=/^wairole:/;c.attr=function(k,j,l){var m=l!==undefined;return(j=="role"?(m?f.call(this,k,j,"wairole:"+l):(f.apply(this,arguments)||"").replace(b,"")):(a.test(j)?(m?k.setAttributeNS(h,j.replace(a,"aaa:"),l):f.call(this,k,j.replace(a,"aaa:"))):f.apply(this,arguments)))};c.fn.removeAttr=function(j){return(a.test(j)?this.each(function(){this.removeAttributeNS(h,j.replace(a,""))}):e.call(this,j))}}c.fn.extend({remove:function(){c("*",this).add(this).each(function(){c(this).triggerHandler("remove")});return i.apply(this,arguments)},enableSelection:function(){return this.attr("unselectable","off").css("MozUserSelect","").unbind("selectstart.ui")},disableSelection:function(){return this.attr("unselectable","on").css("MozUserSelect","none").bind("selectstart.ui",function(){return false})},scrollParent:function(){var j;if((c.browser.msie&&(/(static|relative)/).test(this.css("position")))||(/absolute/).test(this.css("position"))){j=this.parents().filter(function(){return(/(relative|absolute|fixed)/).test(c.curCSS(this,"position",1))&&(/(auto|scroll)/).test(c.curCSS(this,"overflow",1)+c.curCSS(this,"overflow-y",1)+c.curCSS(this,"overflow-x",1))}).eq(0)}else{j=this.parents().filter(function(){return(/(auto|scroll)/).test(c.curCSS(this,"overflow",1)+c.curCSS(this,"overflow-y",1)+c.curCSS(this,"overflow-x",1))}).eq(0)}return(/fixed/).test(this.css("position"))||!j.length?c(document):j}});c.extend(c.expr[":"],{data:function(l,k,j){return !!c.data(l,j[3])},focusable:function(k){var l=k.nodeName.toLowerCase(),j=c.attr(k,"tabindex");return(/input|select|textarea|button|object/.test(l)?!k.disabled:"a"==l||"area"==l?k.href||!isNaN(j):!isNaN(j))&&!c(k)["area"==l?"parents":"closest"](":hidden").length},tabbable:function(k){var j=c.attr(k,"tabindex");return(isNaN(j)||j>=0)&&c(k).is(":focusable")}});function g(m,n,o,l){function k(q){var p=c[m][n][q]||[];return(typeof p=="string"?p.split(/,?\s+/):p)}var j=k("getter");if(l.length==1&&typeof l[0]=="string"){j=j.concat(k("getterSetter"))}return(c.inArray(o,j)!=-1)}c.widget=function(k,j){var l=k.split(".")[0];k=k.split(".")[1];c.fn[k]=function(p){var n=(typeof p=="string"),o=Array.prototype.slice.call(arguments,1);if(n&&p.substring(0,1)=="_"){return this}if(n&&g(l,k,p,o)){var m=c.data(this[0],k);return(m?m[p].apply(m,o):undefined)}return this.each(function(){var q=c.data(this,k);(!q&&!n&&c.data(this,k,new c[l][k](this,p))._init());(q&&n&&c.isFunction(q[p])&&q[p].apply(q,o))})};c[l]=c[l]||{};c[l][k]=function(o,n){var m=this;this.namespace=l;this.widgetName=k;this.widgetEventPrefix=c[l][k].eventPrefix||k;this.widgetBaseClass=l+"-"+k;this.options=c.extend({},c.widget.defaults,c[l][k].defaults,c.metadata&&c.metadata.get(o)[k],n);this.element=c(o).bind("setData."+k,function(q,p,r){if(q.target==o){return m._setData(p,r)}}).bind("getData."+k,function(q,p){if(q.target==o){return m._getData(p)}}).bind("remove",function(){return m.destroy()})};c[l][k].prototype=c.extend({},c.widget.prototype,j);c[l][k].getterSetter="option"};c.widget.prototype={_init:function(){},destroy:function(){this.element.removeData(this.widgetName).removeClass(this.widgetBaseClass+"-disabled "+this.namespace+"-state-disabled").removeAttr("aria-disabled")},option:function(l,m){var k=l,j=this;if(typeof l=="string"){if(m===undefined){return this._getData(l)}k={};k[l]=m}c.each(k,function(n,o){j._setData(n,o)})},_getData:function(j){return this.options[j]},_setData:function(j,k){this.options[j]=k;if(j=="disabled"){this.element[k?"addClass":"removeClass"](this.widgetBaseClass+"-disabled "+this.namespace+"-state-disabled").attr("aria-disabled",k)}},enable:function(){this._setData("disabled",false)},disable:function(){this._setData("disabled",true)},_trigger:function(l,m,n){var p=this.options[l],j=(l==this.widgetEventPrefix?l:this.widgetEventPrefix+l);m=c.Event(m);m.type=j;if(m.originalEvent){for(var k=c.event.props.length,o;k;){o=c.event.props[--k];m[o]=m.originalEvent[o]}}this.element.trigger(m,n);return !(c.isFunction(p)&&p.call(this.element[0],m,n)===false||m.isDefaultPrevented())}};c.widget.defaults={disabled:false};c.ui.mouse={_mouseInit:function(){var j=this;this.element.bind("mousedown."+this.widgetName,function(k){return j._mouseDown(k)}).bind("click."+this.widgetName,function(k){if(j._preventClickEvent){j._preventClickEvent=false;k.stopImmediatePropagation();return false}});if(c.browser.msie){this._mouseUnselectable=this.element.attr("unselectable");this.element.attr("unselectable","on")}this.started=false},_mouseDestroy:function(){this.element.unbind("."+this.widgetName);(c.browser.msie&&this.element.attr("unselectable",this._mouseUnselectable))},_mouseDown:function(l){l.originalEvent=l.originalEvent||{};if(l.originalEvent.mouseHandled){return}(this._mouseStarted&&this._mouseUp(l));this._mouseDownEvent=l;var k=this,m=(l.which==1),j=(typeof this.options.cancel=="string"?c(l.target).parents().add(l.target).filter(this.options.cancel).length:false);if(!m||j||!this._mouseCapture(l)){return true}this.mouseDelayMet=!this.options.delay;if(!this.mouseDelayMet){this._mouseDelayTimer=setTimeout(function(){k.mouseDelayMet=true},this.options.delay)}if(this._mouseDistanceMet(l)&&this._mouseDelayMet(l)){this._mouseStarted=(this._mouseStart(l)!==false);if(!this._mouseStarted){l.preventDefault();return true}}this._mouseMoveDelegate=function(n){return k._mouseMove(n)};this._mouseUpDelegate=function(n){return k._mouseUp(n)};c(document).bind("mousemove."+this.widgetName,this._mouseMoveDelegate).bind("mouseup."+this.widgetName,this._mouseUpDelegate);(c.browser.safari||l.preventDefault());l.originalEvent.mouseHandled=true;return true},_mouseMove:function(j){if(c.browser.msie&&!j.button){return this._mouseUp(j)}if(this._mouseStarted){this._mouseDrag(j);return j.preventDefault()}if(this._mouseDistanceMet(j)&&this._mouseDelayMet(j)){this._mouseStarted=(this._mouseStart(this._mouseDownEvent,j)!==false);(this._mouseStarted?this._mouseDrag(j):this._mouseUp(j))}return !this._mouseStarted},_mouseUp:function(j){c(document).unbind("mousemove."+this.widgetName,this._mouseMoveDelegate).unbind("mouseup."+this.widgetName,this._mouseUpDelegate);if(this._mouseStarted){this._mouseStarted=false;this._preventClickEvent=(j.target==this._mouseDownEvent.target);this._mouseStop(j)}return false},_mouseDistanceMet:function(j){return(Math.max(Math.abs(this._mouseDownEvent.pageX-j.pageX),Math.abs(this._mouseDownEvent.pageY-j.pageY))>=this.options.distance)},_mouseDelayMet:function(j){return this.mouseDelayMet},_mouseStart:function(j){},_mouseDrag:function(j){},_mouseStop:function(j){},_mouseCapture:function(j){return true}};c.ui.mouse.defaults={cancel:null,distance:1,delay:0}})(jQuery);;/*
* jQuery UI Draggable 1.7.2
*
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://docs.jquery.com/UI/Draggables
*
* Depends:
* ui.core.js
*/
(function(a){a.widget("ui.draggable",a.extend({},a.ui.mouse,{_init:function(){if(this.options.helper=="original"&&!(/^(?:r|a|f)/).test(this.element.css("position"))){this.element[0].style.position="relative"}(this.options.addClasses&&this.element.addClass("ui-draggable"));(this.options.disabled&&this.element.addClass("ui-draggable-disabled"));this._mouseInit()},destroy:function(){if(!this.element.data("draggable")){return}this.element.removeData("draggable").unbind(".draggable").removeClass("ui-draggable ui-draggable-dragging ui-draggable-disabled");this._mouseDestroy()},_mouseCapture:function(b){var c=this.options;if(this.helper||c.disabled||a(b.target).is(".ui-resizable-handle")){return false}this.handle=this._getHandle(b);if(!this.handle){return false}return true},_mouseStart:function(b){var c=this.options;this.helper=this._createHelper(b);this._cacheHelperProportions();if(a.ui.ddmanager){a.ui.ddmanager.current=this}this._cacheMargins();this.cssPosition=this.helper.css("position");this.scrollParent=this.helper.scrollParent();this.offset=this.element.offset();this.offset={top:this.offset.top-this.margins.top,left:this.offset.left-this.margins.left};a.extend(this.offset,{click:{left:b.pageX-this.offset.left,top:b.pageY-this.offset.top},parent:this._getParentOffset(),relative:this._getRelativeOffset()});this.originalPosition=this._generatePosition(b);this.originalPageX=b.pageX;this.originalPageY=b.pageY;if(c.cursorAt){this._adjustOffsetFromHelper(c.cursorAt)}if(c.containment){this._setContainment()}this._trigger("start",b);this._cacheHelperProportions();if(a.ui.ddmanager&&!c.dropBehaviour){a.ui.ddmanager.prepareOffsets(this,b)}this.helper.addClass("ui-draggable-dragging");this._mouseDrag(b,true);return true},_mouseDrag:function(b,d){this.position=this._generatePosition(b);this.positionAbs=this._convertPositionTo("absolute");if(!d){var c=this._uiHash();this._trigger("drag",b,c);this.position=c.position}if(!this.options.axis||this.options.axis!="y"){this.helper[0].style.left=this.position.left+"px"}if(!this.options.axis||this.options.axis!="x"){this.helper[0].style.top=this.position.top+"px"}if(a.ui.ddmanager){a.ui.ddmanager.drag(this,b)}return false},_mouseStop:function(c){var d=false;if(a.ui.ddmanager&&!this.options.dropBehaviour){d=a.ui.ddmanager.drop(this,c)}if(this.dropped){d=this.dropped;this.dropped=false}if((this.options.revert=="invalid"&&!d)||(this.options.revert=="valid"&&d)||this.options.revert===true||(a.isFunction(this.options.revert)&&this.options.revert.call(this.element,d))){var b=this;a(this.helper).animate(this.originalPosition,parseInt(this.options.revertDuration,10),function(){b._trigger("stop",c);b._clear()})}else{this._trigger("stop",c);this._clear()}return false},_getHandle:function(b){var c=!this.options.handle||!a(this.options.handle,this.element).length?true:false;a(this.options.handle,this.element).find("*").andSelf().each(function(){if(this==b.target){c=true}});return c},_createHelper:function(c){var d=this.options;var b=a.isFunction(d.helper)?a(d.helper.apply(this.element[0],[c])):(d.helper=="clone"?this.element.clone():this.element);if(!b.parents("body").length){b.appendTo((d.appendTo=="parent"?this.element[0].parentNode:d.appendTo))}if(b[0]!=this.element[0]&&!(/(fixed|absolute)/).test(b.css("position"))){b.css("position","absolute")}return b},_adjustOffsetFromHelper:function(b){if(b.left!=undefined){this.offset.click.left=b.left+this.margins.left}if(b.right!=undefined){this.offset.click.left=this.helperProportions.width-b.right+this.margins.left}if(b.top!=undefined){this.offset.click.top=b.top+this.margins.top}if(b.bottom!=undefined){this.offset.click.top=this.helperProportions.height-b.bottom+this.margins.top}},_getParentOffset:function(){this.offsetParent=this.helper.offsetParent();var b=this.offsetParent.offset();if(this.cssPosition=="absolute"&&this.scrollParent[0]!=document&&a.ui.contains(this.scrollParent[0],this.offsetParent[0])){b.left+=this.scrollParent.scrollLeft();b.top+=this.scrollParent.scrollTop()}if((this.offsetParent[0]==document.body)||(this.offsetParent[0].tagName&&this.offsetParent[0].tagName.toLowerCase()=="html"&&a.browser.msie)){b={top:0,left:0}}return{top:b.top+(parseInt(this.offsetParent.css("borderTopWidth"),10)||0),left:b.left+(parseInt(this.offsetParent.css("borderLeftWidth"),10)||0)}},_getRelativeOffset:function(){if(this.cssPosition=="relative"){var b=this.element.position();return{top:b.top-(parseInt(this.helper.css("top"),10)||0)+this.scrollParent.scrollTop(),left:b.left-(parseInt(this.helper.css("left"),10)||0)+this.scrollParent.scrollLeft()}}else{return{top:0,left:0}}},_cacheMargins:function(){this.margins={left:(parseInt(this.element.css("marginLeft"),10)||0),top:(parseInt(this.element.css("marginTop"),10)||0)}},_cacheHelperProportions:function(){this.helperProportions={width:this.helper.outerWidth(),height:this.helper.outerHeight()}},_setContainment:function(){var e=this.options;if(e.containment=="parent"){e.containment=this.helper[0].parentNode}if(e.containment=="document"||e.containment=="window"){this.containment=[0-this.offset.relative.left-this.offset.parent.left,0-this.offset.relative.top-this.offset.parent.top,a(e.containment=="document"?document:window).width()-this.helperProportions.width-this.margins.left,(a(e.containment=="document"?document:window).height()||document.body.parentNode.scrollHeight)-this.helperProportions.height-this.margins.top]}if(!(/^(document|window|parent)$/).test(e.containment)&&e.containment.constructor!=Array){var c=a(e.containment)[0];if(!c){return}var d=a(e.containment).offset();var b=(a(c).css("overflow")!="hidden");this.containment=[d.left+(parseInt(a(c).css("borderLeftWidth"),10)||0)+(parseInt(a(c).css("paddingLeft"),10)||0)-this.margins.left,d.top+(parseInt(a(c).css("borderTopWidth"),10)||0)+(parseInt(a(c).css("paddingTop"),10)||0)-this.margins.top,d.left+(b?Math.max(c.scrollWidth,c.offsetWidth):c.offsetWidth)-(parseInt(a(c).css("borderLeftWidth"),10)||0)-(parseInt(a(c).css("paddingRight"),10)||0)-this.helperProportions.width-this.margins.left,d.top+(b?Math.max(c.scrollHeight,c.offsetHeight):c.offsetHeight)-(parseInt(a(c).css("borderTopWidth"),10)||0)-(parseInt(a(c).css("paddingBottom"),10)||0)-this.helperProportions.height-this.margins.top]}else{if(e.containment.constructor==Array){this.containment=e.containment}}},_convertPositionTo:function(f,h){if(!h){h=this.position}var c=f=="absolute"?1:-1;var e=this.options,b=this.cssPosition=="absolute"&&!(this.scrollParent[0]!=document&&a.ui.contains(this.scrollParent[0],this.offsetParent[0]))?this.offsetParent:this.scrollParent,g=(/(html|body)/i).test(b[0].tagName);return{top:(h.top+this.offset.relative.top*c+this.offset.parent.top*c-(a.browser.safari&&this.cssPosition=="fixed"?0:(this.cssPosition=="fixed"?-this.scrollParent.scrollTop():(g?0:b.scrollTop()))*c)),left:(h.left+this.offset.relative.left*c+this.offset.parent.left*c-(a.browser.safari&&this.cssPosition=="fixed"?0:(this.cssPosition=="fixed"?-this.scrollParent.scrollLeft():g?0:b.scrollLeft())*c))}},_generatePosition:function(e){var h=this.options,b=this.cssPosition=="absolute"&&!(this.scrollParent[0]!=document&&a.ui.contains(this.scrollParent[0],this.offsetParent[0]))?this.offsetParent:this.scrollParent,i=(/(html|body)/i).test(b[0].tagName);if(this.cssPosition=="relative"&&!(this.scrollParent[0]!=document&&this.scrollParent[0]!=this.offsetParent[0])){this.offset.relative=this._getRelativeOffset()}var d=e.pageX;var c=e.pageY;if(this.originalPosition){if(this.containment){if(e.pageX-this.offset.click.left<this.containment[0]){d=this.containment[0]+this.offset.click.left}if(e.pageY-this.offset.click.top<this.containment[1]){c=this.containment[1]+this.offset.click.top}if(e.pageX-this.offset.click.left>this.containment[2]){d=this.containment[2]+this.offset.click.left}if(e.pageY-this.offset.click.top>this.containment[3]){c=this.containment[3]+this.offset.click.top}}if(h.grid){var g=this.originalPageY+Math.round((c-this.originalPageY)/h.grid[1])*h.grid[1];c=this.containment?(!(g-this.offset.click.top<this.containment[1]||g-this.offset.click.top>this.containment[3])?g:(!(g-this.offset.click.top<this.containment[1])?g-h.grid[1]:g+h.grid[1])):g;var f=this.originalPageX+Math.round((d-this.originalPageX)/h.grid[0])*h.grid[0];d=this.containment?(!(f-this.offset.click.left<this.containment[0]||f-this.offset.click.left>this.containment[2])?f:(!(f-this.offset.click.left<this.containment[0])?f-h.grid[0]:f+h.grid[0])):f}}return{top:(c-this.offset.click.top-this.offset.relative.top-this.offset.parent.top+(a.browser.safari&&this.cssPosition=="fixed"?0:(this.cssPosition=="fixed"?-this.scrollParent.scrollTop():(i?0:b.scrollTop())))),left:(d-this.offset.click.left-this.offset.relative.left-this.offset.parent.left+(a.browser.safari&&this.cssPosition=="fixed"?0:(this.cssPosition=="fixed"?-this.scrollParent.scrollLeft():i?0:b.scrollLeft())))}},_clear:function(){this.helper.removeClass("ui-draggable-dragging");if(this.helper[0]!=this.element[0]&&!this.cancelHelperRemoval){this.helper.remove()}this.helper=null;this.cancelHelperRemoval=false},_trigger:function(b,c,d){d=d||this._uiHash();a.ui.plugin.call(this,b,[c,d]);if(b=="drag"){this.positionAbs=this._convertPositionTo("absolute")}return a.widget.prototype._trigger.call(this,b,c,d)},plugins:{},_uiHash:function(b){return{helper:this.helper,position:this.position,absolutePosition:this.positionAbs,offset:this.positionAbs}}}));a.extend(a.ui.draggable,{version:"1.7.2",eventPrefix:"drag",defaults:{addClasses:true,appendTo:"parent",axis:false,cancel:":input,option",connectToSortable:false,containment:false,cursor:"auto",cursorAt:false,delay:0,distance:1,grid:false,handle:false,helper:"original",iframeFix:false,opacity:false,refreshPositions:false,revert:false,revertDuration:500,scope:"default",scroll:true,scrollSensitivity:20,scrollSpeed:20,snap:false,snapMode:"both",snapTolerance:20,stack:false,zIndex:false}});a.ui.plugin.add("draggable","connectToSortable",{start:function(c,e){var d=a(this).data("draggable"),f=d.options,b=a.extend({},e,{item:d.element});d.sortables=[];a(f.connectToSortable).each(function(){var g=a.data(this,"sortable");if(g&&!g.options.disabled){d.sortables.push({instance:g,shouldRevert:g.options.revert});g._refreshItems();g._trigger("activate",c,b)}})},stop:function(c,e){var d=a(this).data("draggable"),b=a.extend({},e,{item:d.element});a.each(d.sortables,function(){if(this.instance.isOver){this.instance.isOver=0;d.cancelHelperRemoval=true;this.instance.cancelHelperRemoval=false;if(this.shouldRevert){this.instance.options.revert=true}this.instance._mouseStop(c);this.instance.options.helper=this.instance.options._helper;if(d.options.helper=="original"){this.instance.currentItem.css({top:"auto",left:"auto"})}}else{this.instance.cancelHelperRemoval=false;this.instance._trigger("deactivate",c,b)}})},drag:function(c,f){var e=a(this).data("draggable"),b=this;var d=function(i){var n=this.offset.click.top,m=this.offset.click.left;var g=this.positionAbs.top,k=this.positionAbs.left;var j=i.height,l=i.width;var p=i.top,h=i.left;return a.ui.isOver(g+n,k+m,p,h,j,l)};a.each(e.sortables,function(g){this.instance.positionAbs=e.positionAbs;this.instance.helperProportions=e.helperProportions;this.instance.offset.click=e.offset.click;if(this.instance._intersectsWith(this.instance.containerCache)){if(!this.instance.isOver){this.instance.isOver=1;this.instance.currentItem=a(b).clone().appendTo(this.instance.element).data("sortable-item",true);this.instance.options._helper=this.instance.options.helper;this.instance.options.helper=function(){return f.helper[0]};c.target=this.instance.currentItem[0];this.instance._mouseCapture(c,true);this.instance._mouseStart(c,true,true);this.instance.offset.click.top=e.offset.click.top;this.instance.offset.click.left=e.offset.click.left;this.instance.offset.parent.left-=e.offset.parent.left-this.instance.offset.parent.left;this.instance.offset.parent.top-=e.offset.parent.top-this.instance.offset.parent.top;e._trigger("toSortable",c);e.dropped=this.instance.element;e.currentItem=e.element;this.instance.fromOutside=e}if(this.instance.currentItem){this.instance._mouseDrag(c)}}else{if(this.instance.isOver){this.instance.isOver=0;this.instance.cancelHelperRemoval=true;this.instance.options.revert=false;this.instance._trigger("out",c,this.instance._uiHash(this.instance));this.instance._mouseStop(c,true);this.instance.options.helper=this.instance.options._helper;this.instance.currentItem.remove();if(this.instance.placeholder){this.instance.placeholder.remove()}e._trigger("fromSortable",c);e.dropped=false}}})}});a.ui.plugin.add("draggable","cursor",{start:function(c,d){var b=a("body"),e=a(this).data("draggable").options;if(b.css("cursor")){e._cursor=b.css("cursor")}b.css("cursor",e.cursor)},stop:function(b,c){var d=a(this).data("draggable").options;if(d._cursor){a("body").css("cursor",d._cursor)}}});a.ui.plugin.add("draggable","iframeFix",{start:function(b,c){var d=a(this).data("draggable").options;a(d.iframeFix===true?"iframe":d.iframeFix).each(function(){a('<div class="ui-draggable-iframeFix" style="background: #fff;"></div>').css({width:this.offsetWidth+"px",height:this.offsetHeight+"px",position:"absolute",opacity:"0.001",zIndex:1000}).css(a(this).offset()).appendTo("body")})},stop:function(b,c){a("div.ui-draggable-iframeFix").each(function(){this.parentNode.removeChild(this)})}});a.ui.plugin.add("draggable","opacity",{start:function(c,d){var b=a(d.helper),e=a(this).data("draggable").options;if(b.css("opacity")){e._opacity=b.css("opacity")}b.css("opacity",e.opacity)},stop:function(b,c){var d=a(this).data("draggable").options;if(d._opacity){a(c.helper).css("opacity",d._opacity)}}});a.ui.plugin.add("draggable","scroll",{start:function(c,d){var b=a(this).data("draggable");if(b.scrollParent[0]!=document&&b.scrollParent[0].tagName!="HTML"){b.overflowOffset=b.scrollParent.offset()}},drag:function(d,e){var c=a(this).data("draggable"),f=c.options,b=false;if(c.scrollParent[0]!=document&&c.scrollParent[0].tagName!="HTML"){if(!f.axis||f.axis!="x"){if((c.overflowOffset.top+c.scrollParent[0].offsetHeight)-d.pageY<f.scrollSensitivity){c.scrollParent[0].scrollTop=b=c.scrollParent[0].scrollTop+f.scrollSpeed}else{if(d.pageY-c.overflowOffset.top<f.scrollSensitivity){c.scrollParent[0].scrollTop=b=c.scrollParent[0].scrollTop-f.scrollSpeed}}}if(!f.axis||f.axis!="y"){if((c.overflowOffset.left+c.scrollParent[0].offsetWidth)-d.pageX<f.scrollSensitivity){c.scrollParent[0].scrollLeft=b=c.scrollParent[0].scrollLeft+f.scrollSpeed}else{if(d.pageX-c.overflowOffset.left<f.scrollSensitivity){c.scrollParent[0].scrollLeft=b=c.scrollParent[0].scrollLeft-f.scrollSpeed}}}}else{if(!f.axis||f.axis!="x"){if(d.pageY-a(document).scrollTop()<f.scrollSensitivity){b=a(document).scrollTop(a(document).scrollTop()-f.scrollSpeed)}else{if(a(window).height()-(d.pageY-a(document).scrollTop())<f.scrollSensitivity){b=a(document).scrollTop(a(document).scrollTop()+f.scrollSpeed)}}}if(!f.axis||f.axis!="y"){if(d.pageX-a(document).scrollLeft()<f.scrollSensitivity){b=a(document).scrollLeft(a(document).scrollLeft()-f.scrollSpeed)}else{if(a(window).width()-(d.pageX-a(document).scrollLeft())<f.scrollSensitivity){b=a(document).scrollLeft(a(document).scrollLeft()+f.scrollSpeed)}}}}if(b!==false&&a.ui.ddmanager&&!f.dropBehaviour){a.ui.ddmanager.prepareOffsets(c,d)}}});a.ui.plugin.add("draggable","snap",{start:function(c,d){var b=a(this).data("draggable"),e=b.options;b.snapElements=[];a(e.snap.constructor!=String?(e.snap.items||":data(draggable)"):e.snap).each(function(){var g=a(this);var f=g.offset();if(this!=b.element[0]){b.snapElements.push({item:this,width:g.outerWidth(),height:g.outerHeight(),top:f.top,left:f.left})}})},drag:function(u,p){var g=a(this).data("draggable"),q=g.options;var y=q.snapTolerance;var x=p.offset.left,w=x+g.helperProportions.width,f=p.offset.top,e=f+g.helperProportions.height;for(var v=g.snapElements.length-1;v>=0;v--){var s=g.snapElements[v].left,n=s+g.snapElements[v].width,m=g.snapElements[v].top,A=m+g.snapElements[v].height;if(!((s-y<x&&x<n+y&&m-y<f&&f<A+y)||(s-y<x&&x<n+y&&m-y<e&&e<A+y)||(s-y<w&&w<n+y&&m-y<f&&f<A+y)||(s-y<w&&w<n+y&&m-y<e&&e<A+y))){if(g.snapElements[v].snapping){(g.options.snap.release&&g.options.snap.release.call(g.element,u,a.extend(g._uiHash(),{snapItem:g.snapElements[v].item})))}g.snapElements[v].snapping=false;continue}if(q.snapMode!="inner"){var c=Math.abs(m-e)<=y;var z=Math.abs(A-f)<=y;var j=Math.abs(s-w)<=y;var k=Math.abs(n-x)<=y;if(c){p.position.top=g._convertPositionTo("relative",{top:m-g.helperProportions.height,left:0}).top-g.margins.top}if(z){p.position.top=g._convertPositionTo("relative",{top:A,left:0}).top-g.margins.top}if(j){p.position.left=g._convertPositionTo("relative",{top:0,left:s-g.helperProportions.width}).left-g.margins.left}if(k){p.position.left=g._convertPositionTo("relative",{top:0,left:n}).left-g.margins.left}}var h=(c||z||j||k);if(q.snapMode!="outer"){var c=Math.abs(m-f)<=y;var z=Math.abs(A-e)<=y;var j=Math.abs(s-x)<=y;var k=Math.abs(n-w)<=y;if(c){p.position.top=g._convertPositionTo("relative",{top:m,left:0}).top-g.margins.top}if(z){p.position.top=g._convertPositionTo("relative",{top:A-g.helperProportions.height,left:0}).top-g.margins.top}if(j){p.position.left=g._convertPositionTo("relative",{top:0,left:s}).left-g.margins.left}if(k){p.position.left=g._convertPositionTo("relative",{top:0,left:n-g.helperProportions.width}).left-g.margins.left}}if(!g.snapElements[v].snapping&&(c||z||j||k||h)){(g.options.snap.snap&&g.options.snap.snap.call(g.element,u,a.extend(g._uiHash(),{snapItem:g.snapElements[v].item})))}g.snapElements[v].snapping=(c||z||j||k||h)}}});a.ui.plugin.add("draggable","stack",{start:function(b,c){var e=a(this).data("draggable").options;var d=a.makeArray(a(e.stack.group)).sort(function(g,f){return(parseInt(a(g).css("zIndex"),10)||e.stack.min)-(parseInt(a(f).css("zIndex"),10)||e.stack.min)});a(d).each(function(f){this.style.zIndex=e.stack.min+f});this[0].style.zIndex=e.stack.min+d.length}});a.ui.plugin.add("draggable","zIndex",{start:function(c,d){var b=a(d.helper),e=a(this).data("draggable").options;if(b.css("zIndex")){e._zIndex=b.css("zIndex")}b.css("zIndex",e.zIndex)},stop:function(b,c){var d=a(this).data("draggable").options;if(d._zIndex){a(c.helper).css("zIndex",d._zIndex)}}})})(jQuery);;/*
* jQuery UI Droppable 1.7.2
*
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://docs.jquery.com/UI/Droppables
*
* Depends:
* ui.core.js
* ui.draggable.js
*/
(function(a){a.widget("ui.droppable",{_init:function(){var c=this.options,b=c.accept;this.isover=0;this.isout=1;this.options.accept=this.options.accept&&a.isFunction(this.options.accept)?this.options.accept:function(e){return e.is(b)};this.proportions={width:this.element[0].offsetWidth,height:this.element[0].offsetHeight};a.ui.ddmanager.droppables[this.options.scope]=a.ui.ddmanager.droppables[this.options.scope]||[];a.ui.ddmanager.droppables[this.options.scope].push(this);(this.options.addClasses&&this.element.addClass("ui-droppable"))},destroy:function(){var b=a.ui.ddmanager.droppables[this.options.scope];for(var c=0;c<b.length;c++){if(b[c]==this){b.splice(c,1)}}this.element.removeClass("ui-droppable ui-droppable-disabled").removeData("droppable").unbind(".droppable")},_setData:function(b,c){if(b=="accept"){this.options.accept=c&&a.isFunction(c)?c:function(e){return e.is(c)}}else{a.widget.prototype._setData.apply(this,arguments)}},_activate:function(c){var b=a.ui.ddmanager.current;if(this.options.activeClass){this.element.addClass(this.options.activeClass)}(b&&this._trigger("activate",c,this.ui(b)))},_deactivate:function(c){var b=a.ui.ddmanager.current;if(this.options.activeClass){this.element.removeClass(this.options.activeClass)}(b&&this._trigger("deactivate",c,this.ui(b)))},_over:function(c){var b=a.ui.ddmanager.current;if(!b||(b.currentItem||b.element)[0]==this.element[0]){return}if(this.options.accept.call(this.element[0],(b.currentItem||b.element))){if(this.options.hoverClass){this.element.addClass(this.options.hoverClass)}this._trigger("over",c,this.ui(b))}},_out:function(c){var b=a.ui.ddmanager.current;if(!b||(b.currentItem||b.element)[0]==this.element[0]){return}if(this.options.accept.call(this.element[0],(b.currentItem||b.element))){if(this.options.hoverClass){this.element.removeClass(this.options.hoverClass)}this._trigger("out",c,this.ui(b))}},_drop:function(c,d){var b=d||a.ui.ddmanager.current;if(!b||(b.currentItem||b.element)[0]==this.element[0]){return false}var e=false;this.element.find(":data(droppable)").not(".ui-draggable-dragging").each(function(){var f=a.data(this,"droppable");if(f.options.greedy&&a.ui.intersect(b,a.extend(f,{offset:f.element.offset()}),f.options.tolerance)){e=true;return false}});if(e){return false}if(this.options.accept.call(this.element[0],(b.currentItem||b.element))){if(this.options.activeClass){this.element.removeClass(this.options.activeClass)}if(this.options.hoverClass){this.element.removeClass(this.options.hoverClass)}this._trigger("drop",c,this.ui(b));return this.element}return false},ui:function(b){return{draggable:(b.currentItem||b.element),helper:b.helper,position:b.position,absolutePosition:b.positionAbs,offset:b.positionAbs}}});a.extend(a.ui.droppable,{version:"1.7.2",eventPrefix:"drop",defaults:{accept:"*",activeClass:false,addClasses:true,greedy:false,hoverClass:false,scope:"default",tolerance:"intersect"}});a.ui.intersect=function(q,j,o){if(!j.offset){return false}var e=(q.positionAbs||q.position.absolute).left,d=e+q.helperProportions.width,n=(q.positionAbs||q.position.absolute).top,m=n+q.helperProportions.height;var g=j.offset.left,c=g+j.proportions.width,p=j.offset.top,k=p+j.proportions.height;switch(o){case"fit":return(g<e&&d<c&&p<n&&m<k);break;case"intersect":return(g<e+(q.helperProportions.width/2)&&d-(q.helperProportions.width/2)<c&&p<n+(q.helperProportions.height/2)&&m-(q.helperProportions.height/2)<k);break;case"pointer":var h=((q.positionAbs||q.position.absolute).left+(q.clickOffset||q.offset.click).left),i=((q.positionAbs||q.position.absolute).top+(q.clickOffset||q.offset.click).top),f=a.ui.isOver(i,h,p,g,j.proportions.height,j.proportions.width);return f;break;case"touch":return((n>=p&&n<=k)||(m>=p&&m<=k)||(n<p&&m>k))&&((e>=g&&e<=c)||(d>=g&&d<=c)||(e<g&&d>c));break;default:return false;break}};a.ui.ddmanager={current:null,droppables:{"default":[]},prepareOffsets:function(e,g){var b=a.ui.ddmanager.droppables[e.options.scope];var f=g?g.type:null;var h=(e.currentItem||e.element).find(":data(droppable)").andSelf();droppablesLoop:for(var d=0;d<b.length;d++){if(b[d].options.disabled||(e&&!b[d].options.accept.call(b[d].element[0],(e.currentItem||e.element)))){continue}for(var c=0;c<h.length;c++){if(h[c]==b[d].element[0]){b[d].proportions.height=0;continue droppablesLoop}}b[d].visible=b[d].element.css("display")!="none";if(!b[d].visible){continue}b[d].offset=b[d].element.offset();b[d].proportions={width:b[d].element[0].offsetWidth,height:b[d].element[0].offsetHeight};if(f=="mousedown"){b[d]._activate.call(b[d],g)}}},drop:function(b,c){var d=false;a.each(a.ui.ddmanager.droppables[b.options.scope],function(){if(!this.options){return}if(!this.options.disabled&&this.visible&&a.ui.intersect(b,this,this.options.tolerance)){d=this._drop.call(this,c)}if(!this.options.disabled&&this.visible&&this.options.accept.call(this.element[0],(b.currentItem||b.element))){this.isout=1;this.isover=0;this._deactivate.call(this,c)}});return d},drag:function(b,c){if(b.options.refreshPositions){a.ui.ddmanager.prepareOffsets(b,c)}a.each(a.ui.ddmanager.droppables[b.options.scope],function(){if(this.options.disabled||this.greedyChild||!this.visible){return}var e=a.ui.intersect(b,this,this.options.tolerance);var g=!e&&this.isover==1?"isout":(e&&this.isover==0?"isover":null);if(!g){return}var f;if(this.options.greedy){var d=this.element.parents(":data(droppable):eq(0)");if(d.length){f=a.data(d[0],"droppable");f.greedyChild=(g=="isover"?1:0)}}if(f&&g=="isover"){f.isover=0;f.isout=1;f._out.call(f,c)}this[g]=1;this[g=="isout"?"isover":"isout"]=0;this[g=="isover"?"_over":"_out"].call(this,c);if(f&&g=="isout"){f.isout=0;f.isover=1;f._over.call(f,c)}})}}})(jQuery);;
$(function() {
//cache selector
var images = $("#content img"),
title = $("title").text() || document.title;
//make images draggable
images.draggable({
//create draggable helper
helper: function() {
return $("<div>").attr("id", "helper").html("<span>" + title + "</span><img id='thumb' src='" + $(this).attr("src") + "'>").appendTo("body");
},
cursor: "pointer",
cursorAt: { left: -10, top: 20 },
zIndex: 99999,
//show overlay and targets
start: function() {
$("<div>").attr("id", "overlay").css("opacity", 0.7).appendTo("body");
$("#tip").remove();
$(this).unbind("mouseenter");
$("#targets").css("left", ($("body").width() / 2) - $("#targets").width() / 2).slideDown();
},
//remove targets and overlay
stop: function() {
$("#targets").slideUp();
$(".share", "#targets").remove();
$("#overlay").remove();
$(this).bind("mouseenter", createTip);
}
});
//make targets droppable
$("#targets li").droppable({
tolerance: "pointer",
//show info when over target
over: function() {
$(".share", "#targets").remove();
$("<span>").addClass("share").text("Share on " + $(this).attr("id")).addClass("active").appendTo($(this)).fadeIn();
},
drop: function() {
var id = $(this).attr("id"),
currentUrl = window.location.href,
baseUrl = $(this).find("a").attr("href");
if (id.indexOf("twitter") != -1) {
window.location.href = baseUrl + "/home?status=" + title + ": " + currentUrl;
} else if (id.indexOf("delicious") != -1) {
window.location.href = baseUrl + "/save?url=" + currentUrl + "&title=" + title;
} else if (id.indexOf("facebook") != -1) {
window.location.href = baseUrl + "/sharer.php?u=" + currentUrl + "&t=" + title;
}
}
});
var createTip = function(e) {
//create tool tip if it doesn't exist
($("#tip").length === 0) ? $("<div>").html("<span>Drag this image to share the page<\/span><span class='arrow'><\/span>").attr("id", "tip").css({ left:e.pageX + 30, top:e.pageY - 16 }).appendTo("body").fadeIn(2000) : null;
};
images.bind("mouseenter", createTip);
images.mousemove(function(e) {
//move tooltip
$("#tip").css({ left:e.pageX + 30, top:e.pageY - 16 });
});
images.mouseleave(function() {
//remove tooltip
$("#tip").remove();
});
});
//]]>
</script>
5.Now again Scroll down to where you see below code:
<data:post.body/>
6.Now replace above code with below code:
<div id='content'><data:post.body/></div>
7.Save your template.
8.Now go to Layout-->Page Element and click on "Add a gadget".
9.Select "html/java script" and add the code given below and click save.
<ul id="targets"> <li id="twitter"><a href="http://twitter.com"><!-- --></a></li> <li id="delicious"><a href="http://delicious.com"><!-- --></a></li> <li id="facebook"><a href="http://www.facebook.com"><!-- --></a></li> </ul>
You are done.
Subscribe to:
Posts (Atom)
Glad you liked it. Would you like to share?