Blogger - Responsive Footer Widget (Four Column )

[4 Column Responsive Widget ~ Techno-Lobby]

If you want to add your personalized widget in your google blog, just use the following instruction. You can add this widget just below the header or at the footer as you wish, it will be visible accordingly.

Step 1: Login to Blogger.
Step 2: Click on Theme and Backup your current theme, if something goes wrong you can recover it.
Step 3: Once the backup is done, now click on edit.
Step 3: Place the Code in the location where you wants to show it. Best location is just after the page navigation bar or just before the </body>. If you are not popular with coding just click on the code of your theme and press Control + F and type </body> and enter, Now place the code just before the <body> tag.

Step 4: Now place the CSS code just before </head> and save the theme.

Code ( HTML):

<div id='lower'>
 <div id='lower-wrapper'>
  <div id='lowerbar-wrapper'>
   <b:section class='lowerbar' id='lowerbar1' preferred='yes'/>
  </div>
<div id='lowerbar-wrapper'>
   <b:section class='lowerbar' id='lowerbar2' preferred='yes'/>
  </div>
<div id='lowerbar-wrapper'>
   <b:section class='lowerbar' id='lowerbar3' preferred='yes'/>
  </div>
<div id='lowerbar-wrapper'>
   <b:section class='lowerbar' id='lowerbar4' preferred='yes'>
    <b:widget id='HTML1' locked='false' title='Partner Website' type='HTML'>
     <b:widget-settings>
      <b:widget-setting name='content'>
       <![CDATA[<a href="https://www.earnmoneyonlinejob.in/">Techno-Lobby & Earn-Online</a><div>
<br /></div>
<div>
If you like to create 4 column responsive widget visite us. We are <a href="https://www.earnmoneyonlinejob.in/">Techno-Lobby</a></div>
<div>
<br /><br /></div>
]]>
      </b:widget-setting>
     </b:widget-settings>
     <b:includable id='main'>
      
      <b:if cond='data:title != ""'>
       <h2 class='title'>
        <data:title/>
       </h2>
</b:if>
      <div class='widget-content'>
       <data:content/>
      </div>
<b:include name='quickedit'/>
     </b:includable>
    </b:widget>
   </b:section>
  </div>
<div style='clear: both;'/>
</div>
</div>

Code (CSS):

#lower {
border-top: #737373 0px solid;
margin:auto;
font-family: auto;
width: 100%;
padding: 0px 0px 0px 0px;
background:none;
}
#lower a {
color: #DBDBDB;
font-family: auto;
}
#lower-wrapper {
margin:auto;
font-family: auto;
padding: 0px 0px 0px 0px;
width:100%;
}
#lowerbar-wrapper {
background:none;
float: left;
color: none;
font-family: auto;
margin: 0px 0px auto;
padding-bottom: 0px;
width: 25%;
text-align: justify;
font-size:100%;
line-height: auto;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 0px 0px 0px 0px;}
.lowerbar h2 {
margin: 0px 0px 0px 0px;
padding: 3px 0px 0px 0px;
text-align: left;
color:#fff;
text-transform:uppercase;
font: bold 16px Arial, Tahoma, Verdana;
border-bottom:0px solid #666666;
}
.lowerbar ul {
list-style:none;
margin: 0;
padding: 0;
}.lowerbar li a {
width: 265px;
font-family: Georgia;
background: none;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 1px;
padding: 0.5em;
margin-bottom: 0px;
margin-right: 0px;
-webkit-border-radius: 0px;
overflow: hidden;
color:#000000;
}.lowerbar li a:visited {
width: auto;
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em;
margin-bottom: 2px;
margin-right: 3px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar li a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar a {
font-family: Georgia;
background: #3f3f3f;
border: 1px solid #111;
line-height: 1.4em;
float:left;
-moz-border-radius: 5px;
padding: 0.5em;
margin-right: 3px;
margin-bottom: 11px;
-webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}.lowerbar a:hover {
background: #4f4f4f;
border: 1px solid #7a7a7a;
line-height: 1.4em;
-moz-border-radius: 5px;
padding: 0.5em; -webkit-border-radius: 5px;
overflow: hidden;
color:#000000;
}

@media(min-width:1200px){
    #lowerbar-wrapper {
        width: 25%;
          }
}

@media(min-width:985px) and (max-width:1199px){
    #lowerbar-wrapper {
        width: 33.33%;
    }
}

@media(min-width:768px) and (max-width:984px){
    #lowerbar-wrapper {
        width: 50%;
    }
}

@media screen and (max-width: 767px) {
    #lowerbar-wrapper {
        width: 100%;
    }
}

</style>

Thank you guys for visiting us and don't forget that you are asowme.

Tech Fever

Blogger - Responsive Footer Widget (Four Column )

[4 Column Responsive Widget ~ Techno-Lobby]

Post a Comment

0 Comments

Android Technology

Tags

Random Posts

Recent in Technolog

Popular Posts

Google Adwords - Generate a Large Number of Visitor For Your Business (Web Site )

Evolution of Mobile Games From 1994 to 2019

Best Video Editing Apps / Software For YouTube [ PC and Mobile Platform ]

Tech Fever

Blogger - Responsive Footer Widget (Four Column )

[4 Column Responsive Widget ~ Techno-Lobby]

You may like these posts

Post a Comment

0 Comments

Android Technology

Tags

Random Posts

Recent in Technolog

Popular Posts

Google Adwords - Generate a Large Number of Visitor For Your Business (Web Site )

Evolution of Mobile Games From 1994 to 2019

Best Video Editing Apps / Software For YouTube [ PC and Mobile Platform ]