How to Add Menu type Imitation Blocks Widget to blog/website?

After sharing number of widget styles on our blog we bring you another wonderful widget with technique of after and before properties. This widget works like menu style and gives attractive look to your blog/website. Hepls visitors to browse more articles by its mouse hovers effect and category wise styling. Webmaster can easily customize this widget according to their blog genre adding spicy colors. This widget contains mainly two sections header bar, left for explanatory and right for related link slides on reader mouse over. Let’s begin the tutorial for adding this widget to blog/website.

How to Add Menu type Imitation Blocks to blog/website?

Sign into your blogger account
From blogger dashboard select ‘Template’ link tab
Click on ‘Edit HTML’ link tab and proceed
Now, search for tag

</head>

After finding tag copy below code and paste above to it

<style>
.komodule h2 {
  background-color: #a0cafe;
  border-radius: 20px 0 0 20px;
  color: #fff;
  font-family: Verdana;
  font-size: 14px;
  line-height: 32px;
  margin: 0;
  padding: 0 0 0 20px;
  text-shadow: 2px 1px 1px #222;
}

.komodule h2 a {
    border-left: 5px solid #000000;
    color: #101921;
    float: right;
    font-size: 14px;
    text-decoration: none;
    text-shadow: none;
    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
}
.komodule h2 a:hover {
  padding: 0 32px;
}

.komodule h2 a:before, .komodule h2 a:after {
    content: &quot;&quot;;
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}
.komodule h2 a:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #000000;
    border-top: 8px solid transparent;
    left: -12px;
    margin-top: -8px;
}
.komodule h2 a:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    left: -6px;    margin-top: -6px;
}

.komodule.blue h2 a {background-color: #A2D5EC;}
.komodule.blue h2 a:hover {background-color: #C5F0FF;}
.komodule.blue h2 a:after {border-right: 6px solid #A2D5EC;}
.komodule.blue h2 a:hover:after {border-right-color: #C5F0FF;}

.komodule.yellow h2 a {background-color: #FCE98D;}
.komodule.yellow h2 a:hover {background-color: #FFD700;}
.komodule.yellow h2 a:after {border-right: 6px solid #FCE98D;}
.komodule.yellow h2 a:hover:after {border-right-color: #FFD700;}

.komodule.green h2 a {background-color: #bada55;}
.komodule.green h2 a:hover {background: #C7E176;}
.komodule.green h2 a:after {border-right: 6px solid #bada55;}
.komodule.green h2 a:hover:after {border-right-color: #C7E176;}

.komodule.red h2 a {background-color: #F0A5B5;}
.komodule.red h2 a:hover {background-color: #FFC7D2;}
.komodule.red h2 a:after {border-right: 6px solid #F0A5B5;}
.komodule.red h2 a:hover:after {border-right-color: #FFC7D2;}
</style>

Successful adding code ‘Save Template’

Browse More Related Posts

Now Click on ‘Layout’ link tab
Click on ‘Add a Gadget’ link tab
Select ‘HTML/Javascript’ widget and copy below code paste in it.

• Slide Green Color Background style<div class="komodule green">

<h2>Blogger Tricks <a href="Link URL">Green</a></h2>
</div>

• Slide Red Color Background style

<div class="komodule red">
<h2>Blogging Tips <a href="Link URL">Red</a></h2>
</div>

• Slide Yellow Color Background style

<div class="komodule yellow">
<h2>SEO Tips<a href="Link URL">Yellow</a></h2>
</div>

• Slide Blue Color Background style

<div class="komodule blue">
<h2>Widgets<a href="Link URL">Blue</a></h2>
</div>

Code Customization:

• Replace ‘Bloggertricks, Blogging Tips, SEO Tips, Widgets with your Related Title
• Replace ‘Link URL’ with your choice post link
• Now, save widget and Template to preview your experiment

That’s it done.