Menu-Submenu

Blogger Static Website



Blogger Static Website



[Source:
#) “How to Use Blogger to Make a Good Website in One Day”

  1. Elements to remove for non-blogging website

    1. Remove timestamp on posts
“Layout” → edit “Blog Post” gadget → uncheck non-required options (may check only ‘Labels’ and ‘Show Share Buttons’) → save.

    1. Remove the Navbar
The Navbar = At the top of all pages. Links to create a new post and to template designer, available through your dashboard too. Link to the next blog to bring traffic to others, and a signon link to log in.
NOTE: ‘Search Tool’ of “Navbar” also default available as “Search This Blog” gadget.
"Layout" → edit “Navbar” gadget → select “off” → save.

    1. Remove the Blog Archive Gadget
“Blog Archive” gadget = in the sidebar of new blogs by default
“Layout” → edit “Blog Archive” gadget → remove.

    1. Remove Blogger Profile Gadget
“Blogger Profile” gadget = blogger’s Google Plus profile in the sidebar
“Layout” → edit “About Me” gadget → remove.

    1. Remove few of other Gadgets
“Layout” → edit “Report Abuse” gadget → remove.
“Layout” → edit “Featured Post” gadget → remove.
“Layout” → edit “Popular Post” gadget → remove.
“Layout” → edit “Follow by Email” gadget → remove.
“Layout” → edit “Labels” gadget → remove.

    1. Remove ‘Home’ button
[ Source:
how to remove home link from blogger
“HOW TO REMOVE THE HOME BUTTON ON A BLOGGER SITE”


Most Blogger templates have a 'Home" button at the bottom of individual post. There are more than one way to do this, some solutions needs to dig into HTML code. Following is easy way to remove ‘Home’ button.
“Theme” → click “Customize” → select “Advanced” in ‘Theme Designer’ → scroll context menu to bottom → click “Add CSS” → paste following code → click “Apply to Blog”
/* CUSTOM STARTS: REMOVE home LINK */
#blog-pager { display:none; }
/* CUSTOM ENDS: REMOVE home LINK */

    1. Remove ‘Subscribe to: Posts (Atom)’
[Source: 
how to remove Subscribe to: Posts (Atom) from blogger
“How To Remove Subscribe To : Posts (Atom) Links?“


In default blogger templates show “Subscribe to : Posts (Atom)” links below each post. Using this link blog visitors can subscribe to owner atom feeds. This is a great way to turn visitors into readers.
By playing with blog template's HTML we can easily remove these links from all blog posts in one go. Removing these links will not let visitors to subscribe to blog feeds.
There are other collection of subscribe widgets availabel, which can be used for same purpose.
“Theme”  → click “Edit HTML” → search & remove following HTML line → click “Save Theme”
<b:include data='feedLinks' name='feedLinksBody'/>
OR comment it as
<!--   <b:include data='feedLinks' name='feedLinksBody'/>   -->

  1. Items that are needed for website

    1. Stand-Alone Pages
[Optional]
Created the same as posts expect that they don’t fall into the blog timeline as with blog posts.
Can also include images and videos in the pages with full control of layout within each page.

    1. The Pages Gadget
[Optional]
“Pages” Gadget to provide links to each page in tabs on top or a vertical list on the sidebar.
To display as Tabs → put this in the Header it
To create a Vertical Link List → use in the Sidebar
Can also have more than one if necessary.
IMPORTANT: Need to come back to this gadget while adding new pages. Each page title will be listed in this gadget. Then need to put a checkmark on each one that need to include in the tabs or in the list.
Can also add ‘external links’ (as empty links too)

    1. Labeling Posts
[Optional]
Labels to posts = a way to create a reference to the content; only for posts, not for pages. Can add one or more labels to a post. 
"Labels" gadget = lists all the existing labels used for posts. This is actually an active link list. Clicking on any label in the list, all the posts that have that label come up.
May has already removed this gadget.

    1. Text Gadget
[Optional]
To add text directly in your layout. This gadget can be placed anywhere in layout.

    1. Adding Images
[Optional]
Adding images to posts and pages can be done in 2 ways.
  1. Open directory list in another window and drag and drop an image file. Then drag it around the text to position it.
  2. Even can upload an image to a post (or page) by clicking the image icon in the options at the top of post (or page).

    1. Adding Videos
[Optional]
Adding videos is almost similar to that of adding images. Can even insert a YouTube video, select “From YouTube” and enter the URL of the video.

    1. Visitor Comments
[Optional]
By default, all posts have a comment box at the bottom for visitors to leave comments. But can hide that globally under “Settings” → “Posts, Comments and Sharing” → change “Comment Location” to “Hide”.
To accept comments, set the options in “Comment Location” menu to be sure for moderating new comments to avoid spam.

    1. Contact Form
“Contact Form" gadget to include a form in layout to get messages from visitors.
This gives visitor the ability to send a message via email without knowing blogger’s email address.
Blogger tool will send the message to the email address registered with your account.
NOTE: Need to add ‘Contact Form’ on separate page and with ‘Subject’ line.

    1. Your Copyright Notice
To include a copyright notice. There is a field for that and Blogger places it in the footer.
Edit the footer in layout and fill in the copyright field.

    1. Meta Tag Description
Meta Tags are used in HTML code to provide information about a webpage (metadata) to search engines. The "description" Meta Tag helps Google index the page properly, and it may also be used in search results.
Enter website’s description for meta tag in the “Settings” → “Search preferences”, then Blogger will create it in the HTML code.
NOTE: This field is different from the description in the “Settings” → “Basic” section. That description appears under title in banner.

    1. Search Engine Traffic Considerations
I see a few people mentioning in forums that they have poor traffic views with Blogger.
The fact is that traffic is dependent on the quality and usefulness of the content. It has nothing to do with an individual platform that’s not shared with other articles under the same domain or subdomain. Blogger separates blog website from others since that is self subdomain (SelfSubDomain.blogger.com).
Therefore it is better to create a good Meta Tag description to improve search results, and a useful description for the Title Banner since that's the first thing visitor see on website.

  1. Theme/Template Designer to fine-tune font, color
It is used to fine tune things, like changing backgrounds, layouts, fonts, colors, and so on.
Blogger provide the wonderful feature to quickly switch from one template to another to see how finished product looks with alternate templates.
“Theme” → click “Customize” under the sample image OR
“Layout” → click “Theme Designer”
Provides various options to experiment, like changing background, blog width, body-footer layout, text fonts-size of each part,.
Nothing affects the live site unless (and until) you click “Apply to Blog” in the top right corner of the Theme Designer. Then click ‘Back to Blogger’ to return.
https://youtu.be/r6haqZoivBQ One minute review of Theme Designer

  1. Blogger facts worth knowing for advantage

    1. Blogger Sitemap and Search Discovery
The sitemap of each blog only contains the posts, not the pages. Search engines will know about all the posts from the sitemap.
However, the only way search bots would discover website content that is created as pages is by following links from other posts, or from link lists and tabs created with the Pages Gadget. 
Therefore, make sure to keep this in mind when creating a site.

    1. Considering the URL when Creating Page Titles
For a page or a post, respective URL is generated automatically from the title while creating it . However, if later change in the title, though the URL remains unchanged. This is done purposely so that any incoming links don’t get broken.
So need to think about the URL when creating posts or pages.

    1. The URL of Posts
Can override the URL ONLY while creating a post by selecting the “Post Settings” → “Permalink” and change it to “Custom Permalink” with typing own URL.

    1. The URL of Pages
Pages don’t have the option to override the URL.
Trick is to publish the page with a temporary title that expected as it’s URL; then change the title actual and save it. The original generated URL will remain.

    1. Keeping a Static Home Page
A home page with welcome message can be static.
However, Blogger always displays the newest blog post on the home page; as it is designed for blogging.
There exist a way to maintain the desired fixed content there at home page.
It’s not automatic. Need to do a little work each time after adding another post.


After adding content with a new post, view blog → click “home”.
The newest post appears there.
So keep a ‘home’ post with static content. Then each time after creating new post, copy content of ‘home’ post, create a new ‘home’ post and then delete the prior ‘home’ post.
While doing this, copy and paste the same title, no problem. Blogger just append an extra string to the URL, but that won’t matter. No one even sees it. Only the site’s top domain is shown in the browser when on the home page.

  1. Monetize & Site statistics

    1. Monetize with AdSense
[Optional]
There are two ways to use AdSense with Blogger. Both methods are with gadgets.
The easy way is to include an “AdSense Gadget” place where put an ad. Can also use an “HTML Gadget”, but then need to go to own AdSense account and copy the generated HTML code.
Either method requires that user has been approved to use AdSense with Blogger. To get started, go to the overview page for one of blogs and click “Earnings” on dashboard.
If don’t see a “Sign up for AdSense” button then need to wait until “blog” qualifies for AdSense. Then may need to add more posts or pages and then wait a few days or more. Keep checking it. Generally it takes 3 days, or much longer.
After seeing the “sign up” button there, click on it and follow the steps. Be careful not to ask to create a new AdSense account if already have one and want to use it for Blogger site. A single AdSense account can be used on multiple sites.
If using the authorized sites feature, the  need to add own Blogger URL to self “owned sites” list in self AdSense account before continuing. Then come back to Blogger and go to the “Earnings” page again.
Now click the button that says “Create or use another account” and follow the steps to associate existing AdSense account to own Blogger account. After doing it correcting message appears as “Congratulations! The AdSense widget has been added to your blog template.”


Earnings can be seen in own Google AdSense reports.
Go to "Performance Reports” → click on “Common reports” → “Sites” for a listing of all sites that had traffic. It shows the views, impressions, clicks, and earnings.

    1. Monetize with Amazon Affiliate Links
With an active Amazon Associates account, also can add Amazon products to posts or pages with either of three methods: Text links, Image display, or Image with Text.
For either method just go to that product page while logged into own associates account. There will be the “Amazon Associates SiteStripe” on top of the page. Select the type of link want to use : Text, Image, Text+Image

      1. Image Links with/without Text



After selecting an image or image with text, Amazon will generate the HTML to place on blogger site. In Blogger add the “HTML/JavaScript” gadget to the layout where the image need to appear.
Copy the HTML code that was generated and paste it into the gadget. Then save it.

      1. Text Links
To have a text link that assigned to some anchor text for the product, click “Text” next to “Get Link” on the “Amazon SiteStripe” and copy the link address that it gives.
Then in Blogger, highlight the anchor text, click the "Link" option (from top blog post tool), and paste the saved link address.

  1. Website Data Statistics

    1. Google Analytics
Google Analytics can be linked to Blogger account so you can track visitor statistics.
First need to go to own Analytics Account and create a new Property ID to assign to self blog. Then need to create a property for each blog in case of having more than one, so can track them individually.
After creating a property for self blog, go to "Settings” on bashboard → “Other". The last item on that page is a field for own Analytics Web Property ID.
Note: Google Analytics is not supported on classic templates such as the “Simple” templates. Though it is confirmed that it does work with “Dynamic Views” and “Picture Window” templates, including all mobile templates.

    1. Blogger Stats
Blogger has its own Stats page that shows some useful information. However, Google Analytics, gives a lot more detailed and useful information about how audience is viewing blogs.
If just want to use Blogger Stats, select “Stats” from dashboard and then select one submenu to review: Overview, Posts, Traffic sources, and Audience.

    1. Ignoring Your Own Views
[Optional]
“Stats” from dashboard → click on "Manage tracking your own pageviews" to tell blogger not to count your own views. 
Need to do that on every browser to use. Also need to allow cookies because blogger uses cookies to know it’s owner.
One problem is that need to enable this option each day while starting working on blog because the cookies are not permanent.

  1. Additional Help Topics
There is much more to Blogger, more help tutorials at https://blogger.googleblog.com/ including latest tips. 
#) blogger template websites
"Free Blogger Templates To Create A Beautiful Blog Or Magazine Website"
#) blogger page to list related blogs together
"Add Blogger Posts To A Page & Link In Navigation"







By knowing more of its features, will help for creative with clever web designs. Have fun and enjoy the flexibility of Blogger.



  1. Create Website Using Blogger - Create Static Home Page Website
[Source:
#) “How To Create Website Using Blogger - Create Static Home Page Website with Blog using Blogger?”
Basically, websites were usually created in HTML with some CSS and JavaScript thrown in here and there. Nowadays, Content Management Systems (CMS) such as WordPress, Drupal, Joomla etc are preferred. Such scripts make  it easy to get a website up and running fast. And to run websites, the website files are uploaded to a web server to make it accessible online.


Basically, a website creation needs a domain name and a host to host the website files to run the website, for which it needs to regularly pay for hosting and domain name. 
Blogger can be used to create website easily; especially a basic website to display basic, static contents with a blog to show periodic update; without paying for hosting fee and domain.
Since Blogger is hosted by Google and website files such as photos are hosted on Google Photos/Picasa Web, there is not need to pay for hosting. The only thing that is required and pay for is a custom domain name if required. Otherwise, Blogger provide default URL which as the "http://xyz.blogspot.com/” or “https://xyz.blogspot.com/”.
It is possible to setup custom domain name for Blogger, than using the default Blogger provided URL. To setup a custom domain, need to buy a domain from a domain registrant and integrate it with Blogger to use the custom domain. (“How To Setup and Direct Blogger To Custom Domain Name?”
In that case need to enter proper link in few of the following steps instead of ‘xyz.blogpost.com’


Blogger is a blogging platform from Google and is meant for blogging. So it has the typical front page that displays list of posts published which are sorted from newest to oldest blog post and display a static page instead. So it needs some additional steps to follow, to create website using Blogger. There are different approaches (check in search Google), but custom redirect is the safest and easiest way to achieve this and there are no code changes required.
Following are steps to do away with the default front page which has a list of latest blog posts and display a static front page instead.

    1. Create a static page
  1. “Pages” → “New Page” → Name it ‘Home’
  2. Add any other pages, such as About, Contact etc. 
  3. While creating each page, disable comments from the "Page Settings" → “Reader Comments” → select don’t allow.
So that visitors do not directly comment  on pages. Otherwise, if you want, you may keep it as is.
Same is already done for all pages through ‘Visitor Comments’ section.

    1. Create main navigation menu
  1. “Layout” → “Add Gadget” → add “Pages” gadget
  2. Uncheck the default "Home" page already listed and instead check the home page just created. 
  3. If created other pages too besides "Home" in prior step, then check the other pages need to display on the navigation menu. The pages created in prior step should be visible for selection in the "Pages to Show" list
  4. Drag the Menu Items to reorder (List Order).
  5. Click “Save”

    1. Place the navigation menu in the expected area
Prior step creates the navigation menu, which needs to be displayed in expected area on the website.
  1. “Layout” → Find the "Pages" gadget added → move that to a region where to display it
Preferably, move it on top below the home page banner and site description. Or on sidebar.

    1. Settings to display the home page created when accessing the blog address
This step will make to show created home page we created instead of the default Blogger feeds page when the blog address is accessed in a browser.
  1. Open blog
  2. Click on created "Home” page from created navigation menu
  3. Copy the link/url of that created home page from the browser's address bar (for example: https://anikettesting.blogspot.com/p/home.html)
  4. Go to Blogger → “Settings” → “Search preferences” → “Custom Redirects”
  5. Paste the home page address in the "From" field (for example: “From” = /p/home.html and “To” = “/”).
  6. click “Save” → click “Save changes”
NOTE: Due to Blogger country domains, there might be country specific domain instead of ".com" in the address. If so, replace the country specific domain with ".com". (for example: if the blog URL has "xyz.blogspot.in/.....", replace as "xyz.blogspot.com/......").
  1. Add setting to replace ‘/’ with ‘/p/home.html’ and ‘/index.html’ with ‘/p/home.html’, i.e. created home page.
This configuration allows Blogger to use the page as the front page instead of the default Blogger front page. So the newly created home page is displayed as the front page when the blog url is entered in a browser or when Home is clicked from the navigation menu.

    1. Display the blog posts
Static page is setup as home page and static pages are setup in navigation menu as well. So blog posts are not being listed anywhere, this step will enable those.
  1. “Layout” → click EDIT on the "Pages Gadget" → click "Add External Link" →
    1. enter “Page Title” as anything (for example: "Blog") → enter “Web Address (URL)” as any particular link
(for example: here http://xyz.blogspot.com/index.html or get link of a specific label by clicking that label to list only posts of that label)
    1. → click “Save Link”
  1. → reorder if required → click “Save”
This will display a new menu item in the navigation menu as “Blog”, which will show the blog posts or labelled blog posts

  1. To post / host other files in Blogger for the website besides photos
Blogger cannot host other files except pictures used in the blog posts. To host other files such as documents, audio, video etc. need to explore other storage. Other Google services can be used for documents, audio, video etc.

    1. Post a Document
To share document on the Blogger website, upload the documents to Google Drive, share it and get the sharing link. Use the document link from Google Drive in Blogger post to let users view or download the documents.

      1. Google Drive files to Post
It is possible to copy content of any Google Drive file (for example: doc) to a post in Blog post, keeping all formats & diagrams in it.

    1. Videos
To display videos on the Blogger website, there is no better source than YouTube. Upload videos to YouTube and embed the YouTube videos in Blogger posts as follows,
Open the YouTube Video → click “Share” → click on “Embed” → select Video Size and copy the embed code → paste the YouTube video embed code and paste it in Blogger blog post in HTML tab
Similarly, it is also possible to embed YouTube playlist in the same way. For this to work, create a playlist in your YouTube account/ channel and add videos to the playlist. Then embed the YouTube video playlist in a blog post or page and visitor can check out multiple videos in the playlist without leaving the page.

    1. Audio/Music Files
It is possible to host audio files in Google Drive as well or can host it on free services such as SoundCloud (https://soundcloud.com/) and share the link in blog post and pages in the same way. Some online cloud music services would also allow embedding, which will also display an audio player to play the audio/music.
NOTE: Similarly, any other files can also be shared in the same manner using Google Drive alone.

  1. To add a ‘contact us’ page
[Source:
#) “Blogger Tips: How to add a contact us page in Blogger?”
#) “How To Add a Contact Form on a Blogger Blog”
]
Blogger actually offers a free contact form for blog. Unfortunately it is made available as a Gadget and placed it on the Layout page so that it is added on each page. That is not the ideal way for a contact form! It should be situated on its own page.
Steps to set it up are,
  1. Add ‘Contact Form’ gadget
“Layout” → “Add a Gadget” in any region where the ‘Contact Form’ widget is required → select “Contact Form”
This will add a contact form in chosen region of each page.
To display the contact form only in a single page, need to customize a few lines of code. Mentioned ahead after this step.
  1. Hide ‘Contact Form’ gadget
Need to hide it so that is it not visible in the widget areas but in a page.
“Theme” → click "Edit HTML" → search for ‘]]></b:skin>’ → paste below code before that.
/* CUSTOM STARTS: HIDE CONTACT FORM */
#ContactForm1
{
display: none ! important;
}
/* CUSTOM ENDS: HIDE CONTACT FORM */
OR
Add above code in “Custom CSS” area by going to “Theme” → “Customize” → “Advanced” → “Add CSS”
  1. Add ‘Contact us’ page, if not added already
“Pages” → add a new page → give title as ‘Contact’ or ‘Contact us’
  1. Update HTML code for that contact page
click on “HTML” button to enter code in HTML mode → remove default code if any → paste following code in the HTML text area.
<div dir="ltr" style="text-align: left;" trbidi="on">
<form name="contact-form">
<div align="left"> Your Name: </div>
<br />
<div align="left"><input class=" contact-form-name="" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value=""></div>
<br />
<div align="left">Your Email:
<span style="color: red; font-weight: bolder;">*</span></div>
<br />
<div align="left"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<br />
<div align="left">Your Message:
<span style="color: red; font-weight: bolder;">*</span></div>
<br />
<div align="left"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea></div>
<br /><br />
<div align="left"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /></div>


<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
  1. As there is not need of user’s comments for on contact page, disable comment on this page.
  1. “Page settings” → click "Options" → select “Don’t allow” for ‘Reader Comments’
Alternate steps are,
  1. Step 1 mentioned above.
  2. Remove ‘Contact Form’ gadget code
“Theme” → click "Edit HTML" → search for ‘ContactForm’
It should find the code below. Click the black down arrow to the left of:
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
then click the down arrow again beside (if they are not already open),
<b:includable id='main'>
  1. Delete everything between above mentioned ‘<b:includable id='main'>’ and it’s ending tag ‘</b:includable>’
So it should left with
<b:includable id='main'></b:includable>
  1. Do a new search for ‘]]></b:skin>’ and paste following code directly before it:
/* CUSTOM STARTS: CONTACT FORM */
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 600px;
max-width: 100%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 100%;
height:100px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;
}
/* CUSTOM ENDS: CONTACT FORM */
  1. Save the template
  2. Add ‘Contact us’ page, if not added already
“Pages” → add a new page → give title as ‘Contact’ or ‘Contact us’
  1. Update HTML code for that contact page
click on “HTML” button to enter code in HTML mode → remove default code if any → paste following code in the HTML text area.
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="fm_name">
Your Name:
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="fm_email">
E-mail Address *:
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear:both">
</div>
<div class="fm_message">
Message *:
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>
Since this uses the Blogger Gadget interface, the emails sent using this form will be sent to the email associated with owner account.
That email address can be changed in the Admin settings of blog.

  1. Adding Dropdown menu
Drop down menus can help organize and categorize content links.
Since Blogger doesn’t offer the option to automatically add a drop down menu as WordPress (https://icanbuildablog.com/2014/07/create-a-wordpress-blog-in-5-minutes/) does. This requires a little bit of CSS and HTML work as done in demo (http://envyetemplatesample.blogspot.com/). 
  1. To get started, add “HTML/Javascript” gadget in top/header area of “Layout” page, at place of drop down menu.
  2. Add the following code to that widget, customizing the titles and links to match the blog.
<ul id="idmenusubmenu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li>Menu 1
    <ul>
      <li><a href="#">Submenu 11</a></li>
      <li><a href="#">Submenu 12</a></li>
      <li><a href="#">Submenu 13</a></li>
    </ul>
  </li>
  <li>Menu 2
    <ul>
      <li><a href="#">Submenu 21</a></li>
      <li><a href="#">Submenu 22</a></li>
      <li><a href="#">Submenu 23</a></li>
    </ul>
  </li>
  <li>Menu 3
    <ul>
      <li><a href="#">Submenu 31</a></li>
      <li><a href="#">Submenu 32</a></li>
      <li><a href="#">Submenu 33</a></li>
    </ul>
  </li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>
For example:
<ul id="idmenusubmenu">
  <li><a href="https://aniketsalunkhelearning.blogspot.com/p/home.html">Home</a></li>
  <li>Development
    <ul>
      <li><a href="#">C Programming</a></li>
      <li><a href="#">C++</a></li>
      <li><a href="#">GNU Compiler</a></li>
      <li><a href="#">Android</a></li>
      <li><a href="#">Yocto</a></li>
      <li><a href="#">Git</a></li>
      <li><a href="#">Python</a></li>
      <li><a href="#">IBM Clearcase</a></li>
    </ul>
  </li>
  <li>Domain
    <ul>
      <li><a href="#">MPEG-TS</a></li>
      <li><a href="#">RDK - Reference Design Kit</a></li>
      <li><a href="#">Wi-Fi</a></li>
  <li><a href="#">Packet Analyzer</a></li>
    </ul>
  </li>
  <li>Activities
    <ul>
      <li><a href="#">Outdoor Activities</a></li>
      <li><a href="#">City Activities</a></li>
      <li><a href="#">Additionals</a></li>
    </ul>
  </li>
  <li>About me
    <ul>
      <li><a href="#">Resume</a></li>
      <li><a href="#">Detailed Profile</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </li>
</ul>
  1. Replace the # characters with the actual links. Repeat highlighted code for each Menu-Submenu.
  2. To center your menu, just add: <center> before your HTML code in the added gadget, and </center> at the end of it.


  1. Go to “Theme” → “Customize” page of Blogger and scroll down to “Advanced” → “Add CSS”. Add the following code to give that menu some style:
OR
Go to “Theme” → “Edit HTML” and search for ‘]]></b:skin>’. Add following code before that.
/* CUSTOM STARTS: DROPDOWN MENU-SUBMENU */
.tabs-inner .widget ul#idmenusubmenu {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  border:none;
}
.tabs-inner .widget ul#idmenusubmenu li {
  font-size: 12px/18px;
  font-family: sans-serif; /* Font for the menu */
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff; /* background colour of the main menu */
  float:none;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.tabs-inner .widget ul#idmenusubmenu li a {
padding:0;
font-family: sans-serif; /* Font for the menu links */
border:0;
}
.tabs-inner .widget ul#idmenusubmenu li:hover {
  background: #555; /* background colour when you roll over a menu title */
  color: #fff; /* font colour when you roll over a menu title */ 
}
.tabs-inner .widget ul#idmenusubmenu li:hover a {
  background: transparent;
  color: #fff; /* font colour when you roll over a menu title link */ 
}
.tabs-inner .widget ul#idmenusubmenu li ul {
  z-index:1000; 
  border:none;
  padding: 0;
  position: absolute;
  top: 45px;
  left: 30px;
  float:none;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
.tabs-inner .widget ul#idmenusubmenu li ul li { 
  background: #555; /* background colour of the sub menu items */
  display: block; 
  color: #fff; /* font colour of the sub menu items */
  text-shadow: 0 -1px 0 #000;
}
ul#idmenusubmenu li ul li a{
  color:#fff  /* link colour of the sub menu items */
}
.tabs-inner .widget ul#idmenusubmenu li ul li:hover { 
  background: #666; /* background colour when you roll over sub menu items */
}
.tabs-inner .widget ul#idmenusubmenu li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
/* CUSTOM ENDS: DROPDOWN MENU-SUBMENU */
  1. If required, change the colours and fonts (as shown highlighted comments in code)

  1. Adding a Simple and Responsive Image Gallery in a Grid Layout with rows & columns
[Source:
#) “HOW TO ADD A SIMPLE AND RESPONSIVE IMAGE GALLERY TO BLOGGER (4 STYLES)” https://xomisse.com/blog/image-gallery-blogger/
#) “Create A Responsive Image Gallery For Blogger – The Easier Way”
#) “How To Create A Responsive Blogger Image Gallery”





Galleries are a great way to display multiple images without making the user scroll through a long slow-loading page. A demo of responsive image gallery is 
Add The CSS ,
“Theme” → click “Edit HTML” → paste following CCS code before ‘]]> </b:skin>’ [find the CSS section of theme, i.e. between ‘<b:skin>’ and ‘]]> </b:skin>’. Add the following CSS code above the closing ‘]]> </b:skin>’ tag.]
/* CUSTOM STARTS: SIMPLE RESPONSIVE GALLERY */
.gallery {
    padding: 0 5px;
    float: left;
    width: 24.99999%;
}
div.gallery img {
    width: 100%;
    height: auto;
}
div.gallery img:hover {
opacity: 0.8;
}
div.desc {
    padding: 10px;
    text-align: center;
}
* {
    box-sizing: border-box;
}
@media only screen and (max-width: 700px){
    .gallery {
        width: 49.99999%;
        margin: 6px 0;
    }
}
@media only screen and (max-width: 500px){
    .gallery {
        width: 100%;
    }
}
.image-gallery:after {
    content: "";
    display: table;
    clear: both;
}
/* CUSTOM ENDS: SIMPLE RESPONSIVE GALLERY */
This styles the images and captions in a grid format, as well as making it responsive (go from 4 columns to 2 columns to 1 column depending on screen size). This CSS can be customised as required. To columns count to 3, change the width value on .gallery to 33.333% instead.
The HTML Page ,
There are four style options depending on requirement of a standard image gallery with/without captions or a clickable gallery, with/without captions, that links to other posts, pages or external sites.


To add the gallery to a particular post, page or gadget, copy and paste the following HTML in it’s HTML mode (not compose/rich text mode). Then don’t switch between modes once HTML code is pasted in it, otherwise Blogger adds code between the lines and break the structure.
<div class="image-gallery">
  <!-- Grid Image Gallery -->
  <div class="gallery">
      <img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
  </div>
  <!-- Grid Image Gallery with Caption -->
  <div class="gallery">
      <img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
      <div class="desc">DISPLAYED-CAPTION</div>
  </div>
  <!-- Clickable Grid Image Gallery -->
  <div class="gallery">
    <a href="LINK" target="_blank">
      <img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
    </a>
  </div>
  <!-- Clickable Grid Image Gallery with Caption -->
  <div class="gallery">
    <a href="LINK" target="_blank">
      <img src="IMAGE-URL" alt="SEO-IMAGE-CAPTION">
    </a>
    <div class="desc">DISPLAYED-CAPTION</div>
  </div>
</div> 
Now upload images and replace ‘IMAGE-URL’ with the direct image URL.
Replace ‘LINK’ with the post, page or external site that image to link to. Replace ‘SEO-IMAGE-CAPTION’ and ‘DISPLAYED-CAPTION’ with an SEO friendly descriptive caption.
target="_blank" : To open ‘LINK’ in new page. Remove ‘target’ property to open link in same page. (Few details about ‘target’ property & it’s values are provided at https://html.com/attributes/a-target/)
To add more images in gallery, simply copy and paste the block of Grid Image code within the ‘image-gallery div’ wrapper.
Then save and publish that post or page. Image gallery should be displayed in a nice grid and be responsive when as per the browser screen size.


Following is an example of HTML code for entire page including one of the responsive image gallery.
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<hr />
<div>
<br />
<h2 style="text-align: center;">DEVELOPMENT</h2>
<br />
<br />
<div class="image-gallery">
<div class="gallery">
<a href="https://anikettesting.blogspot.com/search/label/C">
<img src="SimoneAnne-1862.jpg" alt="SEO-IMAGE-CAPTION">
</a>
</div>
  
<div class="gallery">
<a href="https://anikettesting.blogspot.com/search/label/CPP">
<img src="SimoneAnne-1871.jpg" alt="SEO-IMAGE-CAPTION">
</a>
</div>
</div> 
<br />
<br />
<hr />
</div>
</div>

  1. Display all post as list of a Label
[Source:
#) “Show all post as list of a label to Blogger”
https://www.howtolearnblog.com/2015/01/show-all-post-as-list-of-label-to.html
]
To do this copy following code and paste on a Page, Post or Sidebar of Blog.
<script type="text/javascript">
var numposts = 100;
var standardstyling = true;
function showrecentposts(json) {
  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }}
    posttitle = posttitle.link(posturl);
    if (standardstyling) document.write('<li>');
    document.write(posttitle);}
    if (standardstyling) document.write('</li>');
}
</script>
<ul>
<script src="http://www.vikinspire.com/feeds/posts/default/-/Label?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script>
</ul>


Accessing the label's feed

To access the blog posts with that label, start on your blog's main page. Look for a post with the fedora label. The name of your new label is
Link with a URL with name of a Label looks like, 
The RSS feed for that Label is,


  1. Removing page/post title
“Theme” → click "Edit HTML" → search for ‘]]></b:skin>’ → paste below code before that.
OR "Theme" --> click "Customize" --> 'Advanced' --> 'Add CSS' --> add below code there.
/* CUSTOM STARTS: REMOVE PAGE/POST TITLE */
.post-title.entry-title {display: none;}
/* CUSTOM ENDS: REMOVE PAGE/POST TITLE */

  1. Linking Images from Google Drive to Blogger Post
[Source :
Any 'shared' image/file from Google Drive generates link in format as,
https://drive.google.com/file/d/{file-id}/view?usp=sharing
which need to modify
https://drive.google.com/uc?export=view&id={file-id}
and then use in image tag

<img src="https://drive.google.com/uc?export=view&id={file-id}" alt="ALT TEXT">


Labels: