Search

Join this Blog for direct reference of any post into your inbox. To join just click on "Join this Site" under "Follower" then Login with your Email.*** DECLARATION: I Maintain this Blog for Helping Myself While at Work and Welcome any body Needing Help!!!.*** CAUTION: Using any of the script from this Blog may contain at Own Risk. These scripts May or May not have been Tested.***

Wednesday, 3 September 2014

Simple Steps to Create or Customize Your Blogger

Blogger is an online service owned by Google that publishes single or multi-user blogs created entirely by the user. The service has quickly become the preferred choice of many novice bloggers and is one of the easiest methods of creating and publishing a blog for free. There are many blogging site which offers user to create free blogs. Thus if you are looking for free blogging service then my suggestion is start blogging using wordpress.com or blogspot.com. If you are unfamiliar with the service, this article will teach you how to set up an account and create a blog on Blogger.com.
Instruction:
2. Signup using Google account to get started. If you don’t have Google account, click “Get started” to create one.
3. Select a “Blog title” and available URL for your blogger. Finally enter the world for verification and click continue.
4. Next you need to select a template for your blog. Select any template later you can change it whenever you want.
7. Now click “Start blogging” to start writing your post. There is some more things such as edit posts, and edit pages from under the “Posting” tab.
8. You can also use the “Edit HTML” tab to insert your post in HTML format, if you prefer.

If you wish to change the design of your blog you can do so under the “Design” tab. There is lot of Gadget or Widget is available, which you can use to decorate your blog.
The fastest and easiest way to add new features to your blog is embedding widget into sidebar of your blog.
Later in this article or in another article, I will describe how to add different Widget into your blog. Check another post for more customize work for blogger:


Adding Pages and Drop Down Menu with the Blogger:
After successfully creating the blog and starts writing your articles, you need to customized your blog such as creating separate pages or drop down menu to organize your blog as well as you need to add different widget or Gadget for blogger to increase the traffic of your blog.
To create new page sign into your blogger and select pages from dashboard.

Then Click on "New Page" and finally click on Save to create a draft of the page you can review and publish later. You can click Publish to create the live page on your blog now.
You are also able to edit the page which you have created to add new content, images, or videos.

- To Edit Select “Layout” from the drop-down menu of your dashboard.
- Select the “Pages” gadget from the “Add a Gadget” list.
- Under “Pages to Show,” check the boxes next to the pages you would like to display on your blog.
- Under “Page Order,” drag and drop the boxes to choose the order in which your pages will appear.
- Click Save arrangement in the upper right to save your layout.
You can also able to add link this page to external site by clicking on “+Add link page.”
Adding Drop down Navigation Menu to Blogger:
- Log on to your blogger dashboard and click on Layout Editor.
Select the "HTML/Java Script Gadget from the blogger and arrange it on the top of the blog.
Paste the below code into the HTML/Java Script Gadget.
<div id='menubor'></div><center><ul id='menu'>
<li><a class='hmlink' href='http://shahiddba.blogspot.com/'>Home</a></li>
<li><a class='winlink' href='http://shahiddba.blogspot.com/p/about-me.html'>About me</a></li>
<li><a class='maclink' href='http://shahiddba.blogspot.com/p/oracle-developer-guide.html'>Developer Guide</a></li>
<li><a class='andlink' href='http://shahiddba.blogspot.com/p/oracle-dba-guide_9.html'>DBA Guide</a></li>
<li><a class='gamlink' href='http://shahiddba.blogspot.com/p/useful-links-for-dba.html'>Other DBA Link</a></li>
<li><a class='seclink1' href='http://shahiddba.blogspot.com/p/uae-job-link.html'>Gulf Job</a></li>
<li><a class='seclink' href='http://shahiddba.blogspot.com/p/sample-resume.html'>Customize Resume</a></li>
<li><a class='linlink' href='http://shahiddba.blogspot.com/p/contact-me.html'>Contact</a></li>
</ul></center>
<style>
#menu li {            
 display: inline;            
 list-style: none;            
 padding: 0;        
 }                
 #menu li a {                              
 padding: 15px 20px 15px 20px;            
 text-decoration: none;            
  color:white;
  font-family: 'Noto Serif', serif;
-moz-box-shadow: inset 0 0 13px -2px #000;
-webkit-box-shadow: inset 0 0 13px -2px #000;
box-shadow: inset 0 0 13px -2px #000;
  font-size:18px;
  -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
  transition: padding-bottom .666s;
-webkit-transition: padding-bottom .666s;
-moz-transition: padding-bottom .666s;
-o-transition: padding-bottom .666s;
-ms-transition: padding-bottom .666s;
}
 #menu li a:hover {                              

  padding-bottom:20px;
}
.hmlink{
  background:#24459A;
}
.winlink{
  background-color: rgba(9,173,217,1);
}
.maclink{
  background-color: rgba(108,109,112,1);
}
  .weblink{
    background:#EEEE00;
    color:black;
  }
.andlink{
  background-color: rgba(149,191,43,1);
}
.gamlink{
  background-color: rgba(212,2,43,1);
}
.seclink{
  background-color: rgba(0,158,62,1);
}
.linlink{
  background-color: rgb(123, 82, 138);
}
#menubor{
  border-top:1px solid black;
  margin-bottom:-1px;
}
  .header-outer{
    padding-bottom:20px;
  }
</style>
Note: You need to replace only the colored (Red) with your blogger link and Green with the displayed text. 
You can follow the below link you will find different HTML script for different kind of Drop down menu available: 35+ Drop Down Menu

0 comments:

Post a Comment