Cara Membuat Popular Posts Mirip Arlina Design Terbaru !

Tutorial - Cara Mengubah Style Posts Mirip Arlina Design untuk Blogger

Widget ini tidak 100% mirip ada satu sttyle yang tidak saya masukan

agar mudah bisa di pakai di template manapun

yaitu saya menghilangkan bintangnya

Langsung aja cuk

Cara Mengubah Style Popular Posts Mirip Arlina Design

1.Login ke blogger
2.Pilih Tema / Template > Lalu klik Edit HTML
3.Setelah itu Click CTRL+F (untuk memudahkan pencarian) lalu cari style css  /* Popular Posts */ 4.lalu ganti Stylenya dengan kode CSS di Bawah

/* Popular Posts */
#PopularPosts1 h2{background:#fff;position:relative;overflow:hidden;font-size:16px;margin-top:0;padding:15px 20px;border-bottom:1px solid rgba(0,0,0,0.08);margin:0;border-top:4px solid #f24a4a;}
#PopularPosts1{display:block;position:relative;overflow:hidden;font-size:15px;}#PopularPosts1 ul{margin:0;padding:0;list-style-type:none;}
#PopularPosts1 ul li{background:#f24a4a;position:relative;padding:0;color:#fff;border-bottom: 1px solid rgba(0,0,0,0.08);
border-top: 1px solid rgba(255,255,255,0.12);}#PopularPosts1 ul li:after{content:'\f105';font-family:fontawesome;position:absolute;top:12px;right:15px;line-height:1em;text-align:center;color:#fff;font-size:23px;font-weight:normal;transition:all.3s;}
#PopularPosts1 ul li:first-child{border-top:0;}
#PopularPosts1 ul li:last-child{border-bottom:0;}#PopularPosts1 ul li:hover:after{color:#fff;}
#PopularPosts1 ul li a{background:#f24a4a;color:#fff;display:inline-block;padding:15px 50px 15px 15px;width:100%;}
#PopularPosts1 ul li a:hover{background:#e24444;color:#fff;}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none}

5.Simpan template,Selesai

Template ini di setting hanya untuk menampilkan judul saja

Jika ingin menampilkan gambar

hapus kode ini

.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none}

Sekian terima kasih sudah berkunjung Semoga tutorial widget kali ini bisa membantu kalian Jika ada yang di tanyakan komen di bawah

Cara Membuat Download Box Untuk Web Anime Mirip Onikuro

Kali ini Tutorial Style Download Box untuk web Anime yang di ambil dari web ane satu lagi hehhe

Download box ini sedikit menggunakan style CSS 3 menjadikan ada animasi yang enak untuk dilihat

tanpa banyak cingxong cuss ke tutorialnya

Cara membuat Download Box Mirip Onikuro.com

1.Masukan Code ini di tepat atas </style> setelah itu simpan

.dlbox ul{margin:5px 0;list-style:none;border:0px;padding:2px;color:#fff}
.dlbox h3{margin:0;text-align:center;background:#185e99;color:#ffffff;font:normal 700 17px sans-serif;padding:8px;margin-bottom:1px;box-shadow:none;}
.dlbox ul li{background:transparent;margin:0 0 3px;padding:0 8px;line-height:25px;color:#1B1B1B;font-size:14px;color:#fff}
.dlbox ul li a {display:inline-block;background:#026b48;color:#fff;font-weight:400;padding:1px 3px;line-height:25px}
.dlbox ul li a:hover{background:#05baab;font-weight:500;transform:skewX(2deg) translateX(2px);}
.dlbox ul li b,.dl ul li strong{padding:1px 3px;font-weight:600;background:#0072BB;color:#000;line-height:25px;font-size:15px;display:block;padding:1px 6px;margin-right:6px;float:left;min-width:79px;border-right:2px solid #383333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:-5px}
@media (max-width: 640px) {.dl ul li b,.dl ul li strong{display:inline-block;float:none;width:98%}.dl ul li{text-align:center}}

2.Setelah itu kita tinggal memakainya

<div class="dl">
<ul>
<h3>
Episode Anime</h3>
<li><b>3gp</b>
<a href="Link Download" rel="nofollow" target="_blank" >ZippyShare</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Tusfiles</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Solidfiles</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Mirror</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Upload</a>
</li>

<li><b>Mp4</b>
<a href="Link Download" rel="nofollow" target="_blank" >ZippyShare</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Tusfiles</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Solidfiles</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Mirror</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Upload</a>
</li>

<li><b>480p</b>  
<a href="Link Download" rel="nofollow" target="_blank" >ZippyShare</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Tusfiles</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Solidfiles</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Mirror</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Upload</a>
</li>

<li><b>720p</b> 
<a href="Link Download" rel="nofollow" target="_blank" >ZippyShare</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Tusfiles</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Solidfiles</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Mirror</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Upload</a>
</li>
</ul>
</div> 

Note:Ganti yang di tandai warna hijau dengan link download

Sebenarnya ada cara yang mudah untuk memakainnya

baik inilah dia cara mudahnya

1.Buat Entri Baru
2.Buat lah teks seperti di bawah

Note:
1.Buat teks (1) Menjadi Subheading
2.Buat List teks download
3.Kasih style Bold pada angka resolusi
4.Tinggal kasih link dengan cara biasa

3.Setelah itu Buka mode HTML

 Maka menjadi seperti itu,Lalu kita hanya memasang <div class='dlbox'> dan </div>

• DEMO

Baik itulah Cara membuat Download Box Anime Terimakasih sudah berkunjung ke situs ini

Cara Mengubah Widget Popular Posts Keren dan Simple ! Dari bungfranki

Nah kayaknya ini tutorial pertama di blog ini bagi kalian yang penasaran dengan Widget Popular Postsnya yang di pake disini kali ini saya akan membagikan Tutorial Style Css Widget Popular Posts Ala bungfrangki yang simple (hanya menggunakan kode css saja)


Kenapa saya bilang ala bungfrangki karena memang template ini buatan beliau nama template yang di gunakan blog ini adalah Viralisme[Free Version] 

Baik kita ke cara pemasangannya

Cara mengubah Style CSS Widget Popular Posts

Hati-hati sebelum edit template untuk backup terlebih dahulu agar bisa mengantisipasi hal-hal yang tidak diinginkan

1.Buka Blogger
2.Buka tab tata letak > Pasang widget popular post
3.Klik tab Tema > Edit HTML > Cari kode 

</style>

4.Lalu Masukan Kode ini tepat di atasnya

.PopularPosts ul{list-style:none;margin:0 auto;padding:0;}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0;padding:0;list-style:none;border:none;background:none;outline:none;}
.PopularPosts ul li {margin:0 0 10px;padding:0;position:relative;line-height:1.4em!important;list-style:none;text-align:left!important;font-size:15px !important;}
.PopularPosts ul li a:hover {color:#f80538!important}
.PopularPosts li a{color:#000 !important;font-weight:500 !important;list-style:none}
.PopularPosts .item-thumbnail {display: flex;align-items: center;justify-content: center;width:72px;height:72px;margin:0 20px 15px 0;overflow:hidden;float:left;border-radius:4px;}
.PopularPosts ul li img {width:auto;height:72px;transition:all .3s ease-in-out;border-radius:4px;overflow:hidden;display:block}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title {padding:0 0 5px}
.PopularPosts .widget-content ul li:before{color: #fff;counter-increment: count;content: counter(count);position: absolute;left:57px;text-align: center;top:20px;z-index: 51;transition: all .4s;height:25px;min-width:25px;font-size: 14px;line-height:25px;background:#f80538;font-weight:600;border-radius:99em;border:2px solid #fff;text-align: center;padding:0;overflow:hidden;}
.PopularPosts ul{counter-reset:count;}
@media screen and (max-width:414px){
.PopularPosts ul li {font-size:15px!important} 

5.Setelah itu Klik simpan Template !
6.Enjoy it

Sekian artikel sekarang jika ada request tentang Template dan tutorial blogging kalian boleh request di bawah

Semoga bermanfaat dengan artikel Cara mengubah tampilan widget popular posts dengan kode CSS yang simple dan Ringan