How To Drag and Drop Widget in Blogger Layout

♠ Rakshith Mlore in Beginner's Guide,Blogger,Blogging,Blogging Tips

• First place your mouse cursor on the widget which you want to move from the current place and hold your mouse left click.
• Now you have to move or drag that widget to the place where you want to move. Carefully see the image below. (In the below image I want to move my widget from place 1 to place 2)

• After positioning it in your required place you just leave the mouse means release your mouse from hold.
• Then at last you have to do one main thing that is you have to click the "Save arrangement" option on the above means in top right corner of your layout window. That's it.

So here is the simple way to how to add, move as well as remove a widget or gadget from blogger. Hope you enjoyed this. Newbie's if you have any query or problem feel free to ask us below in the comment section.

Continue Reading...

Pros And Cons Of Using Blogger

♠ Rakshith Mlore in Blogger,Blogging,Blogging Tips,Info

Blogger is the most widely used blogging platform. It is a Google product and bound to Google’s policies and guidelines. It is free blogging blogging platform which provide very flexible blogging environment for its users. Setting a blog with blogger is very easy you can setup a completely new blog in just few minutes. As compare to other blogging platforms It provides lots of features to its users. Although with these  advantages it has various disadvantages. In this article we will discuss various pros and cons of using blogger as your blogging platform.

Advantages of using blogger as your blogging platform

Free – Blogger is absolutely free blogging platform. You can setup a new blog with blogger without spending even a single penny. It provides hosting for your content for free. If you can’t afford paid hosting for your blog then blogger is the best blogging platform for you. It is best for teenagers, students or even housewives. It is the best choice for personal blogs.

• Top 10 revenue sharing sites

Easy Customization – Blogger uses HTML, XML and JavaScript in their blogs. It is very easy to customize your blog’s structure and design. It provides the complete HTML structure of your blog in Editable format. You can easily customize your blog’s look and feel by editing the HTML code of your blog. For this you do not need to hire any professional , you can easily do this on your own by following simple online guides for blogger.
Simple User Interface – Blogger provides very simple and clean user environment for the blog administrators.  It provides a fully functional dashboard for managing your blogs from one place. You can create , delete or modify your blogs from this dashboard in just few clicks.
Widgets and Templates – Widgets are used for integrating additional functionality to your blog. They are similar to plugins in the wordpress. There are thousands of widgets are available over internet which are ready to be integrated in your blogger blog. You can get these widgets free of cost from the internet. Blogger templates are premade custom themes which can be easily applied to your blog. There are lots of free and premium blogger template available over the internet.

Computer and mobile support – Blogger supports both mobile and computer systems means your blog can be accessed easily from any of these devices. For mobiles blogger provide separate templates and graphical look.

Disadvantages of using Blogger

Lack of Control – As we all know blogger blogs are the property of the Google. Google has the right to delete your blog anytime if your blog do not follow Google’s guidelines.
Partial SEO – Blogger blogs are not fully SEO optimized. You have to edit your template for adding meta tags, keywords etc. There are no SEO plugins available for blogger blogs.
Sitemap generator for blogger
Not good for Large blogs – Blogger blogs are good for small and personal blogs only. If you are serious about blogging and want to become a full time blogger then do not use blogger as your blogging platform because blogger does not provide full control over your blog so blogger is not a good choice for professional blogging.
Content Restrictions – In blogger you can only upload images in your blogger account. You cannot add other files such as zip, mp3, exe etc. You need another external source for storing these type of files.
No plugins – Unlike wordpress,  Blogger lacks the plugin support for their blogs Widgets will serve the purpose of the plugins but upto some limits.
Some restrictions – Blogger has some restrictions on its blogs. These restrictions are explained below -

• You can create maximum 100 blogs per blogger account.
  
• Can only store 1GB images for free after that you will have to pay for it.
  
• You can add 100 team members per blog.
  
• You can add maximum 20 labels to per post.
  
• You can create maximum 20 static pages.

Continue Reading...

Facebook Style Blogger Template–Free Download

♠ Rakshith Mlore in Blog Design,Blogger,Blogger Templates,Blogging,Customization,Free Download

While surfing throughout the internet I found the most interesting blogger template released by Dapinder Singh of Windroidclub.com. He has designed this very beautifully and in a clean manner with 6 features in it.

Features of facebook style blogger template

• Floating Header.
• Automatic Post Summaries
• Custom Fonts
• Custom popular posts
• Custom labels
• Floating Share buttons

Demo

Download

Continue Reading...

4 Stylish and Clean Search Boxes For Blogger

♠ Rakshith Mlore in Beginner's Guide,Blogger,Blogger Widgets,Blogging,Blogging Tips,Customization

In our previous post, we have provided you with an Expandable Search Box for your blogger blogs. So today similar to that not expandable but clean and good looking search boxes which will attract your visitors to navigate your site more and more.
In this article I will give you 4 different search boxes with great design namely Clean Search Box, Elegant Green, Easy Blue and Dark Elegant Black. So here are the codes, before that look at the steps that you need to follow.

Add 4 Stylish and Clean Search Boxes For Blogger

• Go to your blogger dashboard and select your blog.
• Select Layout option.
• Select Add a gadget option.
• Select HTML/JavaScript widget.
• In the HTML/JavaScript widget paste code of the search box widget and save the widget.

Note : You can use the code of any search box from the below given 4 designs.

1. Clean Search Box

<style>
#mbt-searchsimplebox1
{
padding:10px;
}
#mbt-searchsimplesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#mbt-searchsimpleinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
width:130px;
font:14px verdana;
}</style>
<div id='mbt-searchsimple1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="mbt-searchsimplebox1">
            <input name='search' id='mbt-searchsimpleinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='mbt-searchsimplesubmit1' type='submit' value='Search'/>
         </form>
      </div>

2. Elegant Green

<style>
#mbt-searchgreen1
{
background: rgb(143,196,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}
#mbt-searchgreenbox1
{
padding:10px;
}
#mbt-searchgreensubmit1
{
border:1px solid green;
background: green;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#mbt-searchgreeninput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='mbt-searchgreen1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="mbt-searchgreenbox1">
            <input name='search' id='mbt-searchgreeninput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='mbt-searchgreensubmit1' type='submit' value='Search'/>
         </form>
      </div>

3. Easy Blue

    <style>
#mbt-searchblue1
{
background: rgb(37,141,200); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(37,141,200,1) 0%, rgba(37,141,200,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,141,200,1)), color-stop(100%,rgba(37,141,200,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}
#mbt-searchbluebox1
{
padding:10px;
}
#mbt-searchbluesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#mbt-searchblueinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='mbt-searchblue1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="mbt-searchbluebox1">
            <input name='search' id='mbt-searchblueinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='mbt-searchbluesubmit1' type='submit' value='Search'/>
         </form>
      </div>

4. Dark Elegant Black

    <style>
#mbt-searchblack1
{
background: #222222;
border-radius:10px;
width:290px;
}
#mbt-searchblackbox1
{
padding:10px;
}
#mbt-searchblacksubmit1
{
border:1px solid #222222;
background: #dc4523;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#mbt-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='mbt-searchblack1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="mbt-searchblackbox1">
            <input name='search' id='mbt-searchblackinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='mbt-searchblacksubmit1' type='submit' value='Search'/>
         </form>
      </div>

Happy Blogging :-)

Continue Reading...

Add An Expandable Search Box to Blogger

♠ Rakshith Mlore in Beginner's Guide,Blog Design,Blogger,Blogger Widgets,Blogging,Blogging Tips,Customization

Blogger has its own widget style for its blogspot sites. But it is not necessary that you implement the same widget on your site too. These search box designs are applicable to almost any type of blog design. Adding these search boxes to your blog  is like a breeze, you just need to copy and paste the code on your blog without any modifications in it.

Is it necessary to add search box in our blog?

Yes, it is very important to add search box in our blog. By using search box blog visitors can search any post in our blog`s archive without any effort. Suppose you have a large blog with thousands of posts then it is very difficult for your blog visitors to find any specific article in your blog by going through the complete archive of your blog posts. If you have search box installed on your blog then visitors can directly search any post by using it. In this way search box helps blog visitors to easily navigate through your blog and get their required information.

Add Search box widget to blogger blog

• Login to your blogger dashboard
• Select your desired blog that you wish to add this widget.
• Select Layout option.
• Select Add a gadget option.
• Select HTML/JavaScript widget.
• In the HTML/JavaScript widget paste code of the search box widget and save the widget.

See the live demo by going to the link given below.

Demo

Here is the code

<style>
#mbt-searchexpandbox1
{
padding:10px;
}
#mbt-searchexpandsubmit1
{
border:1px solid #111111;
background: #111111;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#mbt-searchexpandinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:65px;
}
#mbt-searchexpandinput1:hover
{
width:200px;
}
</style>
<div id='mbt-searchexpand1'>
         <form expr:action='data:blog.homepageUrl + "search/"'  method='get' id="mbt-searchexpandbox1">
            <input name='search' id='mbt-searchexpandinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='mbt-searchexpandsubmit1' type='submit' value='Search'/>
         </form>
      </div>

Continue Reading...