JQuary Image Grid View in Blogger

By HDWalle -
Here we providing wonderful JQuary Image Grid View. In Blogger you can post the image in grid view discussed in previous article, Now we providing JQuary Image Grid View with animation you can post in blogger
The HTML code how to insert your image into it :

<ul class="m4">
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4cA6zAWh9CLmx9I1sjNhjrw85E45xktMRfLqblRoEEetlWIJlLBuiMCoRjwuEvRMdNqKnwlID6uJg9e3263Dt-XMNKn8Y43H4wFoeasRQNuD7GiKJZrTvtRacC6z4Z1lxttfBBL7xac8/s320/Egypt+1.jpg" /></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4cA6zAWh9CLmx9I1sjNhjrw85E45xktMRfLqblRoEEetlWIJlLBuiMCoRjwuEvRMdNqKnwlID6uJg9e3263Dt-XMNKn8Y43H4wFoeasRQNuD7GiKJZrTvtRacC6z4Z1lxttfBBL7xac8/s320/Egypt+1.jpg" /></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4cA6zAWh9CLmx9I1sjNhjrw85E45xktMRfLqblRoEEetlWIJlLBuiMCoRjwuEvRMdNqKnwlID6uJg9e3263Dt-XMNKn8Y43H4wFoeasRQNuD7GiKJZrTvtRacC6z4Z1lxttfBBL7xac8/s320/Egypt+1.jpg" /></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4cA6zAWh9CLmx9I1sjNhjrw85E45xktMRfLqblRoEEetlWIJlLBuiMCoRjwuEvRMdNqKnwlID6uJg9e3263Dt-XMNKn8Y43H4wFoeasRQNuD7GiKJZrTvtRacC6z4Z1lxttfBBL7xac8/s320/Egypt+1.jpg" /></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4cA6zAWh9CLmx9I1sjNhjrw85E45xktMRfLqblRoEEetlWIJlLBuiMCoRjwuEvRMdNqKnwlID6uJg9e3263Dt-XMNKn8Y43H4wFoeasRQNuD7GiKJZrTvtRacC6z4Z1lxttfBBL7xac8/s320/Egypt+1.jpg" /></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4cA6zAWh9CLmx9I1sjNhjrw85E45xktMRfLqblRoEEetlWIJlLBuiMCoRjwuEvRMdNqKnwlID6uJg9e3263Dt-XMNKn8Y43H4wFoeasRQNuD7GiKJZrTvtRacC6z4Z1lxttfBBL7xac8/s320/Egypt+1.jpg" /></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4cA6zAWh9CLmx9I1sjNhjrw85E45xktMRfLqblRoEEetlWIJlLBuiMCoRjwuEvRMdNqKnwlID6uJg9e3263Dt-XMNKn8Y43H4wFoeasRQNuD7GiKJZrTvtRacC6z4Z1lxttfBBL7xac8/s320/Egypt+1.jpg" /></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4cA6zAWh9CLmx9I1sjNhjrw85E45xktMRfLqblRoEEetlWIJlLBuiMCoRjwuEvRMdNqKnwlID6uJg9e3263Dt-XMNKn8Y43H4wFoeasRQNuD7GiKJZrTvtRacC6z4Z1lxttfBBL7xac8/s320/Egypt+1.jpg" /></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4cA6zAWh9CLmx9I1sjNhjrw85E45xktMRfLqblRoEEetlWIJlLBuiMCoRjwuEvRMdNqKnwlID6uJg9e3263Dt-XMNKn8Y43H4wFoeasRQNuD7GiKJZrTvtRacC6z4Z1lxttfBBL7xac8/s320/Egypt+1.jpg" /></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4cA6zAWh9CLmx9I1sjNhjrw85E45xktMRfLqblRoEEetlWIJlLBuiMCoRjwuEvRMdNqKnwlID6uJg9e3263Dt-XMNKn8Y43H4wFoeasRQNuD7GiKJZrTvtRacC6z4Z1lxttfBBL7xac8/s320/Egypt+1.jpg" /></li>
    <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4cA6zAWh9CLmx9I1sjNhjrw85E45xktMRfLqblRoEEetlWIJlLBuiMCoRjwuEvRMdNqKnwlID6uJg9e3263Dt-XMNKn8Y43H4wFoeasRQNuD7GiKJZrTvtRacC6z4Z1lxttfBBL7xac8/s320/Egypt+1.jpg" /></li>
  
</ul>




REMOVE ALL YELLOW COLOR LINKS AND PASTE YOUR IMAGE LINK

Paste This CSS Code in CSS Panel in blogger 
.m4 li{float: left;display: inline; border:1px solid #C1C1C3; margin:0 5px 10px 0; opacity:0;
-webkit-transition:all .3s;
-moz-transition:all .3s;
-o-transition:all .3s;
-ms-transition:all .3s;
transition:all .3s;

-moz-animation: myfirst 1s forwards;
-webkit-animation: myfirst 1s forwards;
-o-animation: myfirst 1s forwards;
-ms-animation: myfirst 1s forwards;
animation: myfirst 1s forwards;
}
.m4 li:nth-child(1){
-webkit-animation-delay:.1s;
-moz-animation-delay:.1s;
-o-animation-delay:.1s;
-ms-animation-delay:.1s;
animation-delay:.1s;
}
.m4 li:nth-child(2){
-webkit-animation-delay:.2s;
-moz-animation-delay:.2s;
-o-animation-delay:.2s;
-ms-animation-delay:.2s;
animation-delay:.2s;
}
.m4 li:nth-child(3){
-webkit-animation-delay:.3s;
-moz-animation-delay:.3s;
-o-animation-delay:.3s;
-ms-animation-delay:.3s;
animation-delay:.3s;
}
.m4 li:nth-child(4){
-webkit-animation-delay:.4s;
-moz-animation-delay:.4s;
-o-animation-delay:.4s;
-ms-animation-delay:.4s;
animation-delay:.4s;
}
.m4 li:nth-child(5){
-webkit-animation-delay:.5s;
-moz-animation-delay:.5s;
-o-animation-delay:.5s;
-ms-animation-delay:.5s;
animation-delay:.5s;
}
.m4 li:nth-child(6){
-webkit-animation-delay:.6s;
-moz-animation-delay:.6s;
-o-animation-delay:.6s;
-ms-animation-delay:.6s;
animation-delay:.6s;
}
.m4 li:nth-child(7){
-webkit-animation-delay:.7s;
-moz-animation-delay:.7s;
-o-animation-delay:.7s;
-ms-animation-delay:.7s;
animation-delay:.7s;
}
.m4 li:nth-child(8){
-webkit-animation-delay:.8s;
-moz-animation-delay:.8s;
-o-animation-delay:.8s;
-ms-animation-delay:.8s;
animation-delay:.8s;
}
.m4 li:nth-child(9){
-webkit-animation-delay:.9s;
-moz-animation-delay:.9s;
-o-animation-delay:.9s;
-ms-animation-delay:.9s;
animation-delay:.9s;
}
.m4 li:nth-child(10){
-webkit-animation-delay:1.0s;
-moz-animation-delay:1.0s;
-o-animation-delay:1.0s;
-ms-animation-delay:1.0s;
animation-delay:1.0s;
}
.m4 li:nth-child(11){
-webkit-animation-delay:1.1s;
-moz-animation-delay:1.1s;
-o-animation-delay:1.1s;
-ms-animation-delay:1.1s;
animation-delay:1.1s;
}
.m4 li:nth-child(12){
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
-o-animation-delay:1.2s;
-ms-animation-delay:1.2s;
animation-delay:1.2s;
}
.m4 li:nth-child(13){
-webkit-animation-delay:1.3s;
-moz-animation-delay:1.3s;
-o-animation-delay:1.3s;
-ms-animation-delay:1.3s;
animation-delay:1.3s;
}
.m4 li:nth-child(14){
-webkit-animation-delay:1.4s;
-moz-animation-delay:1.4s;
-o-animation-delay:1.4s;
-ms-animation-delay:1.4s;
animation-delay:1.4s;
}
.m4 li:nth-child(15){
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
-o-animation-delay:1.5s;
-ms-animation-delay:1.5s;
animation-delay:1.5s;
}
.m4 li:nth-child(16){
-webkit-animation-delay:1.6s;
-moz-animation-delay:1.6s;
-o-animation-delay:1.6s;
-ms-animation-delay:1.6s;
animation-delay:1.6s;
}
.m4 li:nth-child(17){
-webkit-animation-delay:1.7s;
-moz-animation-delay:1.7s;
-o-animation-delay:1.7s;
-ms-animation-delay:1.7s;
animation-delay:1.7s;
}
.m4 li:nth-child(18){
-webkit-animation-delay:1.8s;
-moz-animation-delay:1.8s;
-o-animation-delay:1.8s;
-ms-animation-delay:1.8s;
animation-delay:1.8s;
}
.m4 li:nth-child(19){
-webkit-animation-delay:1.9s;
-moz-animation-delay:1.9s;
-o-animation-delay:1.9s;
-ms-animation-delay:1.9s;
animation-delay:1.9s;
}
.m4 li:nth-child(20){
-webkit-animation-delay:2.0s;
-moz-animation-delay:2.0s;
-o-animation-delay:2.0s;
-ms-animation-delay:2.0s;
animation-delay:2.0s;
}
.m4 li:nth-child(21){
-webkit-animation-delay:2.1s;
-moz-animation-delay:2.1s;
-o-animation-delay:2.1s;
-ms-animation-delay:2.1s;
animation-delay:2.1s;
}
.m4 li:nth-child(22){
-webkit-animation-delay:2.2s;
-moz-animation-delay:2.2s;
-o-animation-delay:2.2s;
-ms-animation-delay:2.2s;
animation-delay:2.2s;
}
.m4 li:nth-child(23){
-webkit-animation-delay:2.3s;
-moz-animation-delay:2.3s;
-o-animation-delay:2.3s;
-ms-animation-delay:2.3s;
animation-delay:2.3s;
}
.m4 li:nth-child(24){
-webkit-animation-delay:2.4s;
-moz-animation-delay:2.4s;
-o-animation-delay:2.4ss;
-ms-animation-delay:2.4ss;
animation-delay:2.4ss;
}
.m4 li:nth-child(25){
-webkit-animation-delay:2.5s;
-moz-animation-delay:2.5s;
-o-animation-delay:2.5s;
-ms-animation-delay:2.5s;
animation-delay:2.5s;
}
.m4 li:nth-child(26){
-webkit-animation-delay:2.6s;
-moz-animation-delay:2.6s;
-o-animation-delay:2.6s;
-ms-animation-delay:2.6s;
animation-delay:2.6s;
}
.m4 li:nth-child(27){
-webkit-animation-delay:2.7s;
-moz-animation-delay:2.7s;
-o-animation-delay:2.7s;
-ms-animation-delay:2.7s;
animation-delay:2.7s;
}
.m4 li:nth-child(28){
-webkit-animation-delay:2.8s;
-moz-animation-delay:2.78s;
-o-animation-delay:2.8s;
-ms-animation-delay:2.8s;
animation-delay:2.8s;
}
.m4 li:hover{
  -webkit-transform:scale(1.3);
    -moz-transform:scale(1.3);
    -o-transform:scale(1.3);
    -ms-transform:scale(1.3);
    transform:scale(1.3);
    border:1px solid #B68838;
  z-index:2;
  position:relative;
   
    }



@-moz-keyframes myfirst /* Firefox */
{
from { opacity:0;-moz-transform:scale(5) translate(300px)}
to { opacity:1;-moz-transform:scale(1)}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from { opacity:0; -webkit-transform:scale(5) translate(300px)}
to { opacity:1;-webkit-transform:scale(1) translate(0px)}
}

@-o-keyframes myfirst /* Opera */
{
from {opacity:0;-o-transform:scale(5) translate(300px)}
to {opacity:1;-o-transform:scale(1) translate(0px)}
}
@-ms-keyframes myfirst /* Opera */
{
from {opacity:0;-ms-transform:scale(5) translate(300px)}
to {opacity:1;-ms-transform:scale(1) translate(0px)}
}
@keyframes myfirst
{
from { opacity:1;transform:scale(5) translate(300px)}
to { opacity:0;transform:scale(1) translate(0px)}
}

How to paste css code in Blogger Show in Figure
Location: TV Colony, Sachivalaya Nagar, Vanasthalipuram, Hyderabad, Andhra Pradesh, India

Comments

Post a Comment

Popular posts from this blog

How to Tack India Adsense Check in Bluedart

By HDWalle -
Image
Here going give a tip for how to tack your google Adsense check in India - Bluedart, fallow the steps then you can tack your adsense check where it is. Login into your google adsense account and click on the finalized earnings Details>> Click on the Check Standard Delivery just below  view details in payment history>> link the you will find the details of your check and the payment number is your Ref.no but you have to remove the  first ' 0 ' number, see the image red marked number should removed.  
Read more

Post Your Images in Grid View in Blogger

By HDWalle -
Image
Post your images in grid view in blogger with simple html code. define how many images you want in a row two,three,four etc. the html code is Procedure Explaine d in Image Slide s For Two images in Rows code is : <TABLE> <TR> <TD> IMAGE CODE </TD> <TD> IMAGE CODE </TD> </TR> <TR> <TD> IMAGE CODE </TD> <TD> IMAGE CODE </TD> </TR> </TABLE> Image code look's like : "  <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9jBalDSmlC6mXidZzFApkEL5h_Op5otjCzQce1Qf-APDTk7qEPtorSRAEMcxTlyK7F0XE0Js492m-Bq_qEz0H7BSIp02uBK68GZjeTsRmb6Htfss1HWD1HafzKu8LlNlfZNB679Oc6Zw/s1600/25.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9jBalDSml...
Read more

How to Protect Document in MS-Word

By HDWalle -
Image
This is tip is important to protect your document from strangers, you can lock and upload and save in your e-mails or file database on the internet, after MS-office 2000 version they implemented this new feature in the latest versions. Here we are trying to explain you guys that's how to protect or Encrypt A document with the help of MS-Office Word text files, follow these steps Protect the document and be safe from Strangers. Step 1 : Open MS-Word Application in you Machine (P.C) - Double Click on the MS-Word icon or Click Start Button > Click on All Programs > Click on Microsoft Office Folder > and Click Mircosoft Office Word then the untitled blank document will be opened. See the images below for example :   Step 2 : Click on the Office button and click or place your pointer on the Prepare then a panel will be appearing in that you will find Encrypt Document option click on it.  Click on Office Button > Click or place your pointer ...
Read more