How to enable HTTPS in Google Blogspot

Settings: Basic > HTTPS > HTTPS Redirect > Now select YES

2 ways we can use this HTTPS Option:

1. for .blogspot.com:

if u select this option for blogspot.com then visitors always see the encrypted version of your blogspot.

Ex: https://maheshitonline.blogspot.com

How to type telugu / hindi / any 22 languages text on Browser based web applications

How to write in Telugu, Hindi, ..... etc., any languages text on Browser based web applications. 

i.e, on Blogspot, on WordPress, on web based any application, in any blogger and in any e-mails.

I) Install the Google Input Tools From Google Chrome Browser Extension from Web store:

1. Click on Customize and Control Google Chrome (Right Top 3 dots) >  More tools >  Extensions

What is blogger? How many types are there?

Blogger is also call it as website. but in the blogger communicate with viewers. blogger posts are dynamic. 

Bloggers are 2 types

1. Free blogger:

Some websites are give free space (Limited) for creating the blogger.

Ex: www.blogger.com or www.blogspot.com - it is from google. same as      many websites given free space. google is famous and also every body easy to create blogger free site. 

2. Paid blogger:

Many websites sale the hosting space for blogger or website creation. 

Famous hosting space sellers are: 

1. www.bluehost.com 2. www.godaddy.com      

How to Create Simple Post in Blogspot

Steps:
1. Login to blogger.com
2. DASHBOARD: Click Posts -- Click New Post -- Button
3. Give the title: in the post title box
4. Give the permalink:
    4.1 give if you want permalink other wise it will take default.
    4.2 better to give the our own permalink so that the post link will appears with that.

connect custom domain to blogspot

I) Steps:
1. Login to the www.blogspot.com
2. Select your blogspot (blogger) domain name. Ex: maheshitonline
3. Click on Settings -- Click Setup -- URL link -- http:// appears
4. now enter www.maheshitonline.com -- Click save

II) Steps: before this setp login to www.goddady.com
-----------------------------------------------------------------------------
5. Click respective domain DNS 
6. now appears: type - name - value - TTL 

7. Now go to blogspot -- copy www opposite string 
8. Come to godaddy Records 
    in the records CNAME, www is available -- in that line click Pen symbol
-------------------------------------------
Type       -   Host   -    Points to 
CNAME      www        ghs.google.com  
-------------------------------------------
Under the points to: edit box : past www - blogspot pointing link and then click save.

III) Steps:9.   Now come to blogspot copy the second host field
10. then come to godaddy Records: click to Add -- Select CNAME
---------------------------------------------------------------
Type       -       Host                       -    Points to 
CNAME      wughalkjsdf               ilfk@ash#lkjs6dlajksd   
---------------------------------------------------------------
11. Under the Host: edit box : past the blogspot Host string 
12. Now again go to the blogspot copy the second blogspot pointing field
13. again Come to godday 
14. Under the points to: edit box : past second blogspot pointing field -- then  
      click save

15. Now come to the blogspot enter the www.maheshitonline.com -- click save.
16. Now blogspot.com url re-direct to the godaddy www domain link. test it once. 

***

How to create 2 Level Menus in Blogspot (main menu & sub menus)

(simple method)

2 Level Drop-Down Menus in Blogspot (simple method)

Navigation:

1. Login to the Blogger.com >>New Blog >>give the url name >>Create Blog

2. Go to Template >>Customize >>Template >> Select the template here: Simple or Picture or ethereal. 

3. Apply to Blog >>Back to Blog

4. Click Layout >>Add a Gadget >>HTML/Java Script

PART 1 + PART 2 := Drop Down Menu

PART 1: Prepare the HTML 2 level menu code and copy past in the HTML/Java Script Gadget 

Create the menu's like this:

                    TabName1    |    TabName2   |    TabName3   |   TabName4
                                                                                   DropDownName1
                                                                                   DropDownName1
                                                                                   DropDownName1
                                                                     
Answer: 4 tabs in Main menu. In that 4th Tab have 3 Submenus. See the below Code: 

Explanation:

1. Create Main menus(tabs): TabName1, TabName2, TabName3, TabName4 are normal tabs. 
2. Come to the TabName4 have again 3 sub-menus (ie., drop-down menu with 3 items). 
3. We’re going to place the extra lines of code above just before the closing of TabName4.


In Blogger now what you can do:

1. Past the above prepared code in HTML/VBScript Gadget.
2. Here the LINK is direct hyperlink. That should be replace with page link / post link / website URL link. These should be working links in the same blog.

Note: if u have already using any other gadget like pages. Remove that gadget and add the HTML/Java Script gadget then add the html code only.

PART 2: Now Insert the CSS (Cascade Style Sheet):  

/*-------- Begin Drop Down Menu -------*/ 

#menubar {
    background-color: transparent;
    width: 840px;
    color: #424338;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid ##8C001A;
        height:35px;
} 

#menus {
    margin: 0;
    padding: 0;
} 

#menus ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
} 

#menus li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:0px solid #1A6680;
        border-right:0px solid #1A6680;
        height:auto;
}
#menus li a, #menus li a:link, #menus li a:visited {
    color: #FFFFFF; /* This changes the text color of visited links. */
    display: block;
   font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 5;  
           /* change margin value to 0 if you want no space between tabs */
           /* change 14 to another number to increase or reduce font size */ 
    padding: 9px 12px 10px 12px;
        text-decoration: none;
} 

#menus li a:hover, #menus li a:active {
    background: #424338; /* This is the main menu background color when a user hovers. */
    color: #FFFFFF; /* This changes the text color. */
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;       
} 

#menus li {
    float: left;
    padding: 0;
} 

#menus li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
} 

#menus li ul a {
    width: 140px;
} 

#menus li ul ul {
    margin: -25px 0 0 160px;
} 

#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
    left: -999em;
} 

#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li 

li.sfhover ul, #menus li li li.sfhover ul {
    left: auto;
} 

#menus li:hover, #menus li.sfhover {
    position: static;
} 

#menus li li a, #menus li li a:link, #menus li li a:visited {
    background: #424338; /* This is the background color for the drop down menu. */
    width: 120px;
    color: #FFFFFF; /* This changes the text color. */
    display: block;
    font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;  
               /* change 14 to another number to increase or reduce font size */ 
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:0px solid #1A6680;
} 

#menus li li a:hover, #menusli li a:active {
    background: #424338; /* This is the background color for the drop down menu when a user hovers. */
    color: #FFFFFF; /* This changes the text color. */
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
} 

/*-------- End Drop Down Menu -------*/


Now Go To

1. Template --> Customize --> Advanced --> CSS Code
2. Past the above CSS code in this box. 
3. Add tag before the above CSS code and also Add end tag after end of the code. Now submenu placed in the position. Now submenu working.
       

       2 Level Menu is ready.

                                           ***

 Note:  Do not go to the Template --> Edit HTML.

The following procedure was very hard process. By mistake if u change any code that should be effect to the template.

Safe side backup your blogger template script:

1. Now go to Template --> Backup / Restore button is there at upper right corner.

2. Click Download the template

          

Now follow the following procedure if you are familiar with coding.

II Method to past the CSS Code:

1. Template --> Edit HTML

2. Click Skin code ... (3dots) and find the  ]]>

   code.  

Observe here each line of the code line is numbered. Some code is green color.

Now identify the line that says:  … (In my template it’s around line 13; this may vary.) Click the little 3 dots in between those tags.

It will expand a ton of code, and that code will appear in blue.

Scroll down, and find where the code turns from blue back to green. At that point, there is a line that says: ]]>

Sometimes it gets displaced, so you might want to put it on its own, separate line; some of it might be blue, some might be green. Don’t worry about that: Just make sure all characters stay together:    ]]>

3. Now, copy and paste the above CSS code, and paste it on a line immediately BEFORE    ]]>

4. After past the code in the template from edit html. Now Save Template and you are done creating drop-down menus in Blogger!

if u want CUSTOMIZING menu COLORS

You can customize these colours to better match your blog’s design by changing the hex values (the 6-digit combination of numbers/letters that appear after #). 

Ex: Color codes

Black is #000000

Blue #0000ff

White is #FFFFFF.

Green licht good #00cc99

Green #008000

If u want put the comment in the code for identify your code:

Syntax: /*  comment  */  

Ex:   /* the following code is css code for html menus(tabs) */ 

Color Tools:

1. If u want to change the colours in the menus find the colour codes in HTML Color Picker. The color code is in hex value. 

2. Also use the Color Palette Generator to generate a palette of colors that will complement your blog or a specific blog post based on any image you specify!

3. Download Color to HTML Tool. This is offline tool. Best Tool.

***

My Suggestion: Don't use II Method if u do I method the code will be automatically goes to that place.

Add Particular Label Posts to Widget in Blogspot

WWW.MAHESHITONLINE.BLOGSPOT.COM

Navigation:

1. First when you created time of the post, you have to give the specific and unique label to your posts which you want to be shown up on another blog.
2. After create the post Go to DASHBOARD >> Layout >> add gadjet >>
2. Paste and edit some part of the html code given below.  In case of Blogger.com you can paste it in the HTML/Javascript widget & Save. Now see yr blogger site.

Content background color change in Blogspot

It is for step by step learning with Navigation, Images, Videos. It is for complete understanding in short span of time.

I want to change the content background color in the blogspot post:

Syntax:         <div style="background-color:#CFE6DD;color: black;padding;">

                          Content or Code - past in between this code, the background color changed.

                      </div>

Add Responsive Search Box to Blogspot

Search Box Type 1:

Navigation:

1. Login to the blogspot.

2. On Dashboard >> Click Layout >> Click Add a Gadjet at right side frame >> Select HTML/Java Script.

3. Now select HTML/Java Script >> copy and past the follwing code in Content box & Click Save.

4. Open the blogspot and See.

Create Contact Form in Separate Page in Blogspot

Create Contact Form in Separate Page in Blogspot not with Gadget

Navigation:
1. Login to the blogger.com
2. Dashboard>> Click Pages >> New Page
3. Give the page title as Contact
4. Now click HTML & Now past the following code there.

Contact Form Code:

Best way to create post in blogspot

1. Login to the Blogger.com
2. Click on New post
3. Give Post Title: title must have good to give below <80 char
4. Past the content if you prepare already or write the content here.
5. Insert Images:
 5.1. Click on Insert the Image <icon> - Choose files >> open to select image from your system
 5.2. Select that file & click on Add selected <button>
6. Click to Insert Jump break  after image inserted
7. See right side all post settings are there:

How to Style the Most Popular Posts with Round box in Blogspot

Navigation:
1. Login to the blogger.com
2. Click on Theme >> Edit Html
3. Click on Code & Click Ctrl +F & type ]]></b:skin> in search box. now press enter.
4. The cursor moves to that code position.
5. Now copy & past the following code before this code ]]></b:skin>

How to remove the Attribution1, Header1 and Navbar1 widgets in Blogspot

WWW.MAHESHITONLINE.BLOGSPOT.COM

1. Remove the Attribution1 in Footer:

1. Dashboard >> Them >> edit html 
2. Select attribution1 from jump to widget
3. then identify the attribution1 code 
<b:section ....
        <b:widget ....

</b:widget>
    </b:section>

How to Remove Navbar and Navbar Space in Blogspot

Remove the Navbar in Blogspot:

Navigation:
1. Log in to your Blogspot Account
2. In the DASHBOARD >> Click on ‘Layout’ option in the left sidebar.
3. Click on ‘Navbar’ which is present in the top right of page layout.
4. A pop window will appear. Now Select ‘Off’ & Click on ‘Save’.
5. Open the blogspot and check.

Add Custom CSS Read More Button in Blogspot Template

Navigation:

1. Log in to your Blogspot Account
2. Go to Dashboard >> Template >> Edit HTML
3. Press Ctrl + F and write </b:skin> in the search box then press enter. the cursor go to that code line.
4. Copy below CSS Code and Paste before this ]]></b:skin>

Note: for . post-more-link or jump-link

How to create auto Read More link in blogspot without Javascript

Do the following steps:

1. Login to blogspot and go to template >> edit html.

2. Now Press (ctrl+f) to find code: ]]></b:skin>
    Now copy and paste the following code before this line of this code: ]]></b:skin>

.thumbnail-post {
  width:240px;
  height:156px;
  float:left;
  margin:0px 10px 0px 0px;
}

How to make sub paragraphs in blogspot

1. copy the matter from ms word to notepad.
2. now copy the matter from notepad to blogger.
3. now which matter you want sub paragraph up to that select the matter.
4. now press the bullets button once then moves to right side.