Cara Membuat Postingan Blogger Dengan Tampilan Photo Sampul
- Salin kode dibawah tempelkan dipostingan blogger Anda,dibagian posting HTML.
- Selanjutnya untuk menyimpan kode CSS ke template,cari kode tag di bawah
- Kembali masuk ke Blogger Dashboar Klik Template
- Berikutnya Tekan Tombol EDITE HTML
- Tempelkan Kode Di Bawah Ini Tepat Diatas Kode Tag ]]> </ b: skin>
- Perhatikan Untuk Tag Yang bertanda Merah silahkan Ganti dengan Kontan dan alamat URL Photo Shohib.
- Selesai Sudah Postingan Cara Membuat Postingan Blogger Dengan Tampilan Photo Sampul ,Insya Allah kita jumpa lagi,Salam Blogger.
<div class="cover slide_in">
<div class="right_gate1">
</div>
<div class="left_gate1">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: center;">
SHOHIB BISA MENULIS KETERANGAN PHOTO DISINI </div>
]]> </ b: skin>
/**--- Hiding Blog Content With Images Starts here---**/
.cover {
position: relative;
width: 540px;
height: 282px;
margin: 20px auto;
background-color: #eee;
z-index: 1;
padding: 10px;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.slide_in {
overflow: hidden;
}
.left_gate1 {
position: absolute;
background: #DBDCDE;
bottom: 0;
right: 50%;
left: 0;
top: 0;
border: 1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.right_gate1 {
position: absolute;
background: #DBDCDE;
bottom: 0;
left: 50%;
right: 0;
top: 0;
border: 1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.slide_in .right_gate1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX8VojkwsrVyvTMgQuwKEqkT2f7AhPcS_wUb-y2TvANlhUhlS5DLkcxnQUyOOgD7tFkjqWplcWfXxnVsowW_4XmqhReM-pzSd2DKsJleWm6RdD3aKRbuXWyewlvwQzzhv4s0pIiX6molge/s1600/Alfiyah+Blogger.jpg)#DBDCDE;
border: 1px solid #F0F0F0;
}
.slide_in .left_gate1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIQJYHJxDQe5oLGJLO_7f41G3W_qsRkZOnA83_FEDH0cHfGh19M5sRjGpLPwsLzZtxwhZHxNnbap5c_NVD-JWZYV9z6NkKMyEfHJB53tHLS7E1WlYa6jHizNM8y2G8KmI8UWeRKDDwJ5kA/s1600/alfiyah+info+blogger.jpg)#DBDCDE;
border: 1px solid #F0F0F0;
}
.cover:hover .right_gate1 {
left: 100%;
right: -50%;
}
.cover:hover .left_gate1 {
right: 100%;
left: -50%;
}
/**--- Hiding Blog Content With Images Ends here---**/
.png)
.png)

.png)














