Cara Membuat Widget "Rekomendasi Anime Spring 2014"

Ardi21_ansyah

Blogger, Widget

Jumat, 30 Mei 2014

Cara Membuat Widget "Rekomendasi Anime Spring 2014"

Kali ini saya akan memberikan Widget yang sering dipakai di blog yang menyediakan link

DOWNLOADAN ANIME, apalagi sekarang sedang ada project anime spring. langsung saja

To The Point

Pertama-tama COPY script di bawah ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h2 style="-webkit-transition: all 0.3s ease-in-out; background-color: white; color: white; font-family: 'Transformers Movie', 'Transformers Movie', 'Transformers Movie', 'Transformers Movie', 'Transformers Movie'; font-size: 20pt; font-weight: 200; letter-spacing: 0.01em; line-height: 30px; margin: auto; outline: none; padding: 10px; text-align: center; transition: all 0.3s ease-in-out; vertical-align: baseline;">
<a href="http://sahabatfilannime.blogspot.com/2014/05/cara-membuat-widget-rekomendasi-anime.html" rel="bookmark" style="color: #1bc7a5; margin: 0px; outline: none; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="Rekomendasi Anime Spring 2014">Rekomendasi Anime Spring 2014</a></h2>
<div>
<div class="widget-content" style="color: #666666; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px;">
<div id="gambarbawahposting" style="overflow: hidden; width: 669.03125px;">
<ul style="list-style: none; margin: 0px; padding: 0px;">
<li style="display: block; float: left; line-height: 1.5em; list-style: none outside none; margin: 0px 3px 5px 0px; overflow: hidden; padding: 1px; position: relative; width: 160.5625px;"><span class="gambar"><img src="http://i.imgur.com/n0nIYIt.jpg" style="height: auto; max-width: 100%;" /></span><span class="judul" style="background: none 0% 0% repeat scroll rgba(22, 22, 22, 0.901961); bottom: 0px; display: block; height: 25px; margin: 0px; overflow: hidden; padding: 2px 2px 0px 5px; position: absolute; width: 162.5625px;"><a href="http://filannime.blogspot.com/search/label/Yu-Gi-Oh" style="color: white; font-weight: bold; text-decoration: none;" target="_blank">Yu-Gi-Oh! Arc-V</a></span></li>
<li style="display: block; float: left; line-height: 1.5em; list-style: none outside none; margin: 0px 3px 5px 0px; overflow: hidden; padding: 1px; position: relative; width: 160.5625px;"><span class="gambar"><img src="http://cdn.myanimelist.net/images/anime/12/58163.jpg" style="height: auto; max-width: 100%;" /></span><span class="judul" style="background: none 0% 0% repeat scroll rgba(22, 22, 22, 0.901961); bottom: 0px; display: block; height: 25px; margin: 0px; overflow: hidden; padding: 2px 2px 0px 5px; position: absolute; width: 162.5625px;"><a href="http://filannime.blogspot.com/search/label/Keroro%202014" style="color: white; font-weight: bold; text-decoration: none;" target="_blank">Keroro (2014)</a></span></li>
<li style="display: block; float: left; line-height: 1.5em; list-style: none outside none; margin: 0px 3px 5px 0px; overflow: hidden; padding: 1px; position: relative; width: 160.5625px;"><span class="gambar"><img src="http://i.imgur.com/57bPmWR.jpg" style="height: auto; max-width: 100%;" /></span><span class="judul" style="background: none 0% 0% repeat scroll rgba(22, 22, 22, 0.901961); bottom: 0px; display: block; height: 25px; margin: 0px; overflow: hidden; padding: 2px 2px 0px 5px; position: absolute; width: 162.5625px;"><a href="http://filannime.blogspot.com/search/label/Ryuugajou" style="color: white; font-weight: bold; text-decoration: none;" target="_blank">Ryuugajou Nanana</a></span></li>
<li style="display: block; float: left; line-height: 1.5em; list-style: none outside none; margin: 0px 3px 5px 0px; overflow: hidden; padding: 1px; position: relative; width: 160.5625px;"><span class="gambar"><img src="http://cdn.myanimelist.net/images/anime/4/60431.jpg" style="height: auto; max-width: 100%;" /></span><span class="judul" style="background: none 0% 0% repeat scroll rgba(22, 22, 22, 0.901961); bottom: 0px; display: block; height: 25px; margin: 0px; overflow: hidden; padding: 2px 2px 0px 5px; position: absolute; width: 162.5625px;"><a href="http://filannime.blogspot.com/search/label/Haikyuu" style="color: white; font-weight: bold; text-decoration: none;" target="_blank">Haikyuu!!</a></span></li>
<li style="display: block; float: left; line-height: 1.5em; list-style: none outside none; margin: 0px 3px 5px 0px; overflow: hidden; padding: 1px; position: relative; width: 160.5625px;"><span class="gambar"><img src="http://cdn.myanimelist.net/images/anime/11/61519.jpg" style="height: auto; max-width: 100%;" /></span><span class="judul" style="background: none 0% 0% repeat scroll rgba(22, 22, 22, 0.901961); bottom: 0px; display: block; height: 25px; margin: 0px; overflow: hidden; padding: 2px 2px 0px 5px; position: absolute; width: 162.5625px;"><a href="http://filannime.blogspot.com/search/label/Mekaku%20City%20Actors" style="color: white; font-weight: bold; text-decoration: none;" target="_blank">Mekakucity Actors</a></span></li>
<li style="display: block; float: left; line-height: 1.5em; list-style: none outside none; margin: 0px 3px 5px 0px; overflow: hidden; padding: 1px; position: relative; width: 160.5625px;"><span class="gambar"><img src="http://cdn.myanimelist.net/images/anime/7/61053.jpg" style="height: auto; max-width: 100%;" /></span><span class="judul" style="background: none 0% 0% repeat scroll rgba(22, 22, 22, 0.901961); bottom: 0px; display: block; height: 25px; margin: 0px; overflow: hidden; padding: 2px 2px 0px 5px; position: absolute; width: 162.5625px;"><a href="http://filannime.blogspot.com/search/label/No%20Game%20No%20Life" style="color: white; font-weight: bold; text-decoration: none;" target="_blank">No Game No Life</a></span></li>
<li style="display: block; float: left; line-height: 1.5em; list-style: none outside none; margin: 0px 3px 5px 0px; overflow: hidden; padding: 1px; position: relative; width: 160.5625px;"><span class="gambar"><img src="http://cdn.myanimelist.net/images/anime/3/60551.jpg" style="height: auto; max-width: 100%;" /></span><span class="judul" style="background: none 0% 0% repeat scroll rgba(22, 22, 22, 0.901961); bottom: 0px; display: block; height: 25px; margin: 0px; overflow: hidden; padding: 2px 2px 0px 5px; position: absolute; width: 162.5625px;"><a href="http://filannime.blogspot.com/search/label/Fairy%20Tail" style="color: white; font-weight: bold; text-decoration: none;" target="_blank">Fairy Tail</a></span></li>
<li style="display: block; float: left; line-height: 1.5em; list-style: none outside none; margin: 0px 3px 5px 0px; overflow: hidden; padding: 1px; position: relative; width: 160.5625px;"><span class="gambar"><img src="http://i.imgur.com/ds7QwLu.jpg" style="height: auto; max-width: 100%;" /></span><span class="judul" style="background: none 0% 0% repeat scroll rgba(22, 22, 22, 0.901961); bottom: 0px; display: block; height: 25px; margin: 0px; overflow: hidden; padding: 2px 2px 0px 5px; position: absolute; width: 162.5625px;"><a href="http://filannime.blogspot.com/search/label/Date%20A%20Live" style="color: white; font-weight: bold; text-decoration: none;" target="_blank">Date A Live II</a></span></li>
<li style="display: block; float: left; line-height: 1.5em; list-style: none outside none; margin: 0px 3px 5px 0px; overflow: hidden; padding: 1px; position: relative; width: 160.5625px;"><div>
</div>
</li>
<ul style="list-style: none; margin: 0px; padding: 0px;"></ul>
</ul>
</div>
</div>
</div>
</b:if>

Quotes:

Ketika memasangnya kalian tidak usah memakai JUDUL karena widget ini sudah saya

pasang judulnya dan widget ini pun hanya muncul di halaman utama.

Untuk mengganti GAMBAR kalian cari kode ini :

jika ingin menggantinya kalian tinggal menggantikannya dengan URL GAMBAR kalian

Untuk mengganti LINKnya kalian cari kode ini :

<a href="LINK NAMA" style="color: white; font-weight: bold; text-decoration: none;" target="_blank">JUDUL</a></span></li>

kalian tinggal ganti link ini http://filannime.blogspot.com/search/label/Yu-Gi-Oh dengan link kalian

Judul inipun Yu-Gi-Oh! Arc-V bisa kalian ganti.

Cara Pemasangan WIDGET silahkan baca DISINI