Cara Menciptakan Download Box Nekopoi [Part 4]

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

Tutorial Cara Membuat Download Box Nekopoi kali ini belum aku buat menjadi responsive, untuk menambahkan tampilan mobilenya kau dapat cek di artikel yang sebelumnya aku bagikan yakni Cara Praktis Membuat Template Blog Responsive & Mobile Friendly.

Demo

Cara Membuat Download Box Nekopoi [Part 4]

1. Buka Blogger > Tema > Edit HTML
2. Simpan CSS berikut ini diatas </style>

/* 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>

<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 memakai HTML berikut ini

<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 biar bermanfaat, bila terjadi error atau kesalahan pada artikel ini silahkan beri komentar dibawah, terima kasih.

Bagikan Artikel ini