Showing posts with label widget. Show all posts
Showing posts with label widget. Show all posts

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
in your template, paste your "Twitter tweet button" code just before .

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




How To Display Recent Twitter Tweets Using JQuery



Do you want to show your recent tweets inside your website or blogger blog?Then,this tutorial will helpful for you, to add recent tweets into your website using Jquery.Your recent tweets will load fast using jquery and also you can change number of tweets must display very easily.If you want you can read advanced details about tutorial from here: http://www.thewebsqueeze.com/web-design-tutorials/displaying-your-tweets-on-your-website-with-jquery.html

Twitter is a social networking and microblogging service, owned and operated by Twitter Inc., that enables its users to send and read other user messages called tweets. Tweets are text-based posts of up to 140 characters displayed on the author's profile page.



Now follow the steps given below to add this recent tweets widget to your website or blog.

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .






NOTE :
btipandtrick : Replace this with your twitter username.

5 : Number of tweets must appear.

4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below:



There was a problem fetching tweets


Currently loading your tweets...





You are done.




How To Add Smart Jquery Featured Slider to Blogger/Websites



This is a another tutorial about, how to add great featured jquery content slider to your blogger blog or other website.Read the instruction given below to add this featured content slider to your blog with in few minutes.Remember to use 307px width and 254px height images for this slider.I recommend to DOWNLOAD java script files and host it yourself.Also you can see the DEMO of this slider HERE.

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .











4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below:










NOTE : Replace,

SLIDE-X-LINK-HERE with your real featured posts links.

SLIDE-X-IMAGE-ADDRESS-HERE with your real slide images addresses.

Look at the example below:










You are done.




How To Create JQuery Featured Content Slideshow



In this tutorial I am going to explain,how to create a slideshow to show your featured content to visitors.This is very easy to add and configure.This slideshow is working using jquery.You do not want to host any java script file yourself to add this slideshow to your blog.So you can add this slideshow to your site with in few minutes.Default width=600px and height=240px.But you can change it easily to match it for your website.

If you like add this slideshow to your blogger blog or website,then follow the steps given below.



1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .








4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below:


You can add more slides as you like.

Note : Replace images URLs,"This is featured post X title","Replace This Text With Your Featured Post X Description" with your content.

You are done.




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

4.Now add below code before tag.





NOTE : Download Image Files

5.Scroll down to where you see tag.

6.Copy below code and paste it just after .




7.Now save your template and you are done.




How To Add Subscribe Box to Blogger/Website



In this tutorials,I will explain to you how create a Subscribe Box with Feedburner Email subscription,Feed subscription and Social networking buttons(Digg,Twitter,Facebook,Stumbleupon,Delicious).You can easily add or remove social buttons to this widget and setup your email subscription.If you like to add this widget to your blog or a website,then follow the steps given below.



1.Log in to your dashboard--> Design- ->Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.



FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

Get Notified When We Update !!!

FEEDBURNER-ID" name="uri" type="hidden" />




DELICIOUS-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs5JPgZdGVTe9Chj1anhJAJ4tidayvKdlmC7X-lGW2IrCyo4MRFUQfeIdSE-FJ6BdCuS04zt52NokbyatRUjBoP7N74L8nW_lUIxo-CfHsv8biJvKThxNX01pXZckMOhjd2KTrZolw1nGM/s1600/delicious.png) center top no-repeat">
TWITTER-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjq98ZtvdzqnpAg3Oeo8EB6UT2wo6I2aqv81p0DaFxMScOgi6eo9CksNUBvCVw6GoO4pyzoKfphhwpypQwcO6vFPBJPUgY1CMVHbo8Qw6SXfjuqQyuFStQsWzTr7yx3lhsW_nzI34qReKb/s1600/twitter.png) center top no-repeat">
DIGG-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5cjMMfX2_-Ith1mlqlsduQYmnRXnqwtJJasIRApKQ8Ca_81bAODogQpKxNCHWiGbbuLZWHaPG5Wc_D4goyJCiUx-nZ_h0pLu3HEeLOsrrOQV1aICo4RZKrilFup2wVaxRr8deeKvW8ItN/s1600/digg.png) center top no-repeat">
FACEBOOK-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuhC2aoh2Cik1BK99igiKCKEUe8IJs9vjPSYz-v7YesgEo8OqRYnec2XNyXBgs336gf0WwEp36D2tqkT_EP9qHUx-Di_ZJ5OaQXSdYBiBe-WoLrJfsC8xzdFsQKSFe-ZbiN7ZAU1Ew8fhR/s1600/facebook.png) center top no-repeat">
STUMBLEUPON-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY82b8j10ae6bqbcwc0q-B1Yedg9Q4mRVGqoMSHZe4hu9r2zK_bA_Q3Jw7rE6n7mm7RrvDGcASR6kc_XSK4_hRNYDsXvGyc37ZHUhAU1Ro2obM-p81GdXSOk19-kpNxDd0ugAplKWNyq1m/s1600/stumbleupon.png) center top no-repeat">
FEEDBURNER-ID" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4RRutmo-0iTnHW5HlxMUDwWolcH-2Jfk48UJsNOs9fLGdUQjfdl9CIvDKC9liLtx3RCTV8q-jxmN6D9uWcA8-rskD19PxkOZ1nF7e6vXXWgP2soU2_BpgVo7k3BAkaWqWPAvstIQfYtbp/s1600/rss.png) center top no-repeat">





Note : Remember to REPLACE,

FEEDBURNER-ID with your feedburner ID.
DELICIOUS-USERNAME with your delicious username.
TWITTER-USERNAME with your twitter username.
FACEBOOK-USERNAME with your facebook username.
STUMBLEUPON-USERNAME with your stumbleupon username.

Look at the example given below.


blogspot/WyNa', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

Get Notified When We Update !!!

blogspot/WyNa" name="uri" type="hidden" />




wam8387" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs5JPgZdGVTe9Chj1anhJAJ4tidayvKdlmC7X-lGW2IrCyo4MRFUQfeIdSE-FJ6BdCuS04zt52NokbyatRUjBoP7N74L8nW_lUIxo-CfHsv8biJvKThxNX01pXZckMOhjd2KTrZolw1nGM/s1600/delicious.png) center top no-repeat">
btipandtrick" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjq98ZtvdzqnpAg3Oeo8EB6UT2wo6I2aqv81p0DaFxMScOgi6eo9CksNUBvCVw6GoO4pyzoKfphhwpypQwcO6vFPBJPUgY1CMVHbo8Qw6SXfjuqQyuFStQsWzTr7yx3lhsW_nzI34qReKb/s1600/twitter.png) center top no-repeat">
wam8387" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5cjMMfX2_-Ith1mlqlsduQYmnRXnqwtJJasIRApKQ8Ca_81bAODogQpKxNCHWiGbbuLZWHaPG5Wc_D4goyJCiUx-nZ_h0pLu3HEeLOsrrOQV1aICo4RZKrilFup2wVaxRr8deeKvW8ItN/s1600/digg.png) center top no-repeat">
btipandtrick" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuhC2aoh2Cik1BK99igiKCKEUe8IJs9vjPSYz-v7YesgEo8OqRYnec2XNyXBgs336gf0WwEp36D2tqkT_EP9qHUx-Di_ZJ5OaQXSdYBiBe-WoLrJfsC8xzdFsQKSFe-ZbiN7ZAU1Ew8fhR/s1600/facebook.png) center top no-repeat">
wam83879" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY82b8j10ae6bqbcwc0q-B1Yedg9Q4mRVGqoMSHZe4hu9r2zK_bA_Q3Jw7rE6n7mm7RrvDGcASR6kc_XSK4_hRNYDsXvGyc37ZHUhAU1Ro2obM-p81GdXSOk19-kpNxDd0ugAplKWNyq1m/s1600/stumbleupon.png) center top no-repeat">
blogspot/WyNa" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4RRutmo-0iTnHW5HlxMUDwWolcH-2Jfk48UJsNOs9fLGdUQjfdl9CIvDKC9liLtx3RCTV8q-jxmN6D9uWcA8-rskD19PxkOZ1nF7e6vXXWgP2soU2_BpgVo7k3BAkaWqWPAvstIQfYtbp/s1600/rss.png) center top no-repeat">





You are done.




How To Embed URL,HTML,Forum Links Code below Blogger Posts



This tutorial will explain how to create a widget, for your visitors to link back to your article/blogger post.This was created by me(http://www.bloggertipandtrick.net/) and previously I had installed this widget to this site.Many visitors ask from me how to add this widget to their blogger blogs and so I decided to explain it.This widget will show 3 codes (Blog Post URL,HTML code to embed your post to a website,Forum Link to embed your post to a forum) below your blogger post.If you like to add this widget to your blogger blog,then follow the steps given below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .



4.Now find below code:

5.Copy below code and paste it just after the .

If you find this article useful, please feel free to link to this page from your website or blog.







Widget by BloggerTipAndTrick





NOTE : Don't change anything in above code.

6.Save your template and you are done.




How To Let Visitors to Listen Your Blogger Post



This service is provided by http://vozme.com/.If you like to let your visitors to listen to your blogger posts, you can add this Vozme Link or Vozme Button to your blogger blog.This will more helpful when your blogger posts are very long.Below I explain how to add this widget to your blogger 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:


NOTE: If you can't find
in your template, Find .

4.Copy one of code below and paste it just after
or just before .

CODE 1 : Using a Text Link



Smooth Jquery Featured Post Slideshow For Blogger



This tutorial will shows you how to add featured content slideshow to show your featured post to your readers.This slideshow is very easy to setup and can easily manage width and height to match your template.Not only that you can change the speed of this slideshow easily.Default width is 550px and Default height is 200px.I think you will love this slideshow.You can see the DEMO of this widget from here.



1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .







NOTE : To change the speed of slideshow, change the value 4000.

4.Save your template.

5.Now go to Layout-->Page Element and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.





NOTE : Replace YOUR-LINK-HERE and images with your content.

Now you have successfully installed this slide show to your site.




How To Add Apture Social Networking Bar to Blogger



The Apture Site Bar is a new way to give readers more information without leaving the page.

When you add this bar to your site,your visitors can share your articles on Facebook, Twitter and via E-mail is just one click away.And also readers can find additional information from your site, like Wikipedia and YouTube all without leaving the page.



To add this widget for your site follow the steps below.

1.First go to http://www.apture.com/createbar/

2.Now you must give your site URL,your email address and other details.



3.Fill in the details and click on "Get My Bar".

4.Now you can see code of the bar.Copy your code.



5.Login to your blogger dashboard--> layout- -> Edit HTML

6.Scroll down to where you see tag.

7.Paste your social networking bar code just before tag.

8.Now save your template and you are done.Refresh your site to see your Apture Social Networking Bar.



Note : For further configuration you must click on confirm link in the email they send to you.After doing that you can do many more things with this Apture Social Networking Bar.




How To Add Featured Auto Content Slider to Blogger



This tutorial will explain to you how to create a auto featured content slider for your blogger blog or website.I found this content slider from Florance wordpress theme(Created by Web2feel.com) and I think, it will be useful to your blogger blog.Before adding this widget to your site look at the DEMO from here.

If you like to add this beautiful auto slider to your blog then follow steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .




















Note : Host trans.png yourself.



4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

















Note : Replace YOUR-POST-x-LINK-HERE, YOUR-FEATURED-POST-X-SMALL-DESCRIPTION-HERE [...] and Images Links with your content.

Look at the example below:
















  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem [...]















  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem [...]















  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem [...]















  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas [...]















  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas [...]















  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas [...]
















Now save your template and you are done.Don't forget to leave a comment,if you have any problem.