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!