Don't Miss

Latest Posts
Browsing Category "Tutorials"

How to Create a Drop Down Menu in Blogger

- 15 Comments
A navigation menu/drop down menu makes your blog/website user-friendly by allowing your visitors to easily navigate your blog posts by just selecting categories from the menu. A navigation menu plays an important role in your blog development, either its a top website like Mashable or a newly created blog, a drop down menu is an essential element of every website. It makes your blog user-friendly, easy to navigate and also adds a new and unique look to your design and makes it look professional. After reading all these advantages if you want to add a Drop Down menu to your Blog/Website, then in this tutorial we'll show you that how to create a Drop Down Menu in blogger. The credit goes to MBT. The design we're going to share today is simple, clean and will surely attract your visitors.
How to Create a Drop Down Menu in Blogger

How to Create a Drop Down Menu in Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area and by using Ctrl+F search for the ]]></b:skin> tag. Now copy the below code and paste it just above/before it (]]></b:skin> Tag)

body {
margin: 0px;
}
#menu{
background: #3EA9AC;
color: #fff;
height: 40px;
text-transform:uppercase;
border-bottom: 2px solid #3EA9AC;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 1px solid #3EA9AC;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:'Open Sans',Helvetica,Arial,sans-serif;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #fff;
}
#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #5FC6EB;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:'Open Sans',Helvetica,Arial,sans-serif;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #3EA9AC;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font:'Open Sans',Helvetica,Arial,sans-serif;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #31AFDB;
}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: #5FC6EB;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

Now again Search for the <body> tag and just below it add the following code

    <nav id='menu'>
    <input type='checkbox'/>
    <label>&#8801;<span>Blogolect</span></label>
    <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#'>Drop Down 1<font size='1'>&#9660;</font></a>
    <ul class='menus'>
    <li><a href='#'>Tab No 1</a></li>
    <li><a href='#'>Tab No 2</a></li>
    <li><a href='#'>Tab No 3</a></li>
    <li><a href='#'>Tab No 4</a></li>
    <li><a href='#'>Tab No 5</a></li>
    <li><a href='#'>Tab No 6</a></li>

    </ul>
    </li>
    <li><a href='#'>Services</a></li>
    <li><a href='#'>Drop Down 2<font size='1'>&#9660;</font></a>
    <ul class='menus'>
    <li><a href='#'>Tab No 1</a></li>
    <li><a href='#'>Tab No 2</a></li>
    <li><a href='#'>Tab No 3</a></li>
    </ul>
    </li>
    <li><a href='#'>Advertise</a></li>
           </ul>
        </nav>

  • Replace Blogolect with your Blog name
  • Replace # with the Links and rename the categories

Finally click Save Template button and you're done!

From Editors Desk

We hope this article may have helped you in creating a drop down menu for your blog. Share this article with your friends and don't forget to subscribe us!

How to Add Disqus Comment System to Blogger

- 125 Comments
The blogger commenting system only allows you to comment using your Google Account, but what would happen if it is must for your commenters to connect to your website through Facebook or Twitter account to make a comment. It would be great! Right. But how? Don't worry, the commenting system we're going to share with you today will help you to do this.
How to Add Disqus Comment System to Blogger
Today we're going to discuss about the DISQUS commenting system. Disqus is a flexible commenting system which allows your visitors to comment using their social profiles like Facebook and Twitter. Disqus comment system is full of advantages and helps you to easily build a community. It has lots of features, some features are:

  • Unique Design: Disqus has a unique and professional design that fits in all websites.
  • Social Login: Your visitors can easily comment using their social profiles.
  • Stars and Thumbs Up: You visitors can rate the discussion using starts and can thumbs up others comments.
  • Threaded System: It has Real time threaded system which makes your discussions more easy.
  • Comment Moderation: You can also enable comment moderation in order to approve your comments.
and lots more...

Integrating Disqus comment system is too easy and no coding is required. Just a few clicks and done. Today in this tutorial we'll show you that How to Add Disqus Comment System to Blogger.

How to Add Disqus Comment System to Blogger

First and foremost, go to Disqus.com and click Sign Up button. Now you've to create your account, enter your Log in information i.e. username, email and password. or you can also sign up with Facebook, Twitter and your Google account.
Once your account is created, it'll redirect you to the homepage. Now click the Gear button from the top and then click Add Discuss to Site button.
How to Add Disqus Comment System to Blogger
On the next page, it'll ask you to enter your website information. Enter your site name, your unique disqus URL (blogname.disqus.com), select a category and click Finish Registration button.
How to Add Disqus Comment System to Blogger
Almost done, it'll ask you to choose your Platform, so choose Blogger and click Add to my Blogger Site. A new tab will open, just click Add Widget button and you're done.
How to Add Disqus Comment System to Blogger

Import your Existing Blogger Comments into Disqus

To import your existing Blogger Comments into Disqus, click Tools > Import button as shown in the above image and click Import Comments from Blogger button from the next page.
That's it!

We hope this article may have helped you in learning How to Add Disqus Comment System to Blogger. Share it with your friends and don't forget to subscribe us!

How to Add a Live Chat Support to Blogger

- 8 Comments
If you're running an Online Store, a Community or an Online Service. A quality Customer Support System really helps you in increasing your sales and interaction with your visitors. While choosing an online service, people look for its features and Live Chat Support is the most crucial.
How to Add a Live Chat Support to Blogger
Having a Live Chat Support system helps you to easily interact with your visitors, so that you can understand their needs, which will help you in improving your services and their experience too. In case of an online store, a Live Chat Support system will help you in increasing your sales. Recently, we received an email from one of our visitors that he wants to add a Live Chat Support system to his blog. In this tutorial we are going to share step by step guide on How to Add a Live Chat Support to Blogger Blog.

It hardly takes 3 minutes to add a Live Chat Support system to your Blog.

Before you add it to your blog, take a look at the image below to see how it looks. On clicking the + button a chat box will open for customer support where your visitors can ask you questions or feedback.
How to Add a Live Chat Support to Blogger

How to Add a Live Chat Support to Blogger Blog 

First and foremost, go to http://www.purechat.com and click Sign Up Free button. A popup will appear, enter your login information and click Submit button.
How to Add a Live Chat Support to Blogger Blog
You'll redirected to the next page, a popup will automatically appear with your chat widget code. If you want to add it without any customizations then Copy that code, go to your Blogger Dashboard >> Select a Blog >> Layout >> Add a Gadget >> Select HTML/JavaScript gadget from the list and paste the copied code in the empty widget box.
How to Add a Live Chat Support to Blogger Blog
Otherwise if you want to customize it close that HTML popup, click Chat Widgets button and then click Edit button.
How to Add a Live Chat Support to Blogger Blog
You'll see a plenty of different tabs for customizing each and every section of your widget like Collapsed, Start Chat, No Operators, In Chat etc. You can also customize its Mobile version by clicking the Mobile tab. Customize your chat widget according to your taste and click Save button.
How to Add a Live Chat Support to Blogger Blog
Now click HTML button under the Installation heading, a code will appear, copy that code.
How to Add a Live Chat Support to Blogger Blog
Now go to your Blogger Dashboard >> Select a Blog >> Layout >> Add a Gadget >> Select HTML/JavaScript gadget from the list and paste the copied code in the empty widget box. Finally click Save button and you're done.
How to Add a Live Chat Support to Blogger Blog
We hope this article may have helped you in adding a Live Chat Support Widget to your Blogger Blog. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

Do share your thoughts in the comments section below.

How to Remove Hyperlinks From Post Images in Blogger

- 7 Comments
If you're using a custom blogger template, then you might have noticed that few templates does not supports blogger Image Lighbox, due to which, when someone clicks on an image from your post it opens in a new tab. Since blogger stores all your images in Picasa web album, so whenever user clicks on an images from your websites, it takes them to a different destination, which causes increase in bounce rate and your blog will have a bad impact on search engines. That's why its important to remove hyperlinks from images if your template doesn't supports image Lightbox. Recently one of our users asked us about Removing Hyperlinks From Post Images in Blogger. So today in this tutorial we'll show you that How to Remove Hyperlinks From Post Images in Blogger.
How to Remove Hyperlinks From Post Images in Blogger

How to Remove Hyperlinks From Post Images in Blogger

First and foremost go to your Blogger Dashboard >> Select a Blog >> Template and click Edit HTML button. Click inside the template code area and by using Crtl+F search for the ]]></b:skin> tag. Now copy the below CSS code and paste it just above/before it (]]></b:skin> tag)

.post{
position: relative !important;
z-index: 10 !important;
}

.hentry img, .separator{
position: relative !important;
z-index: -1 !important;
}

Once everything is done click Save Template button and you're done!

Congratulations: You've successfully disabled click on your post images in blogger. Share this article with your friends, subscribe to us and don't forget to Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/730927093629291

How to Change the Text Selection Highlighting Color in Blogger

- 50 Comments
The quickest way of selecting/copying text from a blog/website is to drag your mouse over that content. The selected content becomes highlighted. Mostly the highlighted text color is blue (Default color). Have you noticed that when you highlight/select text on some top websites, the text's background color is unique and matches the site's color scheme? So, have you ever wanted to change the highlighted text color of your blog? If yes then today we will show you that How to Change the Text Selection Color in Blogger. Its really easy to do and can be done with just the tiniest bit of simple CSS codes. This trick works on Chrome, Firefox, Safari and on latest versions of I.E.

How to Change the Text Selection Highlighting Color in Blogger

Step 1. Go to your Blogger Dashboard >> Select a Blog >> Template and click Edit HTML button
Step 2. Click inside the template code area and by using Crtl+F search for the ]]></b:skin> tag
Step 3. Now copy (Ctrl+C) the below code and paste (Ctrl+V) it just above/before it (]]></b:skin> tag)

::-moz-selection  {
background: #00cc00;
color: #FFFFFF;
text-shadow: none;  }
::selection   {
background: #00cc00;
color: #FFFFFF;
text-shadow: none; }

Customization:
  • Replace 00cc00 with the text highlight color
  • Replace FFFFFF with the text color (highlighted text color)

Step 4. Click Save Template button
And you're done!
Congratulations: You've successfully changed your Text Selection Highlighting Color. 

From Editors Desk

We hope this article may have helped your in learning How to Change the Text Selection olor in Blogger. Share this simple trick with your friends and don't forget to Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/730927093629291

How To Recover Your Blogger Blog From Backup (Update)

- 4 Comments
In our previous tutorial we discussed about How To Backup Your Blogger Blog Posts. A backup is important for your blog if you to be safe from any problem. It is essential for everyone to learn How To Backup and Restore your Blog. If your blog gets deleted by Google and you want to publish all those posts on your new blog, your blog gets hacked or you accidentally deleted your blog posts. With all of these risks, backing up your blog has become an essential precaution that you too need to take. As you know that in our previous article we discussed about How To Backup Your Blogger Blog Posts. And today in this article we'll show you that How To Recover Your Blogger Blog From Backup.
How To Recover Your Blogger Blog From Backup

How To Recover Your Blogger Blog From Backup

Step 1. Go to your Blogger Dashboard >> Select a Blog >> Setting >> Other
Step 2. Now look for Blog Tools heading and click the Import blog option
How To Recover Your Blogger Blog From Backup
Step 3. A popup will appear, Click Browse button and select your backup file (How to Backup your Blog)
How To Recover Your Blogger Blog From Backup
Step 4. Enter the words you see in the image in the Type the text: field and click Import Blog button
Note: Tick the Automatically publish all imported posts and pages option to automatically publish all your posts and page otherwise leave it empty
Step 5. All your blog posts will be imported back to your blog
Note : If you backup your blog daily then you can recover your blog easily after serious damage or after complete deletion.
Congratulations: You've successfully imported all your posts and pages back to your blog.
Do share this article with your friends and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/730927093629291

How To Backup Your Blogger Blog Posts

- 9 Comments
Today, In this article we are going to discuss that why it is important to backup your blog and how to backup your blog. In the world of blogging if you want to be safe from any problem even your blog posts. So you must be ready to face the problem.
How To Backup Your Blogger Blog Posts
Your blog may gets deleted by Google and you want to publish all those posts on your new blog or you accidentally deleted your blog posts. With all of these risks, backing up your blog has become an essential precaution that you too need to take. Because by having a backup you can easily publish all those posts again on your blog.

Recommended:
Make your Blog Awesome by Font Awesome Icons
How to Backup your Blogger Template
How to Restore your Blogger Template from Backup

If you want to prevent your blog from any damage then you must create a backup of your blog. By having a backup, you can prevent your blog from damage by restoring your content. You must take backup of your blog daily or weekly.
So, just follow the steps below to backup your blog posts :

How To Backup Your Blogger Blog Posts

Step 1. Go to your Blogger Dashboard >> Select a Blog >> Setting >> Other
Step 2. Now look for Blog Tools heading and click the Export blog option
How To Backup Your Blogger Blog Posts
Step 3. A popup will appear, click Download Blog
How To Backup Your Blogger Blog Posts
Step 4. Save that file and that is the backup of your blog.
Keep the file in a Safe Location
Important :
This backup will only backup your blog posts, not the images.

From Editors Desk

We hope this article may have helped you in learning How To Backup Your Blogger Blog Posts. Share it with your friends and don't forget to subscribe us. Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/730927093629291

How to Create Google+ Fan Page for Your Website/Blog

- 3 Comments
Creating Google+ Fan Page for your Website/Blog is one of the best ways to get more traffic to your blog. Google gives more attention to the posts or links published on Google+, which means that publishing your posts on Google+ plus will increase your chances to appear in search results. When you create a page, it works like a Google+ profile, where you can share anything including images and videos. You can start a hangout, you can add people on your circles. You can create Google+ Page for your Product, Local Business, Company, Institution, Brand, Art and Entertainment. So if you're looking to Create a Fan Page for your blog on Google+ then you're at the right place. Today in this tutorial we'll show you that How to Create Google+ Fan Page for Your Website/Blog.

How to Create Google+ Fan Page for Your Website/Blog

Step 2. Click on Product or Brand

How to Create Google+ Fan Page for Your Website/Blog

Step 3.Once you've selected the Category from the Category list, hit the Next Button

How to Create Google+ Fan Page for Your Website/Blog

Step 4. Now Enter your Website/Blog Name, your Blog URL Address, Check the Terms Box

How to Create Google+ Fan Page for Your Website/Blog

Step 5. After entering your blog information hit the Continue button, now your Google+ Page is almost created

How to Create Google+ Fan Page for Your Website/Blog

Step 6. Its time to Set your Profile Picture, Cover Photo, Contact Information and to Link your Website

How to Create Google+ Fan Page for Your Website/Blog

That's it... All done! Start publishing your Blog posts to your Google+ Fan Page and drive more Traffic to your Blog

From Editors Desk

We hope this tutorial may have helped you in learning How to Create Google+ Fan Page for Your Website/Blog. Share it with your friends and don't forget to subscribe us. Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/730927093629291