Hy friends, welcome in lesson 2, blogger course. Today I am going to share how to customize the main menu and layout. Also today, we will be learning how to use widgets in blogger.
So, today's we will learn how to :

Edit Main Menu
Set Meta Tags
Manage Layout
Design Mega Menu

Before starting make sure to post some content. It will be better that you create different lables according to your need. We will use these lables to create menu and to design layout. To easily access these lables go to Layout > Add a Gadget in the sidebar-atas1 section.
A popup will appear scroll down and select Labels and click save.

So, without wasting time let us take a start. First of all we will head to our first objective that is:

1.Editing Menu

To edit menu it is good if you have a liitle basic knowledge about html. If not than don't worry we are here to help you.

Go to your blogger dashboard > Template > Edit HTML

Scroll down and find this code:

<ul class='sf-menu' id='topmenunav'> <li><a href='#'>About</a></li> <li><a href='#'>Contact</a></li> <li><a href='#'>More</a> <ul> <li><a href='#'>Menu 1</a></li> <li><a href='#'>Menu 2</a></li> <li><a href='#'>Menu 3</a></li> <li><a href='#'>Menu 4</a></li> </ul> </li> <li><a href='#'>Menu</a></li> </ul>

To easily find this code press ctrl+f . In the liitle tab that appears on the top type this "With Sub Menu" and press enter. Now open your blog in a new window. From the labels section that we have created recently choose the one you will like to add in the menu. Click this label and copy the link from the adress bar. Now go to the previous tab and in the very first link replace "#" by your link.

In the template we have provided you it looks like:

<li><a href='#'>About</a></li> (Before)

<li><a href='http://bigtricksnadtips.blogspot.com/search/label/Tricks'>Tricks</a></li> (After)

Next step is to replace About with your label name.

Similarly you can change all the links according your need. If you don't want to add more links delete the remaining menu tags.

Submenu tag has further links behind it. These links will appear in dropdown.

Setting Social Icons

To Edit Social Icon in this theme you can follow this step:

Go to Dashboard > Template > Edit HTML and find this code:

<ul class='sociico' id='icon-socialmn'> <li class='sotw'><a href='#' target='_blank'>twitter</a></li> <li class='sofb'><a href='#' target='_blank'>facebook</a></li> <li class='sogo'><a href='#' target='_blank'>google</a></li> <li class='sorss'><a href='#' target='_blank'>rss</a></li> <li class='solinkn'><a href='#' target='_blank'>linkedin</a></li> <li class='sodrib'><a href='#' target='_blank'>dribbble</a></li> <li class='sopint'><a href='#' target='_blank'>pinterest</a></li> </ul>

In the twitter tab replace # by the link of your twitter profile.

In the facebook tab replace # by the link of your facebook profile or page..

In the google tab replace # by the link of your G+ profile or google page.

In the rss tab replace # by the link of your rss feed.

In the linkedin tab replace # by the link of your linkedin profile.

In the dribble tab replace # by the link of your dribble profile.

In the pinterest tab replace # by the link of your pinterest profile or by pin board.

2. Setting Meta Tags

Go to Dashboard > Template > Edit HTML and find this code:

<meta expr:content='data:blog.title' property='og:site_name'/> <meta expr:content='data:blog.pageTitle' property='og:title'/> <meta content='article' property='og:type'/> <meta expr:content='data:blog.url' property='og:url'/> <meta content='218168578325095' property='fb:app_id'/> <meta content='100002549773049' property='fb:admins'/>  <meta name='twitter:card' value='summary'/> <meta name='twitter:title' expr:content='data:blog.pageTitle'/> <meta name='twitter:site' content='@publisher_handle'/> <meta name='twitter:creator' content='@author_handle'/>  <link rel='author' href='https://plus.google.com/[Google+_Profile]/posts'/> <link rel='publisher' href='https://plus.google.com/[Google+_Page_Profile]'/>

Change 218168578325095 with yours facebook Apps ID and change 100002549773049 with yours Facebook Admin ID.

Change @publisher_handle with yours twitter ID/Website twitter ID and change @author_handle with yours twitter ID too.

Note: Before your cards show on Twitter, you must first have your domain approved. Fortunately, it's a super-easy process. After you implement your cards, simply enter your sample URL into the validation tool. After checking your markup, select the "Submit for Approval" button. Go Here : https://dev.twitter.com/docs/cards/validation/validator for testing and approval.

Change [Google+_Profile] with yours google plus ID number. then change [Google+_Page_Profile] with yours google plus page ID.

3.Create Mega Menu

Go to Dashboard > Template > Edit HTML and find this code:

<ul class='sf-menu' id='menunav'> <li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Archive</a></li> <li><a href='#'>Comments</a></li> <li><a href='#'>With Sub Menu</a> <ul> <li><a href='#'>Sub Menu</a></li> <li><a href='#'>Sub Sub Menu</a> <ul> <li><a href='#'>Sub Menu</a></li> <li><a href='#'>Sub Menu</a></li> <li><a href='#'>Sub Menu</a></li> <li><a href='#'>Sub Menu</a></li> </ul> </li> <li><a href='#'>Sub Menu</a></li> <li><a href='#'>Sub Menu</a></li> </ul> </li> <li><a href='#'>Error 404</a></li> <li><a href='#'>New Recent</a> <ul> <li><div class='ijonkzrecentag' data-number='6'/></li> </ul> </li> </ul>

then add new li tag like this:

<li><a href='#'>New Recent</a>

<li><div class='ijonkzrecentag' data-number='6'/></li>

Complete HTML code to make Recent post on Menu like this:

data-tag : will load post from specific tag/label
data-type: Recent Post style: carouselslide, slider2, gallery1, gallery2, vertical, horizontal, combine, simple, or noimage
data-random: make it random or recent value is 0 (recent) or 1 (random) or animated
data-number: Max post will loaded

If you want to load post from Web Design tag and style is gallery1, HTML code look like this:

4.Designing Layout

1.Go to Dashboard >Layout > On Manual Slideshow Widget Area Click "Add Gadget" choose Image Widget

Fill With Image Title
Image Description
Link When Image or Title Click
Search Yours Image
Uncheck shrink to fit

Click save. If You Whan Show 5 image, do this step 5 times with different images.

2.To add Featured Post widget follow this step:

Go to Dashboard > Layout > Add a Gadget > Select HTML/Javascript widget.

Copy this code and paste it in widget:

<div class='ijonkzrecentag' data-tag='Your_Tag_Name' data-type='RecentPost_Style' data-random='Random_or_recent' data-number='MAX_Post_to show'/> <script type='text/javascript'> jQuery("#featpost").RecentPostbyTag({ MaxPost:5, ImageSize:"s630", Random:true, Summarylength:100, postType:"s", sliderType:"f" }); </script>

Click save.Make sure you dont add anything to the title area.

3.To add Post by Label (Slider Post) widget follow this step:

Go to Dashboard > Layout > Middle-atas > Add a Gadget > Select the widget HTML/Javascript

Copy this code and paste it there:

<div class='ijonkzrecentag' data-tag='Your-Tag' data-type='RecentPost_Style' data-random='Random_or_recent' data-number='6'/> <script type='text/javascript'> jQuery("#featpost").RecentPostbyTag({ MaxPost:5, ImageSize:"s630", Random:true, Summarylength:100, postType:"s", sliderType:"f" }); </script></div>

Click save.

So, all done. That's the today's to do task. Practise it and if you find anything difficult contact us using our FB page.

FB Page Link

Usefull Links:

Create Your Own Blog | Lesson 1

Create Your Own Blog | Lesson 2

1.Editing Menu

2. Setting Meta Tags

3.Create Mega Menu

4.Designing Layout

Create Your Own Blog | Lesson 1

Most Viewed

Categories

Follow Us on DM

More Links

Useful Links