Langsung ke konten utama

Populart Post New Style

Siang All
Populart Post merupakan hal yang cukup penting pada struktur blog , karena artikel populer akan dapat perhatian lebih ketika pengunjung melihat sebuah blog terlebih ketika style widget populart post beda dari biasanya atau unik . Kali ini saya akan berbagi tutorial widget untuk merubah penampilan populart post , Untuk lebih jelasnya lihat demonya barangkali cocok dengan template sobat



Untuk kostumisasi seperti biasa sobat masuk pada Rancangan > klik Edit Template dan cari kode ]]></b:skin> dan simpan kode dibawah ini tepat diatas kode  ]]></b:skin>

.popular-posts ul li a {
    background: none repeat scroll 0 0 #DDDDDD;
    color: #444444;
    display: block;
    margin: 0 0 0.5em;
    padding: 0.4em;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #CCCCCC;
    font-weight: 700;
    height: 2em;
    left: -2.5em;
    line-height: 2em;
    margin-top: -1em;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 2em;
}
.popular-posts ul li a:after {
    border: 0.5em solid transparent;
    content: "";
    left: -1em;
    margin-top: -0.5em;
    position: absolute;
    top: 50%;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:hover {
    background: none repeat scroll 0 0 #CCCCCC;
}
.popular-posts ul li a:hover:after {
    border-left-color: #CCCCCC;
    left: -0.5em;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before{content:"10"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before{content:"9"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before{content:"8"}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before{content:"7"}
.popular-posts ul li:first-child + li + li + li + li + li a:before{content:"6"}
.popular-posts ul li:first-child + li + li + li + li a:before{content:"5"}
.popular-posts ul li:first-child + li + li + li a:before{content:"4"}
.popular-posts ul li:first-child + li + li a:before{content:"3"}
.popular-posts ul li:first-child + li a:before{content:"2"}
.popular-posts ul li:first-child a:before{content:"1"}

Save Template dan lihat hasilnya

NB : untuk warna #DDDDDD dan ukuran sobat sesuaikan sendiri
Label:

Komentar

  1. Mas AndesRabu, Juni 05, 2013

    wow keren mas.. cakep nih, terimakasih tutorialnya sangat bermanfaat

    BalasHapus
    Balasan
    1. UnknownRabu, Juni 05, 2013

      udah keren.. cakep lagi, komplit banget pujiannya.. `.

      Hapus
    2. Sopala MultapaRabu, Juni 05, 2013

      hahaha diborong miz hehe

      Hapus
    3. Mas AndesRabu, Juni 05, 2013

      ahaha biar yang laen gak kebagian..

      Hapus
    4. Staff AdministratorKamis, Juni 06, 2013

      wah curang nih...ga bagi2...hehe

      Hapus
    5. Sopala MultapaKamis, Juni 06, 2013

      haha si mas bud .. naon ( apa ) yg dibagi-bagi itu mas hehe

      Hapus
  2. UnknownRabu, Juni 05, 2013

    ternyata gak ribet... cuma tambahin itu doang ya, entar kalo mau pake balik lagi kemari .

    BalasHapus
  3. AZLARabu, Juni 05, 2013

    wah mantap juga tutorialnya sob, mungkin lain kali perlu dicoba ini sob.
    terima kasih atas tutorialnya yg bermanfaat

    BalasHapus
    Balasan
    1. Sopala MultapaKamis, Juni 06, 2013

      monggo silahkan ...
      terimaksih kembali mas

      Hapus
  4. Staff AdministratorKamis, Juni 06, 2013

    pengen make mas...tapi msh blm nyoba buka2 ngedit template...semenjak tampiln nya make yg baru...

    nanti deh...mesti ta jajal...hehe
    thx ya kang :)

    BalasHapus
  5. dunia mayaKamis, Juni 06, 2013

    blum bisa praktek kak

    BalasHapus
  6. Anisayu NastutikKamis, Juni 06, 2013

    kalau udah harus masuk template , aku mumet narok kodenya

    hehe

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya