Change Popular Post to Circle Style : CSS

งานอดิเรกในยามว่าง ๆ ของเราก็คือการแต่ง blog เขียน blog เล่นเรื่อย ๆ แต่พอหา code นั่น นู่น นี่ มาแปะใน Blog ทั้ง random post ทั้ง recent post แล้วก็เอ๊ะ !!! ทำใม widget popular post มันดูไม่เข้ากับอันอื่นเลยล่ะ ...... คิดไปคิดมา....ก็ widget popular post ของเดิมของ blogger นั้นมันมี thumbnail เป็นรูปสี่เหลี่ยมจัตุรัสเป๊ะ ๆ แถมเวลาเอาเม้าท์ไปจิ้มก็วิ้ง ๆ ไม่ได้อีกต่างหาก ... เมื่อคิดได้ดังนี้ เราก็มาเปลี่ยนสไตล์ให้ popular post กันดีกว่าค่ะ  วิธีง่าย ๆ ก็คือไปแก้ที่ CSS ค่ะ

เข้าไปที่ แม่แบบ > กำหนดค่า > CSS > แล้วก็วาง code ลงไป

โดยเอา code ด้านล่างมาดัดแปลงและแก้ไขให้เป็นสไตล์ที่เราต้องการ ตัวอย่างที่ทำใน Blog ของเราก็เปลี่ยนตรงตัวสีแดงค่ะ เราเปลี่ยนขนาดรูป เส้นขอบ เงา ระยะห่าง แล้วก็สี background กับ border อันนี้ไม่อธิบายแล้วกันเนอะเพราะเขียนไว้ในบทความก่อนหน้าแล้ว ก็เพิ่ม .item-thumbnail img:hover {opacity: 0.6;} เวลาเอาเม้าท์ไปจิ้มจะได้รู้สึกมีวิ้ง ๆ แว๊บ ๆ 5555 (ถ้าใครมาอ่านอาจจะงงภาษาเรานิดหน่อยน้าาาา) ตัวอย่างก็อยู่ที่มุมบนขวาของ Blog เราเลยนะคะ

.PopularPosts ul li a {font: 14px}

.PopularPosts .item-thumbnail {margin: 0 5px 0 0;}

.PopularPosts .item-title {padding-top:0px;}

.PopularPosts .item-thumbnail img
{
    border-radius: 100px;
    float: left;
    margin-right: 5px;
    width: 65px;
    height: 65px;
    background-color: #F5F5F5;
    border: 1px solid #69B7E2;
    padding: 3px;
    transition: all 0.2s linear 0s;
}

.item-thumbnail img:hover {
    opacity: 0.6;
}
{background:#fff;
height:55px; width:55px;
border:1px solid #fff;
padding:3px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}