ปรับแต่ง Gadget Popular Post Blogger ให้มีสีสันกันเถอะ

"

               ก็กลับมาอีกครั้งกับผมนาย KMS คนเดิมในบทความนี้เราจะมาพูดถึง การตกแต่ง Blogger ของเรากันหน่อย ซึ่งที่ผ่านๆมาผมก็เขียน Linux ซะส่วนใหญ่ บทความนี้เลยเปลี่ยนอารมณ์กันบ้าง เราจะมาพูดถึง Gadget Popular Post ของเราครับหรือภาษาไทย บทความที่ได้รับความนิยมนั่นเอง เรามาตกแต่งสีสันให้สวยงามกันครับ

           เอาละเบื่อมั้ยที่ Gadget Popular Post ของคุณไม่สีสันอะไรเลย ไม่สะดุดตา เอาละเรามาแต่งกันครับ การแต่งนี้ก็ไม่ยาก ก็แค่เราเพิ่ม css เข้าไปครับ เพือให้มันมีสีสันขึ้น ถ้าใครเก่ง css ก็แต่งได้ตามใจเลย วันนี้ผมจะพาแต่งเหมือนกับรูปภาพด้านล่างนะครับ เอาละพูดมากไปละ มาดูวิธีทำกันครับ

วิธีทำนะครับ  มาดูกันเลยย
1.เข้าไปที่ blogger ของคุณไปที่ แม่แบบ ---> แก้ไข HTML
2. ค้นหาโค้ดด้วยการกด Ctrl + F ค้นหา ]]></b:skin> นะครับ
3. วางโค้ดด้านล้างไว้ก่อนหน้า ]]></b:skin> นะครับ

/*----PopularPost ----*/ #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 10px 0px -5px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; } #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #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, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #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:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #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:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px;} #PopularPosts1 img { border-radius:200px; width:60px; height:60px; margin-left:4px; }

4. บันทึกเทรมเพรตของเรา แล้วดูบล็อกครับ Gadget Popular Post  ก็จะสวยขึ้นทันที

 สำหรับในบทความนี้ก็จบเพียงแค่นี้นะครับ บทความหน้าผมจะเขียนอะไรอย่าลืมติดตามกันนะครับ"

               ก็กลับมาอีกครั้งกับผมนาย KMS คนเดิมในบทความนี้เราจะมาพูดถึง การตกแต่ง Blogger ของเรากันหน่อย ซึ่งที่ผ่านๆมาผมก็เขียน Linux ซะส่วนใหญ่ บทความนี้เลยเปลี่ยนอารมณ์กันบ้าง เราจะมาพูดถึง Gadget Popular Post ของเราครับหรือภาษาไทย บทความที่ได้รับความนิยมนั่นเอง เรามาตกแต่งสีสันให้สวยงามกันครับ

           เอาละเบื่อมั้ยที่ Gadget Popular Post ของคุณไม่สีสันอะไรเลย ไม่สะดุดตา เอาละเรามาแต่งกันครับ การแต่งนี้ก็ไม่ยาก ก็แค่เราเพิ่ม css เข้าไปครับ เพือให้มันมีสีสันขึ้น ถ้าใครเก่ง css ก็แต่งได้ตามใจเลย วันนี้ผมจะพาแต่งเหมือนกับรูปภาพด้านล่างนะครับ เอาละพูดมากไปละ มาดูวิธีทำกันครับ

วิธีทำนะครับ  มาดูกันเลยย
1.เข้าไปที่ blogger ของคุณไปที่ แม่แบบ ---> แก้ไข HTML
2. ค้นหาโค้ดด้วยการกด Ctrl + F ค้นหา ]]></b:skin> นะครับ
3. วางโค้ดด้านล้างไว้ก่อนหน้า ]]></b:skin> นะครับ

/*----PopularPost ----*/ #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 10px 0px -5px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; } #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #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, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #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:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #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:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px;} #PopularPosts1 img { border-radius:200px; width:60px; height:60px; margin-left:4px; }

4. บันทึกเทรมเพรตของเรา แล้วดูบล็อกครับ Gadget Popular Post  ก็จะสวยขึ้นทันที

 สำหรับในบทความนี้ก็จบเพียงแค่นี้นะครับ บทความหน้าผมจะเขียนอะไรอย่าลืมติดตามกันนะครับ