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

YazarWeb Türk Script -
1
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/AVvXsEgVAl8tIOFJQLzMJup67r-UPWNpQFiEjV4JmrDEDuH0vvUbiYjxrfUn-VExPgKSw7tH7ubnDKB7crunlQN1fhsVSu4AqvQsA1oLh_0QI4g6QHmhA9h3rB606iF_PLp9uqXabjGMeVr73ck/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/AVvXsEjiT8iLGcrZwI45xz8k0eVPRoOEcOkBV_S314BjDp8p520B8_vqn8xae40ey2wL0Jh04GRTwJEVDnHQ4DX9pLvgBpKggr9OPA6sPfwCoRSEXCy3r4LE82v3rVOKCx0pvILdCHGB251aivg/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/AVvXsEiUUx45DnzqbtnGQmc2nuUlUih2jNf6TMArpmDOl-uxLPln7d-yiLnWZJS4B9roaC-j3oZvUz8O54PHVJ5rEFteGlaXM4O1F6qliF4rxxN9zG13RCtIMN9-xZBSTqKgZJJtnfbx13lghBM/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/AVvXsEh61GXDntdYL1LtljJenvMDjo1Q7CcBihH2yw-kI7KPkVq1j94yEFVKxhroqgLFCjgu-vOeity0EJPpwA_H7AO2FHiVyA6Ej0HjrgWC30u_9ESgQeZ1YvPv585K1zKyix8HqA2p1P3SceQ/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/AVvXsEiaY5PKc4QTHOEhcs0DGsrmr7hQXVuu6YmIs3CWRw90oFT7TLS_AhkM1Q23N4ZwQVlM0XoZSHzdf2RD0W_C9IoymfDiApvAHQony1eT0m8vEqrpO5iRk4a7nINEoJw04byd_9nfSRrI7Tc/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/AVvXsEg5o13OfLWY4WLeH4OSJm_g-LdQyKzOrX_MCuN0-sqpJ1dqPIvoIa9evkFAq54idLiac5Qqz6WgnARlORQiL7XHKBKaP7_fJE3nR2D-OxMBeyd70lFqVvXumCuWTQdwrTk-rmz_VeDWZ-k/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.

1 Yorumlar

  1. nii12 Ocak 2021 07:58

    Takipçi mi satın almak istiyorsun? Tıkla, takipçi satın al: takipçi satın al

    Diğer alternatifler:

    Alternatif 1: ucuz takipçi

    Alternatif 2: instagram izlenme satın al

    Alternatif 3: tiktok takipçi satın al

    Alternatif 4: instagram izlenme satın al

    Alternatif 5: instagram beğeni satın al

    Alternatif 6: youtube abone satın al

    Alternatif 7: youtube izlenme satın al

    Alternatif 8: tiktok izlenme satın al


    YanıtlaSil
Daha yeni Daha eski