POPULAR POST WIDGET DANGDAI LEH THA TE

Popular Post Widget chi hrang hrang a hman theih a; mahse, dangdai, mawi leh nalh te hi chuan blog tlawhtute mit a la bik thin. Tin, Widget chi hrang hrang a awm bawk a, heng widget te hian blog an timawi em em a. Blog tlawhtute mit pawh a tihtlai phah a. Sumdawnna atana blog hman te tan phei chuan a pawimawh em em a ni. Mitena an rilrua a hriat hreng theihna tur atana blog dangdai bika siam hi peih leh peih lovah a innghat a, taimaknain a hril a ni ber mai!

AWLSAM TAKA POPULAR POST DAH DAN:

A hmasa berah chuan Blogger Blog hian default popular post widget a nei a, a customize dan chu hetiang hian a ni.

1. Blogger account ah i kal ang a, "Layout" section ah i lut ang.

2. Sidebar section ah i kal leh ang a, "Add a Gadget" tih kha i click ang.

3. Popup window a lo lang ang a, "Popular Posts" gadget kha i thlang ang. Plus (+) button kha i click leh ang a, i blog ah a lo lang tawh ang.

4. Tichuan a hnuaia configure popular post tih hi chu i duh danin i siam tawh mai dawn nia.

STYLISH POPULAR POST WIDGET FOR BLOGGER:

STYLE 1:

Code:

<br /> .sidebar .PopularPosts ul {padding: 0;} .sidebar .PopularPosts ul li:first-child{max-height: 100%;width: 100%;opacity: 0.5;} .sidebar .PopularPosts ul li:nth-child(even){margin-right: 2%;} .sidebar .PopularPosts ul li {float: left;position: relative;width: 49%;overflow:hidden;padding: 0px !important;max-height: 120px;opacity: 0.4; box-sizing: border-box;margin-bottom: 2%; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s;} .sidebar .PopularPosts ul li:hover {opacity: 1;} .sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;} .sidebar .PopularPosts ul li img {height: 100%;width: 100%;object-fit: cover;box-sizing: border-box;padding:0;} .sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {opacity: 1;visibility: visible;} .sidebar .PopularPosts .item-title a {background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);color: #fff;position: absolute;text-align: center;text-decoration: none;font: 13px 'Oswald', sans-serif; right: 0;left: 0;bottom: 0%;padding: 100px 10px 10px;visibility: hidden;opacity: 0;} .sidebar .PopularPosts .item-snippet {display: none;}<br />

STYLE 2:

Code:

<br /> .sidebar .popular-posts ul {padding: 0;margin: 0;counter-reset: popcount;} .sidebar .popular-posts ul li {list-style: none !important;float: left;font-family:'Oswald',Arial,Tahoma,sans-serif;position: relative;width: 48%;height: 130px;overflow: hidden;margin: 2px;padding: 0 !important;border: 0;} .sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;} .sidebar .PopularPosts ul li img {float: left;display: block;height: 130px;width: 100%;padding: 0;-webkit-transition-duration: 1.0s;-moz-transition-duration: 1.0s;-o-transition-duration: 1.0s;transition:1.0s;} .sidebar .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);} .sidebar .PopularPosts .item-title {position: absolute;right: 0;left: 0;bottom:0;padding-bottom: 0;z-index: 999;} .sidebar .PopularPosts .item-title a {display: block;padding: 5px 0px 2px 5px;background: rgba(32, 32, 32, 0.77);text-transform: capitalize;font-size: 12px;color: #fff;line-height: normal;transition: all .4s ease-in-out;} .sidebar .popular-posts ul li:hover .item-title a {background: rgba(231, 76, 60, 0.88);color: rgba(255, 255, 255, 1);text-decoration: none;} .sidebar .popular-posts ul li:before {counter-increment: popcount;float: left;position: absolute;content: counter(popcount, decimal);list-style-type: none;background: #e2e2e2;top: 0;font-size: 14px;color: #000;line-height: 20px;padding: 0px 8px 1px 1px;z-index: 4;border: solid #FFF;border-radius: 0px 0px 10px 0px;border-width: 0px 2px 2px 0px;}<br />


Configuration: He widget hi quality tha lehzual i display duh chuan heti hian ti ang che:

"</body>" tih hi Theme ah i kal ang a, Edit HTML ah lutin Control + F hmangin i zawng dawn nia. Tichuan "</body>" chungah chiah JavaScript code hi i paste ang a, Save a ni tawh mai.

Code:

<br /> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[ $(document).ready(function() { var boi = 150; $('#PopularPosts1').find('img').each(function(n, image){ var image = $(image); image.attr({src : image.attr('src').replace(/sBd{2,4}/,'s' + boi)}); image.attr('width',boi); image.attr('height',boi); }); }); //]]></script><br />


STYLE 3:

Code:

<br /> .sidebar .popular-posts ul {counter-reset: popcount;padding: 0;margin: 0;} .sidebar .popular-posts ul li {float: left;position: relative;overflow: hidden;list-style: none !important;border: 0;height: 130px;width: 100%;font-family: "Oswald",sans-serif;font-weight: bold;margin: 2px;padding: 0px !important;} .sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;} .sidebar .PopularPosts ul li img {display: block;float: left;width: 100%;height: 130px;padding: 0;transition:1.0s;-webkit-transition-duration: 1.0s;-moz-transition-duration: 1.0s;-o-transition-duration: 1.0s;} .sidebar .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);} .sidebar .PopularPosts .item-title {position: absolute;padding-bottom: 0;z-index: 999;right: 0;left: 0;bottom:0;} .sidebar .PopularPosts .item-title a {display: block;background: rgba(32, 32, 32, 0.77);font-family: "Oswald",sans-serif;font-weight: bold;font-size: 16px;line-height: normal;color: #FFFFFF;text-transform: capitalize;padding: 10px 0px 5px 10px;transition: all .4s ease-in-out;} .sidebar .popular-posts ul li:hover .item-title a {background: rgba(231, 76, 60, 0.88);color: rgba(255, 255, 255, 1);text-decoration: none;} .sidebar .popular-posts ul li:before {counter-increment: popcount;content: counter(popcount, decimal);position: absolute;list-style-type: none;background: rgba(255, 252, 8, 1);float: left;color: #000;line-height: 20px;font-size: 14px;padding: 0px 8px 1px 1px;border-radius: 0px 0px 10px 0px;border-width: 0px 2px 2px 0px;border: solid #FFF;top: 0;z-index: 4;}<br />

STYLE 4:

Code:

<br /> .popular-posts ul{padding-left:0px;} .popular-posts ul li {list-style-type: none;background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGsP6DE-XbPrcoUSTG9I1j-bc0io_PDBBrYYFkyPctcyjR8Udf_wo0ZnUFyxK7i1WzMnCCTo8HD5CefhHYX1wTlwBFWh_hnNhJfWqwRyRn66QQLhOGtL0tTSrEsI_QDDllOuHnNNLJHsx9/s1600/bo-pp-arrow.gif) no-repeat scroll 5px 10px;border: 1px solid #ddd;padding:5px 5px 5px 20px !important;margin:0 0 5px 0px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;} .popular-posts ul li:hover {border:1px solid #6BB5FF;} .popular-posts ul li a:hover {text-decoration:none;} .popular-posts .item-thumbnail img {border-radius: 100px;-moz-border-radius: 100px;webkit-border-radius: 100px; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); <br />



STYLE 5:

Code:

<br /> #PopularPosts1 ul{width:290px;counter-reset:li;left:-7px;padding:8px 0px 1px;list-style:none;} #PopularPosts1 li{left:5px;width:95%;position:relative;margin:0 0 10px 0;padding: 3px 2px 0 17px;} #PopularPosts1 ul li{position:relative;display:block;margin: .5em 0;*padding: .2em;background:#ddd;padding: .4em .2em .4em 1em;transition: all .3s ease-out;border-radius: .3em;text-decoration: none;} #PopularPosts1 ul li:before{position:absolute;background:#FB8835;color:#fff;content: counter(li);counter-increment: li;margin: -1.3em;left: 0;top: 50%;width: 2em;border: .2em solid #fff;height: 2em;border-radius: 2em;font-weight: bold;font-size: 15px;text-align: center;line-height: 2em;box-shadow: 0 8px 5px -7px #888;-moz-box-shadow: 0 8px 5px -7px #888;-webkit-box-shadow: 0 8px 5px -7px #888;transition: all .3s ease-out;} #PopularPosts1 ul li:hover:before{transform: rotate(360deg);} #PopularPosts1 ul li:hover{background: #eee;} #PopularPosts1 ul li a{min-height:25px;color:#444;display:block;font: 14px Georgia, serif;text-decoration:none;text-transform:uppercase;text-shadow: 0 -1px 2px #fff;} #PopularPosts1 ul li a:hover{color: #444;}<br />


STYLE 6:

Code:

<br /> .popularposts{line-height:1.6;color:#fff;font-size:100%;border-radius:5px 5px 0 0;} .popular-posts{font-size:100%;line-height:1.6;border-radius:0; color:#fff} .popular-posts a{color:#fff} .popular-posts a:hover{color:#fff} .PopularPosts ul{counter-reset:popcount;list-style:none;padding:0;margin:0;} .popular-posts ul li:before{counter-increment:popcount;list-style-type:none;margin:10px 15px 0 5px;padding:0.3em 0.8em;content:counter(popcount);color:#fff;font-size:16px;position:relative;border:1px solid #fff;border-radius:100%;float:left;} .PopularPosts li{background:none;list-style:none;display:block;text-transform:uppercase;padding:10px 18px;margin:0;clear:both;overflow:hidden;border-bottom:none;font:13.5px/140%;} .PopularPosts li a{text-decoration:none} .PopularPosts li:hover{background:#0FB9BB} #PopularPosts1 .widget-content{margin-bottom:-2px;padding:0px 0 0 17px;} .PopularPosts ul li{padding:3px 7px;border:none} .PopularPosts ul li:nth-child(1){margin-right:0;background-color:#F48067;} .PopularPosts ul li:nth-child(2){margin-right:0;background-color:#2ba6e1;} .PopularPosts ul li:nth-child(3){margin-right:0;background-color:#718397;} .PopularPosts ul li:nth-child(4){margin-right:0;background-color:#11b7b5;} .PopularPosts ul li:nth-child(5){margin-right:0;background-color:#d9ba71;} .PopularPosts ul li:nth-child(6){margin-right:0;background-color:#d9ba71;} .PopularPosts ul li:nth-child(7){margin-right:0;background-color:#2ba6e1;} .PopularPosts ul li:nth-child(8){margin-right:0;background-color:#718397;} .PopularPosts ul li:nth-child(9){margin-right:0;background-color:#11b7b5;} .PopularPosts ul li:nth-child(10){margin-right:0;background-color:#d9ba71;}<br />

STYLE 7:

Code:

<br /> .PopularPosts .item-thumbnail {margin-right: 10px;margin-bottom: 0;box-shadow: 0 0 9px rgba(0,0,0,0.4) inset;border-radius: 50%;-webkit-box-shadow: 0 0 9px rgba(0,0,0,0.4) inset;-moz-box-shadow: 0 0 9px rgba(0,0,0,0.4) inset;-webkit-border-radius: 50%;-moz-border-radius: 50%;} .PopularPosts ul li img {border-radius: 50%;width: 50px;height: 50px;background: #333;padding-right: 0;-webkit-border-radius: 50%;-moz-border-radius: 50%;} .PopularPosts .widget-content ul li {background: #00aeef;} .PopularPosts ul li a {display: block;color: #fff;padding: 12px;line-height: 20px;font-family: Arial,serif;font-weight: 500;font-size: 15px;} .PopularPosts .widget-content ul li+li {margin: 0 10px 0 0;transition: all 0.4s ease;-moz-transition: all 0.4s ease;-webkit-transition: all 0.4s ease;} .PopularPosts .widget-content ul li+li+li {margin: 0 20px 0 0;} .PopularPosts .widget-content ul li+li+li+li {margin: 0 30px 0 0;} .PopularPosts .widget-content ul li+li+li+li+li {margin: 0 40px 0 0;} .PopularPosts .widget-content ul li:hover {opacity: 0.8;-moz-opacity: 0.8;-webkit-opacity: 0.8;} .PopularPosts .widget-content ul li:nth-child(2n+1) {background: #222;} <br />


Configuration:

. Image thumbnail kha i thlang ang.
. Snippet box ah uncheck.
. Post display kha 5 thlengin dah tur.


STYLE 8:

Code:

<br /> .sidebar .popular-posts ul {padding: 0;margin: auto;}<br /> .sidebar .popular-posts ul li {list-style: none !important;float: left;position: relative;overflow: hidden;margin: 0 5px 5px 0;padding: 2px; border: 1px solid #f5f5f5;}<br /> .sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;}<br /> .sidebar .PopularPosts ul li img {float: left;display: block;height: 85px;padding: 0;}<br /> .sidebar .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);}<br /> .sidebar .item-title {display:none !important;}<br /> .sidebar .item-title a {display:none !important;}<br />


Configuration:

. Image thumbnail kha i thlang ang.
. Snippet box ah uncheck.
. Post display kha 9 thlengin dah tur.

POPULAR POST WIDGET CSS CODE DAH DAN

A chunga stylish widget te khi blogger blog template ah dah tur chuan CSS code hi blogger template ah dah a ngai a, chu chu hetiang hian tih tur.

1. Template section ah i kal ang a, Edit HTML ah i lut ang.

2. ]]></b:skin> hi Control + F hmangin i zawng dawn nia.

3. Tichuan, ]]></b:skin> tih chungah CSS Code (Stylish Widget Code), i duh ber hi i paste dawn nia.

4. Save Template tih button kha a tawp nan i click leh ang.

5. Tichuan i blog chu han check teh le!

I Blog hmuh a lo nawm leh zual theih nan chei thin ang che. Blog dangdai leh mawi tak neih theihna tur chuan midangte Blog ang lo taka Customize hi a tul ve a, chu chuan I Blog chu midangte tana chhinchhiah awlsam bikah a siam dawn a ni.                                           Dawnga Chinzah