Dalam desain web site atau blog banyak cara untuk membuat tampilan featured content atau post nampak profesional dan cantik dengan bantuan JQuery. Sehingga menambah jumlah ragam fetured content slider atau slide show dalam dunia desain. Sebagai peminat JQuery InsyaAllah saya akan sering mengetengahkan tutorial JQuery yang baru saya dapatkan untuk dibagi kepada teman-teman dan pengunjung blog ini.
Alhamdulillah setelah mempelajari sebuah template gratis dengan nama NewzMag - Blogger Template Demo
Lahirlah tutorial membuat featured post atau menu slider berikut:
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan Script JQuery berikut sebelum tag atau kode
4. Selanjutnya tambahkan kode CSS berikut diatas tag atau kode ]]>
/* Features */
#featured {height: 290px; overflow: hidden; background: url('http://sites.google.com/site/amatullah83/background/slide0002_background.gif') no-repeat top center; clear: both; font-size: 0.85em; margin-bottom: 5px;}
#featured .post {padding: 20px;}
#featured .post .featured-thumb {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggdJVgundI6EarGujjiVO2kGYy-jiESqEVjBKcSMqpsGD-JHj5eOCN6p1oX7NtXCY9RfjCtn0CGlknRtMgf7QhxWZjxiJCOPd8H-hB0aaJL56AZURZM7WKWObsjUcAujyNxI-gmHQPNts/s400/nothumb.gif') no-repeat center; float: left; border: 5px solid #FFFF99; overflow: hidden; height: 120px; width: 200px; margin-right: 15px;}
#featured .post .featured-thumb img {width: 200px;}
#featured .post .featured-text {padding-bottom: 10px;}
#featured .post .featured-title {font: normal 1.1em Georgia, Times, Serif; line-height: 1.1em;}
#featured .post .featured-comment {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ4_WbC8wxTsRpZ71Hx6MfJSxaNCER5Zv01BUadRFNywJX1DOkaFzxsN7HIHWUk2wx0KypQAabkcJ_m3rIHMouhvfUJ0zMyA_ixGvnz7cheOl2TMUsxlgAXIqwPxOHLqv1o8nTP0ZlEg0/s400/entry-comment.png') no-repeat left center; padding: 5px 0px 5px 20px;margin-right: 20px;}
#featured .post .featured-date {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKSSxLg60EDxJfp_0KeydD4_h4BYX27fSADeXloW0r3gCh0cTTgW8iUmTHbrsNYjo5goi9JxgK0Da2xO9xm-zpdCRVLV_LLRvphRARW3nogkqGqgMDnJySTOTnkE_hEL0SK1ax0NDRCp8/s400/entry-date.gif') no-repeat left center; padding: 5px 0px 5px 20px;margin-right: 20px;}
#featured .post .featured-meta {color: #999; clear: both; padding: 10px 0px; overflow: hidden; font-size: 0.9em;}
#featured .post .featured-read {display: block; float: right; background: #A9F5F2; width: 80px; color: #fff !important; padding: 5px 0px; text-align: center;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;}
Catatan:
Bagi sobat yang sudah terbiasa ngedit CSS kode diatas bisa sobat
modifikasi lagi menurut selera, silahkan kembangkan kreatifitas
masing-masing!#featured {height: 290px; overflow: hidden; background: url('http://sites.google.com/site/amatullah83/background/slide0002_background.gif') no-repeat top center; clear: both; font-size: 0.85em; margin-bottom: 5px;}
#featured .post {padding: 20px;}
#featured .post .featured-thumb {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggdJVgundI6EarGujjiVO2kGYy-jiESqEVjBKcSMqpsGD-JHj5eOCN6p1oX7NtXCY9RfjCtn0CGlknRtMgf7QhxWZjxiJCOPd8H-hB0aaJL56AZURZM7WKWObsjUcAujyNxI-gmHQPNts/s400/nothumb.gif') no-repeat center; float: left; border: 5px solid #FFFF99; overflow: hidden; height: 120px; width: 200px; margin-right: 15px;}
#featured .post .featured-thumb img {width: 200px;}
#featured .post .featured-text {padding-bottom: 10px;}
#featured .post .featured-title {font: normal 1.1em Georgia, Times, Serif; line-height: 1.1em;}
#featured .post .featured-comment {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ4_WbC8wxTsRpZ71Hx6MfJSxaNCER5Zv01BUadRFNywJX1DOkaFzxsN7HIHWUk2wx0KypQAabkcJ_m3rIHMouhvfUJ0zMyA_ixGvnz7cheOl2TMUsxlgAXIqwPxOHLqv1o8nTP0ZlEg0/s400/entry-comment.png') no-repeat left center; padding: 5px 0px 5px 20px;margin-right: 20px;}
#featured .post .featured-date {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKSSxLg60EDxJfp_0KeydD4_h4BYX27fSADeXloW0r3gCh0cTTgW8iUmTHbrsNYjo5goi9JxgK0Da2xO9xm-zpdCRVLV_LLRvphRARW3nogkqGqgMDnJySTOTnkE_hEL0SK1ax0NDRCp8/s400/entry-date.gif') no-repeat left center; padding: 5px 0px 5px 20px;margin-right: 20px;}
#featured .post .featured-meta {color: #999; clear: both; padding: 10px 0px; overflow: hidden; font-size: 0.9em;}
#featured .post .featured-read {display: block; float: right; background: #A9F5F2; width: 80px; color: #fff !important; padding: 5px 0px; text-align: center;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;}
5. Tambahkan kode HTML berikut diatas
atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget
" />
Ia adalah wanita yang terus hidup dalam hati suaminya sampaipun ia telah meninggal dunia. Tahun-tahun yang terus berganti tidak dapat mengikis kecintaan sang suami padanya. Panjangnya masa tidak dapat menghapus kenangan bersamanya di hati sang suami.....
" />
Sejarah telah berbicara tentang berbagai kisah yang bisa kita jadikan pelajaran dalam menapaki kehidupan. Sejarah pun mencatat perjalanan hidup para wanita muslimah yang teguh dan setia di atas keislamannya. ....
" />
Dan kemuliaan (yang sebenarnya) itu hanyalah milik Allah, milik Rasul-Nya dan milik orang-orang yang beriman, akan tetapi orang-orang munafik itu tiada mengetahui." (Qs. al-Munaafiqun: 8).....</p>
" />
Makna ‘Cinta Sejati’ terus dicari dan digali. Manusia dari zaman ke zaman seakan tidak pernah bosan membicarakannya. Sebenarnya? apa itu ‘Cinta Sejati’ dan bagaimana pandangan Islam terhadapnya?...</p>
" />
"Ingatlah hanya dengan mengingat Alloh-lah hati menjadi tentram.” (Qs. ar-Ra'd: 28) ...
Catatan: Silahkan edit kode HTML diatas sesuaikan dengan postingan pada blog sobat.
# alamat atau url link posting, tulisan berwarna merah judul postingan, tulisan berwarna hijau deskripsi singkat dari postingan sedang tulisan berwarna biru url image/ thumbnail postingan
6. Simpan template dan lihat hasilnya pada blog sobat.
Untuk lihat live demo yang sudah saya buat silahkan klik disini atau disini
Comments