Setelah sebelumnya saya sudah membagikan tips Cara membuat Menu Multi Dropdown Di blog, dan untuk postingan saya kali ini akan menshare tentang Cara membuat widget jadwal rilis anime di blogger untuk kawan blogger yang sudah lama pastinya sudah tidak asing lagi mengenai widget seperti ini. Tapi untuk sebagian kawan blogger khususnya pemula seperti saya ini masih terbilang awam ya hehe.
Ok sobat kita kepokok judul dari postingan diatas, disini saya akan membagikan tips Cara membuat widget jadwal rilis anime di blogger untuk kalian yang baru saja membuat blog tentang anime mungkin widget seperti ini bisa kalian terapkan atau pasang di blognya.
Jika berminat untuk menggunakannya bisa langsung di praktekan di blog dengan cara berikut ini: Silahkan kalian buka Blogger > PILIH TEMA > EDIT HTML > Letakan codenya tepat sebelum </style>
Jika CSS diatas sudah kalian pasang, selanjutnya kalian simpan kembali template yang sudah di edit tadi. Langkah selanjutnya untuk menampilkan widgetnya kalian bisa menggunakan code dibawah ini
LIVE DEMO
Silahkan di edit dan bisa disesuaikan code diatas menurut kalian semua, mungkin dari saya cukup segitu dulu aja ya, selamat mencoba dan semoga bisa bermanfaat.
Jika berminat untuk menggunakannya bisa langsung di praktekan di blog dengan cara berikut ini: Silahkan kalian buka Blogger > PILIH TEMA > EDIT HTML > Letakan codenya tepat sebelum </style>
/* Jadwal Rilis Anime */
.gunawan-fix{width:25%;float:left}
.gunawan-wrap{padding:10px 4px 10px}
.gunawan-title{color:#fff;font-family:sans-serif;text-align:center;padding:20px 10px;text-transform:uppercase;font-size:22px;font-weight:bold}
.gunawan-fix:nth-child(1) .gunawan-title{background:#000;border-bottom:5px solid #007dd0}
.gunawan-fix:nth-child(2) .gunawan-title{background:#ff0000;border-bottom:5px solid #308e00}
.gunawan-fix:nth-child(3) .gunawan-title{background:#c1004f;border-bottom:5px solid #9e0041}
.gunawan-fix:nth-child(4) .gunawan-title{background:#ff5722;border-bottom:5px solid #ce4115}
.gunawan-fix:nth-child(5) .gunawan-title{background:#008287;border-bottom:5px solid #00696d}
.gunawan-fix:nth-child(6) .gunawan-title{background:#7200ac;border-bottom:5px solid #5d008c}
.gunawan-fix:nth-child(7) .gunawan-title{background:#f58500;border-bottom:5px solid #bd6700}
.gunawan-fix:nth-child(8) .gunawan-title{background:#8c0000;border-bottom:5px solid #610000}
.gunawan-wrap ul{margin:0!important;padding:0!important;color:#333;background:#ebebeb}
.gunawan-wrap ul li{list-style:none;padding:7px 12px!important;transition:all 0.3s;margin:0!important}
.gunawan-wrap ul li:hover{background:#ddd}
.gunawan-wrap ul li a{color:#333}
.gunawan-wrap ul li a:hover{color:#333}
Jika CSS diatas sudah kalian pasang, selanjutnya kalian simpan kembali template yang sudah di edit tadi. Langkah selanjutnya untuk menampilkan widgetnya kalian bisa menggunakan code dibawah ini
<div class='gunawan'>
<div class='gunawan-fix'>
<div class='gunawan-wrap'>
<div class='gunawan-title'>Senin</div>
<ul>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
</ul>
</div>
</div>
<div class='gunawan-fix'>
<div class='gunawan-wrap'>
<div class='gunawan-title'>Selasa</div>
<ul>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
</ul>
</div>
</div>
<div class='gunawan-fix'>
<div class='gunawan-wrap'>
<div class='gunawan-title'>Rabu</div>
<ul>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
</ul>
</div>
</div>
<div class='gunawan-fix'>
<div class='gunawan-wrap'>
<div class='gunawan-title'>Kamis</div>
<ul>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
</ul>
</div>
</div>
<div class='gunawan-fix'>
<div class='gunawan-wrap'>
<div class='gunawan-title'>Jumat</div>
<ul>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
</ul>
</div>
</div>
<div class='gunawan-fix'>
<div class='gunawan-wrap'>
<div class='gunawan-title'>Sabtu</div>
<ul>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
</ul>
</div>
</div>
<div class='gunawan-fix'>
<div class='gunawan-wrap'>
<div class='gunawan-title'>Minggu</div>
<ul>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
</ul>
</div>
</div>
<div class='gunawan-fix'>
<div class='gunawan-wrap'>
<div class='gunawan-title'>Random</div>
<ul>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
<li><a href='#'>Nama Anime</a></li>
</ul>
</div>
</div>
</div>
Silahkan di edit dan bisa disesuaikan code diatas menurut kalian semua, mungkin dari saya cukup segitu dulu aja ya, selamat mencoba dan semoga bisa bermanfaat.
0 Comments
Posting Komentar