Cara Menciptakan Postingan Blogger Dengan Tampilan Photo Sampul

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 sobat Milano lakukan pasti maksimal jikalau 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 menerima Ilmu yang bermanfaat bagi diri dan masyarakat banyak pada umumnya.

Baiklah sobat 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.

---

1. Salin instruksi 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>

1. Selanjutnya untuk menyimpan instruksi CSS ke template,cari instruksi tag di bawah

ALfiyah Info Blogger



]]> </ b: skin>

1. Kembali masuk ke Blogger Dashboar Klik Template
2. Berikutnya Tekan Tombol EDITE HTML
3. 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/AVvXsEgK2O1y1rXTW2dQHs5lq7JsYqKOT-bO7wbuuoxrimEWk01Y28VMgjbnqA0QH8PNIsE2SRe7uUDq373uvxs5i5In_YKL4XI55wvpovmU4RwM5X-HbezxhZoJ58eAhk4racyOWqeUIfDOPhlG/s1600/Alfiyah+Blogger.jpg)#DBDCDE;
border: 1px solid #F0F0F0;
}
.slide_in .left_gate1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi92x_-R0RMrIFDKrOIEquiMHQ27DYUt87xLr1_L3w75jESIhmKH72_fnXDA3DLs1T1NhvWJ1V-L1wjtZ_JVftQQ6jDiRJ3FL62pPgceOQVaFHpFKTq-OMp_QuB1-zm3Z0I4VcYmJcDRLLc/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---**/

1. Perhatikan Untuk Tag Yang bertanda Merah silahkan Ganti dengan Kontan dan alamat URL Photo anda

Demikianlah  Cara Membuat Postingan Blogger Dengan Tampilan Photo Sampul selamat mencoba dan salam blogger sukses untuk kita semua.

Bagikan Artikel ini