ဒါကတော့ Popular Posts များကို Gallery Style နဲ့ပြုလုပ်ထားတဲ့ widget design လေးပါ။အရမ်းကိုလှပသေသပ်ပါတယ်။မူရင်း Template မှာပါတဲ့ Popular Posts Style ကအမြင်အားဖြင့်နဲနဲရိုးတယ်လို့ထင်ရပါတယ်။အသစ်အဆန်း Design အလန်းလေးတွေကိုကြိုက်နှစ်သက်တဲ့မိတ်ဆွေတွေအတွက် Design ပုံပြထားပါတယ်။ကြည့်ပြီးလို့ကြိုက်နှစ်သက်တယ်ဆိုရင်အောက်ကပေးထားတဲ့ style code တွေကိုယူ၍မိမိ Blog Site မှာအခုပဲထည့်သွင်းအသုံးပြုလိုက်ပါ။ပြုလုပ်ပုံပြုလုပ်နည်းကလဲမခက်ပါဘူးထုံးစံအတိုင်းပါပဲ HTML / JavaScript နဲ့ပြုလုပ်ရမှာပါ။
NO(1)။ မိမိ Blog Site ကို account အရင်ဝင်ပါ
NO(2)။ dashboard ထဲက Layout ကိုနှိပ်ပါ
NO(3)။ Add a Gadget ကိုနှိပ်ပါ
NO(4)။ HTML / JavaScript ကိုနိပ်ပါ
NO(5)။ပေါ်လာတဲ့ Box အကွက်ကြီးထဲကိုအောက်ကပေးထားတဲ့ style code တွေကိုထည့်ပေးပါ။
NO(6)။ save ကိုနိပ်ပြီးပါပြီ။
<style type="text/css">
.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;}
</style>
မိမိပေါ်စေခြင်တဲ့ post အရေအတွက်နှင့်ပေါ်စေခြင်တဲ့အကြောင်းအရာများကိုအပေါ်ကပုံရဲ့နေရာမှာသွားရောက်ပြင်ဆင်ပေးပါ။