Alhamdulillah akhirnya bisa ngepost lagi, Hari ini saya akan ngepost tentang Membuat Blog Pager Melayang.
Blog pager adalah salah satu elemen paling penting pada sebuah blog, karena blog pager berfungsi sebagai navigasi antar halaman blog. mungkin tidak banyak yang tahu bahwa blog pager bawaan blogger bisa di modifikasi, bisa berupa gambar atau di ubah posisinya. Nah kali ini As-par Blog akan share cara mengubah blog pager ini menjadi gambar dalam posisi melayang dan menambahkan efek opacity pada gambarnya.
Blog pager adalah salah satu elemen paling penting pada sebuah blog, karena blog pager berfungsi sebagai navigasi antar halaman blog. mungkin tidak banyak yang tahu bahwa blog pager bawaan blogger bisa di modifikasi, bisa berupa gambar atau di ubah posisinya. Nah kali ini As-par Blog akan share cara mengubah blog pager ini menjadi gambar dalam posisi melayang dan menambahkan efek opacity pada gambarnya.
Jika ingin melihat demo nya bisa di lihat pada blog ini dan screenshot di bawah ini.
Jika sobat berminat mengubah blog pager yang ada di blogmu sekarang dengan blog pager yang ada di blog saya silahkan ikuti langkah langkah mudah di bawah ini :
- Login ke akun blogger sobat.
- Pergi ke halaman edit Template >> Klik edit HTML >> Klik Lanjutkan.
- Cari kode </head>
- Copy paste kode di bawah ini tepat di atas kode </head>.
- Selanjutnya Klik Simpan Template.
/* Blog pager from As-par Blog */
/* http://aspar69susanto.blogspot.com */
<style>
#blog-pager a{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;height:80px;opacity:0.4;overflow:hidden;position:fixed;text-indent:-9999px;top:50%;width:80px;z-index:9;margin:0 0 0 5px}
.blog-pager-older-link{background:url(http://4.bp.blogspot.com/-18bHuKvg5ao/TnGg6N1EtWI/AAAAAAAAA6A/ZhKPackZ4WQ/s400/Next.png) no-repeat scroll 0 0 transparent;right:5px;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;transition:all 0.3s ease-in;}
.blog-pager-newer-link{background:url(http://4.bp.blogspot.com/-QbeWH7P8OSE/TnGg_zIB6nI/AAAAAAAAA6I/TmNTauVcj3U/s400/Prev.png) no-repeat scroll 0 0 transparent;left:0;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;-webkit-transition:all 0.3s ease-in;transition:all 0.3s ease-in;}#blog-pager a:hover{opacity:1}
</style>
Mungkin itu saja yang bisa saya sampaikan pada postingan Membuat Blog Pager Melayang, semoga bermanfaat, jika ada yang ingin ditanyakan bisa lewat form komentar di bawah ini terimakasih....
Tag :
Blogging
18 Comments for "Membuat Blog Pager Melayang"
hoho mantaff :D
Makasih brow.... ;)
Keren banget ya,,salam sukses selalu
Makasih sob.... :) salam sukses balik....
keren. patut dicoba
Silahkan dicoba, semoga bermanfaat.... :)
Langsung praktek..
makasih tipsnya gan...
koment back ya
infojadull.blogspot.com
Silahkan di praktekkan....
Sama-sama gan.... :)
mantap tutornya
Salam Sehat Sesama Anggota Grup Republik Blogger Nusantara (Darmawan Saputra)
Terimakasih sob....
Salam sehat anggota RBN balik sob.... ;)
keren neh aku coba ya
Silahkan di coba sob.... ;)
kak as-par aku mau nanya dong, gimana sih cara menambahkan scrool di blog post
tambahkan kode di bawah ini tepat di atas ]]></b:skin>,
.blog-posts.hfeed {
border: 1px solid #D4D4D4;
padding: 5px;
border-bottom: none;
background: #FAFAFA;
height: 300px;
}
Atur ketinggian sesuai dengan selera sobat.... :)
keren sob, udah kaya layar sentuh tuh tinggal geser kanan kekiri,hehe
@Rizal Uye Betul juga tuh sob hehehehe, gak kepikiran saya \o/
Mantap kang.. info yang menarik
Makasih juga komentarnya kang.... :)
Silahkan sobat blogger berkomentar namun dilarang dengan keras menyisipkan link hidup maupun link mati !!!! demi kenyamanan kita bersama.
Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.