Cara Membuat Postingan Blogger Dengan Tampilan Photo Sampul

Bismillah,, selamat pagi semua pengunjung setia blog Milano-ruus yang semoga tetap dalam hidup yang harmonis dan fit dalam keseharian sehingga apapun yang sahabat Milano lakukan pasti maksimal jika kesehatan selalu dijaga. Dan besar doa kami semoga semuanya juga selalu dalam lindungan Allah SWT serta apa yang sahabt Milano lakukan hari ini menjadi asbab kita mendapatkan Ilmu yang bermanfaat bagi diri dan masyarakat banyak pada umumnya.

Baiklah sahabat Milano pada kesempatan ini kita akan membagikan tentang Cara Membuat Postingan Blogger Dengan Tampilan Photo Sampul, Kalau anda penasaran yuuk langsung aja kita simak di bawah ini dan perhatikan kedo HTML nya untuk di tempel di blog anda.

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;">
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/AVvXsEgR3yz-NoGYm4YUnWSxiHGcduxeukgActOt_VfZ1DZhZvVlr8v-HOYP8shcIHLBEJHRiFA44oZlgkO-09hf2Fe8j83D6qQXheXhrMI7QkrpoyQWdsTjPsHWOR24Gx3W3ElKM14vq1X9E2d9/s1600/Alfiyah+Blogger.jpg)#DBDCDE;
border: 1px solid #F0F0F0;
}
.slide_in .left_gate1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHb4v7OdsIB0nLirrsMrxMBixZdEshhn_OdGDbx0ePmHfta0DCD5ID4WWUXeJN1emLKWDtV5yNbvnMvgm1DXCXrBpyiCQY1RRptyIJGVvpwh750OoOm7Yx3icYAbfYz0zFA6F6VIRBUmSQ/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---**/