Pada bahasan kali ini saya akan bagikan sedikit tutorial bagaimana cara membuat widget feature ala jalantikus secara gampang seperti yang saya gunakan dalam blog saya ini.
![]() |
Widget Feature ala JalanTikus |
- Login ke akun blogger anda, lalu pilih Template >> Edit HTML
- Letakkan kode CSS berikut sebelum kode
]]></b:skin>
.largewidget {width:100%;height:auto;} .largewidget .widget {transition: all 0.5s ease 0s;} .largewdget img, .largewidget iframe{ display:block; max-width:100%; border:none; overflow:hidden;
- Selanjutkan buat sebuah section widget di lokasi yang anda inginkan, cukup anda menambah kode berikut:
<b:section class='largewidget' id='largewidget' maxwidgets='1' showaddelement='yes'/>
- Jika sudah selesai, simpan/save template.
- Langkah selanjutnya, pilih Tata Letak/Page elements, lalu Tambahkan widget HTML/JavaScript.
Selanjutnya copy dan pastekan kode berikut:
Lalu Simpan.<style> /* CSS Featured Widget */ #featured-widget {width:148px;height:217px;background:#fff;border:1px solid #ddd;text-align:center;float:left;margin:5px 8px;} #featured-widget a:hover {text-decoration:underline} .featured-wrapper {margin:10px;} .featured-wrapper img {width:88px;height:88px;margin-bottom:5px;border-radius:9px} .featured-title a{font-weight:bold;color:#222;font-size:15px;} .featured-title {margin-bottom:5px;} .featured-wrapper span {font-size:12px;color:#999;} .featured-wrapper span a{font-size:12px;color:#999;} .featured {background: #eee;padding: 10px;font-size: 10px;color: #888;margin-top: 10px;} .featured .fa {color:#fff;padding:5px;float:left;text-align:left;margin-top:-2px;} .featured .fa-android {width:9px;height:9px;text-align:center;background:#6ab344;border-radius:100%;} .featured .fa-th{width:9px;height:9px;text-align:center;background:#FF0000;border-radius:100%;} .featured .fa-windows {width:9px;height:9px;text-align:center;background:#1f9cf4;border-radius:100%;} .featured .fa-usd{width:9px;height:9px;text-align:center;background:#FFB428;border-radius:100%;} @media screen and (max-width:640px) {#featured-widget {display:none;}} </style> <div id="featured-widget"> <div class="featured-wrapper"> <a href="/2016/06/download-sing-karaoke-by-smule-apk-vip.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhih96Jbi8pYNKHhC6-jfea1Y0i96US_a29ZEzl6-O9YC_QdzsTZrMxksrTGZF4pzz0wfW3psp8PjsFwZtGe536zHAhpshW2NZ7zwYN5sqKKIYTfWq-bwATT85O0yikERgn04PgUdtSaPo/s200/Sing%2521-Karaoke-By-Smule.png" /></a> <div class="featured-title"><a href="/2016/06/download-sing-karaoke-by-smule-apk-vip.html">Sing! Karaoke</a></div> <span>by Smule</span><br /> <span><a href="/search/label/Android">Audio & Video</a></span> </div> <div class="featured"><a href="/search/label/Android"><i class="fa fa-android"></i> ANDROID</a></div> </div> <div id="featured-widget"> <div class="featured-wrapper"> <a href="/2016/07/cara-memasang-iklan-adsense-di-bawah.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdt6r3L1v-j4x9blleOMzT7NkeidWxxu0unp1jWU7QZQfqfxF0y1UOU0mhEAOO04cjgjcAyIYapXkgGk6LyJlABHxlRWv7nnTCYtKsm9DICtqFPW2BbxNrCMHIg2Wo5pd_OoPbtTr_Tbc/s320/Google-Adsense.jpg" /></a> <div class="featured-title"><a href="/2016/07/cara-memasang-iklan-adsense-di-bawah.html">Adsense</a></div> <span>Google Inc.</span><br /> <span><a href="/search/label/Google Adsense">Earn Money</a></span><br /> </div> <div class="featured"><a href="/search/label/Google Adsense"><i class="fa fa-usd"></i> ADSENSE</a></div> </div> <div id="featured-widget"> <div class="featured-wrapper"> <a href="/2015/05/4-blogger-template-responsive-ringan.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTctykrP9Tz3Uk9PiLQ1m4wPO-fn5v4JPa7D1ae66ufajp_QPvS_hKf2XFjrkJAKeRMUGXKy0MUrsOzQAY4ZKlYPGAF7VwOYfxNnZ9VOxd9XESLUSA8f9j5AuIfS5mFHM3sHi9QlysG6c/s320/fastest-magz-v4.png" /></a> <div class="featured-title"><a href="/2015/05/4-blogger-template-responsive-ringan.html">Fastest Magz</a></div> <span>Mas Sugeng</span><br /> <span><a href="/search/label/Blogger Template">Responsive Template</a></span><br /> </div> <div class="featured"><a href="/search/label/Android"><i class="fa fa-th"></i> BLOGGER TEMPLATE</a></div> </div> <div id="featured-widget"> <div class="featured-wrapper"> <a href="/2015/05/idm-terbaru.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUk0BzPE0hDKaPLZXdRXWONEtomMdgDAL3h5JadbiS0y7DNI_jYaJORXd13xgly7sFzj4Emdu1t-xrMIExEYAoHLXBDcoaVaZ9GkJJUPcPJrXevY5WyE7JibQIVq5D2Ecskrj2eCzi5w/s200/Download+IDM+Terbaru.png" /></a></div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8468041142256895" data-ad-slot="5507701199" data-ad-format="link"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div id="featured-widget"> <div class="featured-wrapper"> <a href="/2015/05/idm-terbaru.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUB67DLdtmW-ny-klSYBCyYT511yjpRS_KjwFZmZ52ccbVTWVon-1vRXf2gLdaSxO0B1BJb9mS1CEk_hS8YCWHs8ZNE_kY7QRQues2iyqAXnoXS_07x3mqJen9-bQVg-7N9uV3_OpKW04/s1600/IDM_logo.png" /></a> <div class="featured-title"><a href="/2015/05/idm-terbaru.html">IDM Terbaru</a></div> <span>Tonec Inc.</span><br /> <span><a href="/search/label/Aplikasi">Internet & Downloader</a></span><br /> </div> <div class="featured"><a href="/search/label/Aplikasi"><i class="fa fa-windows"></i> WINDOWS</a></div> </div> <div id="featured-widget"> <div class="featured-wrapper"> <a href="/2015/06/download.update.pes.6.terbaru.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc6RN3OnMP22yIlM_NhxRLZ7DpVK6fbfQFfvER5LNtkoioejswL5HG3Wu5tPKzc3Bt24KyjmaFWh5HjC-Edx-85MYRgzcp3xv43DcBide4V3oAIPsHA8oGVV5lvA1lnCOo5aqc6fWZhtc/s1600/pes_6_icon.png" /></a> <div class="featured-title"><a href="/2015/06/download.update.pes.6.terbaru.html">PES 6 Update</a></div> <span>KONAMI</span><br /> <span><a href="/search/label/Game">Foot Ball Games</a></span><br /> </div> <div class="featured"><a href="/search/label/Aplikasi"><i class="fa fa-windows"></i> WINDOWS</a></div> </div>
- Dan lihat hasilnya!
Sekian dulu sedikit tutorial cara mudah membuat feature ala JalanTikus, semoga bermanfaat.
Jika ada kendala silahkan di kolom komentar!
40 Komentar
Wah ini yang saya cari cari , terima kasih Infonya gan
BalasHapusSama2 gan..smoga bermanfaat..
Hapusmantap ini.. jadinya bisa bikin widget yang beda dari blog blog lain
BalasHapuskeren gan, ane terapin di blog ane yg satu lg thanks :D
BalasHapusSilahkan bro, goodluck!!
HapusLovely blog yoou have here
BalasHapusDetail tutor nya gan, sangat bermanfaat. dengan widget seperti itu blog kita seperti nya lengkap
BalasHapusperlu disave ini artikelnya,,, mantabs gan
BalasHapussilahkan gan..mumpung free.. hahaha
BalasHapusmantap ini yang saya cari gan , thx infonya
BalasHapusIjin nyoba nih gan , siapa tau cocok buat blog download saya .
BalasHapussilahkan gan
BalasHapusAman gak nih gan ?
BalasHapusSelamat, smoga bermanfaat.
BalasHapusAman dari apaan gan?
BalasHapusAman dari tolakan GA GAN :D
BalasHapusGak ada hubungannya dengan GA gan, yg penting link yang dimasukkan valid. Ini hanya bagian dari desain aja.
BalasHapusNomor 3 kode nya diletakkan dimana gan?
BalasHapussesuai posisi yang di inginkan gan yg penting harus diantara .
BalasHapusmisalnya: diatas widget blog post.
izin nyoba
BalasHapuswkwk.. ada hubungan apa adsense sama google... pertanyaan bod*h
BalasHapusAdsense itu anaknya google.. Wkwkwkwk
BalasHapusada beberapa widget yang mengandung script yang dilarang oleh GA, .. lebih jelasnya baca peraturan google adsense...
BalasHapusSaya melihat navigasi di blog ini menutupi laman jika di versi mobile ada baiknya diperbaiki agar semakin banyak pengunjung
BalasHapussalah tulis >_< maksudnya adsense sama widget... hadehhh
BalasHapusterima kasih sarannya mas Ihsan Moeslim... akan saya usahakan untuk memperbaikinya.
BalasHapusSama sama mas,
BalasHapusmas, untuk membuat gambarnya agar menyesuaikan ukuran tumbnail gabisa ya? soalnya gambarku lebar dan hasilnya ukuran gambar dipaksa ngikutin ukuran tumbnail, jadi jelek. Klo tag "src img" nya ga diisi apa bisa dia keluar gambar otomatis?
BalasHapusItu settingan gambar persegi, kalo ubah ukuran gambar dikode CSS ini .featured-wrapper img {width:88px;height:88px;
BalasHapusItu link gambar semuanya isi manual, jadi isi gambar sesuai dengan postingan masing2
ok dicoba dlu, terimakasih balasannya
BalasHapusiya sama-sama..semoga membantu..
BalasHapusTanpa otak atik kode maksudnya , biar otomatis
BalasHapusMas kalo ingin isi featurepostnya cuma label tertentu bagaimana? Apanya yg diganti?
BalasHapuswah bisa langsung di praktekin nih tutornya. thanks gan :D
BalasHapusHarus pake javascript gan,, tutorialnya byk sih.. Ane udh pake di blogsikula.blogspot.com
BalasHapusbg aku dari aceh juga. kalo boleh request, bisa ga buatin artikel terkait seperti jalantikus
BalasHapusSS nya?
BalasHapussilahkan bro..
BalasHapuswaktutikus.blogspot.com
BalasHapusBagus blognya..
BalasHapus