Multi-Colored Popular Posts Blog එකට දාමු.


  ජනප්‍රිය Post වලට පාට දාමු.  


මෙන්න දවස් දෙකකට විතර පස්සෙ අදත් මම පොඩි ට්‍රික් එකක් අරගෙන ආවා. මේක වැදගත් වෙන්නේ නම් බ්ලොග් කරන අයට තමයි. හරි දැන් මේ දා ගන්න එකේ රූපයක් තමයි උඩ තියෙන්නේ.


මේක දා ගන්න කලින් අපේ බ්ලොග් එකේ Popular Posts Widget නැත්තම් ඒක දා ගන්න ඕන. ඒක දා ගන්න ඕනනම් Layout -> "Add a Gadget" තෝරන්න. මේකෙ තියන Popular Posts එක ඉස්සරහා තියන + ලකුණ Click කරලා ඒක Blog එකට දා ගන්න.

දැන් ඒක දා ගත්තනම් වැඩේට බහිමු.

දැන් අපේ Blog එකේ Dashboard එකට ගිහින් ඒකේ Template තෝරන්න. දැන් එතන තියන "Edit HTML" click කරන්න.

දැන් මේකේ ( Ctrl + F ) ගහලා මේ Code එක ]]></b:skin> එතනට Copy කරලා Search කරන්න.

දැන් මේ පහල තියන Code එක ]]></b:skin> උඩින් Paste කරන්න.

<!-- Popular posts multi colored UI theme -->
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular posts multicolored UI theme -->

    දැන් ඔයාලගේ Template එක Save කරගන්න. ඊට පස්සේ Blog එකට ගිහින් බලන්න. හරි ගියානම් ගොඩ.

    Post එක හොදයි නම් Comment එකකුත් දාගෙනම යන්න.
    Previous
    Next Post »

    1 comments (අදහස්):

    Click here for comments (අදහස්)
    December 24, 2015 at 6:47 PM ×

    බ්ලොග් ගැන දිගටම ලියපන් අපි එනවා බලන්න..

    Congrats bro Mahesh Samantha Kumara you got PERTAMAX...! hehehehe...
    Reply
    avatar


    බැලුවද?

    Comment එකකුත් දාගෙනම යමු නේ.....
    ConversionConversion EmoticonEmoticon