Blogger Ever

4 Column featured widget Jquery version for Blogger

4 Column featured widget Jquery version for Blogger


Well,getting tons of e-mails daily and each of them have its own problem.But,one request that I found was the problem in 4 column featured widget that was pure CSS3.Though,I think that it is better to launch a Jquery version so it can work properly.



Before Proceeding checkout the Demo.

Now first make sure that Jquery library in installed in your template otherwise add the following code just above <head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 Now find

]]></b:skin>
and paste the following code just above it.


.befeature1

{

 height: 250px;

 overflow: hidden;

 width: 900px;

}

.bebox1

{

background:#333;

 float: left;

color:#fff;

 height: 500px;

 margin: 0;

 margin-left: 1%;

 moz-transition: all .3s ease-in-out;

 ms-transition: all .3s ease-in-out;

 o-transition: all .3s ease-in-out;

 overflow: hidden;

 transition: all .3s ease-in-out;

 webkit-transition: all .3s ease-in-out;

 width: 24%;

}

.bebox1 img

{

width:100%;

height:180px;

}

.bebox1 h1

{

margin:10px;

 color: #fff;

 font-family: Segoe UI light;

 font-size: 19px;

 font-weight: lighter;

height:50px;

line-height:19px;

 width: 95%;

}
Now find

</head>
and paste the following code just above it

<script>

$(document).ready(function(){

$(".bebox1").hover(function(){

$(this).find("img").slideUp(200);

  },function(){

$(this).find("img").slideDown(200);

});

});

</script> 
Now save the template and go to layout > add widget > HTML/javascript and add the following code in it.
<div class="befeature1">
<div class="bebox1">
<img src="First Image URL"/>
<h1>FIRST HEADING</h1>
<p>FIRST DESCRIPTION</p>
</div>
<div class="bebox1">
<img src="Second Image URL"/>

<h1>SECOND HEADING</h1>

<p>SECOND DESCRIPTION</p>

</div>
<div class="bebox1">
<img src="THIRD Image URL"/>

<h1>THIRD HEADING</h1>

<p>THIRD DESCRIPTION</p>

</div>
<div class="bebox1">
<img src="Fourth Image URL"/>

<h1>FOURTH HEADING</h1>

<p>FOURTH DESCRIPTION</p>

</div>
</div>
Just Replace the above highlighted lines with its respective content. 
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.