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.
- Selanjutnya untuk menyimpan kode CSS ke template,cari kode tag di bawah
- Kembali masuk ke Blogger Dashboar Klik Template
- Berikutnya Tekan Tombol EDITE HTML
- Tempelkan Kode Di Bawah Ini Tepat Diatas Kode Tag ]]> </ b: skin>
- 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.
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>
ALfiyah Info Blogger
]]> </ 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/AVvXsEg-K3FUKOEsbki4zwNEjEN07DVRl7hrVcU_Y-IHIgFIIXHTKf6tqDuhQ7qW3vqoWc5Bg1OOIcgS_llpt3fxywQygoLUBsfrWqlc-uxu6qlnDseTb4f3gYSjuYzDzVDQ7_KZldZHnPSb_QpK/s1600/Alfiyah+Blogger.jpg)#DBDCDE;
border: 1px solid #F0F0F0;
}
.slide_in .left_gate1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4JcQqaILBdu5-B2Dm4gG3zGJl49t31u2q1kbISTC0HQ3040cFhix4Wulw39GwVtKmtCIcKsR7zOD7me-Ut5qw7ggbttKGCAIHHZjBHpC1hOA89nPCBHBNrfmLtDfrWaMFHQJISambo7fa/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---**/
Share this
EmoticonEmoticon