Get here fresh and working tricks. You can also find here best tricks, widgets, templates, tutorial and seo tips and other many interesting things related to Blogger and Wordpress. Subscribe us and stay connected with us

Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

Tuesday, July 29, 2014

Tag Style Cloud Label Widget For Blogger


Label widget is most important widget in blogger. With this your blog's readers can visit all categories. If it is cool and good looking then it will attract your visitor and they come again and again and again to your blog. It will also increase your blog's page views. Your audience will surely impressed by adding this on your blog. It also helps you show your blog like as professional & stylish blog. Its color coding is so nice. You can check it's preview on my blog. We are using this on our blog. This is so nice widget.

How to add this on Blogger blog?

  • Go to Layout and Add A Widget.
  • Select Labels and on fourth option (Display) select Cloud.
  • Now navigate to template option in left sidebar.
  • Press Edit HTML button to add this style.
  • Find ]]></b:skin>
  • Copy below code and paste it before the ]]></b:skin>.
.label-size{

margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #008900 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555;}

  •  Now Save Template and see your blog it will be added to your blog. 


Final Words

Hope your blog is looking good with this widget. If you face any problem in adding this on your blog then comment below we are here to help you. Also share it with your friends to help us.



Saturday, July 26, 2014

How To Add A Twitter Feeds Widget In Blogger Blog.

Hey bloggers, all of you know the importance of social media for blogging. This is a main part of our blogging life.From social networks you can drove a hug amount of traffic to your website or blog. The social networks helps us to earn money and good traffic. They also increase our site's rank. You can put or add many type of social media button such of Facebook, Twitter, Youtube, Pinterest, Reddit, Stumbleupon etc. With these they can easily share your post on their account and can help you for getting more traffic on your blog. 

Twitter is a best place for getting good traffic. Mostly bloggers using this and getting good views on their site. Now twitter team design a widget. With this widget you can show your twitter feeds on your blog easily. This widget is like Facebook fanbox but it shows feeds.

About Widget

This widget is spam free and it is official feeds widget designed by twitter. It will displays your recently published feeds. Best things is that it contains a follow button on it's top corner. So your readers can also follow you easily on twitter. It also has a box where your readers can also tweet you without leaving your post.

Read below how to add this widget on your blog.

  • Go to this link and fill the requirements. {Widget}
  1. Enter your twitter username.
  2. Choose options those you want to enable.
  3. Set Height and Theme according to your blog.
  4. Set color of links.
  5. Do these steps and check them.
  6. Now hit Save Changes button.
  7. Copy the code.
  • Now go blogger's layout and Add A Widget.
  • Navigate to HTML/JavaScripts and paste the code and Gave the title whatever you want or leave it blank.

  • Finally, You got the feeds widget on your blog. Click on orange button and see your blog.

Final Words 

Congratulations for your new feeds widget. Tell me how is looking your feeds widget on your blog? Your readers will love it and it also make your blog more beautiful. You'll also get new followers from it. If any issue you face while installing it then comment we are there to help you. But share it also with your friends to help me and them.



Thursday, May 8, 2014

How To Show Sitemap Page On Blogger



Sitemap is not a necessary thing for your blog. It only shows the list of all your site's posts. But in a stylish look it is very useful. Anybody can see all your published posts on sitemap page. It also helping to crawling and indexing your blog's post and pages. It also helps in improving page rank of your blog. See below how you can add and show it on your blog. This sitemap is stylish and good looking. When you add this on your blog this will automatically show posts in categories by specific label. Color scheme of this sitemap is blue. This is a simple sitemap.

Create Sitemap Page

- Open Blogger and Login.
- Go to Pages option.
- Click on New Page Button at Top and Enter Sitemap In Title.
- Click on HTML Tab and Paste The Below Given Code.
<div dir="ltr" style="text-align: left;" trbidi="on"><style type="text/css">#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));border:1px solid #2D96DF;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}.labl a{color:#fff;}.labl:first-letter{text-transform:uppercase;}.new{color:#FF5F00;font-weight:bold;font-style:italic;}.postname{font-weight:normal;background:-moz-linear-radient(right,#C2EAFE 0%,#fff 40%);background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));}.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}</style><br /><div id="toc"><script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script><script src="http://tricksworld4you.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div></div>

- Replace http://tricksworld4you.blogspot.com/ With Your Blog's Address.
- Now Publish This page.


You done all steps and now you have create sitemap for your blog. Any problem then comment below. Also share it with others if you think this useful and help us by sharing.



Thursday, May 1, 2014

How To Add Alexa Rank Widget To Blogger For Free

In this post we tell you how you can add Alexa Rank Widget to your blogger blog. To increase your alexa rank you have to add this widget in your site. This is so simple to add this on your blog and this widget tells about your blog's rank and backlinks. You can add a simple and beautiful rectangle alexa widget box and can show your blog's pange rank and backilinks to your visitors. Look below and see how you can add this widget.

Benefits:-

Main benefit of adding this widget is that you can increase your blog's rank. People can easily redirect to your blog's alexa info when they click on this box. If a large number of peoples click on this box then you will became more popular in alexa ranking. A other benefit is that you can also check your blog's rank on your site.

Steps For Adding:-

  • Open your blogger account and go to Layout.
  • Then click on Add A Gadget Button.
  • Choose HTML/Javascripts option.
  • Copy the below given code and paste it into the box.
  • Replace Tricks World 4 You with your blog's address.

<a href="http://www.alexa.com/siteinfo/Tricks World 4 You"><script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/s/a?url=Tricks World 4 You'></script></a>
  • Now save button and check your blog you will find the widget.