bloggtrick: Blogger Tricks

Showing posts with label Blogger Tricks. Show all posts

Sunday, June 13, 2010

Add Sharing is Sexy

You see this social bookmark widget in many website today i tell how to add sharing is sexy widget in blogger

Step 1:
Log in to Blogger, go to Layout -> Edit HTML and mark the "Expand Widget Templates" box.

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

</head>

And immediately BEFORE/ABOVE it, paste this code:

<style type='text/css'>
div.beauty-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}

div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.beauty-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.beauty-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.beauty-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}

.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {
background:url('http://i44.tinypic.com/1znbj83.png') no-repeat !important;
}

.beauty-furl {
background-position:-300px top !important;
}
.beauty-furl:hover {
background-position:-300px bottom !important;
}
.beauty-digg {
background-position:-500px top !important;
}
.beauty-digg:hover {
background-position:-500px bottom !important;
}
.beauty-reddit {
background-position:-100px top !important;
}
.beauty-reddit:hover {
background-position:-100px bottom !important;
}
.beauty-stumble {
background-position:-50px top !important;
}
.beauty-stumble:hover {
background-position:-50px bottom !important;
}
.beauty-delicious {
background-position:left top !important;
}
.beauty-delicious:hover {
background-position:left bottom !important;
}
.beauty-yahoo {
background-position:-650px top !important;
}
.beauty-yahoo:hover {
background-position:-650px bottom !important;
}
.beauty-blinklist {
background-position:-600px top !important;
}
.beauty-blinklist:hover {
background-position:-600px bottom !important;
}
.beauty-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px bottom !important;
}
.beauty-myspace {
background-position:-200px top !important;
}
.beauty-myspace:hover {
background-position:-200px bottom !important;
}
.beauty-twitter {
background-position:-350px top !important;
}
.beauty-twitter:hover {
background-position:-350px bottom !important;
}
.beauty-facebook {
background-position:-450px top !important;
}
.beauty-facebook:hover {
background-position:-450px bottom !important;
}
.beauty-mixx {
background-position:-250px top !important;
}
.beauty-mixx:hover {
background-position:-250px bottom !important;
}
.beauty-script-style {
background-position:-400px top !important;
}
.beauty-script-style:hover {
background-position:-400px bottom !important;
}
.beauty-designfloat {
background-position:-550px top !important;
}
.beauty-designfloat:hover {
background-position:-550px bottom !important;
}
.beauty-syndicate {
background-position:-150px top !important;
}
.beauty-syndicate:hover {
background-position:-150px bottom !important;
}
.beauty-email {
background-position:-753px top !important;
}
.beauty-email:hover {
background-position:-753px bottom !important;
}

</style>

Step 2
Now find this in the code:

<data:post.body/>

And BELOW/AFTER that, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>
<ul class='socials'>
<li class='beauty-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-twitter'><a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'/></li>
<li class='beauty-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/bloggtrick' title='Subscribe to RSS'/></li>
<li class='beauty-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div>
</b:if>

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

Now save the template. .

Saturday, April 10, 2010

Subscribe By RSS

TODAY I DESCRIBE YOU HOW TO ADD SUBSCRIBE BY R S S FEED IN YOUR BLOGGER.

RSS (most commonly expanded as "Really Simple Syndication") is a family of web feed formats used to publish frequently updated works—such as blog entries, news headlines, audio, and video—in a standardized format.[2] An RSS document (which is called a "feed", "web feed",. Web feeds benefit publishers by letting them syndicate content automatically. They benefit readers who want to subscribe to timely updates from favored websites or to aggregate feeds from many sites into one place. RSS feeds can be read using software called an "RSS reader", "feed reader", or "aggregator", which can be web-based, desktop-based, or mobile-device-based. A standardized XML file format allows the information to be published once and viewed by many different programs. The user subscribes to a feed by entering into the reader the feed's URI or by clicking an RSS icon in a web browser that initiates the subscription process.Through R S S Webmaster easily get traffic on their website and users get all the updates on Email

NOW FOLLOW SOME STEPS:-

Choose Your Favorite Button First.

CIRCULAR FEED ICON

RECTANGULAR FEED ICON:

MISCELLANEOUS:

BIGGER SIZE ICON:

Right Click on Image
Copy Image Location
Go Layout Click on Add A Gadget

SAVE YOUR FAVORITE IMAGE ON WORD OR NOTEPAD
Choose Html/java script Button
Click on Add Button
Now copy the script and paste it on HTML/JAVA SCRIPT WIDGET

<a href="http://feeds.feedburner.com/blogspot/hRtm" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="YOUR FAVORITE R S S IMAGE URL " alt="" style="border: 0pt none;" /></a><a href="http://feeds.feedburner.com/blogspot/hRtm" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe by RSS</a><a

Edit Script Del (your Favorite Image url in red and paste your favorite image "url"
Change feed address in pink color with your feed burner address.
If you Don't have feed burner account go and sign up otherwise lo- gin to your account
After making ID click on Edit Feed Detail
copy feed address Ex: my address is (Feed Address:http://feeds.feedburner.com/bloggtrick)
Paste Your Feed Address
Click on Save button.
You successfully add RSS Feed in blogger.

COMMENT PLEASE

Monday, April 5, 2010

Back to Top & Top to Back

Dear visitors I am thinking about how to add a script of arrow button (up/down both direction). So today I decide to adding new script of arrow moving both direction. I hope you like it. I already posted one direction moving Trick. Now try both direction moving trick.

NOW FOLLOW SOME STEPS:-

First Sign In your blog
Then Go to Layout
After that click on Add A Gadget.

Choose HTML & Java Script Gadget

Click on + Button for Adding Gadget
After that copy below code from here and paste it on HTML Java script gadget.

Now Go to Layout and then click on Edit Html
Now find </body> tag in your template
Press ctrl+F and find body tag
Paste the below code before body </body> closing tag

<a name='GoDown'/>

After adding click on Save Template.
If you have some doubt you can also backup of your template.
Click on Download Template.
Now view you blogger Click on Arrow for up and down.
I hope you like this trick

COMMENT PLEASE

Saturday, April 3, 2010

Follow Twitter

Twitter: is a famous social bookmark button. The publicity of twitter growing more and more everybody want adding a twitter button on blog or website. So today i decide to adding new post of Twitter. I hope you like it.

How to Add Twitter Button Widget

FOLLOW ME

First Go to Sign- up at Twitter.com
If you have already id of twitter then jump to next step
After Making Id Copy the above Script in to the Word or Notepad
Choose Your favorite twitter button from above
After Choosing right click on Twitter button copy the image location
Now change the script delete the image location " "
And add your image location
Now you have to add your user name within script
Change "dk810" with your user name
Now copy script and go to layout add page element
add a gazette and paste your script

IF YOU HAVE SOME PROBLEM CONTACT ME

COMMENT PLEASE

Wednesday, March 31, 2010

Blogger Statistics

Add this code on your blogger and see status of your blog how many post and how many comment on your blog. This trick helps blogger to quickly response to users comments.

It is easy to setup search box in your blogger.Follow simple steps. I explain You.If you are new to blogger you can also understand these steps.

Step 1

Open your Dashboard and then click on Layout

Step 2

Go to Page element then click on Add a Gadget

Step3

The gadget window will open. Scroll down until you see "Search Box" and then click on + to add gadget

Step4

Po-pup window open and select options that you like to add, After your selection click on save button right hand corner.

Step5

You are now back on layout and there a yellow bar on the layout saying your page element is added Click to view Blog.

Step6

Your search box in the slider of your blog. You and your blog visitors easily search their topics.

You can also add this "search box" code on your blog

<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Go" type="submit"/></form>

bloggtrick

Pages