Don't Miss

Latest Posts
Browsing Category "Blogger Tricks"

How to Create an Animated CSS3 Drop Down Menu in Blogger

- 26 Comments
A Navigation Bar or Drop Down Menu is one of the most essential elements of a blog. A drop down menu makes your blog user-friendly, allowing your visitors to easily navigate your blog by simply choosing their desired category from the menu. Apart of all these advantages it also gives your website a new unique and professional look. Almost all the website either its a top website or a newly created are using Drop Down Menus. Recently we shared an article on How to Create a Drop Down Menu in Blogger. The design of that menu was simple and the one we're going to share today has a stylish and professional look with eye catching CSS transitions. Lets begin:
How to Create an Animated CSS3 Drop Down Menu in Blogger

How to Create an Animated CSS3 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, press Ctrl+F to search and search for the ]]></b:skin> tag. Now copy the below CSS code and paste it just above/before the ]]></b:skin> tag

a, #navigation li .sub-nav-wrapper .sub-nav li {
 transition: all 0.7s;
 -moz-transition: all 0.7s;
 -webkit-transition: all 0.7s;
}
#navigation li .sub-nav-wrapper {
 pointer-events: none;
 opacity: 0;
 filter: alpha(opacity=0);
 top: 0;

 transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
 -moz-transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
 -webkit-transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
}
#navigation li:hover .sub-nav-wrapper {
 pointer-events: auto;
 opacity: 1;
 filter: alpha(opacity=100);
 top: 30px;
}
#navigation {
 position: relative;
 text-align:center;
 margin:0 auto;
 background-color:#fff;
 border-bottom: 2px solid #009999;
}
#navigation li {
 position: relative;
 list-style: none;
 display: inline-block;
 padding: 5px 20px;
}
#navigation li a {
 padding: 5px;
 display: block;

 font-family: 'Open Sans', Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: 700;
 color: #3b3b3b;
 text-align: left;
 text-shadow: 1px 1px 0 rgba(255,255,255,0.25);
}
#navigation li:hover .main {
 color: #ee4e1d;
}
#navigation li .sub-nav-wrapper {
 display: block;
 position: absolute;
 z-index: 30;
 margin-left: -16px;
}
#navigation li .sub-nav-wrapper .sub-nav {
 width: 150px;
 margin-top: 6px;
 background: #fff;
 border-top: 1px solid #fff;
 padding:0;
 box-shadow: 0 1px 2px rgba(0,0,0,0.35);
 -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
#navigation li:hover .sub-nav-wrapper {
 display: block;
}
#navigation li .sub-nav-wrapper .sub-nav li {
 list-style: none;
 display: block;
 margin: 0;
 padding: 0;
 text-align: left;
 border-bottom: 1px solid #009999;
}
#navigation li .sub-nav-wrapper .sub-nav li:last-child {
 border: none;
}
#navigation li .sub-nav-wrapper .sub-nav li a {
 display: block;
 padding: 11px 20px;
 font-size: 12px;
 font-weight: 600;
}
#navigation li a:hover {
color: white;
}
#navigation li .sub-nav-wrapper .sub-nav li:hover {
 background: #009999;
 border-bottom: 1px solid #009999;
 color: #3b3b3b;
 text-decoration: none;
}

CSS done, its time for HTML. Search for the <body> tag. Copy the below HTML code and Paste it Just below/after the <body> tag.
Note: You can add HTML wherever you want.

<ul id="navigation">

    <li>
        <a href="index.html" class="main">Home</a>
    </li>
   
    <li>
        <a href="#" class="main">Blogger</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Tips</a></li>
            <li><a href="#">Widgets</a></li>
            <li><a href="#">Traffic Tips</a></li>
        </ul></div>
    </li>
   
    <li>
      <a href="#" class="main">Services</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Blogger</a></li>
            <li><a href="#">Logo</a></li>
 <li><a href="#">Banner</a></li>
            <li><a href="#">Wordpress</a></li>
        </ul></div>
    </li>
   
    <li>
      <a href="#" class="main">Tutorials</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Logo</a></li>
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">Design</a></li>
            <li><a href="#">Illustrator</a></li>
            <li><a href="#">Web Design</a></li>
        </ul></div>
    </li>
   
    <li>
      <a href="#" class="main">About</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Website</a></li>
            <li><a href="#">Our Team</a></li>
            <li><a href="#">Our Mission</a></li>
        </ul></div>
    </li>
   
    <li>
      <a href="#" class="main">Contact</a>
    </li>
   
</ul>

  • Replace the Categories with your own and replace # with their links

Finally click Save Template button and you're done!

We hope this article may have helped you in learning How to Create an Animated CSS3 Drop Down Menu in Blogger. Share this article with your friends and don't forget to subscribe us!

How to Add Disqus Comment System to Blogger

- 123 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 Create a Three Column Footer Widget in Blogger

- 19 Comments
Have you ever thought about having an extra space in your blog footer section for adding more widgets to your blog? You might have seen three column footer widgets section on many websites. Most of the templates come with built-in footer sections, but if unluckily your template doesn't contains a footer and you want to add it! Don't worry, we'll help you in creating a three column footer in blogger.

Recommended for You:
Create a jQuery Sliding Menu with Expand/Collapse Function in Blogger
Add a Tabbed Table of Contents to your Blogger Blog
How to Create an Advanced Admin Control Panel in Blogger

If your sidebar is loaded with various widgets and you want to add more widgets without removing them. Then footer section is the best solution. By creating a footer section in your blog, you can add more widgets to your blog in the footer section. So, today in this tutorial we're going to share How to Create a Three Column Footer Widget in Blogger.
How to Create a Three Column Footer Widget in Blogger

How to Create a Column Footer in Blogger

First of all, log in to your Blogger Account >> Select a Blog >> Template >> Click Edit HTML and search for the ]]></b:skin> tag. Now copy the below CSS code and paste it just above/before it (]]></b:skin> tag)

/* -----   Footer Start   ----- */
#footer {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
}
#footer-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}

#footercol-wrapper {
       background:#333434;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.5em;
       word-wrap: break-word;
       overflow: hidden;
       color:#fff;
}

.footercol {margin: 0; padding: 0;}
.footercol .widget {margin: 0; padding: 10px 20px 0px 20px;}

.footercol h2 {
      margin: 0px 0px 10px 0px;
      padding: 3px 0px 3px 0px;
      text-align: center;
      color:#fff;      text-transform:uppercase;
      font-family:'Skolar Bold',Palatino,"Cambria","Droid Serif","Georgia","Times New Roman","Times",serif;
      font-size:21px;
      border-bottom:2px solid #fff;
}

.footercol ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.footercol li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px solid #ccc;
}
/* -----   Footer End   ----- */

Again search for </body> tag and just above/before it add the following code

<div id='footer'>
<div id='footer-wrapper'>
<div id='footercol-wrapper'>
<b:section class='footercol' id='footercol1' preferred='yes'>
</b:section>
</div>
<div id='footercol-wrapper'>
<b:section class='footercol' id='footercol2' preferred='yes'>
</b:section>
</div>
<div id='footercol-wrapper'>
<b:section class='footercol' id='footercol3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

Finally click Save Template button and you're done!
Now go to Layout and start adding widgets to your footer section.

For your Information:
  • background:#333434; The background color of the footer section, you can change it according to your website colors
  • background:#333434; The background color of the widget columns. In my case the backgrounds of both footer section and widget columns is same
  • color:#fff; The color of Widget Title

We hope this article may have helped you in creating a a Three Column Footer Widget in Blogger. 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

Add a Christmas Snow Fall Effect to your Blogger Blog

- 10 Comments
Christmas is just a few days away, everyone is warming up and soon it will knock the doors of bloggers and the entire world. If you want to impress your visitors and you want to give them a Christmas surprise then this is the right time to show your skills. There are hundreds of Christmas surprises that you can give to your visitors. Today we're going to share one of them that is called Snow Fall Effect. This effect will display a Snow Fall on your blog and that it will definitely surprise your visitors.
Add a Christmas Snow Fall Effect to your Blogger Blog
If you're thinking to decorate your blog this Christmas and you want to give them a mind blowing surprise then you're at the right place. Its time to show your skills and amaze your visitors by adding Snow Fall effect to your blog. In this tutorial we'll show you that How to Add a Christmas Snow Fall Effect to your Blogger Blog.

Add Snow Fall Effect to your Blogger Blog

Step 1. Go to your Blogger Dashboard >> Select a Blog >> Template and click Edit HTML button
Step 2. Click inside the template code area, use Ctrl+F and search for the </head> tag
Step 3. Now Copy (Ctrl+C) the below code and Paste (Ctrl+V) it just above/before the </head> tag

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script src='http://yourjavascript.com/146111102320/snowfall.js'/>

<script>
$(document).ready( function(){
$.fn.snow({ minSize: 10, maxSize: 50, newOn: 400, flakeColor: '#ffffff' });
});
</script>

Note: Remove the code in purple color if you already have jQuery in your template.
Customization:
  • Increase or Decrease the minimum size of snow by changing the value in minSize: 10,
  • Increase or Decrease the maximum size of snow by changing the value in maxSize: 50,
  • Increase or Decrease the value in the newOn: 400, option for changing the snow fall speed
  • To change the snow color replace #ffffff with your own color code

Step 4. Click Save Template button
And you're done!

From Editors Desk

We hope this article may have helped you in adding a snow fall effect to your blogger blog. Share this article with your friends and don't forget to Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/730927093629291

How to Create an Image Rollover Effect

- 3 Comments
The Image Rollover effect is one in which image changes on moving your mouse cursor on the image. It changes the image on moving mouse cursor on it and reverts it back to the original image on mouse out. Image Rollover is a popular effect used in many websites. Bloggers use this effect for gaining visitors attention. There is nothing technical in creating this effect, all you need is just two pictures. The onMouseOver and outMouseOut attributes are used to make it functional. Image Rollover is a simple trick that you can use for gaining attention of your visitors.
Move your Mouse Cursor on the Image below to see how it works:

How to Create an Image Rollover Effect

Here's the code for creating a Rollover Effect:

<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE" onmouseover="this.src='URL OF THE SECOND IMAGE'" onmouseout="this.src='URL OF THE FIRST IMAGE" /></a>

Customization:

  • Replace URL ADDRESS with the URL where you want to redirect people on clicking
  • Replace both URL OF THE FIRST IMAGE with the URL of your first image
  • Replace URL OF THE SECOND IMAGE with the URL of your second image (That will appear on mouse hover)

How to Use Image Rollover Effect in Blogger Posts

Log in to your Blogger Account >> Select a Blog >> New Post and Switch to HTML tab. Now copy the above code and paste it where you want to add the image in your post. Make necessary customizations and Publish your Post.

How to Use Image Rollover Effect in Blogger Sidebar

Log in to your Blogger Account >> Select a Blog >> Layout >> Add a Gadget and select HTML/JavaScript gadget from the list. Paste that code, make necessary customization and click Save button.

We hope this article may have helped you in learning How to Create an Image Rollover Effect. Share this article with your friends and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

How to Add a Post Rating System in Blogger

- 29 Comments
Post Star Rating system is a great way to get feedback from your visitors that what type of posts they like. It provides a quick way to your visitors to share their opinions with just a simple click. By adding a Post Rating System to your blog, you'll be able to know whether a post is useful for your blog or not.

You may have seen Star Rating system on image websites. These websites use a star rating system for rating their images and checking that what type of images their visitors like.
How to Add a Post Rating System in Blogger
There are many post rating systems out there, but the problem is that which one is the best, flexible and easy to use. While I was searching for a post rating system, I came to rating-widget.com, that's flawlessly the best post rating system. Using rating-widget.com, you can create a post rating system for almost all blogging platforms (Blogger, Wordpress, Wix). No skills are required for creating a post rating system using rating-widget. So, today in this tutorial we'll show you that How to Add a Post Rating System in Blogger.

How to Add a Post Rating System in Blogger

First of all, go to http://rating-widget.com/get/rating/ and select Blogger platform from the list. If you are an expert then you may select JavaScript and add it manually to your blog.
How to Add a Post Rating System in Blogger
You'll see a plenty of options for customizing your widget like styles, themes, colors, font, start etc. Customize your widget, and once you're done, click Sign Up and Add to Blogger button. You can Sign Up using your Facebook, Twitter and LinkedIn account or sign up with your Email.
How to Add a Post Rating System in Blogger
After Signing in click the orange Add to Blogger button or you can also copy the source code by pressing Source Code button and paste it anywhere in your blog to show your rating widget.
How to Add a Post Rating System in Blogger
Congratulations: You've successfully added a Post Rating System to your Blogger Blog.

We hope this article may have helped your in learning How to Add a Post Rating System in Blogger. 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

How to Add a Forum to Your Blogger Blog

- 30 Comments
A Forum is a place where your blog visitors can interact with each other and discuss different trending/hot topics. Simply, a forum is a platform where your blog visitors can post questions, answers and interact with each other by sharing information and discussing hot topics. So, to better interact and connect with your blog readers/visitors, it’s always good to have a forum running on your blog. Another advantage of having a forum is that it takes the place of the FAQ page, since most of the questions will be answered by you and your visitors too.

But how to create a forum for a blogger blog? Well, it's pretty simple! Today in this article we'll show you that How to Add a Forum to Your Blogger Blog with Nabble. A preview of the forum is given at the end of the post.
How to Add a Forum to Your Blogger Blog

How to Add a Forum to Your Blogger Blog

First and foremost, go to http://www.nabble.com and click Create a Free Forum.
How to Add a Forum to Your Blogger Blog
It'll ask you to create an account, enter your account information, give a Name to your forum, choose a Language and click Create Forum button.
How to Add a Forum to Your Blogger Blog
You'll be redirected to your forum, to customize your forum e.g. its colors, font style, etc. click Options >> Application >> Change Appearance.
How to Add a Forum to Your Blogger Blog
Once everything is done, go back to your forum and again go to Options >> Click Embedding options and copy the JavaScript code.
How to Add a Forum to Your Blogger Blog
Okay, now its time to embed it to your Blogger Blog.
Note: You're the moderator of your forum and only you can delete topics or edit your forum.

How to Embed the Forum to your Blogger Blog

Log in to your Blogger Account >> Select a Blog >> Pages and create a new Blank Page. Now switch the editor to HTML Mode and paste the JavaScript code that we copied earlier. Once everything is done, click Publish button and you're done. Here's a preview of my forum.
How to Add a Forum to Your Blogger Blog
Go to that Page and check your Forum. Now your Visitors can easily ask you questions and can discuss hot topics by clicking New Topic button.

From Editors Desk

We hope this article may have helped you in creating a forum for 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

How to Customize Labels Cloud Widget in Blogger

- 5 Comments
Do you want to make your Labels Cloud widget more prominent and attractive for your visitors? Labels Cloud is a widget provided by Blogger, that allow you to arrange your content or categorize your content under specific labels. This widget helps your visitors to easily browse your posts by choosing a specific label or category. This widget makes your blog user friendly. You can add this widget to your sidebar or footer.

The default design of the Labels Cloud widget is simple and not that much attention-grabbing. Therefore, to make it look clean and stylish, we've to customize it. As Blogger is a flexible platform and you can easily customize any element of your blog using CSS. So, we'll also customize the Labels Cloud using CSS3. Recently, one of our visitors asked us that How to Customize Labels Cloud Widget in Blogger. In this article, we'll show you that How to Customize Labels Cloud Widget in Blogger.

Don't Forget to Read:
101 Ways to Increase Your Website Traffic
5 Reasons You'll Quit Blogging Within 3 Months
18 Reasons Why Newbie Bloggers Quit Blogging

How to Customize Labels Cloud Widget 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)

/*---------Labels Cloud--------*/
.label-size{
margin:0 2px 6px 0;
color:#666;
padding: 7px;
border: solid 1px #C6C6C6;
border-radius: 3px;
text-transform: uppercase;
text-decoration:none;
float:left;
text-decoration:none;
font-size:14px;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

.label-size a  {
float:left;
text-transform: uppercase;
text-decoration: none;
color:#fff;
}
.label-size a:hover  {
text-decoration: none;
color:#2aa4cf;
}

Hit the Save Template button and you're done.
Congratulations: You've successfully customized your Labels Cloud widget.

From Editors Desk

We hope this article may have helped you in customizing Labels Cloud widget. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/730927093629291