Websoft Pk - We share what we learn: Blogger tutorials

Tips For Effective Keyword Research for blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="Tips For Effective Keyword Research" class="postmainimage" height="280" src="http://www.rollingwavesoftware.com/App_Themes/Default/images/searchable.jpg" width="320" /> Good keywords play a very important role in your site’s searchability because they let Google and your readers know about your site’s real content. Here are a few tips that you can apply in researching the right keywords for your website. <ul><li>Get into the details. If your site contains niche content, you should pay attention to more detailed keywords instead of using keywords that cover a broad area of interest. Why? Because popular keywords also offer higher competition from other sites in the same niche. Selecting other low-competition keywords is the key to getting noticed by search engines and your visitors, because they’re more searchable. This way, it will be easier for your site to get a <a href="http://www.allblogtools.com/category/tricks-and-hacks/blogger-seo-tutorials/" target="_blank">higher search rank</a>.</li></ul><ul><li>Use extra words. Long tail keywords can make your niche terms more specific and attract a much more targeted audience. For example, if you run a <a href="http://www.allblogtools.com/start-blogging" rel="nofollow" target="_blank" title="Blogging">blogging</a> site, and your visitors type the keyword ‘blog’ in search engines, they’ll get very general results. If they enter ‘blog tools.’ they get more specific results. But if they type ‘all blog tools,’ it can drive them towards your blogging site. This practice helps make ranking up the search engines easier.</li></ul><ul><li>Consider your audience’s interests. Think of keywords that may not be strictly related to your niche, but are attractive to your audience, and use them. For instance, even if your niche is internet marketing, some of your visitors might be looking for articles on affiliate marketing, blogging for money, or even e-commerce. When these visitors find your site through search engines because of keywords in their interests, you’ll get more hits.</li></ul><ul><li>Listen to your audience. Use Google webmaster tools or any other similar software to help you track down your analytics. There are times that you will see other visitors go to your site under certain keywords and sometimes you may not rank high with the keywords you use so it’s better to know what the audience is looking for when searching for a niche that is similar to yours.</li></ul><ul><li>Pay attention. The same keywords will not always work for different sites, so pay close attention to what keywords work for your site. Also, study other, more successful sites’ keywords and content structure to give you an idea of what may work for you .</li></ul></div>

Tips For Effective Keyword Research for blogger

Good keywords play a very important role in your site’s searchability because they let Google and your readers know about your site’s real ...

A Quick & Easy Way To Create A Page List Of Archives for blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="A Quick & Easy Way To Create A Page List Of Archives" class="postmainimage" height="280" src="http://blog.lib.umn.edu/cspg/electionacademy/images/archives.jpg" width="320" /> <pre>} .toc-header-col1, .toc-header-col2, .toc-header-col3 { background: #fff; color: #000000; padding-left: 5px; width:60%; } .toc-header-col2 { width:20%; } .toc-header-col3 { width:20%; } .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited { font-size:18px; text-decoration:none; } .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { font-size:18px; text-decoration:underline; } .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:18px; } </style> </div></pre><ul><li>Click on the Publish button and that’s it!</li></ul></div>

A Quick & Easy Way To Create A Page List Of Archives for blogger

} .toc-header-col1, .toc-header-col2, .toc-header-col3 { background: #fff; color: #000000; padding-left: 5px; width:60%; } .toc-header-col2 ...

How To Add A Feedburner Reader Counter Widget for blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="How To Add A Feedburner Reader Counter Widget" class="postmainimage" height="280" src="http://findicons.com/files/icons/1974/glossy_orange_orb_social_media/256/feedburner_logo_webtreatsetc.png" width="320" /> If you already  have accumulated a good number of subscribers via Feed, now might be a good idea to let the rest of the world know that your site is worth following, and you can do this simply by adding a feed subscriber count widget into your Blogger. There are two ways on how to go about this, one is by using Feedburner’s own default widget, and the other is by creating your own; we’ll be doing the former in today’s post, which is of course, free. <ul><li>In order to do this, you’ll first have to log in to your Feedburner dashboard using your Google account detail. (If you still haven’t, you’ll be asked to create a Feedburner account or burn a feed first before proceeding.)</li></ul><ul><li>Click on the Publicize tab and then click on FeedCount located at the sidebar.</li></ul><ul><li>In this page, you can choose the style and the color scheme for your FeedCounter to better match your blog site’s theme.</li></ul><ul><li>Once you’re done choosing, click on Activate and it will generate the code you’ll use to embed the counter in your site. (Make sure that you also choose “Blogger” in the “Use as a widget in” drop-down list box).</li></ul><ul><li>Copy the HTML code provided in to your template.</li></ul>And you’re done! Have fun watching your subscriber base increase as time goes by.</div>

How To Add A Feedburner Reader Counter Widget for blogger

If you already have accumulated a good number of subscribers via Feed, now might be a good idea to let the rest of the world know that y...

Great Internal Linking Practices For Better SEO of blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="Great Internal Linking Practices For Better SEO" class="postmainimage" height="280" src="http://themarketingrobot.com/wp-content/uploads/2012/05/counting-clicks.jpg" width="320" /> Internal linking is probably the easiest and one of the least complicated things that you can do to give your website a very strong structure and overall foundation for <a href="http://www.blogussion.com/details/seo-beginner-tips/">gaining powerful SEO</a>, which is why it is also important to keep in mind key strategies for effective internal linking: <ul><li>Don’t put too many links on a single page. If you were to ask me to give you a number or a rough estimate of the maximum number of links you ought to have on a single page, I’d say about 100. Any more than that and chances are, the search engine spiders won’t crawl anymore to the remaining links on the page.</li></ul><ul><li>Consider creating a link hierarchy. After you deal with the number of links, you might want to consider ranking them by creating a link hierarchy; doing this will allow not just search engine robots but also users to navigate easily around your website. Link hierarchy also involves linking relevant pages together.</li></ul><ul><li>Don’t go too deep. Some sites thread too many links together — that is, taking more than three clicks to get from a page to another page — which quickly tires out your visitors. This method quickly backfires because not only is it tedious, it also gives your site a spammy feel. Instead, go for shallow linking, which allows your readers to get to a linked page in only a maximum of three clicks.</li></ul><ul><li>Try to avoid using “Click Here” as your hyperlinked text. Use a descriptive word or phrase instead, or better yet, use or include a keyword as your linked text. This will help Google bots to understand the subject of the page that you are linking it to. Search engines are known to consider this anchor text as an important metric in link relevance.</li></ul><ul><li>Use homepage links. Your site’s homepage ranks the highest when it comes to PageRank because it is the most linked-to page all throughout your site. Its PageRank is then divided among the rest of your site’s pages. Make sure that the most important pages on your site have a direct link to your homepage.</li></ul><ul><li>Use creative linking. Also consider thinking about creative ways of linking between pages, especially the important ones. One example of this is using sidebars that change from one page to another, such one sidebar for a products page and another for the homepage.</li></ul></div>

Great Internal Linking Practices For Better SEO of blogger

Internal linking is probably the easiest and one of the least complicated things that you can do to give your website a very strong struct...

How to Provide Background for Each Blogger Post

<div dir="ltr" style="text-align: left;" trbidi="on"> A good background gives your site personality and uniqueness aside from making it look good, which can help attract more visitors. So how can you add a background to your Blogger post? Well, here’s a good find courtesy of Rohit Malik of <a href="http://hackedbits.blogspot.in/" target="_blank">HackedBits</a> who shows you how to do this. Below are the steps to follow: <ul><li>Look for the right image for your post. You may search from Google for copyright-free images or use your own.</li></ul><ul><li>Upload your photo to a free web host site such as <a href="http://beta.photobucket.com/" target="_blank">Photobucket.com</a>. Copy its link.</li></ul><ul><li>Now put the code in the post template.</li></ul><ul><li>Login to your Blogger and on the Dashboard, click Settings.</li></ul><ul><li>On Settings tab, click on Formatting.</li></ul><ul><li>Scroll down in the Formatting tab to the Post Template.</li></ul><ul><li>Copy and paste the code below at the top of the box:</li></ul><pre><div style="background:url(LINK_OF_PICTURE) no-repeat;"> Paste </div> at the bottom of the box </pre><ul><li>Save Settings.</li></ul><ul><li>Click on Posting found at the top. The Post Editor will open up, with the code inside it.</li></ul><ul><li>Change ‘LINK_OF_PICTURE‘ with your link to your chosen background image, which is the one you have uploaded on a free hosted site. Delete “no-repeat” in the code line if you wish to not repeat the image.</li></ul><ul><li>Key in your post before </div> at the bottom, name a Title then hit Publish.</li></ul></div>

How to Provide Background for Each Blogger Post

A good background gives your site personality and uniqueness aside from making it look good, which can help attract more visitors. So how ...

Disabling Blogger Lightbox

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="Disabling Blogger Lightbox" class="postmainimage" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-xhhukhzdM66U6VWdw4ReHXmRsYz7m70H4lFWa06OnLX4as4UA8w198vyFcTmZLdghSf6f52eT3mnl_GdPyQLwhGKbVIcaCGlnhkGLrfT1bC0RtIJqN5Le_Jz56GkJRd4mzvRf-MOR9Oo/s1600/blogger.png" width="320" /> The lightbox is one of a website’s best tools for displaying your photos, images, and graphics, and Blogger has its own lightbox plugin for posting photos. While this plugin is very useful for image-heavy blogs, some site owners don’t like the idea of using it on their site, or they may already have installed a custom plugin which might conflict with the default lightbox. So here’s a quick <a href="http://www.way2%3ca%20href=/" rel="nofollow" title="Blogging">blogging</a>.org/2011/11/how-to-disable-official-blogger.html” target=”_blank”>technique I’ve learned from Harish of Way2Blogging on how you can disable the Blogger Lightbox. <ul><li>Login to Blogger > Dashboard > Click on More Options dropdown menu > Settings.</li></ul><ul><li>Select Post and Comments > Showcase images with Lightbox? > set it to NO.</li></ul><ul><li>Save settings.</li></ul></div>

Disabling Blogger Lightbox

The lightbox is one of a website’s best tools for displaying your photos, images, and graphics, and Blogger has its own lightbox plugin fo...

Polling for Better Blog Interaction

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="Polling for Better Blog Interaction" class="postmainimage" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmdh5GtI5EDAfBA85PX7zMqFSMVeK9PBuiEWqhjo6wsnrZbvyfoYnpLhEGWGhP5h9bVhAFcOI2R_u9H0Zql3Sn0gkKj8uc1H6iqSF0kH8rmax7IEgU0Q03FzV0rAAPDla7FZS29kYGVi9m/s1600/poll.jpg" width="320" /> What is a better way to interact with your site readers than by providing them with polls to answer? By having this poll gadget in your site, you get quick feedback that would definitely help you build a better blog, plus it will help your readers feel more at home in your site. If you haven’t checked it out yet, Blogger has its built-in poll gadget that offers basic options that even beginners can follow. To integrate this gadget into your blog, you need to login first to your Blogger account, then go to Layout then click on the Add a Gadget button. Select the Poll gadget, tick the check box to enter your poll questions and answers and a pop-up window will present you with the following options: <ul><li>Ability to select closing date and time of your Poll</li></ul><ul><li>Option to select if users can be allowed to mark multiple answers</li></ul>To save your poll, simply click Save.</div>

Polling for Better Blog Interaction

What is a better way to interact with your site readers than by providing them with polls to answer? By having this poll gadget in your si...

Tips For A Better SEO-Friendly Image

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="Tips For A Better SEO-Friendly Image" class="postmainimage" height="280" src="http://quextitmc.com/wp-content/uploads/2012/08/seo.png" width="320" /> When it comes to SEO, webmasters and bloggers have a tendency to undermine the importance of image optimization, perhaps even way too much that they completely forget about it – intentionally. Some would even say that optimizing images isn’t that much worth all the trouble because it doesn’t really give that much in return. But then if you really value SEO, wouldn’t you do everything you can to help your site generate more traffic? Now if you said ‘yes’ to the above question then you should have no problem following these <a href="http://www.allblogtools.com/category/blogger-templates/simple/" title="Simple Blogger Templates">simple</a> but very helpful tips on how to make your content images SEO friendly. Alt tags – This is basically the very first thing that should pop in to your mind when it comes to optimizing images for SEO. Search engines (or search engine spiders) are virtually blind; all the efforts you put into making all those gorgeous images on your site are all for naught if they don’t have any alt tags. Search engines pretty much ignore images without alt tags. Image filename/title – Name your images with relevant keywords and separate them with dashes rather than underscores. First letter capitalization won’t matter. Image filessize – We’re talking about both in terms of the dimension and the byte size (kb/Mb). An image that can slow down your site’s  loading speed can have a negative impact on your SEO, so make sure you make all the necessary adjustments to your images in both aspects. There’s no specific size that you need to follow but as a general rule, you will want to keep it to a minimum, so as not to decrease your page’s load time. NOTE: On alt tags and filenames, don’t overdo it! Don’t cram in too many keywords in them. For filename/title, probably best limit it to five words only. Also, if you got lots of images that need alt tags, don’t fret. There are plugins that you can use to automatically do all the work of putting alt tags on your images for you.</div>

Tips For A Better SEO-Friendly Image

When it comes to SEO, webmasters and bloggers have a tendency to undermine the importance of image optimization, perhaps even way too much ...

Insert Adsense Anywhere on Your Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="Insert Adsense Anywhere on Your Blogger" class="postmainimage" height="280" src="http://www.geekytricks.com/wp-content/uploads/2011/12/logo3.png" width="320" /> Have you seen a Blogger blog where Adsense ads are placed everywhere? Well, adding the code is not that hard, although you need to do it manually to place it specifically where you want the ad to be. Here’s a helpful tip via Gautham A S of <a href="http://www.techgau.org/" target="_blank">TechGau</a> on how you can insert Adsense anywhere in your Blogger site. 1. Login to your Blogger, open “New Post” and enter any new content you want to publish. 2. Copy your Adsense code from your Adsense site, and place the code inside the tags as follows: <pre><div align='center'> <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div></pre>Note: Make a copy of the code to your notepad or wordpad so you can easily copy and paste it if you want to use it again. 3. Go to HTML and place the Adsense code from step 2 anywhere within the given code in the HTML field. Save. And that’s it.</div>

Insert Adsense Anywhere on Your Blogger

Have you seen a Blogger blog where Adsense ads are placed everywhere? Well, adding the code is not that hard, although you need to do it ma...

Making Your Blog Visible To Search Engines

<div dir="ltr" style="text-align: left;" trbidi="on">If you’re into <a href="http://www.blogger.com/null" rel="nofollow" target="_blank" title="Blogging">blogging</a>, it is important to know how to get your blog noticed, otherwise you won’t get that much readers. Below are some of tips I’ll be sharing on making your blog easily visible to search engines, so it’s easier for you to increase your audience. 1. Submit your blog to different and reputable search engines like Google and Bing. It’s one of the <a href="http://www.allblogtools.com/category/blogger-templates/simple/" title="Simple Blogger Templates">simple</a>st ways to effectively increase visibilty to your readers. You can also create sitemaps. 2. Adjust your blog’s privacy settings. You need to set the privacy settings to public and allow search engines to index your blog so it can easily be visible. 3. Select an attractive and unique blog template. The site’s appearance is the first thing a visitor will ever see, so by having a beautiful, clean and sleek design, you can attract more followers. But be careful in selecting a design. Pick the theme that will mostly help convert your posts. Go for a more professional look if you want to promote your brand. 4. Use social networking and bookmarking sites. Social networking and bookmarking sites have the power to connect to a lot of people all over the globe, so use them to your advantage. Sites like Facebook, Twitter, Google+, etc. are especially useful tools in expanding your network. 5. Update your blog often and regularly. If your blog has been noticed already by viewers, you need to populate it with fresh updates on a regular basis so people will always be looking forward to visiting it. 6. Interact with your readers. Constant interaction and activity with your audience is a must if you want your blog to get noticed. Allow readers to post comments on your posts and reply to them. This increases your blog’s chances of being visible because of keywords written by your readers.</div>

Making Your Blog Visible To Search Engines

If you’re into blogging , it is important to know how to get your blog noticed, otherwise you won’t get that much readers. Below are some o...

Create a Christmas Snow Storm Effect on Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="Create a Christmas Snow Storm Effect on Blogger" class="postmainimage" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTGgse5CswJ8FANaAblKPLoSLjritAvism0cKGslEL2Mw6DmnyHfXDiJtxqa95LsWWmPkVVuu7xUyWhiZ1dDuD5gFnyNjvqJgBTDmChRV6V1ZqAZxX5r5K42RfxVaUsUNi6T4uP5WKFRQ/s200/snow-storm-effect-blogger.jpg" width="320" /> In time for Christmas season, here’s a nice widget that you can add to your Blogger that can bring a new look to its appearance. The Christmas Snow Storm Effect, which is created by Paul Crowe of Spice Up Your Blog,  gives you the feel of the upcoming celebration. What differs this widget from the past creations is that the snow fall is dictated by the movements of your cursor. Cool, huh? Check out <a href="http://www.spiceupyourblog.com/2012/11/christmas-snow-storm-effect-for-blogger-blogs.html" target="_blank">his demo</a> and click its Add to Blogger button so you can easily integrate it in your Blogger blog.</div>

Create a Christmas Snow Storm Effect on Blogger

In time for Christmas season, here’s a nice widget that you can add to your Blogger that can bring a new look to its appearance. The Christ...

Spinning CSS 3D Social Sharing Widget

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="Spinning CSS 3D Social Sharing Widget" class="postmainimage" height="280" src="http://c4lpt.co.uk/Top100Tools/blogger.png" width="320" /> Want to have another designer set of social sharing icons to put on your Blogger blog? Well, why not try out these nicely designed CSS icons? These gorgeous animated 3D icons spin every time you hover your mouse cursor over and off of them. Installing them in your blog is pretty much the same as with other widgets: <a href="http://www.allblogtools.com/category/blogger-templates/simple/" title="Simple Blogger Templates">simple</a> and easy. Follow the steps below: <ul><li>Go to the Design page in your Blogger dashboard.</li></ul><ul><li>Click on Layout.</li></ul><ul><li>Click on any Add a Gadget placeholder where you’d like to put the social icons.</li></ul><ul><li>Choose HTML/JavaScript on the list of gadgets.</li></ul><ul><li>Copy/paste the following code below:</li></ul><pre><style> #social a:hover { background-color: transparent; opacity:0.7; } #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center> <div id="social">  <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-oZ3_p9UTgZiyfqeUUPH_AJ5qLvsFNkabb97L74KJY_he5QdUwGRbWQkp8Azv9BiW7jbrRHV5EHfT5ybrcNCHECrQYsXOvaNj92xEPe544Znf4Gt9Rr5N_b2g4uuFpvbJT-xtd59b3q61/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA8EFxRuxcXoBeHoXKNiwJgEkteelvV72Zv6XeVL9bTchnZ8yBBNjSBtRsP2aIGrS-T0EqWRc6e5zk_6vUTZnV9iUxlhC9RGJZjX5u5cjzR5Gz4S2uHreTSejxvTilNeQSx-5CLbxJr7hi/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZE5yMSQWuuYI7gJSpTm2bT8hj0tBHbol7RqiQHiAlVgCVtn3JkJcdy0Yixlyc19DByBZjXQ9cD_SUiWCDbW80R-HrsLzHJ2whZeyz9gd7rTN_PneugYmVkVldy57MuShpO3sEdzKJnVru/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizap8UIKWIymqkULOXrU9bUb_TLCSRKHID37gLlcrVYIB6uRPBFyT_USG_PG5Qbi7zfLnUgWMfBnCB-Cp3GOh1e28RhDP8vJu3VtVqsklbnT240fx3THg-Ba5vgsj8xv3IdOdzo16Wfvb1/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a>   <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKyo5lg5d_aq5c_UUS9JDfXyLb8iDlV5LfxXmHN2p03G5Q9KfqO_xErilbRHEN8IyYTPoteGtXfzbzjlALYlXS_Nt3Qx0Ht4J0V8Q4aaUqwAwO3aS7ybMQuoyESr6SHaYLsM1ChCLkjxMA/s1600/GOOGLE-PLUS-48x48.png"/></a>   <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM2PBVPyyphrMyNRZE-Lm3d7XNHAUDdd8HzUafml_Upe1b5B-1dji9lwW8V5b1giRGXhVfCbBxl_4FaiFUG4KE2IoyKYoNZXrbr-g2JqL7lpGa6oNk2ubmsE1yMpEvryEsqeNN78XEVwtz/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>  </div> </center>     </pre><ul><li>Replace all of the necessary info (i.e. URLs) with that of your own.</li></ul><ul><li>Save the widget and that’s it. You’re done!</li></ul>View your blog to see how it looks. Have a good day!</div>

Spinning CSS 3D Social Sharing Widget

Want to have another designer set of social sharing icons to put on your Blogger blog? Well, why not try out these nicely designed CSS ico...

Pinterest Pin It Button Updated for blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="Pinterest Pin It Button Updated" class="postmainimage" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd7UWIKcPoM64kRhZYJiLx70nvnUcQtV4EXzTNCtcGqjYqLXUJgUe_3G2SeMttauElpQVhG0FCJzCzEtRGmYj9VKiRDkI_uPdvhHIbKjYwDwy9g9envY55AhUprAREVBnl3ODuCwObTEUi/?imgmax=800" width="320" /> The social pinboard Pinterest has quickly been racking up more and more users since it has been released. Because of this, it can very well be useful in promoting your blog. By integrating the <a href="http://www.allblogtools.com/tricks-and-hacks/how-to-add-pinterest-pin-it-button-with-counter/" target="_blank">Pinterest Pin It Button</a> to your site, it will easily help increase your followers and readers. Greenlava of Blogger Sentral has created an <a href="http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-with-counter.html" target="_blank">updated version</a> of this cool widget which comes with valuable codes. Check it out now!</div>

Pinterest Pin It Button Updated for blogger

The social pinboard Pinterest has quickly been racking up more and more users since it has been released. Because of this, it can very wel...

How To Add A CSS3 Thread Out Social Sharing Widget for blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="How To Add A CSS3 Thread Out Social Sharing Widget" class="postmainimage" height="280" src="http://allbloggingtips.com/wp-content/uploads/2012/11/widget.png" width="320" /> If you feel like changing your blog’s social sharing widget then you’re in luck. Today’s featured tutorial involves a new and refreshing social sharing widget design courtesy of Abu Shaleh. The widget appears as a <a href="http://www.allblogtools.com/category/blogger-templates/simple/" title="Simple Blogger Templates">simple</a> grey circle with the word ‘Share’ written inside it but once you hover your mouse cursor over it, four share buttons appear spinning and zooming out of it: a Facebook ‘Like’ button, a Google +1 button, a Tweet button and a ShareThis button. Check out the <a href="http://abushalehdemoground.blogspot.com/2012/11/css3-ring-menu-demo.html" target="_blank">live demo</a>. Here’s how you can install it to your blog: <ul><li>In your Blogger dashboard, go to Design and then click on Edit HTML.</li></ul><ul><li>Check the Expand Template widgets box.</li></ul><ul><li>Search for the following tag or line of code by pressing Ctrl+F.</li></ul><pre><div class=’post-footer-line post-footer-line-1’></pre><ul><li>Copy/paste this CSS/JavaScript code immediately right after/below it:</li></ul><pre><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type="text/css"> .ringMenu { width: 100px; margin: 150px auto; } .ringMenu ul { list-style: none; position: relative; width: 100px; color: white; } .ringMenu ul a { color: white; } .ringMenu ul li { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .ringMenu ul li a { display: block; width: 100px; height: 100px; background: rgba(50,50,50,0.7); text-align: center; line-height: 100px; -webkit-border-radius: 50px; border-radius: 50px; font-size: 20px; } .ringMenu ul li a:hover { background: rgba(230,150,20,0.7); text-decoration: none; } .ringMenu ul li:not(.main) { -webkit-transform: rotate(-180deg) scale(0); -moz-transform: rotate(-180deg) scale(0); -o-transform: rotate(-180deg) scale(0); transform: rotate(-180deg) scale(0); opacity: 0; } .ringMenu:hover ul li { -webkit-transform: rotate(0) scale(1); -moz-transform: rotate(0) scale(1); -o-transform: rotate(0) scale(1); transform: rotate(0) scale(1); opacity: 1; } .ringMenu ul li.top { -webkit-transform-origin: 50% 152px; -moz-transform-origin: 50% 152px; -o-transform-origin: 50% 152px; transform-origin: 50% 152px; position: absolute; top: -70px; left: 50px; } .ringMenu ul li.bottom { -webkit-transform-origin: 50% -52px; -moz-transform-origin: 50% -52px; -o-transform-origin: 50% -52px; transform-origin: 50% -52px; position: absolute; bottom: -70px; left: 50px; } .ringMenu ul li.right { -webkit-transform-origin: -52px 50%; -moz-transform-origin: -52px 50%; -o-transform-origin: -52px 50%; transform-origin: -52px 50%; position: absolute; top: 10px; right: -50px; } .ringMenu ul li.left { -webkit-transform-origin: 152px 50%; -moz-transform-origin: 152px 50%; -o-transform-origin: 152px 50%; transform-origin: 152px 50%; position: absolute; top: 10px; left: -50px; } </style> <div> <script type="text/javascript">var switchTo5x=false;</script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript">stLight.options({publisher: "ur-e9856caa-8f3b-40a6-82af-461e390fe167"});</script> <ul> <li><a href="#main">SHARE</a></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </b:if> </pre><ul><li>Save your template and that’s it. You’re done!</li></ul></div>

How To Add A CSS3 Thread Out Social Sharing Widget for blogger

If you feel like changing your blog’s social sharing widget then you’re in luck. Today’s featured tutorial involves a new and refreshing s...

Google + Followers Gadget for blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="Google + Followers Gadget" class="postmainimage" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCGeboh96MzbKaprteDHMLJg5UK_ikmvVYspK_HPHuBYgP1wcCCOqmFzs4TNCQFm9IH9gpRXO-tODt72MWswOnu0G6ivXUWrvEc4kgyzQE1nWHhNnlIdFpFUD0Etze-W2ds-ImoF9iJuM/s320/Sharing-Blogger-Posts.jpg" width="320" /> Google + has released another cool feature called Google Plus Followers gadget which you can easily add to your Blogger/Blogspot site. This is one way to let your site be known to the world, and that’s what I find awesome about Google because they have different types of products that can be effortlessly integrated with one another. This gadget allows you to integrate both your Google+ account and your Blogger blog and it lets other users aware of your site’s existence because of its exposure it does. All you have to do is log in to both account in order for the integration to work. Check out <a href="http://www.mybloggertricks.com/2012/07/automatically-publish-blog-posts-on-Googleplus.html" target="_blank">Qasim Zaib’s tips</a> on how you can do this. Once you’re done with it, go to your Layout from Blogger Dashboard, then choose Add a Gadget so you can add this up.</div>

Google + Followers Gadget for blogger

Google + has released another cool feature called Google Plus Followers gadget which you can easily add to your Blogger/Blogspot site . Th...

Blogger Now Integrated With Google+ Via Mention

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="Blogger Now Integrated With Google+ Via Mention" class="postmainimage" height="280" src="http://www.empowernetwork.com/aaronhardy122/files/2012/08/Share-Blog-Post-On-Google+.jpg" width="320" /> Google has now incorporated Google+’s ‘mention’ functionality into their <a href="http://www.allblogtools.com/start-blogging" rel="nofollow" target="_blank" title="Blogging">blogging</a> platform. What this means for Blogger users is that they can now call the attention of other Google+ users simply by mentioning their Google+ handle in their blog posts; it’s just like Facebook comment tagging. Once you mention someone’s name in your blog post, they will receive a notification in Google+. Blogger’s software engineer Malte Ubi explains, “If you share your post from Blogger to Google+, we make it easier to notify your mentions by including them in the sharebox. <img alt="" class="aligncenter" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS3n8LSMe81yj7aH3KBKT36iIxN3g3879bs-JmGxRLtATHeLH0Np8cGDU95-uFkZRvwWRpWor8KGd6CSRd9ztpBalNnvJvaxxx0KYXR_r-RMj077LkI2doy4M4Tbp0UulH94XrAzkrGOAQ/s800/google%252B%2520mentions.jpg" title="Google mention" width="467" /> To mention someone, just type “+” before their name while you’re using the Blogger post editor. The profile or page will show up as a link in you published post. Hovering over will show a card with more info and an ‘Add to circles’ button. Clicking the link takes you straight to the Google+ profile or page.” This new function can be very useful if you’re writing about a brand or page on Google+, plus it’s a good way to provide context to your content. Furthermore, it is also helpful when it comes to giving credit to someone who has helped you write your post. Read more about this on <a href="http://buzz.blogger.com/2012/12/mention-people-in-your-posts-with-google.html">Blogger’s official announcement</a>.</div>

Blogger Now Integrated With Google+ Via Mention

Google has now incorporated Google+’s ‘mention’ functionality into their blogging platform. What this means for Blogger users is that they ...

How You can Add WordPress Style Author Bio Box In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">Hello friends, today’s feature is from <a href="http://www.techgau.org/2012/05/add-wordpress-style-author-bio-box-in.html">Gautham A</a>‘s tutorial on how you can add the WordPress style author bio box in your Blogger site. You must have noticed that many bloggers have those author bio box in their WordPress sites, and probably you want that to execute on your Blogger, no worries as you will be able to have similar bio box via this featured trick. The Author Bio Box is very useful especially if run multi-author blogs because it automatically put the box in every article you post. It’s also used in Techgau.org. Step 1: CSS For Author Bio Box - Go to Blogger Dashboard > Edit HTML > “Expand Widgets” Look for this code <pre>]]></b:skin> (</pre>Above that code, copy and paste this code: <pre>.about-author { background:#EBF3FB none repeat scroll 0 0; border:1px solid #D4E2E8; font-size:1em; line-height:1.5em; margin:0 0 20px; padding:10px; } .about-author img { background:#FFFFFF none repeat scroll 0 0; border:1px solid #9ED0DE; display:inline; float:left; margin:0 15px 0 0; }</pre>Step 2: Coding for For Author Bio Box Search for the following code: <pre><div class='post-footer-line post-footer-line-1'></pre>Immediately after this code, paste the following Author Bio Box Code - <pre><div class='about-author'> <img alt='Display Name' height='100' src='Image URL' width='100'/> <h4>Author: <a href='Profile URL' target='_blank'><data:post.author/></a></h4> Short Description </div> </b:if></pre>Step 3: Please feel free to change the bold texts in the code.  Change the following: “Display Name” to show name of the author, “Image URL” to your image’s url, “Profile URL” to your site. Enter short description about you (author). Step 4: Save.</div>

How You can Add WordPress Style Author Bio Box In Blogger

Hello friends, today’s feature is from Gautham A ‘s tutorial on how you can add the WordPress style author bio box in your Blogger site. Yo...

Adding Animation using CSS3 KeyFrames and jQuery Scroll Top Function to Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="Adding Animation using CSS3 KeyFrames and jQuery Scroll Top Function to Blogger" class="postmainimage" height="280" src="http://blog.monitor.us/wp-content/uploads/2012/04/jquery_logo.jpg" width="320" /> Here’s a very helpful <a href="http://www.mybloggertricks.com/2012/12/animation-using-css3-keyframes-and.html">tutorial</a> on how you can add an animation using CSS3 keyframes and jQuery scroll top function to your Blogger site. Check out the <a href="http://mbtlab3.blogspot.com/">demo</a>, then get started here: 1. Go to Blogger Dashboard > Template. 2. Edit HTML. 3. Search for <head> and copy and paste these codes just below it: <pre><script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> <script src='http://downloads.mybloggertricks.com/scrolltop.js' type='text/javascript'/></pre>4.   Search for ]]></b:skin> 5. Paste these circular styles provided by Mohammad above ]]></b:skin> <pre> @-webkit-keyframes arrow_to_top{ 0%{ top:10px } 50%{ top:5px } 100%{ top:10px } } @-moz-keyframes arrow_to_top{ 0%{ top:10px } 50%{ top:5px } 100%{ top:10px }</pre><pre> } @keyframes arrow_to_top{ 0%{ top:10px } 50%{ top:5px } 100%{ top:10px }</pre><pre> }</pre><pre> #back-top, #back-top:hover{ position: fixed; display:block; display:none; bottom: 20px; right:20px; cursor:pointer; width: 52px; height:52px; text-align: center; text-decoration: none; color: #797e82; color: rgba(100,100,100,0.8); font-size:16px; border:1px solid #c5ccd3; border-radius:30px; z-index:9999; padding-top:35px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #dee1e7; background: rgba(208,215,222,0.5); }</pre><pre> #back-top:hover{ color:#000; text-shadow:1px 1px 0 #fff; background: #d0d7de; background: rgba(208,215,222,0.9); border-color:#8fa8c1; } #back-top:before{ display:block; content:""; position:absolute; z-index:998; background: #e2e3e6; background: rgba(222,225,231,0.3); width: 66px; height:66px; border-radius:35px; border:1px solid #c5ccd3; top:-9px; left:-9px } #back-top:hover:before{ border-color:#8fa8c1 } #back-top:after{ display:block; content:""; position:absolute; z-index:10000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg25iA481QDaxHIn_Zhs9StZ4AVU8g3oqUBKgQnHBKcUJhRyi5nR0kOQSekbEskGK1wMRjIJKs2ozHeCEK7jjGSKFPZvs6kHkLH5tCc_cO79PhpZDY0J7GYZ5FZ657giYLSlE9HSuLxoQ7h/s400/sprite-mbt.png) -10px -5px no-repeat; opacity:0.5; width: 10px; height:23px; top:10px; left:50%; margin-left:-5px; }</pre><pre> #back-top, #back-top:after, #back-top:before{ -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } #back-top:hover:after{ opacity:1;</pre><pre> -moz-animation-duration: .5s; -moz-animation-iteration-count: infinite; -moz-animation-name: arrow_to_top; -moz-animation-timing-function: linear;</pre><pre> -webkit-animation-duration: .5s; -webkit-animation-iteration-count: infinite; -webkit-animation-name: arrow_to_top; -webkit-animation-timing-function: linear;</pre><pre> animation-duration: .5s; animation-iteration-count: infinite; animation-name: arrow_to_top; animation-timing-function: linear; }</pre>6. Paste this HTML code below <body> <pre><a href='#top' id='back-top' style='right:0px; display: inline;'/></pre>7. Save. Note: Always have a backup of your template before editing it.</div>

Adding Animation using CSS3 KeyFrames and jQuery Scroll Top Function to Blogger

Here’s a very helpful tutorial on how you can add an animation using CSS3 keyframes and jQuery scroll top function to your Blogger site....

Disable Right-Click Without JavaScript for blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="Disable Right-Click Without JavaScript" class="postmainimage" height="280" src="http://www.beholdgenealogy.com/img/no_javascript.gif" width="320" /> In <a href="http://www.allblogtools.com/tricks-and-hacks/disabling-right-click-on-blogger/">one of our previous posts</a> we featured a tutorial by Vijay Prakash that shows you how to disable the right-click function of a user’s mouse button as long as he’s viewing your web page; this helps in protecting your web content. That method involves using JavaScript but if you prefer something that’s a little lighter on the resource that won’t compromise your blog site’s loading time as much then here’s an alternative method by Gagan Jaiswal that doesn’t use JavaScript. <ul><li>Log in to your Blogger dashboard and head over to the Template section.</li></ul><ul><li>Click on Edit HTML and then on Proceed.</li></ul><ul><li>By pressing Ctrl+F, look for the <body> tag in the code.</li></ul><ul><li>Insert oncontextmenu=”return false;” inside the <body> tag like so:</li></ul><pre><body oncontextmenu=”return false;”></pre><ul><li>And then save your template.</li></ul>That’s it, you’re done! View your blog and try clicking on the right button of your mouse. If you did it right, the quick context menu shouldn’t pop up anymore.</div>

Disable Right-Click Without JavaScript for blogger

In one of our previous posts we featured a tutorial by Vijay Prakash that shows you how to disable the right-click function of a user’s mo...

Blog Comments Pros and Cons

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="Blog Comments Pros and Cons" class="postmainimage" height="280" src="http://www.business.com/blog/wp-content/uploads/2012/08/blog-commenting2-300x244.png" width="320" /> If you’re into <a href="http://www.allblogtools.com/start-blogging" rel="nofollow" target="_blank" title="Blogging">blogging</a>, one aspect that you need to consider is if you should allow <a href="http://www.blogussion.com/community/the-power-of-commenting/" target="_blank">blog commenting</a> in your site. This is by far one of the issues that bloggers face, so here are the pros and cons of having it in your site. Pros 1. Friendship between you and among your visitors. By allowing your site to have a comment section, your readers can share their opinions with you leading the conversation, increasing everyone’s chances of making new friends. 2. Increased business prospects. Not only do you get you more friends that share same interest, but you can also meet potential business partners for a joint venture. 3. Personalized communication towards your clients. If you’re running a business site, this is an advantage as you get to communicate with them personally. This will help build trust between you and your clients, or your potential clients. Cons 1. Spam. Many bloggers don’t want a comment section in their site because of this. In most cases, the spam messages are not related with the topic and might put you in an awkward situation if someone posts adult links or links to risky websites. 2. Abusive comments that end up in insults and bullying. There are cases when visitors troll your site just for the sake of fun. There are also times when the site owner and the commenter end up arguing over the comments section, which causes new visitors shy away from the site. 3. Wasting precious time on monitoring your site. As you get more traffic and visitors, you spend more time checking out each post for spam comments, which could lead to wasted time if you have other things to do aside from blogging.</div>

Blog Comments Pros and Cons

If you’re into blogging , one aspect that you need to consider is if you should allow blog commenting in your site. This is by far one of t...