Blogger Yazı içinde galeri eklenti si (widget) - Blogger Arşivim - Blogger, Blogspot, Blogger Template, Blogger Widget
Anasayfa blogger eklenti widget
Blogger Yazı içinde galeri eklenti si (widget)

Blogger Yazı içinde galeri eklenti si (widget)

Customization ..... Color represents the URL of the image. Insert your images here. ..... Color represents the title of your post. ..... Color represents a description of your post. ..... Color represents the URL of your post.

DEMO: LİNK

<style type="text/css">
* {
margin:0;
padding:0;
}

body {background-color:#f5f5f5}

.avdhoot-image-gallery {
width:642px;
margin:50px auto;
}

.avdhoot-pack {
width:210px;
height:160px;
overflow:hidden;
background-color:white;
border:1px solid #ccc;
float:left;
margin:1px 1px;
font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
color:#333;
}

.avdhoot-ctr,
.avdhoot-des {
height:150px;
border:5px solid white;
background-color:#ffc;
transition:margin-top .4s ease-out .4s;
}

.avdhoot-ctr img {
width:200px;
height:150px;
padding:0 0;
margin:0 0;
border:none;
outline:none;
max-width:none;
max-height:none;
background-color:black;
}

.avdhoot-des h4,
.avdhoot-des p {
margin:0 0 .2em;
padding:0 0;
height:70px;
}

.avdhoot-des h4 {
font-size:120%;
height:auto;
}

.avdhoot-des .des {
padding:10px 12px;
overflow:hidden;
}

.avdhoot-des .more {
color:white;
text-decoration:none;
display:block;
text-align:center;
font-weight:bold;
background-color:#f9a;
height:26px;
line-height:26px;
margin:10px 0 0;
}

.avdhoot-pack:hover {border-color:#bbb}
.avdhoot-pack:hover .avdhoot-ctr {margin-top:-160px}
.avdhoot-des .more:hover {background-color:#b50b42}



</style>


<div class="avdhoot-image-gallery" id="avdhoot-image-gallery">

<div class="avdhoot-pack">
<div class="avdhoot-ctr">
<img width="200" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCh2XWqQ5X-Z63JpLVZBejYKrJlkIbHBkQMkPmbJtfYQHpl3X1rLWRtQezioXn3y7iGpT3AqA3wpxMhu5Mfr8tYiL3h8s5ZdLLccPThDs2kaQet3be5q4iRIeVGFchlpZPkTLHNu979lA/s1600/00+(7).jpg+(680%C3%971024).png" alt="beauty">
</div>
<div class="avdhoot-des">
<div class="des">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>

<div class="avdhoot-pack">
<div class="avdhoot-ctr">
<img width="200" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbNLF9Fiw83hvVNRdG2YHWelyGdCU7wJJEu-Dzhafk6Qx2g3Pxo9UIy4b84Aup4cg4Qh4kDbbgiWlc4-1sGGv-xPpiSz0pt2NCAL127_esr8pFFzzS0QaW7LcYWuh2xB9qHNGecJSVPBc/s1600/00+(8).jpg+(800%C3%971200).png" alt="beauty">
</div>
<div class="avdhoot-des">
<div class="des">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>

<div class="avdhoot-pack">
<div class="avdhoot-ctr">
<img width="200" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtQrurb1TF2e2pCMgXNts71nOw692tRZHhq7-h69la_JZYr3GNQzK3XXndtmGNMAHDyh9Yhqd8kx2HYUaQJUWMEfL0ioHXA4Q-kzYnJmVg650L_r5To_tQSTOy8WfVxslCTNkRTKX8gic/s1600/4.jpg+(800%C3%971200).png" alt="beauty">
</div>
<div class="avdhoot-des">
<div class="des">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>

<div class="avdhoot-pack">
<div class="avdhoot-ctr">
<img width="200" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsiqOKEMgzMxwnrODie0fr2Bs6WSG4jxPaLBf0PoCWTs4gCzfzeW2tCHnPnYaeD-MDIyCFtiQ_v7pYDAa5EWjI_ZPFw6qCFOk2ql1M06NYaoAwEzcSQfwJnF2hSIHFYGcpNrb8w-EVNU0/s1600/000000125270-raluca_negrea-fullsize.jpg" alt="beauty">
</div>
<div class="avdhoot-des">
<div class="des">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>

<div class="avdhoot-pack">
<div class="avdhoot-ctr">
<img width="200" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbLl2Snm98kQuXY007TMoTis_jUs7Hrzmej4Dt4Po0ukGYFZoKtQ_PEkiF9nVh4zEpvlLnd8w3oV90k2jCQ7Aehvd1irXu4soIzQR8r-TeL-SiZKWZgurnwDxny4C8oa49ScDD3MduQBI/s1600/01+(2).jpg+(680%C3%971024).png" alt="beauty">
</div>
<div class="avdhoot-des">
<div class="des">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>

<div class="avdhoot-pack">
<div class="avdhoot-ctr">
<img width="200" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLqQZbgmHJ8qyGejKP3U1EfM54_WLiqClZniGZcZg0KIP-BmM22x8TVegdUtlEvT3iE7ZaSVp-T_rjdmGTuQ0prAb-CV02GJW-LM6IzNNsxIRsTHp6vTzgRaAiqG7uZpZRCxEYh-GTYWw/s1600/little_too_big_by_pure_insomnia-d2zqnwc.jpg" alt="beauty">
</div>
<div class="avdhoot-des">
<div class="des">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
<p><a class="more" href="#">More</a></p>
</div>
</div>
</div>

<div style="clear:both;"></div>

</div>



Açıklamalar:

..... Görselin yolunu buraya girin.
..... Görselin başlığını buraya yazın.
..... Görselin açıklamasını buraya yazın.
..... Görselin URL'sini buraya girin.

Paylas:

Yazı URL'sini al.

Link (URL):
HTML link Kodu:
BB (forum) Link Kodu:
-
Etiketler: , ,
BUNLARA BAKTIN MI ?

Hiç yorum yok:

Kaydol: Kayıt Yorumları (Atom)
blogger (116) blogspot (19) ders (13) dersler (5) eklenti (30) free (1) gadget (2) hatasivecozumu (2) nedir (1) popular (20) popularposts (21) recent (1) recentposts (6) seo (2) sonsuz (1) SoraTech (1) tema (35) Teması (1) template (35) templates (1) theme (1) widget (50) yapimi (1)