Ads

Cara Mudah Membuat Widget Feature ala JalanTikus

Jalantikus saat telah menjadi salah satu website yang sangat populoer dikalangan netizen di Indonesia, selain menyediakan berbagai macam aplikasi yang dapat diunduh secara gratis website jalan tikus juga memiliki beberapa fitur/widget yang ingin ditiru oleh banyak blogger saat ini. Salah satunya adalah widget feature ala Jalantikus.
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
Dari pada tambah penasaran, mending simak langkah-lankah membuat widget feature ala jalantikus berikut ini:
  1. Login ke akun blogger anda, lalu pilih Template >> Edit HTML
  2. 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;
  3. 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'/>
  4. Jika sudah selesai, simpan/save template.
  5. Langkah selanjutnya, pilih Tata Letak/Page elements, lalu Tambahkan widget HTML/JavaScript.
    Selanjutnya copy dan pastekan kode berikut:
    <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>
    Lalu Simpan.
  6. Dan lihat hasilnya!
Aturlah CSSnya sesuai dengan kebutuhan blog Anda, seperti: width, height, color, dll. Ganti juga link icon dan link judul sesuai dengan postingan Anda.

Sekian dulu sedikit tutorial cara mudah membuat feature ala JalanTikus, semoga bermanfaat.

Jika ada kendala silahkan di kolom komentar!

Berikan Komentar Anda

40 Komentar

  1. Wah ini yang saya cari cari , terima kasih Infonya gan

    BalasHapus
  2. mantap ini.. jadinya bisa bikin widget yang beda dari blog blog lain

    BalasHapus
  3. keren gan, ane terapin di blog ane yg satu lg thanks :D

    BalasHapus
  4. Lovely blog yoou have here

    BalasHapus
  5. Detail tutor nya gan, sangat bermanfaat. dengan widget seperti itu blog kita seperti nya lengkap

    BalasHapus
  6. perlu disave ini artikelnya,,, mantabs gan

    BalasHapus
  7. silahkan gan..mumpung free.. hahaha

    BalasHapus
  8. mantap ini yang saya cari gan , thx infonya

    BalasHapus
  9. Ijin nyoba nih gan , siapa tau cocok buat blog download saya .

    BalasHapus
  10. Selamat, smoga bermanfaat.

    BalasHapus
  11. Aman dari tolakan GA GAN :D

    BalasHapus
  12. Gak ada hubungannya dengan GA gan, yg penting link yang dimasukkan valid. Ini hanya bagian dari desain aja.

    BalasHapus
  13. Nomor 3 kode nya diletakkan dimana gan?

    BalasHapus
  14. sesuai posisi yang di inginkan gan yg penting harus diantara .
    misalnya: diatas widget blog post.

    BalasHapus
  15. wkwk.. ada hubungan apa adsense sama google... pertanyaan bod*h

    BalasHapus
  16. Adsense itu anaknya google.. Wkwkwkwk

    BalasHapus
  17. ada beberapa widget yang mengandung script yang dilarang oleh GA, .. lebih jelasnya baca peraturan google adsense...

    BalasHapus
  18. Saya melihat navigasi di blog ini menutupi laman jika di versi mobile ada baiknya diperbaiki agar semakin banyak pengunjung

    BalasHapus
  19. salah tulis >_< maksudnya adsense sama widget... hadehhh

    BalasHapus
  20. terima kasih sarannya mas Ihsan Moeslim... akan saya usahakan untuk memperbaikinya.

    BalasHapus
  21. mas, 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?

    BalasHapus
  22. Itu settingan gambar persegi, kalo ubah ukuran gambar dikode CSS ini .featured-wrapper img {width:88px;height:88px;

    Itu link gambar semuanya isi manual, jadi isi gambar sesuai dengan postingan masing2

    BalasHapus
  23. ok dicoba dlu, terimakasih balasannya

    BalasHapus
  24. iya sama-sama..semoga membantu..

    BalasHapus
  25. Tanpa otak atik kode maksudnya , biar otomatis

    BalasHapus
  26. Mas kalo ingin isi featurepostnya cuma label tertentu bagaimana? Apanya yg diganti?

    BalasHapus
  27. wah bisa langsung di praktekin nih tutornya. thanks gan :D

    BalasHapus
  28. Harus pake javascript gan,, tutorialnya byk sih.. Ane udh pake di blogsikula.blogspot.com

    BalasHapus
  29. bg aku dari aceh juga. kalo boleh request, bisa ga buatin artikel terkait seperti jalantikus

    BalasHapus
  30. waktutikus.blogspot.com

    BalasHapus