Memperbaiki

Solusi Tepat untuk Setiap Masalah

iklan banner

Senin, 17 Februari 2020

Inilah Cara Membuat Widget Jadwal Rilis Anime di Blog | Memperbaiki

         Comment  
Hallo guys, sebelumnya skita sudah belajar bagaimana Cara membuat Menu Multi Dropdown Di blog, kemudian untuk postingan saya kali ini akan memebagikan bagaimana Cara membuat widget jadwal rilis anime di blogger. Bagi teman teman blogger yang sudah lama tentunya tidak asing lagi dengan widget seperti ini. Tetapi bagi sebagian kawan blogger dan khususnya bagi blogger pemula seperti saya ini mungkin masih sedikit bingung bagaimana cara membuatnya.



Baiklah teman teman, mari kita langsung kepokok judul dari postingan ini, tulisan mengenai Cara membuat widget jadwal rilis anime di blogger ini berguna bagi kalian yang baru saja membuat blog tentang anime dan mungkin widget seperti ini bisa kalian terapkan.

Apabila tertarik 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}

Apabila CSS diatas sudah kalian pasang, langkah selanjutnya adalah kalian simpan kembali template yang sudah di edit tadi. Kemudian 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>


Kalian bisa mengedit dan menyesuaikan kode diatas menurut keinginan kalian.
Cukup sekian tuilisan dari saya kali ini, selamat mencoba dan semoga berhasil.


EmoticonEmoticon