Cara Membuat Postingan Blogger Dengan Tampilan Photo Sampul

Saya akan tampilkan di bawah, suatu tempat di daerah Sukabumi selatan.

---

• Salin kode dibawah tempelkan dipostingan blogger Anda,dibagian posting HTML.


ALfiyah Info 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>




• Selanjutnya untuk menyimpan kode CSS ke template,cari kode tag di bawah


ALfiyah Info Blogger



]]> </ b: skin>





• Kembali masuk ke Blogger Dashboar Klik Template
• Berikutnya Tekan Tombol EDITE HTML
• Tempelkan Kode Di Bawah Ini Tepat Diatas Kode Tag ]]> </ b: skin>


ALfiyah Info Blogger



/**--- 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/AVvXsEj3rWUOZNOBrT1lYqvIsz3Xa8KutG2u1HgOHkgMzP8big8c-oWUHTV4n3IO5xRhgi0lhUEL2Kg49MRKeR3ECejUKmvs9mqDsKYyxz4PxECrtwabMWFkPhca6uDVRitOBXuMfT4m1TCr-8jx/s1600/Alfiyah+Blogger.jpg)#DBDCDE;
border: 1px solid #F0F0F0;
}
.slide_in .left_gate1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHcvvDVfvN05U5l1QzpnRUFc-mbuHU9h6aZfa4Z0z_HWIRYoR6cOaQ5v3x3ohXV7WSbKrxRVMyI4jeBekGdRDZwmGW863Kxl30mqQM0kd531J1ikTl25lJc5jChewvPnDq8Slnr1keSXx2/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---**/






• 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.

---

---