BLOG DESIGN

Customize Labels Cloud in Blogger 

1. Go to Blogger > Settings> Layouts
2. Click add a gadget and choose Labels                     
3. Inside the settings make sure to choose the cloud display. You may set other options as per your requirement. See the screenshot below as example  
4. Now save the widget and go to settings > Templa
5.  Backup your template

 Click Edit html > Proceed  and search for this
                                                     ]]></b:skin>
7.   Just above it paste the following CSS code:
/*-----Custom Labels Cloud widget by http://bhavadipbaria9574.blogspot.in/----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
-webkit-transition: all 0.5s ease-out; 
-ms-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg); 
-o-transform: rotate(7deg); 
-webkit-transform: rotate(7deg); 
-ms-transform: rotate(7deg); 
transform: rotate(7deg); 
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1; 
}

.label-size a  {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none;
}

How to create drop down menu in bloggrr

Add it on blogger

Goto blogger dashboard >> Template
Back up your template
Edit HTML
At there search for the ]]></b:skin> tag and just above it paste the following code:
 /*--------Resposive menu by PakMax.net----------------*/
#nav-trigger {
    display: none;
    text-align: center;
}
#nav-trigger span {
    display: block;
    background-color: #5b97f9;
    cursor: pointer;
    text-transform: uppercase;
    padding: 0 25px;
    color: white;
    font-weight:bold;
    line-height: 67px;
}
nav#nav-mobile {
    margin: 0px;
}
#pmflatnav a {color:#ecf0f1;}
#pmflatnav ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
#pmflatnav ul li {

  font: bold 12px/18px sans-serif;
    border-top:2px solid;
    border-right:1px dotted;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #5b97f9;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#pmflatnav ul li:hover {
  background: #34495e;
  color: #fff;
}
#pmflatnav ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  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;
}
#pmflatnav ul li ul li {
  background: #5b97f9;
  display: block;
  color: black;

}
#pmflatnav ul li ul li:hover { background: #34495e; }
#pmflatnav ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
nav#nav-mobile {
    position: relative;
    display: none;
}
nav#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #ddf0f9;
    z-index: 10;
    padding: 0px;
    border-bottom: solid 1px #cc0028;
}
nav#nav-mobile li:last-child {
border-bottom: none;
}
nav#nav-mobile a {
display: block;
color: #29a7e1;
padding: 10px 30px;
text-decoration: none;
border-bottom: 1px solid #00aeef;
}
nav#nav-mobile a:hover {
background-color: #e6002d;
color: #fff;
}
/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 900px) {
#nav-trigger {
    display: block;
}
nav#pmflatnav {
    display: none;
}
nav#nav-mobile {
    display: block;
}
}
/*--------Resposive menu by PakMax.net----------------*/


 After this, now again search for the </head> tag and just above it paste the following code:

 <script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
    $("#nav-mobile").html($("#pmflatnav").html());
    $("#nav-trigger span").click(function(){
        if ($("nav#nav-mobile ul").hasClass("expanded")) {
            $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
            $(this).removeClass("open");
        } else {
            $("nav#nav-mobile ul").addClass("expanded").slideDown(250);
            $(this).addClass("open");
        }
    });
});
//]]>
</script>


Now come to the final step. Paste the following below code where you want menu to appear.

 <nav id='pmflatnav'>
<ul><li><a href="#">Home</a></li>
  <li><a href="#">Games</a></li>
  <li>
    <a href="#">Portfolio</a>
    <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Animation</a></li>
      <li><a href="#">Photography</a></li>
    </ul>
  </li>
  <li><a href="#">Trending</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</nav>
<div id='nav-trigger'>
    <span>Menu <i class='fa fa-list'/></i></span>
</div>
<nav id='nav-mobile'/></nav>

Note: Don't forget to change the na