Tampilkan postingan dengan label bookmarks. Tampilkan semua postingan
Kamis, 03 Februari 2011
How To Add "Linkedin" Share Button with Counter to Blogger
LinkedIn operates the world�s largest professional network on the Internet with more than 90 million members in over 200 countries and territories. Linkedin has introduced Linkedin share button for websites,blogs to enable their readers and visitors to share the articles of that websites easily on Linkedin. LinkedIn is a place where busy and on-the-go professionals rely on their network to stay informed and make decisions.There were nearly two billion people searches on LinkedIn in 2010.You can add a Linkedin share button to your website and enable visitors to share your content with their network.
In this tutorial I am going to explain how to add a Linkedin share button to your blogger blog.
There are 3 types of Linkedin share buttons : Vertical count, Horizontal count and No count.
If you like to add these Linkedin share button to your blogger blog,then follow the steps given below.
1.Login to your blogger Dashboard--> Design- -> Edit HTML
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 "Linkedin share 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 "Linkedin share button" code just before <data:post.body/> .
Code 1 : Vertical Count
<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='top' expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>
Result:
Code 2 : Horizontal Count
<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='right' expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>
Result:
Code 3 : No Count
<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>
Result:
5.Now save your template.
Refresh your site. Now you can see Linkedin share buttons in every post pages.
You can view more info from here: http://www.linkedin.com/publishers
Selasa, 24 Agustus 2010
How To Add "BlogThis!" Feature to Blogger Blog
You can see a "BlogThis!" button in the blogger official share buttons set.When other blogspot user click on this "BlogThis" button,he/she can share your blog posts easily through Blogger.
But if you want to add this "BlogThis" feature to your blogger blog as a Text Link,then this tutorial will helpful for you.
Now follow the steps given below to add "BlogThis!" feature as a text link to your blogspot blog.
1.Login to your blogger Dashboard--> Design- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see below code:
4.Now copy the code given below and paste it just before the <data:post.body/>.
5.Save your template.Now you can see a "BlogThis!" link in your every blog post(not homepage).
But if you want to add this "BlogThis" feature to your blogger blog as a Text Link,then this tutorial will helpful for you.
What is BlogThis! ?
BlogThis! is an easy way to make a blog post without visiting blogger.com. Once you add the BlogThis! link to your browser's toolbar, blogging will be a snap. Or rather, a click. Clicking BlogThis! creates a mini-interface to Blogger prepopulated with a link to the web page you are visiting, as well as any text you have highlighted on that page. Add additional text if you wish and then publish or post from within BlogThis!
From Blogger Help
Now follow the steps given below to add "BlogThis!" feature as a text link to your blogspot blog.
1.Login to your blogger Dashboard--> Design- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see below code:
<data:post.body/>4.Now copy the code given below and paste it just before the <data:post.body/>.
<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="javascript:popw='';Q='';x=document;y=window;if(x.selection) {Q=x.selection.createRange().text;} else if (y.getSelection) {Q=y.getSelection();} else if (x.getSelection) {Q=x.getSelection();}popw = y.open('http://www.blogger.com/blog_this.pyra?t=' + escape(Q) + '&u=' + escape(location.href) + '&n=' + escape(document.title),'bloggerForm','scrollbars=no,width=475,height=300,top=175,left=75,status=yes,resizable=yes');if (!document.all) T = setTimeout('popw.focus()',50);void(0);">BlogThis!</a>
</div>
</b:if>
5.Save your template.Now you can see a "BlogThis!" link in your every blog post(not homepage).
Senin, 16 Agustus 2010
How To Add Twitter Official Tweet Buttons to Blogger
Few days ago Twitter has introduced their own tweet buttons for web masters.Now you can use this twitter button directly share your posts through twitter without any third party web site.So you and your visitors don't want to authenticate any third party web site to access your Twitter account.These new tweet button loads very fast and anyone can share your article with in few seconds.There are 3 types of Beautiful Tweet buttons : Vertical count, Horizontal count and No count.Here I am going to describe how to add these Twitter buttons to your blogger blog.
If you like o add these Twitter official share button to your blogger blog,then follow the steps given below.
1.Login to your blogger Dashboard--> Design- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see below code:
4.Now Copy your "Twitter tweet 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 "Twitter tweet button" code just before <data:post.body/> .
Code 1 : Vertical Count
Result:
Code 2 : Horizontal Count
Result:
Code 3 : No Count
Result:
Note :
Remember to replace "TWITTER-USERNAME" with your real Twitter username.
If you want to show Tweet buttons not only Post pages but also Home page,Archive pages,Label pages,etc... , then remove "<b:if cond='data:blog.pageType == "item"'>" and "</b:if>" from above codes.
5.Now save your template.
You can view more info from here:
http://twitter.com/goodies/tweetbutton
Want to build a custom tweet button for your site? Check out developer documentation for the Sharing API to provide the same Tweet Button sharing functionality with your own style :
http://dev.twitter.com/pages/tweet_button
If you like o add these Twitter official share button to your blogger blog,then follow the steps given below.
1.Login to your blogger Dashboard--> Design- -> Edit HTML
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 "Twitter tweet 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 "Twitter tweet button" code just before <data:post.body/> .
Code 1 : Vertical Count
<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>
Result:
Code 2 : Horizontal Count
<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>
Result:
Code 3 : No Count
<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>
Result:
Note :
Remember to replace "TWITTER-USERNAME" with your real Twitter username.
If you want to show Tweet buttons not only Post pages but also Home page,Archive pages,Label pages,etc... , then remove "<b:if cond='data:blog.pageType == "item"'>" and "</b:if>" from above codes.
5.Now save your template.
You can view more info from here:
http://twitter.com/goodies/tweetbutton
Want to build a custom tweet button for your site? Check out developer documentation for the Sharing API to provide the same Tweet Button sharing functionality with your own style :
http://dev.twitter.com/pages/tweet_button
Kamis, 01 Juli 2010
How To Add Blogger Official Share Buttons
In this tutorial I will explains, how to add blogger new share buttons to your blogspot blog.This will more helpful if your template is a highly customized blogger template.But your template is a blogger default template, then you can add this share buttons editing the Blog Posts widget and enabling Show Share Buttons in Page Elements section.
But this method does not work for you,follow the steps given below to add blogger share buttons to your blog.
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 below "Blogger Sharing buttons" 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 "Blogger Sharing buttons" code just before <data:post.body/> .
This will show blogger sharing buttons below post header.But if you want to show share buttons below blogger post,then paste your code just after <data:post.body/>.
5.Now save your template and you are done.
But this method does not work for you,follow the steps given below to add blogger share buttons to your blog.
Blogger now offers new share buttons. The new buttons can be placed under each post and let your blog readers easily share your post via email, Blogger, and popular social networks�we now support Google Buzz, Twitter, and Facebook, and we plan to add more services in the future.-From Blogger Buzz
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see below code:
<div class='post-header-line-1'/>
4.Now Copy below "Blogger Sharing buttons" 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 "Blogger Sharing buttons" code just before <data:post.body/> .
<b:if cond='data:blog.pageType == "item"'>
<div class='post-share-buttons' style='float:right;margin-right:10px;'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>
This will show blogger sharing buttons below post header.But if you want to show share buttons below blogger post,then paste your code just after <data:post.body/>.
5.Now save your template and you are done.
Rabu, 23 Juni 2010
How To Add Social Sexy Bookmarks v2 to Blogger
This is the second version of "How To Add Sexy Social Bookmark to Blogger".The creator of Sexy Social Bookmarks is http://www.cssreflex.com/.For second version of sexy social bookmarks, you have to use jquery.I hosted sexy bookmarks images(2 images) in google code or other hosting service.Don't try to host images in blogger.If you do so this sexy bookmark widget will not work correctly.Below I explain how to add this sexy bookmarks v2 for your blogspot blog.If you like to add it to your blog then follow the steps given below.
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 : Download Image Files
5.Scroll down to where you see <data:post.body/> tag.
6.Copy below code and paste it just after <data:post.body/>.
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 </head> tag.
4.Now add below code before </head> tag.
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
// xhtml 1.0 strict way of using target _blank
jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
// this block sets the auto vertical expand when there are more than
// one row of bookmarks.
var sexyBaseHeight=jQuery('.sexy-bookmarks').height();
var sexyFullHeight=jQuery('.sexy-bookmarks ul.socials').height();
if (sexyFullHeight>sexyBaseHeight) {
jQuery('.sexy-bookmarks-expand').hover(
function() {
jQuery(this).animate({
height: sexyFullHeight+'px'
}, {duration: 400, queue: false});
},
function() {
jQuery(this).animate({
height: sexyBaseHeight+'px'
}, {duration: 400, queue: false});
}
);
}
// autocentering
if (jQuery('.sexy-bookmarks-center')) {
var sexyFullWidth=jQuery('.sexy-bookmarks').width();
var sexyBookmarkWidth=jQuery('.sexy-bookmarks:first ul.socials li').width();
var sexyBookmarkCount=jQuery('.sexy-bookmarks:first ul.socials li').length;
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin+'px');
}
});
</script>
<style type='text/css'>
div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZCGZ75MenbNw2TdGscGFsplXRBo7UZ2hyphenhyphenrTah0O7TJju0UicwnbLW0gOk8czZ2Fvv592lx5V5oW9a-XFhJSCkZ8_8WSxJZ2GMN7qTBxNHquFX5bFo5Z0lkjE7TDEQQPS6de7tPdC1ggDs/') !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socials{width:95% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz: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-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('http://bnote.googlecode.com/files/sexy-sprite-new.png') no-repeat !important;border: 0;outline: none;}
.sexy-digg{background-position:-980px bottom !important}
.sexy-digg:hover{background-position:-980px top !important}
.sexy-reddit{background-position:-700px bottom !important}
.sexy-reddit:hover{background-position:-700px top !important}
.sexy-stumbleupon{background-position:-630px bottom !important}
.sexy-stumbleupon:hover{background-position:-630px top !important}
.sexy-delicious{background-position:-1190px bottom !important}
.sexy-delicious:hover{background-position:-1190px top !important}
.sexy-yahoobuzz{background-position:-1120px bottom !important}
.sexy-yahoobuzz:hover{background-position:-1120px top !important}
.sexy-blinklist{background-position:-1260px bottom !important}
.sexy-blinklist:hover{background-position:-1260px top !important}
.sexy-technorati{background-position:-560px bottom !important}
.sexy-technorati:hover{background-position:-560px top !important}
.sexy-myspace{background-position:-770px bottom !important}
.sexy-myspace:hover{background-position:-770px top !important}
.sexy-twitter{background-position:-490px bottom !important}
.sexy-twitter:hover{background-position:-490px top !important}
.sexy-facebook{background-position:-1330px bottom !important}
.sexy-facebook:hover{background-position:-1330px top !important}
.sexy-mixx{background-position:-840px bottom !important}
.sexy-mixx:hover{background-position:-840px top !important}
.sexy-scriptstyle{background-position:-280px bottom !important}
.sexy-scriptstyle:hover{background-position:-280px top !important}
.sexy-designfloat{background-position:-1050px bottom !important}
.sexy-designfloat:hover{background-position:-1050px top !important}
.sexy-newsvine{background-position:left bottom !important}
.sexy-newsvine:hover{background-position:left top !important}
.sexy-google{background-position:-210px bottom !important}
.sexy-google:hover{background-position:-210px top !important}
.sexy-comfeed{background-position:-420px bottom !important}
.sexy-comfeed:hover{background-position:-420px top !important}
.sexy-linkedin{background-position:-70px bottom !important}
.sexy-linkedin:hover{background-position:-70px top !important}
.sexy-friendfeed{background-position:-1750px bottom !important}
.sexy-friendfeed:hover{background-position:-1750px top !important}
.sexy-link{ margin-left:25px; float:left}
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}</style>
NOTE : Download Image Files
5.Scroll down to where you see <data:post.body/> tag.
6.Copy below code and paste it just after <data:post.body/>.
<b:if cond='data:blog.pageType == "item"'>
<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socials'>
<li class='sexy-delicious'><a class='external' expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>
<li class='sexy-digg'><a class='external' expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external' expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external' expr:href='"http://reddit.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>
<li class='sexy-google'><a class='external' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external' expr:href='"http://twitter.com/home?status=Reading: " + data:blog.title + " - " + data:post.url + " (@NAME)"' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='"http://www.designfloat.com/submit.php?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
<li class='sexy-technorati'><a class='external' expr:href='"http://technorati.com/faves?add="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='"http://scriptandstyle.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to Script & Style'>Submit this to Script & Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=http"+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='"http://friendfeed.com/?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='"http://www.newsvine.com/_tools/seed&save?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
</ul>
<div style='clear:both;'/>
</div>
</b:if>
7.Now save your template and you are done.
Selasa, 08 Juni 2010
20 Free Beautiful Social Media Icon Sets Collection
This is my another beautiful high quality social media icon collection for you.I think you will like this social icons very much.You can get these social icons directly from the authors websites.If you want to read my previous social media icon collection read below posts:
23 Free High Quality Social Media Icons Sets
Beautiful 3D Social Bookmark Icons Sets For Bloggers
Free Premium Quality Social Media Icons Collection
65 Bookmarks And Social Icons
65 freeware icons of Web 2 Social Bookmarks and Networks for use in blogs, websites, etc...Sizes: 128x128 64x64 32x32 16x16 | 260 Total icons.
Download : http://studiom6.deviantart.com/art/65-Bookmarks-And-Social-Icons-120098825
Ultra Glossy Silver Button Social Media Icons
Download : http://webtreats.mysitemyway.com/ultra-glossy-silver-button-social-media-icons/
108 Glossy Black Comment Bubble Icons
Download : http://webtreats.mysitemyway.com/108-glossy-black-comment-bubble-social-networking-icons/
154 Matte Black Social Media Icons
Download : http://webtreats.mysitemyway.com/154-matte-black-social-media-icons/
Social.me
Social.me is an icon set consisting of 30 individual icons of the popular social networks/Web 2.0 sites out there.
The icons are iPhone-inspired and is based on the template provided by Tim (www.lostpixel.com) @ MacThemes Forum.Feel free to use these icons anywhere on your website, blog, or even in print.
Download : http://jwloh.deviantart.com/art/Social-me-90694011
Black Inlay on Steel Social Media
Download : http://webtreats.mysitemyway.com/iconsetc-black-inlay-on-steel-social-media-icons/
Social Media Balloons
The icons come in different sizes (from 32px to 128px) and they are in 32-bit transparent PNG format. The set is free for both personal and commercial use (under Creative Commons Licence, attribution is needed). However, resell is not allowed. If you want to integrate them into a website template which is for sale (e.g. WordPress theme, Social bookmark plugin, etc), you need to purchase an extended license.
Download : http://www.doublejdesign.co.uk/2010/03/social-media-balloons/
Social Media Balloons 2
Download : http://www.doublejdesign.co.uk/2010/04/more-social-media-balloons/
Social Jeans
Download : http://nishad2m8.deviantart.com/art/jeans-social-media-icon-pack-131069708
Simple Glossy Silver Social Media Icons
Download : http://webtreats.mysitemyway.com/simple-glossy-silver-social-media-icons/
Social 2 Duo
Download : http://iconblock.com/goodies/icons/
OLED Social Icons
Contents:21 icons
- 256x256px,- 128x128px,- 96x96px,- 64x64px,- 48x48px,- 32x32px,- 16x16px21
Download : http://arrioch.deviantart.com/art/OLED-social-icons-151238966
Furry Cushions Social Icons
You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed, rented, transferred or otherwise made available for use. Please link to this article if you would like to spread the word.
Download : http://www.cutelittlefactory.com/freebies/furry-cushions-social-icons/
Free Social Media Icon Set Chrome
This set includes 19 social networks along with a standard RSS icon in PNG format.
Download : http://www.chris-wallace.com/2009/05/28/free-social-media-icons-socialize/
Wooden Social Media Icons
This is a set of free Social Bookmarking icons which is in Wooden style. Icons are in editable PSD and PNG formats so they can be customized as per your requirement.
Download : http://annanta.com/archive/wooden-social-media-icons/
Free 3D Social
Free 3D Social Icons are a free icon collection ideal for Web sites and applications associated with all sorts of social networks. The pack delivers images depicting various communication technologies and Web sites.
The icons from the pack come in sizes of 16x16, 20x20, 24x24, 32x32, 48x48, 64x64, and 128x128 pixels, as well as in specially created, extra large sizes of 256x256 and 512x512 pixels. The icons are available in True Color with semi-transparency format. They are delivered in all of the following formats: ICO, PNG, GIF and BMP. Source files in 3D-Max format are also available.
This fabulous icon pack is available for instant free download!
Download : http://www.large-icons.com/stock-icons/free-3d-social-icons.htm
Grunge Social
Download : http://www.box.net/shared/hxycdc1m8z
Large Delicious Icons
Large Delicious Icons are a free icon collection ideal for Personal blogs and Web-pages. This set pictures the well-known Delicious symbol in lots of fresh and attractive variations.
The icons from the pack come in sizes of 16x16, 24x24, 32x32, 48x48 and 128x128 pixels, as well as in specially created, extra large sizes of 256x256 and 512x512 pixels. The icons are available in True Color with semi-transparency format. They are delivered in all of the following formats: ICO, PNG, GIF and BMP.
This fabulous icon pack is available for instant free download!
Download : http://www.large-icons.com/stock-icons/large-delicious-icons.htm
Social Media Price Tag
The source file (PSD) is included, as well as two sizes of PNGs (250�150 px & 125�75 px). You can use these icons for personal and commercial projects at free of charge.
Download : http://deepubalan.com/blog/2009/12/14/high-resolution-social-media-iconset-for-free-price-tag-style/
Woodgrain A Free Social Media Icon Set
Download : http://www.chris-wallace.com/2009/06/30/woodgrain-a-free-social-media-iconset/
23 Free High Quality Social Media Icons Sets
Beautiful 3D Social Bookmark Icons Sets For Bloggers
Free Premium Quality Social Media Icons Collection
65 Bookmarks And Social Icons
65 freeware icons of Web 2 Social Bookmarks and Networks for use in blogs, websites, etc...Sizes: 128x128 64x64 32x32 16x16 | 260 Total icons.
Download : http://studiom6.deviantart.com/art/65-Bookmarks-And-Social-Icons-120098825
Ultra Glossy Silver Button Social Media Icons
Download : http://webtreats.mysitemyway.com/ultra-glossy-silver-button-social-media-icons/
108 Glossy Black Comment Bubble Icons
Download : http://webtreats.mysitemyway.com/108-glossy-black-comment-bubble-social-networking-icons/
154 Matte Black Social Media Icons
Download : http://webtreats.mysitemyway.com/154-matte-black-social-media-icons/
Social.me
Social.me is an icon set consisting of 30 individual icons of the popular social networks/Web 2.0 sites out there.
The icons are iPhone-inspired and is based on the template provided by Tim (www.lostpixel.com) @ MacThemes Forum.Feel free to use these icons anywhere on your website, blog, or even in print.
Download : http://jwloh.deviantart.com/art/Social-me-90694011
Black Inlay on Steel Social Media
Download : http://webtreats.mysitemyway.com/iconsetc-black-inlay-on-steel-social-media-icons/
Social Media Balloons
The icons come in different sizes (from 32px to 128px) and they are in 32-bit transparent PNG format. The set is free for both personal and commercial use (under Creative Commons Licence, attribution is needed). However, resell is not allowed. If you want to integrate them into a website template which is for sale (e.g. WordPress theme, Social bookmark plugin, etc), you need to purchase an extended license.
Download : http://www.doublejdesign.co.uk/2010/03/social-media-balloons/
Social Media Balloons 2
Download : http://www.doublejdesign.co.uk/2010/04/more-social-media-balloons/
Social Jeans
Download : http://nishad2m8.deviantart.com/art/jeans-social-media-icon-pack-131069708
Simple Glossy Silver Social Media Icons
Download : http://webtreats.mysitemyway.com/simple-glossy-silver-social-media-icons/
Social 2 Duo
Download : http://iconblock.com/goodies/icons/
OLED Social Icons
Contents:21 icons
- 256x256px,- 128x128px,- 96x96px,- 64x64px,- 48x48px,- 32x32px,- 16x16px21
Download : http://arrioch.deviantart.com/art/OLED-social-icons-151238966
Furry Cushions Social Icons
You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed, rented, transferred or otherwise made available for use. Please link to this article if you would like to spread the word.
Download : http://www.cutelittlefactory.com/freebies/furry-cushions-social-icons/
Free Social Media Icon Set Chrome
This set includes 19 social networks along with a standard RSS icon in PNG format.
Download : http://www.chris-wallace.com/2009/05/28/free-social-media-icons-socialize/
Wooden Social Media Icons
This is a set of free Social Bookmarking icons which is in Wooden style. Icons are in editable PSD and PNG formats so they can be customized as per your requirement.
Download : http://annanta.com/archive/wooden-social-media-icons/
Free 3D Social
Free 3D Social Icons are a free icon collection ideal for Web sites and applications associated with all sorts of social networks. The pack delivers images depicting various communication technologies and Web sites.
The icons from the pack come in sizes of 16x16, 20x20, 24x24, 32x32, 48x48, 64x64, and 128x128 pixels, as well as in specially created, extra large sizes of 256x256 and 512x512 pixels. The icons are available in True Color with semi-transparency format. They are delivered in all of the following formats: ICO, PNG, GIF and BMP. Source files in 3D-Max format are also available.
This fabulous icon pack is available for instant free download!
Download : http://www.large-icons.com/stock-icons/free-3d-social-icons.htm
Grunge Social
Download : http://www.box.net/shared/hxycdc1m8z
Large Delicious Icons
Large Delicious Icons are a free icon collection ideal for Personal blogs and Web-pages. This set pictures the well-known Delicious symbol in lots of fresh and attractive variations.
The icons from the pack come in sizes of 16x16, 24x24, 32x32, 48x48 and 128x128 pixels, as well as in specially created, extra large sizes of 256x256 and 512x512 pixels. The icons are available in True Color with semi-transparency format. They are delivered in all of the following formats: ICO, PNG, GIF and BMP.
This fabulous icon pack is available for instant free download!
Download : http://www.large-icons.com/stock-icons/large-delicious-icons.htm
Social Media Price Tag
The source file (PSD) is included, as well as two sizes of PNGs (250�150 px & 125�75 px). You can use these icons for personal and commercial projects at free of charge.
Download : http://deepubalan.com/blog/2009/12/14/high-resolution-social-media-iconset-for-free-price-tag-style/
Woodgrain A Free Social Media Icon Set
Download : http://www.chris-wallace.com/2009/06/30/woodgrain-a-free-social-media-iconset/
Sabtu, 15 Mei 2010
How To Add Twittley Retweet Counter Buttons to Blogger
Twittley is a social network for users to find and share links on Twitter.Harness the power of social networks and viral marketing with the Twittley button. Millions of users use Twitter as a social network so it only makes sense to get your link out to those users.
When a Twitter user arrives at your site, they'll quickly see the distinctive Twittley button. When they click on the button your link will automatically be posted onto their Twitter status so all of their followers can then see the link. Your link will also appear on the Twittley web site where the community can then retweet and comment. All of this is done without the user leaving your site, Twittley does everything behind the scenes.
In this post I explain how to add a Twittley Retweet Counter Button to your blogger blog.If you like to add this Twittley retweet button to your blog then follow the steps given below.
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 "Twittley Retweet" bookmarking buttons 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 "Twittley Retweet" bookmarking buttons code just before <data:post.body/> .
Code 1:
Result:
Code 2:
Result:
Code 3:
Result:
Code 4:
Result:
Code 5:
Result:
Code 6:
Result:
Code 7:
Result:
5.Now save your template and you are done.
When a Twitter user arrives at your site, they'll quickly see the distinctive Twittley button. When they click on the button your link will automatically be posted onto their Twitter status so all of their followers can then see the link. Your link will also appear on the Twittley web site where the community can then retweet and comment. All of this is done without the user leaving your site, Twittley does everything behind the scenes.
In this post I explain how to add a Twittley Retweet Counter Button to your blogger blog.If you like to add this Twittley retweet button to your blog then follow the steps given below.
1.Login to your blogger dashboard--> layout- -> Edit HTML
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 "Twittley Retweet" bookmarking buttons 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 "Twittley Retweet" bookmarking buttons code just before <data:post.body/> .
Code 1:
<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "0";</script><script src='http://twittley.com/button/button.js'/>
</div>
Result:
Code 2:
<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "1";</script><script src='http://twittley.com/button/button.js'/>
</div>
Result:
Code 3:
<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "2";</script><script src='http://twittley.com/button/button.js'/>
</div>
Result:
Code 4:
<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "3";</script><script src='http://twittley.com/button/button.js'/>
</div>
Result:
Code 5:
<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "4";</script><script src='http://twittley.com/button/button.js'/>
</div>
Result:
Code 6:
<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "5";</script><script src='http://twittley.com/button/button.js'/>
</div>
Result:
Code 7:
<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "6";</script><script src='http://twittley.com/button/button.js'/>
</div>
Result:
5.Now save your template and you are done.
Rabu, 28 April 2010
How To Add Facebook Like/Recommend Button For Blogger
This tutorial will explains how to add facebook like/Recommend button to your blogger blog and how configure it as you like.To add this facebook like button to your blog follow steps given below.
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 "StumbleUpon" bookmarking buttons 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 "StumbleUpon" bookmarking buttons code just before <data:post.body/> .
You can customize above facebook like button changing its values:
You can change,
layout=standard to layout=button_count .
show_faces=false to show_faces=true.
action=like to action=recommend.
font=arial to font=lucida+grande or font=segoe+ui or font=tahoma or font=trebuchet+ms or font=verdana.
colorscheme=light to colorscheme=dark.
5.Now save your template and you are done.
The Like button enables users to make connections to your pages and share content back to their friends on Facebook with one click. Since the content is hosted by Facebook, the button can display personalized content whether or not the user has logged into your site. For logged-in Facebook users, the button is personalized to highlight friends who have also liked the page.
1.Login to your blogger dashboard--> layout- -> Edit HTML
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 "StumbleUpon" bookmarking buttons 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 "StumbleUpon" bookmarking buttons code just before <data:post.body/> .
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>You can customize above facebook like button changing its values:
You can change,
layout=standard to layout=button_count .
show_faces=false to show_faces=true.
action=like to action=recommend.
font=arial to font=lucida+grande or font=segoe+ui or font=tahoma or font=trebuchet+ms or font=verdana.
colorscheme=light to colorscheme=dark.
5.Now save your template and you are done.
Senin, 19 April 2010
How To Add Official Google Buzz Button+Counter to Blogger
Now Google has introduced their Official Google Buzz Buttons.Buzz Buttons help people share stuff from your website in Google Buzz. You can add this buzz button to your blogger blog or website easily.Below I explain how to add this official Google buzz button to blogger with or without share count.
1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:
4.Now copy one of the below codes and paste it just before the above line.
Button 1 : Button + counter : Post count - On the top
Code:
Result:
Button 2 : Button + counter : Post count - On the side
Code:
Result:
Button 3 : Button only : Size - Normal
Code:
Result:
Button 4 : Button only : Size - Small
Code:
Result:
Button 5 : Link
Code:
Result:
5.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:
<data:post.body/>
4.Now copy one of the below codes and paste it just before the above line.
Button 1 : Button + counter : Post count - On the top
Code:
<div style='float:right; margin-right:10px;'>
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>
Result:
Button 2 : Button + counter : Post count - On the side
Code:
<div style='float:right; margin-right:10px;'>
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>
Result:
Button 3 : Button only : Size - Normal
Code:
<div style='float:right; margin-right:10px;'>
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-button"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>
Result:
Button 4 : Button only : Size - Small
Code:
<div style='float:right; margin-right:10px;'>
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-button"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>
Result:
Button 5 : Link
Code:
<div style='float:right; margin-right:10px;'>
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="link"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>
Result:
5.Now save your template and you are done.
Minggu, 28 Maret 2010
How To Add BlogEngage Vote Button to Blogger
This simple article will explain to you how to add BlogEngage vote button to your blogger blog.If you like to add this article submission button to your blog,follow the steps given below.
1.Login to your blogger 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 just before the <data:post.body/>.
5.Now save your template and 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 this:
<data:post.body/>4.Copy below code and paste it just before the <data:post.body/>.
<div style='float:right; margin-right:10px; margin-top:10px'>
<script type='text/javascript'>
submit_url="<data:post.url/>";</script>
<script src='http://blogengage.com/evb/button.php' type='text/javascript'/>
</div>
5.Now save your template and you are done.
Jumat, 12 Maret 2010
How To Add StumbleUpon Buttons with Share Counts to blogger
Add a one of the StumbleUpon badges/button to your site so your visitors can easily submit your content to StumbleUpon and you can start enjoying additional traffic from StumbleUpon users who want to see content like yours! Simply copy and paste the code into your site and start receiving free exposure on StumbleUpon.
Users clicking these badges will be prompted to submit a page to StumbleUpon's index so other users can enjoy your content or to view the ratings and reviews of your page from other StumbleUpon users. Your site will not be framed when users click any of these badges.
Stumble Badges are a free way to promote your site to the SU community.
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 "StumbleUpon" bookmarking buttons 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 "StumbleUpon" bookmarking buttons code just before <data:post.body/> .
Code 1:
Result :
Code 2:
Result :
Code 3:
Result :
Code 4:
Result :
Code 5:
Result :
Code 6:
Result :
5.Now save your template and you are done.
Users clicking these badges will be prompted to submit a page to StumbleUpon's index so other users can enjoy your content or to view the ratings and reviews of your page from other StumbleUpon users. Your site will not be framed when users click any of these badges.
Stumble Badges are a free way to promote your site to the SU community.
1.Login to your blogger dashboard--> layout- -> Edit HTML
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 "StumbleUpon" bookmarking buttons 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 "StumbleUpon" bookmarking buttons code just before <data:post.body/> .
Code 1:
<script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>Result :
Code 2:
<script src="http://www.stumbleupon.com/hostedbadge.php?s=2"></script>Result :
Code 3:
<script src="http://www.stumbleupon.com/hostedbadge.php?s=3"></script>Result :
Code 4:
<script src="http://www.stumbleupon.com/hostedbadge.php?s=4"></script>Result :
Code 5:
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>Result :
Code 6:
<script src="http://www.stumbleupon.com/hostedbadge.php?s=6"></script>Result :
5.Now save your template and you are done.
Langganan:
Postingan
(
Atom
)