Blogger Templates, Tutorials, Tools | WordPress Themes | Allblogtools.com

Force Links In Blogger To Open In A New Tab

Keith@Allblogtools — Thu, 23 May 2013 10:42:40 +0000

Here’s a nice quick hack that you can perform on your Blogger to force any links or hyperlinks in your blog to open in a new tab instead of the current window. It’s from a Blogger user named Mounish Venkat of Deminto blog and all it takes is inserting just one (that’s right, just one) short line of code into your template code. Plus, it’ll only take you less than five minutes to do it.

Here are the steps to follow:

Starting on your dashboard, go to Template.

Click on the Edit HTML button then on Proceed.

Using Ctrl+F, search for the tag in your template’s code.

Copy/paste the following code right after or below it:

Hit Save Template and you’re done!

See, didn’t I tell you that’s going to be easy and will only cost you a short amount of time? Have a good day!

Using Google Translate Tool

Marvin@Allblogtools — Wed, 22 May 2013 07:40:47 +0000

Google has many features dedicated to all internet users for easy access and use. One of the services Google has provided is its inception of Google Translate Tool. This tool helps users to understand the language one has written on their blog site better. For example there’s a site written in Spanish language, you can translate it to your own language via this service.

This is an efficient way for everyone to learn and understand foreign languages.

Google Translate Tool, which was introduced at the end of 2011, provides more than 70+ languages all over the world and it’s free! To use it, simply visit the link above and type the words or copy-paste them in the box then select your preferred language for translation. It’s so simple yet very effective.

How To Adjust The Width Of The Sidebar In Dynamic View

Keith@Allblogtools — Mon, 20 May 2013 06:53:44 +0000

In Blogger Dynamic View, there’s a template style called Sidebar which is the only style allows you to view the full contents of a post while also keeping the list of post titles visible (in the [left] sidebar).

Most, if not all the time, your post titles will be too long to fit in the sidebar, thereby only showing you a small portion. Here’s a nice trick that’ll allow you to show a little bit more of your post titles by adjusting the width of the sidebar.

From your dashboard, go to Template.

Click on Customize and then on Advance.

Scroll down and choose Add CSS.

Copy the following code below and then paste it on the last or available line.

.sidebar #sidebar{
width: 250px !important;
}
.sidebar #content{
margin-left: 250px;
}

Press Enter after the last character of the last line.

Click on the Apply to Blog button.

You can adjust the width of the sidebar by changing the highlighted value (250px) in red accordingly.

NOTE: Be sure that the two values are the same. Otherwise, it will mess up your template. Also don’t set the width of the sidebar too large as you’ll end up with very little room for your content area, which will pose as a problem to viewers with a small screen display. In other words, use caution.

And that’s all there is to it. You’re done! Preview your template to see if you’ve chosen just the right value for the width.

Latest Improvements on Blogger HTML Editor

Marvin@Allblogtools — Mon, 13 May 2013 17:39:18 +0000

If you’re a web developer or a blog site owner who likes to change templates once in a while using HTML, CSS or Javascript, you will need the HTML editor for these customizations. Good thing Blogger has made its latest improvements with their HTML editor, which is great news to all Blogger users.

The HTML template is the main source code of your site, because it controls everything, from the appearance to added features, etc. Now, the newly improved HTML template has line numbering, syntax highlighting, auto-indentation and code folding. These factors make it easier and more efficient for everyone who uses Blogger.

Also, the guys at Blogger have added the ‘Format template’ button which cleans up the indentation of your template. Searching for text has been made easier as well by hitting ‘CTRL+F’, while ‘CTRL+Shift+F’ finds and replaces text occurrences one by one, and ‘Ctrl+Shift+R’ finds and replaces text occurrences at once.

You may check out the sampled steps of editing in the new HTML editor here.

Merging Two Or More Blogger Sites

Keith@Allblogtools — Thu, 09 May 2013 07:42:30 +0000

Do you run more than one Blogger site that covers pretty much the same niche or topic in order to have more money sources? Although running multiple blogs of the same niche can look like a good idea, it can however be too much to handle and a hassle. That’s why for some, merging Blogger sites might be a good, if not better, idea.

Luckily for those of you who are thinking about doing just that (merging blogs), Ankit Kumar Singla has created a nice simple tutorial on how you can go about doing it. All it takes is utilizing Blogger’s Export and Import tools.

First thing you’d want to do is export the blog which you don’t want any more:

Click on Export Blog then the Download Blog button.

Now you’re going to import that blog by uploading it to the one you’d like to keep running:

Click on Import Blog then Choose File to select the .xml file you downloaded.

Type the appropriate Captcha code and then the Import Blog button.

That’s it! You’re done!

Just repeat the whole process with another blog site you have if you want to merge more than one blog to your main blog.

Color Your Social Subscription Widget Blue

Marvin@Allblogtools — Wed, 08 May 2013 07:01:18 +0000

Here’s another subscription widget that you would definitely like. By using CSS and HTML, it’s a lot easier for you to incorporate this RSS feed subscription box with social icons on your site. The guys at Bloggertrix show you how to add this blue color social subscription widget.

Follow these simple steps:

Select Layout

Add Gadget > HTML/Javascript

Paste this code below:








bloggertrix">

bloggertrix">

userId">

bloggertrix">

Subscribe To Our Email Newsletter & Receive Updates Free

bloggertrix" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

Note: For Facebook username, Twitter username, Google+, Feedburner username, Feedburner ID, replace the provided sample name highlighted in red with your own.

Always backup your template first before editing.

Save.

Simple isn’t it? Hope you like this featured tutorial.

Adding a Wikipedia Search Box To Blogger

Keith@Allblogtools — Tue, 07 May 2013 03:50:25 +0000

You can now actually put a Wikipedia search bar on your Blogger blog. This nice and very useful widget was just made available to Blogger recently and with it, now your visitors can be able to search any Wikipedia articles without having to leave your website.

So how can you start incorporating this widget to your blog? Just follow the simple steps below:

In your Blogger dashboard, head over to the Design page and click on Layout.

Click on the Add a Widget placeholder where you’d like to place the search bar.

Click on More Gadgets in the Add a Gadget pop-up window and you’ll see the new Wikipedia widget at the top of the list.

Click on the plus (+) sign to add it to your template.

And that’s it! You’re done. Check and preview your site to see the widget on your site and ready for use.

How to Install Google Plus Comments Widget on Blogger

Marvin@Allblogtools — Fri, 03 May 2013 13:24:01 +0000

Google Plus comments have been implemented to Blogger which adds great functionality to your blog site. It is a useful tool to keep your conversations with your visitors organized. Readers can interact and share the comments, even posting a comment in your Google Plus site and appearing on your site.

But how about if the Blogger template used is customized, how can it be installed? Here’s a tutorial from Qasim Zaib that will help you add this feature on your template.

Click the blog you want to add the Google Plus comment.

Click the Google+ option seen at the left sidebar. Now to do this, you must be the admin of a blog so you can view the option.

Upgrade the account, add it with Google Plus if you haven’t done it yet. After that, you will see a Get Started button. Simply follow the instructions provided.

Check on the option that says Use Google+ Comments on this Blog.

For custom templates, click Template > Edit HTML

Look for this code.

Add this code after it

Note: Make a backup of your template before doing any customizations.

How To Move The Date Below Your Post Title In Blogger

Keith@Allblogtools — Tue, 30 Apr 2013 09:49:10 +0000

One of the things that users are now able to do after the improvements made to Blogger’s template HTML editor a couple of weeks ago is that they can now relocate the date of the blog post directly right below the post title.

To do this is quite simple. Just follow the steps below.

In your dashboard, go to Template and then click on Edit HTML.

Click on the Jump to widget drop-down list button then choose Blog1.

This will take you to a line indicated with the new fold markers ‘►’, click on it to expand the widget code.

Click on the ‘►’ symbol of the line that says

Inside the main includable you’ll find the block of code that renders the post date:


 
 </div></div>
 


 <div class="date-outer">


 


 <div class="date-posts">

Cut it and move it just below this line:

Click on the new Preview template button to check the changes you’ve made.

And that’s how you do it. The date should now be found right below the post title. Congratulations!

Things to Do Before Publishing A Blog Post

Marvin@Allblogtools — Mon, 29 Apr 2013 07:33:42 +0000

In publishing posts, there are some practices that a blogger must do before hitting the publish button for SEO purposes. Although it’s by choice, if you’re into serious posting, then you should follow these practices for essential SEO utilization to help your site achieve a higher page rank.

Below are some of the tips I learned from well-established bloggers.

Make your titles catchy. Users tend to click on the title that appeals to them, so writing a good title with a hook increases your site’s traffic thus also increases its SERP and get to Google’s first page.

Optimize URLs. You need to have permalink optimization as Google pays closely to the URLs. Always use short URLs with target keywords of the topic so it will easily be found.

Interlink to older posts. Internal linking is said to be 5 times better than related post widgets. By doing this, you connect the whole blog to readers, and increases page views as well.

Check the spelling and grammar. One of the prerequisites for writing a good blog post is to the go by rules of spelling and grammar. Sloppy spelling, grammatical errors, and poor sentence/idea construction will negatively affect your credibility.

Use images. Using images makes your posts more eye-catching and interesting. Be sure to use alt text and a short description when embedding your images.

Google Commenting System On Blogger

Keith@Allblogtools — Fri, 26 Apr 2013 07:06:16 +0000

Just in case you missed it, Google has announced the release of their new commenting widget allows that Blogger users to “see activity from direct visitors, and from people talking about your content on Google+.” What does this mean? It means that Blogger users now have an easier way to engage with commenters, as all of the comments will be available in one place.

If you have a Google+ account, some will be happy about the ability of the commenting system to incorporate privacy settings within the Blogger blogs. You can activate this recently added feature by syncing your Google+ account to Blogger first. Just head over to settings and go to the Google+ tab on the left side bar.

There’s just one caveat: the comments will not work on private blogs. You’ll also need the latest Google+ update to continue. Once you’re done, simply just agree to the terms and conditions, and then you’ll see that your Blogger profile will then change to your Google+ profile that links both your Blogger blog and Google+ pass.

This might just pose a threat to Facebook.

Add A Twitter Feed To Your Blogger

Keith@Allblogtools — Wed, 24 Apr 2013 08:12:47 +0000

In one of the previous tutorials we featured, you learned how to add a feed of recent Pinterest pins on your Blogger site. Today, I’d like to show you a tutorial that will teach you how to add a feed of recent tweets from Twitter. This is originally shared by Blogger user TS Bray and though it may seem daunting to those who have no background in coding, it’s actually quite simple and easy to accomplish.

Here are the steps you need to do:

First, log in to your Twitter, head over to Settings and click on Widgets then on the Create new button. There you’ll be given the option to choose what type of Twitter feeds you’d like to display on your site:

User timeline tab –displays an entire feed from one person.

Favorites tab – displays feed that are “Favorited” by a particular user.

List tab – displays feed from a list of users that you are subscribed to or are a member of.

Search tab – displays feed based on hashtag/s.

Choose the one you want and provide the necessary information (ex. username, hashtag, etc.).

Click on Create widget to receive an embed code. Copy that code by pressing Ctrl+C.

Now log in to your Blogger dashboard.

Go to Layout and then click on any Add a gadget placeholder at the sidebar (or wherever you want the feed to appear).

Choose HTML/JavaScript from the list.

Paste the code you copied from Twitter onto the Content box (giving it Title is optional).

Click Save and preview your blog.

It should now display a Twitter feed. Enjoy and have a nice day!

Facebook Unveils New API for Comment Reply Monitoring

Marvin@Allblogtools — Tue, 23 Apr 2013 08:55:01 +0000

Facebook has unveiled its latest threaded comments to post on Fan Pages. This feature is very useful to everyone as it made online interactions more organized. If you want this thing to be added in your site, lucky you as the social media giant has made a new update for its API comments and replies on its pages.

By using this new feature, you can monitor all comments that you will receive and reply to them easily.

The update gives developers three different basic views of the comments on your page. These views are Top Level Comments, where comments are ranked on the basis of replies and quality; Replies, where you can post a quick reply to a post’s comment; and Comment Streams, where all top-level comments and replies are arranged in chronological order so the latter would not be ranked.

Now you might be wondering why you don’t see it on your Facebook Fan Page. It’s because this is enabled only for pages with 1,000+ fans. Anyway this option will become default by June10 to all pages, so you just have to wait a little longer if you haven’t reached a thousand followers yet.

You can check out the Facebook Developers Blog for more details and the API documentation for instructions.

Fixing The Hidden Blogger Gadget Problem

Keith@Allblogtools — Mon, 22 Apr 2013 01:56:25 +0000

Today’s featured Blogger tutorial is more of like a fix to a problem that some of you might have already encountered, specifically those who use a Blogger’s Dynamic Views template. What problem are we talking about? Well, some users have reported that the navigation menu or gadget at the right side of the website either becomes stuck or is too hidden on the side.

Follow the steps below:

From your Blogger dashboard, click on Design, and then Template Designer.

Click on Advanced and then Add CSS.

Copy/paste the code below inside the CSS box and click on Apply to Blog.

#gadget-dock
{
 right: 0;
}

Now save your template and see the result.

And voila! The your gadget menu should now be visible.

Guide to Writing a Promotion Via Twitter

Marvin@Allblogtools — Fri, 19 Apr 2013 05:20:31 +0000

One of the most simple but effective ways of promote your product, an event, or a site is by posting on Twitter. It may not seem like much, but when done effectively, it can be a powerful tool to reach your market. The only catch about posting tweets is that Twitter only allows 140 characters, so generating interest within those 140 characters can be quite tricky.

Here are some helpful tips I learned on how you can create an effective promotional tweet.

Make it short. Even if the limit is a mere 140 characters, it’s better to use only 100 or 120 at most. That way, when others retweet your post, they can add their own words as well.

Think of a memorable headline that will attract your followers. In Twitter, your post will easily be lost among other tweets in one or two refreshes, so you have to create a high-impact message.

Provoke your readers. Don’t just elaborate on your product or event, but say something intriguing or even controversial. This way, you’re more likely to get a reaction.

Interact with your readers. Not only should you answer inquiries from other readers, but you should try to initiate conversations with them as well.

Check your grammar and punctuation. Follow the standard rules of proper spelling, grammar and punctuation, and avoid using all caps just to get attention.

Use link shorteners when needed. If your link is lengthy, you can shorten it via Bit.ly or other link shortening sites.

Ask readers to retweet your post. Use the word ‘retweet’ because it gets more reader responses.

Use hashtags. Hashtags help improve the chances of getting more reader interaction from your posts, but limit the number of your hashtags to 2.

Add An Automatic Image Signature To Blogger

Keith@Allblogtools — Thu, 18 Apr 2013 02:18:56 +0000

One of the things that you can do to add a more personal touch to your blog is adding a signature at the end of each of your posts. But one caveat that usually comes with doing this Blogger trick is that if you want ALL of your posts to contain your signature then you’ll have to go through all of your previous posts and add it to them one by one, which means a whole lot of work.

Fortunately for you, Blogger user Marie Mosley has shared a way for you to automatically add a signature image to each and every one of your blog posts with the help of one CSS rule. Basically, all it would take for you to accomplish this is uploading your signature image to an image or file server and then adding a little CSS code in to your blog template. She even included a small tutorial on how to add a few extra options to your sig.
You can find the detailed steps to her tutorial here.

Adding jQuery Photo Gallery with Description Effect

Marvin@Allblogtools — Tue, 16 Apr 2013 04:08:14 +0000

Today I’ll be featuring another cool widget which you can integrate in your Blogger site, which is a beautiful jQuery photo gallery with description effect from Bloggertrix. Adding it is simple, and you can also add a description to your selected image, even in the animation.

Steps:

Go to Blogger Dashboard.

Click on the drop down menu > Layout

Click Add Gadget > HTML/Javascript

Copy and paste this code provided below:








 
 
 
 
 
 
 
 
 

 
 
 Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.
 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
 Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.
 tristique senectus et netus et malesuada fames ac turpis egestas.
 Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.
 
 




 prev 
 next

Change photos of your choice by changing the image URL.

You can change the image texts by changing the bolded texts (this part of the code above):


 
 Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.
 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
 Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.
 tristique senectus et netus et malesuada fames ac turpis egestas.
 Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.

Note: Always have a backup before editing your template.

Save.

How To Add A Zoom Effect To Images Using jQuery

Keith@Allblogtools — Fri, 12 Apr 2013 09:50:13 +0000

When you’d like to show your visitors a larger version of an image on your website, what you would usually do is provide a link that will open up another tab or window that will contain the high resolution image. And while that may be the simplest way of handling it, some still don’t like the idea of diverting the viewer’s attention from the page.

That’s where this nice little jQuery trick comes in courtesy of Shiv Chawla of tipsntrack. Once you have this done on your Blogger blog, whenever someone hovers their mouse cursor over the image, a separate box will appear within the current page and show the image which is zoomed (only the specific part where the mouse hovers is zoomed).

Here’s how you can implement it on your blog:

From you Blogger dashboard, go to Template.

Click on Edit HTML and then on Proceed.

Place a check inside the Expand Widgets Template box.

By using Ctrl+F, search for the tag and then copy/paste the following code right above and before it.

Next, using Ctrl+F again, look for ]]> and then copy/paste the following code shown above and before it:

#easy_zoom{
width:500px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:50%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

NOTE: You might want to change the value left:50%; in the above code to make the necessary adjustment to the location of the box that displays the zoomed image.

Save your template.

To add the zoom effect to a particular image, just add class=”zoom” inside the image’s tag. See the example below:

<class="zoom" a href="http://1.bp.blogspot.com/-CV-pv5fPDgg/T1OXJWe1OaI/AAAAAAAAAGs/2ICEdv7fWSU/s1600/best-nature-full-hd-wallpapers-17.jpg" rel="softFocus: true, position:'inside', smoothMove:2">

Automatically Share Blog Posts In Facebook

Keith@Allblogtools — Wed, 10 Apr 2013 12:54:47 +0000

As any wise blogger knows, one of the best ways to direct more traffic into one’s blog is by sharing their blog posts on popular social sites like Facebook. However, even with the promising results that this practice brings, some bloggers still don’t do it as much, or enough at all. Why? Because they find it to be too troublesome.

One way to solve this problem is by offering them a means of doing it automatically. So how is this accomplished? With the help of a Facebook app called RSS Graffiti!

All it takes is for you to log in to Facebook, proceed to the app’s page, and then just fill up the form with all of the necessary information it requires to run the app. If you’re worried about getting lost in the process, don’t fret! Blogger user Gayan Dulantha has created a nice, easy-to-follow guide that’ll help you go about the process. You can find his instructions here.

Adding 17+ jQuery Featured Content Sliders

Marvin@Allblogtools — Thu, 04 Apr 2013 13:00:00 +0000

A slider on your web site allows you to feature special content and add dimension to the entire site’s look. Here’s a featured tutorial via 24Work.Blogspot which shows you an idea on how to add 17+ jQuery content sliders.

Follow these simple steps:

Go to Blogger Dashboard > Edit Template HTML > Expand Widget Templates

Search for this code

]]>

Copy and paste this code just before the code in #3

#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}

#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}

#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}

Search for this code

Before tag, add this code

Save.

Adding the HTML code:

Go to Blogger Dashboard > Layout > Add a Gadget

Select ‘HTML/Javascript‘

Add this code



Install Mac OS X on Intel/AMD PC using iATKOS v7
How to remove "showing post with label" in Blogger
How to add Google Buzz to Blogspot blog
Chat live with your blog visitors using Yahoo Pingbox





Install Mac OS X on Intel/AMD PC using iATKOS v7
Description goes here, this is just a test description....read more






How to remove "showing post with label" in Blogger
Description goes here, this is just a test description....read more






How to add Google Buzz to Blogspot blog
Description goes here, this is just a test description....read more






Chat live with your blog visitors using yahoo
Description goes here, this is just a test description....read more

Click Save on ‘Javascript’

Hit Save.

Watch this video tutorial provided by bloggerwidget to know more about this widget.