2011 ~ Blogger Tips And Tutorials

Browse Â» Home Â» Archives for 2011

Sunday 27 November 2011

125*125 banner

05:39 rishi No comments

125 by 125 Ad Banners Widget (1)

Here is the code to be pasted in your HTML/JavaScript Widget,

Code

Css 3 multi Level Drop Down Menu Blogger Blogs

05:37 rishi No comments

It is always fun to learn and explore the new standards introduced for CSS. With growing development in HTML5 and CSS3, heavy scripts and flash tools are pushed back. This Mac-like multi-level drop down menu that we will learn to create and how to add it to Blogger is solely based on Pure CSS3 with no jquery used at all! It uses simple box-shadow, text-shadow and border-radius properties. It is compatible with all major browsers like FireFox, Chrome and Safari. Since IE7+ always lack compatibility with CSS3 therefore only the rounded borders will not render in IE7. I have kept the installation extremely easy. You just need to copy and paste the code. This Menu is provided by webDesignerWall guys and it is widgetized and made compatible with Blogspot blog platform by MBT.

Code

Put PayPal Donation BOx

03:10 rishi No comments

Do you want to put this box in your blog/site? Well many of us want put this code on their own blog/site like those popular sites but they don't know how. Well i am very glad to teach you and going tell you how.
If you don't have a paypal account, clickhere to sign up one. Well i supply the code, and you just simply copy and paste it, is that simple.
Ok here we go.

Just copy the code and change some values in red.
Change Blog/Website Title to your own Blog title example change to "The-Online-Quest".
And change Your paypal email to your own paypal email.

Code:

How To Create Blog Roll

03:09 rishi No comments

As a bloger, we usually added our Friends link on our blog. Day by day and month by month it's number will increased. But if your friends link over than hundredsor or even thousands, it will be a problem, your blog space will full of your friends link list.
Now I will show you how to create a blogroll, a box to place your friends link list. You can fill it with as many as links, and it's size will not get bigger. So it will save space on your blog or sidebar. The box will be like mine.

Here's the code that you should to copy and place on your blog or sidebar ("Add Page Element --> HTML/Java Script").

Create Horizontal Tabs View

03:08 rishi No comments

What is horizontal tabs menu? horizontal tabs menu is bla..bla..bla... I can't explain anymore, he..he., it's look like this:

To create it is not as simple as it's look, it's complicated. You have to design button, you have to create CSS and HTML code. Now I will show you how to create "Horizontal tabs menu" in blogger.

Create Tab View

03:06 rishi No comments

Here is Tutorial how to create a tab view:

1. Login to blogger, go to "Layout --> Edit HTML"
2. Then find this code ]]></b:skin>
3. Insert the below code before ]]></b:skin> or in CSS tag.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width top main menu */
text-align: center;
height: 24px; /* Height top main menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Main menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Top main menu font */
font-weight: 900;
color: #000; /* Top main menu font color */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Top main menu background color */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Content Border color */
overflow: hidden;
background-color: #FF9900; /* Content background color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. You can change the code according to the red text explanation. To get html color code see HERE
5. The next step is put the code below before </head>

6. Then "save" it.
7. Go to "Page Elements" menu
8. Chose "Add Page Element" --> "HTML/Javascript" in place where you want to put this tab.
9. Insert this code :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Note :
- The number or the blue text(350px) Is size of the tabview.
- The green code is the main menu text
- The red code is the content of tabview. you can fill it with links, banner, widget, comment or anything.
- To add more menu, see on the blink code. Add the code under it.

Good luck every body.

How To Create Dwop Down Menu

03:06 rishi No comments

What is dropdown menu?
Dropdown menu is like this :

Here is the trick how to create dropdown menu :

Copy the code below and put it on your page elements.

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Blog Archive</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

The red text is links, change it with your links.
The blue text is Anchor text. Yau must change it.

For example :

Create Vertical Menu

03:05 rishi No comments

We have learned how to createhorizontal menu before. Now we will try to make a vertical menu. We will make a vertical menu like the image. Ok let's do it

1. Login to blogger then choose"Layout-->Edit HTML"
2. Put the script below before this code ]]></b:skin> or put it in CSS code area.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

You can change the menu color, look at the red text (blue1.gif and blue2.gif). Change it with some color menu below. For example, if you want to choose red color, then the code would be like this :

.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');

Upload Text And Picture Direct Form Ur Computer

03:02 rishi No comments

SATURDAY, OCTOBER 15, 2011

Upload text and picture direct from computer

There are bloggers who want to be able to prepare their posts including text and photos in their computer and upload it direct to Blogger. Some have tried using copy-paste from MicrosoftWORD which obviously will not work.

Here is a solution - Windows Live Writer. To add a photo while in Windows Live Writer, either click the photo icon or use the INSERT drop-down menu as shown in the screen shot below:

How To Add Email Suscribition Box To Blogger

02:46 rishi No comments

How to Add Feedburner Email Subscriptions Box to Blogger

In this simple tutorial i will show you, Adding Feedburner Email subscription box to your blog/site. We know that, we can add the blogger official Follow by Email widget, However some blogger does not like that widget. for those bloggers, this tutorial is very useful.
First you need to create a Feedburner Feed for your blog. i already posted a detailed tutorial onHow to create a blog feed with feedburner.

How To Remove Blogger Nav Bar

02:45 rishi No comments

Blogger comes with a default navigation bar.This blogger navigaton bar may not be present in most of the templates.But if you are using a default blogger template,then you will see some navigation bars like the one in this picture.These navigation bars can be removed using some simple CSS techniques.

How To Disable OffiCial Blogger LightBox

02:42 rishi No comments

Blogger Team announced their new official blogger lightbox plugin for post images. With this light box you can view your post images and pictures in Light box popup window. This is pretty cool plugin for Images galleries and photographers. However, some blogger don't need to use this plugin (or) already they have a custom Light Box plugin installed. After receiving the Feedback form blogger users, blogger updated the Light box ad added the option to Dashboard. So, you can Disable this plugin with 2 to 3 simple steps.

Installling Step Caursal Biewer In Blog Spot

01:55 rishi No comments

Installing Step carousel Viewer in blogspot

Many of Kang Rohman’s friends ask about how to create the feature of Step carousel viewer in blogspot template like on magazine template R.1.2. To create the feature of Step carousel viewer on your template is not too hard, but because each template is different, whether it is the size of template, Widget placing technique, or anything else, you will need a little adjustment to the code or script given. To give a description about how to install the feature of Step carousel viewer, follow the description below:

If you want to know what the feature of Step carousel viewer is like, see the demo:

1 St POst

01:53 rishi No comments

We Opened This Blog On 27 NOvember 2011.may This Blog Posper

Blogger Tips And Tutorials