Cara Membuat Popular Post Dengan Satu Gambar Di Blog

Slamat datang sobat bantoel yang masih setia berkunjung ke blog sederhana saya, kali ini saya mau berbagi tips cara membuat popular post dengan satu gambar di atas

Gak usah basa basi langsung saja masuk dashbor > Edit Html >  copy script dibawah ini dan letakin di bawah <body>

<style>
.PopularPosts .widget-content ul{padding:0;margin-top:-10px;width:98%}
.PopularPosts .item-thumbnail{margin:0;border:4px double #ddd;}
.PopularPosts .item-title {padding:0;}
.PopularPosts .item-title a{text-decoration:none;color:#000;font-weight:400;font-size:14px;}
.PopularPosts .item-title a:hover{color:#FCA13A}
.PopularPosts .item-snippet{font-size:14px;line-height:1.6em;color:#777;padding-top:10px}
.PopularPosts li{border-bottom:1px solid #ddd}
.PopularPosts li .item-thumbnail,.PopularPosts li .item-snippet{display:none}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block;overflow:hidden;max-height:170px;margin-bottom:10px;font:13px Arial;width:100%}
.PopularPosts img{padding:0;}
.PopularPosts .widget-content ul li{padding:10px 0;margin:0}
</style>
<script type='text/javascript'>
//<![CDATA[
var newidth=295;var neweight=170;$(".popular-posts .item-thumbnail img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,70)});
//]]>
</script>

Kemudian tambah gadget popular post


Save dan lihat hasilnya hahaha. gampang kan, ya sudah coba saja .

KOMENTAR DISINI

ARTIKEL TERBARU:

Cara Membuat Trending Recent Di Wordpress Tanpa Plugin

Selamat datang di blog tutorial sederhana bantoel.com , kali ini saya akan berbagi tips cara membuat trending recent di wordpress tanpa plugin, trending recent ini bisa di letakan dimana saja terutama di bagian bawah menu navigasi.

contoh penampakanya seperti ini


Ok lansung saja ke TKP ,

1. Copy script di bawah ini dan letakan di fuction.php

/*----------------------------------------*/
/*  Post Title Pendek
/*----------------------------------------*/
function mts_short_title($after = '', $length){
    $mytitle = get_the_title();
    if ( strlen($mytitle) > $length ){
        $mytitle = substr($mytitle,0,$length);
        echo $mytitle . $after;
    }
    else { echo $mytitle; }
}

 2 Kemudian copy Script di bawah ini di mana saja sesuai keinginan ana, kalau saya saranin header.php

<div class="trending-articles">
                <ul>
                    <li class="firstlink"><?php _e('Trending','nama_template_anda'); ?>:</li>
                    <?php $i = 1; $my_query = new wp_query( 'cat='.'&posts_per_page=4&ignore_sticky_posts=1' ); ?>
                    <?php if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?>
                        <li class="trending <?php if($i % 4 == 0){echo 'last';} ?>">
                            <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php mts_short_title('...', 24); ?></a>
                        </li>
                    <?php $i++; endwhile; endif;?>
                </ul>
            </div>

3. Simpan CSS di bawah ini di style theme anda

.trending-articles {
    background: #2a2a2a;
    border-bottom: 1px solid #000;
    float: left;
    width: 100%;
    position: relative;
    z-index: 100;
}
.trending-articles ul { list-style: none }
.trending-articles li {
    border-right: 1px solid #7D7D7D;
    color: #fff;
    float: left;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2em;
    margin: 10px 0 9px;
    padding: 0 13px;
    text-transform: none;
}
.trending-articles li.firstlink {
    border: none;
    padding-left: 20px;
}
.trending-articles li.last { border: none }
.trending-articles li a {
    color: #00c0ad;
    display: block;
}
.trending-articles li a:hover { color: #fff }

Untuk mempercantik silahkan anda kreasikan sendiri dengan theme website anda,
semoga tips saya bermanfaat terimakasih.

KOMENTAR DISINI

ARTIKEL TERBARU: