Cara Membuat Download Box Nekopoi [Part 4]

 

Cara Membuat Download Box Nekopoi [Part 4]

Tutorial Hari ini saya akan membagikan Cara Membuat Download Box Nekopoi [Part 4], artikel kali ini hampir sama seperti Tutorial Download Box Part 3, kesamaannya yaitu dibagian menambahkan Attribute target:blank dan rel:nofollow auto.


Cara Membuat Download Box Nekopoi [Part 4]

Tutorial Cara Membuat Download Box Nekopoi kali ini belum saya buat menjadi responsive, untuk menambahkan tampilan mobilenya kamu bisa cek di artikel yang sebelumnya saya bagikan yaitu Cara Mudah Membuat Template Blog Responsive & Mobile Friendly.



Cara Membuat Download Box Nekopoi [Part 4]

  1. Buka Blogger > Tema > Edit HTML
  2. Simpan CSS berikut ini diatas </style>
    3. /* Download box Neko - Arlethdesign
   ================================= */
._box-neko {overflow:hidden;clear:both;margin:10px auto;font:14px Pleasewritemeasong,arial;}
._box-neko ._neko-item{width:48%;}
._box-neko ._neko-item.left{float:left}
._box-neko ._neko-item.right{float:right}
._box-neko ._neko-item ._neko-title{background:#333;padding:8px 10px;color:#fff;}
._box-neko ._neko-item ._neko-url{padding:10px 10px 5px;font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#e8e8e8;}
._box-neko ._neko-item ._neko-url p{margin:auto;padding:0;}
._box-neko ._neko-item ._neko-url p a{transition:all .4s;display:block;float:left;margin:0 5px 5px 0;color:#fff;text-decoration:none;background:#e97991;padding:6.5px 10px;border:1px solid #e97991;border-radius:2px;font-size: 12px;}
._box-neko ._neko-item ._neko-url p a:hover{transition:all .4s;color:#fff;background:#dc637d;text-decoration:none;border:1px solid #ce637a;}

  3. Lalu simpan javascript berikut diatas </body>
    4. <b:if cond='data:blog.pageType in {&quot;item&quot;}'>
<script type='text/javascript'>//<![CDATA[
// Target Blank
$(document).ready(function() {$("._box-neko ._neko-item ._neko-url p a").attr({rel:"nofollow",target:"_blank"})})
//]]></script>
</b:if>

  4. Jika sudah save tema.
  5. Buatlah Postingan menggunakan HTML berikut ini
    6. <div class='_box-neko'>
<div class="_neko-item left">
   <div class="_neko-title">Title Post</div>
   <div class="_neko-url">
      <p><a href="#">EMPTY</a> <a href="#">EMPTY</a> <a href="#">EMPTY</a> <a href="#">EMPTY</a> <a href="#">EMPTY</a> <a href="#">EMPTY</a> <a href="#">EMPTY</a> <a href="#">EMPTY</a></p>
   </div>
</div>

<div class="_neko-item right">
   <div class="_neko-title">Title Post</div>
   <div class="_neko-url">
      <p><a href="#">EMPTY</a> <a href="#">EMPTY</a> <a href="#">EMPTY</a> <a href="#">EMPTY</a> <a href="#">EMPTY</a> <a href="#">EMPTY</a> <a href="#">EMPTY</a> <a href="#">EMPTY</a></p>
   </div>
</div>
</div>

Sekian tutorial kali ini semoga bermanfaat, jika terjadi error atau kesalahan pada artikel ini silahkan beri komentar dibawah, terima kasih.

Comments

Post a Comment

Popular posts from this blog

Recent Post Blogger By Label Filter Abjad

Image
  Recent Post Blogger By Label Filter Abjad Recent Post Blogger By Label Filter Abjad  - Recent post label dengan fitur mengurutkan judul/huruf depan dari postingan blog, Mulai dari Nomor, lalu ke huruf A sampai Z. Recent Post ini lebih mengutamakan Filter huruf depan dari sebuah judul post blog bukan mengurutkannya dengan tanggal di rilisnya postingan tersebut. Fitur ini berbeda dari recent post sebelumnya yaitu  Simple Recent Post By Label  yang mengandalkan tanggal rilis postnya dan jika dilihat mungkin acak-acakan judul postnya jadi bikin pusing atau tidak nyaman dipandang mata, maka dari itu Recent Post Label Filter Abjad jadi alternatifnya agar lebih minimalist dan rapih jika dilihat Recent Post Blogger By Label Filter Abjad Silahkan buka  Blogger > Tema > Edit HTML , lalu tambahkan CSS diatas  </style> /* Recent Post Label Filter Abjad - Arlethdesign ======================================= */ ul.grup-listanime{max-height:200px;overflow:...
Read more

Cara Mudah Membuat Template Blog Responsive & Mobile Friendly

Image
  Cara Mudah Membuat Template Blog Responsive & Mobile Friendly Halo, tutorial Kali ini saya akan membagikan  Cara Mudah Membuat Template Blog Responsive , artikel kali ini cukup mudah dan simpel untuk kalian praktekkan secara langsung, yuk langsung cek artikel dibawah ini. Apa itu Responsive & Mobile Friendly?, Responsive memiliki arti merespon, dan Mobile Friendly memiliki arti adaptive. Arti Lebih tepatnya tampilan blog akan merespon & menyesuaikan ukuran layar dimana blog itu dibuka baik itu handphone atau komputer. Kelebihan dari Responsive & Mobile Friendly yaitu memiliki fungsi untuk Meningkatkan SEO, Memudahkan Pengguna Smartphone, dan Disukai Pengunjung. Cara Mudah Membuat Template Blog Responsive & Mobile Friendly Buka  Blogger > Tema > Edit HTML Simpan HTML berikut dibawah  <head> , jika sudah ada tidak perlu ditambah. <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'...
Read more

Popular Post Samehada untuk Blogger

Image
  Popular Post Samehada untuk Blogger Tutorial kali ini yaitu Cara membuat Popular Post seperti Samehada untuk Blogger, diartikel ini saya akan membagikannya dengan singkat dan jelas, dan sangat mudah dipahami untuk pemula sekalipun. Untuk pratinjau atau preview tampilannya kalian bisa dipostingan sebelumnya yaitu  Bt-Samehada Clone 2020 Template Blogger . Popular Post Samehada untuk Blogger Pertama Buka Blogger > Tata letak > Add Widget Popular Post  (Jika sudah ada tidak perlu). Kemudian, Buka Tema > Edit HTML Simpan CSS berikut kedalam  <style> ... </style>  atau  <b:skin> ... </b:skin> /* Popular post blogger new style - arlethdesign */ #PopularPosts1 .widget-content.popular-posts{margin:auto} #PopularPosts1 ul li:nth-child(1n+2) .item-meta{font-size:11px;padding:6px 0 0;opacity:.7} #PopularPosts1 ul{padding:0;list-style:none;margin:auto;overflow:hidden} #PopularPosts1 ul li{margin:auto;padding:10px 0} #PopularPosts1 ul ...
Read more