Cara Membuat Postingan Blogger Dengan Tampilan Photo Sampul

Written by Muhamad Hamdan on Saturday Peb 8th 2014

---

Assalamu Alaikum ...Sohib semu semoga hari ini ada dalam lindungan Allah SWT.Pada malam ini kita jumpa lagi dengan artikel yang mungkin Shohib sudah pada tahu,tapi juga masih ada yang belum mengetahui Cara Membuat Postingan Blogger Dengan Tampilan Photo Sampul Shohib boleh mengambil atau memasangnya untuk sekedar menghiasi Blogger Shohib.Kita boleh mengabil Photo dari lokasi tertentu yang dianggap oleh Shohib pemandangan yang indah.Seperti Photo yang Saya akan ditampilkan dibawah,diambil dari 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/AVvXsEi5Kmio7uRZmb2Sq9Anh6rmiXjhp9wQiMsEHpYlwNQ3ZeMVmFl5INqXB-L9TMXInSBWXAamgMvJg7liSXYUT82j3atqTqw1Lp4Tr53FxhzL3p-az6-aDc8h7I-fJ3v3WN5nQFDm37jGmL25/s1600/Alfiyah+Blogger.jpg)#DBDCDE;
border: 1px solid #F0F0F0;
}
.slide_in .left_gate1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgmmdfydsYlk-cWqgRFfKqsL9zPGhtRsTuSKiCB5JyMHOnwiCFOr83LeNrdoYVqGBs5VFWn_t8pv6K3KJEn4GKzi0cMETbmwdq6b-UxdTMRX-TwKjZ6ENWoWkQurNbbIs_oHscM8XBTEHF/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.

---

Sekarang Shohib Bisa membuat postingan blogger dengan tampilan photo sampul,jika Shohib ingin mengunjungi alamat Photo yang ditayangkan silahkan Shohib untuk Kontak Saya,memang lokasi ini sudah banyak pengunjung dari berbagai daerah di Indonesia.Lokasi ini sangat strategis dan gampang untuk di kunjungi,karena tidak jauh dari jalan raya,kalau yang sudah tahu daerah Sukabumi Surade sampai Ujung Genteng pasti mengenal Photo yang ditampilkan ini.

---