Ketik dan Tekan Enter

 › Macam-macam variasi popular post di blog

Macam-macam variasi popular post di blog

Author Josie / 1 September 2015 / No comments

https://myzozieman.blogspot.com/2015/09/macam-macam-variasi-popular-post-di-blog_84.html

Kali ini saya akan memberikan macam-macam cara membuat variasi popular post di blog anda agar tampilan blog anda makin kelihatan cantik dan elegant silahkan pilih salah satu saja dari cara dibawah ini :

1. Numbered Popular Posts Widget for Blogger

popular post1

Letakkan script dibawah ini diatas kode   ]]></b:skin>

.popular-posts ul li a {
background: none repeat scroll 0 0 #222222;color: #FFFFFF;
display: block;margin: 10px 0;
padding: 25px 15px 30px;position: relative;
text-decoration: none;transition: all 0.3s ease-out 0s;width: 85%;}
.popular-posts ul li a:before {
background: none repeat scroll 0 0 #2DB3E9;color: #FFFFFF;
font-weight: 700;height: 2em;
line-height: 2em;margin-left: 88%;
padding: 4px;position: absolute;
text-align: center;
width: 2em;
transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
}
.popular-posts ul li a:hover {
opacity: 0.8;
}
.popular-posts ul li a:hover:before {
border-left-color: #CCCCCC;
left: -1px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
}
.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";}
.item-snippet {
display: none;}
.PopularPosts .item-thumbnail {display: none;}

2. Popular Posts v2 Widget customization

popular post2

Letakkan script dibawah ini diatas kode  ]]></b:skin>

/* Popular Post Customization by AllBloggerTricks.com */
.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"}
/* Popular Post Customization by AllBloggerTricks.com */

3. Elegant Popular Posts Widget for Blogger Tweak

popular post3

/* Popular Posts Widget customized by AllBloggerTricks.com */
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }
.item-content:hover img {transform: rotate(10deg) scale(1.2);}
.item-content { position: relative; }

Kemudian letakkan kode script di bawah ini di bawah </body> 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">
<script type='text/javascript'>
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
</script>
    <script type="text/javascript">
    //<![CDATA[
    // Popular Posts customization by AllBloggerTricks.com
    // Trim Code by MS-potilas 2012
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>>>

4. Fully Different Style Popular Posts Widget

popular post4

Letakkan script dibawah ini diatas kode
]]></b:skin> 

.popular-posts li,.popular-posts .item-content{float:left;display:inline;list-style:none;} .popular-posts .item-snippet,.popular-posts .item-title,.feed-links{display:none;}p.description,aside li{font-size:12px;}.popular-posts ul li,.item-content,.item-thumbnail{margin:0!important;padding:0!important;}.sixcol,.left-main,.right-sidebar{width:50%;} #PopularPosts1 img {background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;border-radius: 110px 110px 110px 110px;padding: 4px;}

Lalu cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>⋯</b:widget> dan ganti kode tersebut dengan kode script di bawah ini

<b:widget id="PopularPosts1" locked="false" title="Popular Posts" type="PopularPosts">
<b:includable id="main">
  <b:if cond="data:title"><h2>
<data:title></data:title></h2>
</b:if>
  <div class="widget-content popular-posts">
<ul><b:loop values="data:posts" var="post">
<li>          <b:if cond="data:showThumbnails == &quot;false&quot;">            <b:if cond="data:showSnippets == &quot;false&quot;">              <!-- (1) No snippet/thumbnail -->              <a expr:href="data:post.href" href="https://draft.blogger.com/null"><data:post .title=""></data:post></a>            <b:else>              <!-- (2) Show only snippets -->              <div class="item-title">
<a expr:href="data:post.href" href="https://draft.blogger.com/null"><data:post .title=""></data:post></a></div>
<div class="item-snippet">
<data:post .snippet=""></data:post></div>
</b:else></b:if>          <b:else>            <b:if cond="data:showSnippets == &quot;false&quot;">              <!-- (3) Show only thumbnails -->              <div class="item-thumbnail-only">
<b:if cond="data:post.thumbnail">                  </b:if>
<div class="item-thumbnail">
<a expr:href="data:post.href" href="https://draft.blogger.com/null" target="_blank">                      <img alt="" border="0" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:width="data:thumbnailSize" />                    </a></div>
<div class="item-title">
<a expr:href="data:post.href" href="https://draft.blogger.com/null"><data:post .title=""></data:post></a></div>
</div>
<div style="clear: both;">
<b:else>              <!-- (4) Show snippets and thumbnails -->              </b:else>
<div class="item-content">
<b:if cond="data:post.thumbnail">                  </b:if>
<div class="item-thumbnail">
<a expr:href="data:post.href" href="https://draft.blogger.com/null" target="_blank">                      <img alt="" border="0" expr:height="data:thumbnailSize" expr:src="data:post.thumbnail" expr:width="data:thumbnailSize" />                    </a></div>
<div class="item-title">
<a expr:href="data:post.href" href="https://draft.blogger.com/null"><data:post .title=""></data:post></a></div>
<div class="item-snippet">
<data:post .snippet=""></data:post></div>
</div>
<div style="clear: both;">
</div>
</div>
</b:if>          </b:else></b:if>        </li>
</b:loop>     </ul>
<b:include name="quickedit">
  </b:include></div>
</b:includable>
</b:widget>

5. Square Popular Posts Widget with Rotating Effect

popular post5

Letakkan script dibawah ini diatas kode
]]></b:skin> 

.PopularPosts .item-title { display:none; } .PopularPosts .widget-content ul li { background: none repeat scroll 0 0 transparent; float: right; list-style: none outside none; margin: 10px 0 0 !important; padding: 0 !important; } .PopularPosts .item-thumbnail { margin: 0 8px !important; } #PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);-moz-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);}  .item-thumbnail img { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; border: 3px solid #ccc; height: 60px; padding: 3px; width: 60px; }

6. Popular Posts Widget with Hover Effect for Blogger

popular post6

/* Popular Post Customization by AllBloggerTricks.com */ .PopularPosts .widget-content ul li{padding:0;position:relative} .item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #FF0202;z-index: 2;left: 300px;top: 60%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;} .PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible} .PopularPosts img{width:50px;height:50px} .PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%} /* Popular Post Customization by AllBloggerTricks.com */

Demikian saya sajikan cara membuat variasi popular post semoga bermanfaat...!!!

Sumber : allbloggertricks.com

Baca Juga
Josie

Cuma seorang blogger yang jarang ngeblog

Share :

Related Posts

0 Comment:

Posting Komentar

© 2016 - | MZ Blog
Made By Smartphone