Tutorial Ala Jalan Tikus

Jalantikus adalah 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 sebarberbagi akan bagikan sedikit tutorial bagaimana cara membuat widget feature ala jalantikus secara gampang seperti yang sebarberbagi gunakan dalam blog sebarberbagi.

Widget Feature ala JalanTikus

Dari pada tambah penasaran, mending simak langkah-lankah membuat widget feature ala jalantikus berikut ini:

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:

<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/AVvXsEjQIh4p3kYAVxTKsnEjBs3FlESkd7nBsgDxZiUhEdgApwu4bzSkE7dZn1um7Kq3cJuCAHW_6ma6rKP7R-_05Au9Uc3FHn5yv1vErIP2a0XSUYW8tStLgiK7JBLXfE_hnSD4Ml5Q0ckIp6w/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/AVvXsEj_QYX4myzmYIY5nd3p2gYo1yiyY96jagU58RFZg2Ulk41m4XH_QufoLXX0oWmw5GyWNt1supsQxMLefEl1oy317qHiFM1q-H1D-ulKAL0w4RlfkUns2XRUU6RTBDKS9CyrvUh4xHiw0OQ/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/AVvXsEhUOoMJI0Mf-5zJDwPzV9fgQ9yPuHwsxLsrJwUMhS6dMZ_YQ4mb2HOcLxMfsM43SizTUQhm8j6SbtfVAb03dKXsJrlmEKGLCdYPu5ryB28vgHlthSyP5t9AqWqcxiHP0UQK63bzvBGGdA8/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/AVvXsEgwh-5ez1FWx5C9MfyAFrnnxk5ExasffgR9_IIx6VReDm6KeaI9UIwOXUOvV5ztA5EeduuqiXGnTmnwOVurO61b2uGyqtedb_YgKCE7fMV6iiUCgRA2da1Bm76yJN_VBLuK2Ul7PxUNt04/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/AVvXsEh8kPWMCdwQAGqPXxj-9tZXt2Ov7jy3TUy69tUA6k5cHxFfBD8NUflz2jh8OVL-b1lCD0rCRNY7r03tOshTTW8zkpeJfLpijc7STEwalB4J04dxurFBfuAgwXq6VaunrS-MJ7fRwAsWI6g/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/AVvXsEhwBAhFnU00y-Lxx0yM-DqicX88sHqx0NN0513wof8OOllH_aLzxhA-_4kahFKLlgZQ7uhtOF7Yai710_KLiWOPjx2EfaJY3ZAjNVdwOgiip1L_Nc6DwIHeygtj6heWZZ2ERuVQdF5iYi8/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.

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.

Jika ada kendala silahkan di kolom komentar!

About Unknown

Terimakasih atas kunjungan anda, sebarberbagi adalah Media Literasi yang mengharapkan tersampainya informasi Literasi lebih dari sekadar membaca dan menulis, namun mencakup keterampilan berpikir menggunakan sumber-sumber pengetahuan dalam bentuk cetak, visual, digital, dan auditori.