POPULAR POSTS GALLERY STYLE

Popular Posts Gallery Style

ဒါက​တော့ 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 အ​ရေအတွက်နှင့်​ပေါ်​စေခြင်တဲ့အ​ကြောင်းအရာများကိုအ​ပေါ်ကပုံရဲ့​နေရာမှာသွား​ရောက်ပြင်ဆင်​ပေးပါ။

0

0

Loading...