√ 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 biar tetap dalam hidup yang serasi dan fit dalam keseharian sehingga apapun yang sobat Milano lakukan niscaya maksimal kalau kesehatan selalu dijaga. Dan besar doa kami biar semuanya juga selalu dalam lindungan Allah SWT serta apa yang sahabt Milano lakukan hari ini menjadi asbab kita mendapat Ilmu yang bermanfaat bagi diri dan masyarakat banyak pada umumnya.

Baiklah sobat Milano pada kesempatan ini kita akan membagikan perihal Cara Membuat Postingan Blogger Dengan Tampilan Photo Sampul, Kalau anda ingin tau yuuk eksklusif aja kita simak di bawah ini dan perhatikan kedo HTML nya untuk di tempel di blog  anda.

---

1. Salin isyarat 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 isyarat CSS ke template,cari isyarat 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/AVvXsEi0le6EvYe6seeLza0P0jM6ESGxfCSOJOLMaFzX9oMMU5j1fa9TfwAVgIwkYm0Y2_SM0GbnKUIXy5BT7o8_p2UxHfPmeqGFn58L_VTG3kNW0BjIdfV9M5iU_HsGmIRmdXAnj_0odocc7kLf/s1600/Alfiyah+Blogger.jpg)#DBDCDE;
border: 1px solid #F0F0F0;
}
.slide_in .left_gate1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5yimxDKA7ODqpMtSW7dfGxT0V3tyX0B5meGAEWEhThN9oTKtV5oFHwDhk0WvGn6qhbrwzcHJnma5j0o1e4GbWQNKsa_PBfafm60r-SleIutNIY545S94-m_bjUYIQ9gYYaFK8R-bHrzP/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