» » Widget Popular Post Untuk Blogger

Widget Popular Post Untuk Blogger



membuat popular post


 Popular post merupakan suatu widget pada blog untuk mengetahui post mana yang paling sering di kunjungi terbanyak,jika kalian berkunjung ke blog,biasanya terdapat popuar post di pinggir atau di bawah post. Maka dari itu saya akan membagikan cara untuk menambah atau pun mengganti widget popular post.
  •  Menambah Widget Popular Post



1.Masuk ke Blog - Tata letak - Tambah Gadget/Widget - Entri Popular - Save.

2.Masuk menu blog lagi - Template - Edit HTML
3.Pilih dulu salah satu style yang kalian suka
STYLE 1

4.Letakkan script/Kode dibawah ini diatas Kode </body>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/> <script type='text/javascript'> $(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) { return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;) }); $(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){ var txt=$(this).text().substr(0,60); var j=txt.lastIndexOf(&#39; &#39;); if(j&gt;10) $(this).text(txt.substr(0,j).replace(/[?,!.-:;]*$/,&#39;...&#39;)); }); $(&#39;.popular-posts ul li .item-content a&#39;).each(function(){ var txt=$(this).text().substr(0,60); var j=txt.lastIndexOf(&#39; &#39;); if(j&gt;=6) $(this).text(txt.substr(0,j).replace(/[?,!.-:;]*$/,&#39;...&#39;)); }); </script>

5.Masukan css ini kedalam template, misalnya di atas ]]></b:skin> atau diatas</style>.
.sidebar .PopularPosts ul { padding:0; margin:0; } .sidebar .PopularPosts .item-thumbnail a { clip:auto; display:block; height:auto; overflow:hidden; } .sidebar .PopularPosts .item-thumbnail { width:130px; height:130px; border-right:5px solid #fff; margin:0 10px 0 0 !important; position:relative; } .sidebar .PopularPosts .item-thumbnail img { position:relative; height:100%; width:100%; object-fit:cover; } .sidebar .PopularPosts ul li { float:left; margin-bottom:5px; max-height:130px; min-width:250px; overflow:hidden; } .sidebar .PopularPosts ul li:first-child { background:#D9EDF7; } .sidebar .PopularPosts ul li:first-child + li { background:#F2DEDE; } .sidebar .PopularPosts ul li:first-child + li + li { background:#DFF0D8; } .sidebar .PopularPosts ul li:first-child + li + li + li { background:#FFEEBC; } .sidebar .PopularPosts ul li:first-child + li + li + li + li { background:#E0E0E0; } .sidebar .PopularPosts .item-title { font:13px &#39; Oswald&#39; ,sans-serif; text-transform:uppercase; padding:10px 5px 10px; } .sidebar .PopularPosts .item-title a { color:#000; text-decoration:none; } .sidebar .PopularPosts .item-snippet { font:13px &quot; Times New Roman&quot; ,Times,FreeSerif,serif; padding-right:5px; } .sidebar .PopularPosts .widget-content ul li { padding:0 5px 0 0 !important; }
6.Save template.
STYLE 2

1.Letakkan script/Kode dibawah ini diatas Kode </body>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/> <script type='text/javascript'> $(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) { return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;) }); $(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){ var txt=$(this).text().substr(0,60); var j=txt.lastIndexOf(&#39; &#39;); if(j&gt;10) $(this).text(txt.substr(0,j).replace(/[?,!.-:;]*$/,&#39;...&#39;)); }); $(&#39;.popular-posts ul li .item-content a&#39;).each(function(){ var txt=$(this).text().substr(0,60); var j=txt.lastIndexOf(&#39; &#39;); if(j&gt;=6) $(this).text(txt.substr(0,j).replace(/[?,!.-:;]*$/,&#39;...&#39;)); }); </script>
2.Masukan css ini kedalam template, misalnya di atas ]]></b:skin> atau diatas</style>
.sidebar .PopularPosts ul { counter-reset:popularcount; margin:0; padding:0; } .sidebar .PopularPosts ul li { float:left; max-height:130px; min-width:250px; position:relative; } .sidebar .PopularPosts .item-thumbnail::after { color:rgba(255,255,255,0.63); content:counter(popularcount,decimal); counter-increment:popularcount; font:70px &#39; Oswald&#39; ,sans-serif; list-style-type:none; position:absolute; left:5px; top:-5px; z-index:4; } .sidebar .PopularPosts .item-thumbnail::before { background:rgba(0,0,0,0.3); bottom:0; content:&quot; &quot; ; height:100px; width:100px; left:0; right:0; margin:0 auto; position:absolute; z-index:3; } .sidebar .PopularPosts .item-thumbnail a { clip:auto; display:block; height:auto; overflow:hidden; } .sidebar .PopularPosts .item-thumbnail { width:100px; height:100px; margin:0 10px 0 0 !important; position:relative; } .sidebar .PopularPosts .item-thumbnail:hover:before { display:none; } .sidebar .PopularPosts .item-thumbnail img { position:relative; padding-right:0 !important; height:100%; width:100%; object-fit:cover; } .sidebar .PopularPosts .item-title { font:13px &#39; Oswald&#39; ,sans-serif; text-transform:uppercase; padding:0 5px 10px; } .sidebar .PopularPosts .item-title a { color:#000; text-decoration:none; } .sidebar .PopularPosts .item-snippet { font:13px &quot; Times New Roman&quot; ,Times,FreeSerif,serif; } .sidebar .PopularPosts .widget-content ul li { padding:0 5px 0 0 !important; } .sidebar .PopularPosts .item-content { padding:5px 0; border-bottom:1px dotted #dedede; overflow:hidden; height:100px; position:relative; }
    3.Save template
    Share on Facebook
    Share on Twitter
    Share on Google+
    Share on LinkedIn

    Subscribe to receive free email updates:

    0 Response to "Widget Popular Post Untuk Blogger"

    Posting Komentar

    Langganan: Posting Komentar (Atom)