Mengganti background area postingan dengan gambar dan animasi
Berikut langkahnya ;
1.Login Ke akun blog sobat
2.Pilih Rancangan/Tata Letak---> Edit HTML
3.Cari Kode ]]></b:skin> (gunakan ctrl f atau F3 agar memudahkan pencarian)
4.Letakan Kode dibawah ini Tepat Diatas Kode ]]></b:skin>
.post{border-radius:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggw9iRR6tF6jr3ii4EZklHhlrUsekRDQJbofxyeFMZBXf6M6bX3kWhn-nM-ozwlPW3KJPiJdecrnqCnuBvnjUWl47J0DiU61P5g8bxi6DCaM9l4AS-ORBPFM1SBZ4FdfDQu6Q5vw_0MJrl/s1600/background-judul-posting.gif) no-repeat center;background-size:100% 100%;border:1px solid #f00;
} /* silahkan di edit stylenya sesuai selera*/
.post:hover{-moz-box-shadow:0 0 70px #F80505;-webkit-box-shadow:0 0 70px #F80505;box-shadow:0 0 40px #F80505;
} /*memberikan efek saat dicursor*/
5.Simpan Templatenya Dan Lihat Hasilnya
6.Note untuk kode background-size, penggunaannya tergantung pada lebar dan besar gambar, apabila background-size:100% 100%; berarti background penuh tidak mengulang. untuk posisi, apabila background pengen mengulang gunakan kode repeat-center,(ada beberapa pilihan posisi background seperti fixed dll). untuk lebih jelasnya lakukan eksperimen sendiri.
Kode url warna biru bisa anda ganti dengan url gambar and, dan kode-kode warna silahkan di edit sesuai warna kesukaan anda.
selamat mencoba..
Artikel Terkait :
Berikut langkahnya ;
1.Login Ke akun blog sobat
2.Pilih Rancangan/Tata Letak---> Edit HTML
3.Cari Kode ]]></b:skin> (gunakan ctrl f atau F3 agar memudahkan pencarian)
4.Letakan Kode dibawah ini Tepat Diatas Kode ]]></b:skin>
.post{border-radius:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggw9iRR6tF6jr3ii4EZklHhlrUsekRDQJbofxyeFMZBXf6M6bX3kWhn-nM-ozwlPW3KJPiJdecrnqCnuBvnjUWl47J0DiU61P5g8bxi6DCaM9l4AS-ORBPFM1SBZ4FdfDQu6Q5vw_0MJrl/s1600/background-judul-posting.gif) no-repeat center;background-size:100% 100%;border:1px solid #f00;
} /* silahkan di edit stylenya sesuai selera*/
.post:hover{-moz-box-shadow:0 0 70px #F80505;-webkit-box-shadow:0 0 70px #F80505;box-shadow:0 0 40px #F80505;
} /*memberikan efek saat dicursor*/
5.Simpan Templatenya Dan Lihat Hasilnya
6.Note untuk kode background-size, penggunaannya tergantung pada lebar dan besar gambar, apabila background-size:100% 100%; berarti background penuh tidak mengulang. untuk posisi, apabila background pengen mengulang gunakan kode repeat-center,(ada beberapa pilihan posisi background seperti fixed dll). untuk lebih jelasnya lakukan eksperimen sendiri.
Kode url warna biru bisa anda ganti dengan url gambar and, dan kode-kode warna silahkan di edit sesuai warna kesukaan anda.
selamat mencoba..
Artikel Terkait :
- About Sitelink
- Add Emoticon On Thread Comments
- Animasi Link With CSS
- Animasi Loading Blog
- Animated Window Opener
- Auto Image Zoom With CSS Ease-Out
- Blogger Logo With CSS
- CSS Drop Down Multi Sub Menu
- CSS Left Flayout Menu
- CSS Left Rocket Dock Menu
- CSS Menu Drop Down
- CSS Menu Drop Down Melayang
- CSS Menu Horisontal
- CSS Menu Pull Up Multi Sub Menu
- CSS Page Peel Effect
- CSS Popup Image Viewer
- CSS Red Menu Horisontal
- CSS Right Flayout Menu
- CSS Sidebar Slide Menu
- CSS Slide Table Content
- CSS Smart Image Enlarger
- CSS Text Shadow
- CSS Transform Text Shadow
- CSS Zoom Menu Drop Down
- CSS3 Gradient Menu Buttons
- Cara Membuat Spoiler Pada Blog
- Cara Ganti Posting Lebih Baru-Lama-Beranda
- Cara Kompres CSS dan Mempercepat Loading Blog
- Cara Mebuat Daftar Isi Model Scroll
- Cara Memasang File Swf diBlog
- Cara Memasang Meta Tag Google
- Cara Memasang Meta Tag Yahoo
- Cara Memasang Widget Profil twiter
- Cara Memasang Widget Read More Otomatis
- Cara Membuat Animasi Menu Pull Up
- Cara Membuat Artikel di Blog
- Cara Membuat Background Postingan Berubah Warna
- Cara Membuat Blogazine Post
- Cara Membuat Border Area Posting
- Cara Membuat Browser Blog Bergerak Liar
- Cara Membuat Drop Cap
- Cara Membuat Garis Tepi Pada Latar Posting
- Cara Membuat HTML Blog Valid
- Cara Membuat Judul Posting Berjalan
- Cara Membuat Kursor Bertabur Bintang
- Cara Membuat Link Bergoyang Bila di Cursor
- Cara Membuat Link Seperti Pelangi
- Cara Membuat Link Terbuka di Tab Baru
- Cara Membuat Menu Info Slide
- Cara Membuat Navigasi Chunky
- Cara Membuat Recent Comment
- Cara Membuat Recent Post Slide Show
- Cara Membuat Screensaver Di Blog
- Cara Membuat Tag Cloud / Label Cloud
- Cara Membuat Tanda Tangan di Bawah Posting
- Cara Membuat Tulisan atau Iklan Berjalan
- Cara Menampilkan Navbar Blogger Auto Hide
- Cara Mengambil Screenshoot
- Cara Menonaktifkan Klik Kanan Pada Blog
- Cara Pasang Anti Copy Paste
- Cara memasang Lencana Profil Facebook di Blog
- Cara membuat menu tab Drop Down Horizontal
- Cara membuat judul postingan berkedip
- Create Fixed Widget Sponsor
- Cursor Style
- Custom Tabel
- Disable Open Source
- Easy Loading Blog - New !!
- Expand Image Script
- Facebook Logo With CSS
- Fonts Keren Buat Blog
- Free Web Hosting
- Ganti background posting dengan gambar
- HTML Card Icons
- Hapus Navbar Secara Permanen
- JS Page Peel Effect
- Macam - macam Border
- Macam - macam Spoiler
- Magnify Image Zoom
- Memasang Ikon Didepan Judul Posting
- Memasang Ikon didepan Label
- Memberi Background Pada Post Comment
- Memberi Efek Bersinar Pada Kotak Komentar
- Membuat Scroll pada Arsip Blog dan Label
- Membuat Efek Blur Otomatis
- Membuat Efek Bersinar di Sekitar Elemen
- Membuat Efek Blur Pada Gambar
- Membuat Link Mengeluarkan Cahaya Kuning
- Membuat Link Terbuka Otomatis Bila DiCursor
- Membuat Link mengeluarkan Bintang Saat di Mouse
- Membuat Menu Navigasi Breadcrumbs pada Blog
- Membuat Menu Slide Out Navigation
- Membuat Sidebar Dalam Kotak Terpisah
- Membuat Tab Menu View Tanpa Edit HTML
- Membuat Tombol Home Back To Top Dan Bottom
- Membuat Tombol Reply pada Komentar
- Membuat Widget Follower Melayang
- Membuat Widget Hanya Tampil di Beranda
- Membuat gambar menjadi besar bila dilalui Cursor
- Mempercepat Loading Blog Dengan Script
- Menambahkan Recent Post dan Recent Comment
- Menampilkan Hanya Judul Posting di Beranda
- Menghapus Show All Post atau Show Older Post
- Menghilangkan Attribute Powered by Blogger
- Mengintip Design HTML Template Blog
- Menu Drop Up Melayang
- Merubah Tampilan Kotak Pencarian
- Modifikasi Spoiler Button
- Neon Light Text Animmator
- Read More Dengan icon
- Show Hide Comments With JS
- Show Hide Komentar Dengan Spoiler
- Simple Animasi Link
- Slide Out Komentar
- Slide Out Sidebar Content
- Slideshow Image Background
- Submit Sitemap Blog ke Google
- Tips Mendapatkan Backlink Gratis
- Tooltip Untuk Setiap Link Dengan Gambar
- Translucent Slideshow Script
- menghilangkan angka jumlah label postingan
- tips membuat logo
Posted On : 24 Agustus 2011 Time : 23.36