มาปรับแต่ Gadget ป้ายกำกับให้สวยงามกันเถอะ Blogger

"

        ก็หลายๆบทความผมได้เขียนเกี่ยวกับ Linux ไปเยอะแล้วเลยจะมาพูดถึง Blogger บ้างผมจะมาสอนการแต่ง Gadget ป้ายกำกับครับ เบื่อมั้ยกับแบบเรียบๆ ไม่สวย เรามาลองปรับแต่งกันดูมั้ย ฮาๆ งั้นผมไม่พูดมากแล้ว มาทำตามผมกันเลยครับ เข้า  Blogger ของคุณรอเลยนะครับ

      วันนี้ผมจะแนะนำการแต่ง Gadget ป้ายกำกับ  ผมจะสอนแต่งให้เป็นแบบรูปภาพด้านลางนะครับ งั้นเรามาดูวิธีกันเลยครับ 

        วิธีแต่งนะครับ

1.เข้าไปที่ Blogger ของคุณแล้วไปที่ แม่แบบ ---> แก้ไข HTML

2.ค้นหา ]]></b:skin> โดยการกด Ctrl+F ค้นหาครับ

3.จากนั้นก็วางโค้ดด้านล่างไว้ก่อน ]]></b:skin> นะครับ

#Label1 ul li a:hover{color:#fff;text-decoration:none} #Label1 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 40px 0px 0px; min-height: 30px; orphans: 2; padding-top: 10px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #Label1 ul li:first-child:after, #Label1 ul li:first-child + li:after, #Label1 ul li:first-child + li + li:after, #Label1 ul li:first-child + li + li + li:after, #Label1 ul li:first-child + li + li + li + li:after, #Label1 ul li:first-child + li + li + li + li + li:after, #Label1 ul li:first-child + li + li + li + li + li + li:after, #Label1 ul li:first-child + li + li + li + li + li + li + li:after, #Label1 ul li:first-child + li + li + li + li + li + li + li + li:after, #Label1 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} #Label1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #Label1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #Label1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #Label1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #Label1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #Label1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #Label1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #Label1 ul li:first-child + li + li + li + li + li:after{content:"6"} #Label1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #Label1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #Label1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #Label1 ul li:first-child + li + li + li + li:after{content:"5"} #Label1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #Label1 ul li:first-child + li + li + li:after{content:"4"} #Label1 ul li:first-child + li + li{background:#ffde4c;width:90%} #Label1 ul li:first-child + li + li:after{content:"3"} #Label1 ul li:first-child + li{background:#ff764c; width:90%} #Label1 ul li:first-child + li:after{content:"2"} #Label1 ul li:first-child{background:#ff4c54 ;width:90%} #Label1 ul li:first-child:after{content:"1"} #Label1 ul{margin:0;padding:0px 0;list-style-type:none} #Label1 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} Read more: http://www.digitalhubinc.com/2013/01/multi-colored-labels-widget-for-blogger.html#ixzz31KTbACD3

4.จากนั้นก้บันทึกครับ แล้วลองดูบล็อกของคุณเลย

        วิธีนี้ก็เป็นวิธีง่ายๆ เพียงแค่เราก๊อปโค้ด css ไปเพิ่มเท่านั้นเองครับ หากคุณเก่งเรื่อง css ก็จะสามารถแก้ไข เนรมิต บล็อกได้ตามใจเลยครับ สำหรับบทความนี้ผมก็ขอจบเพียงแค่นี้นะครับ มีปัญหาอะไรก้สอบถามได้เลยที่คอมเมนต์นะครับ"

        ก็หลายๆบทความผมได้เขียนเกี่ยวกับ Linux ไปเยอะแล้วเลยจะมาพูดถึง Blogger บ้างผมจะมาสอนการแต่ง Gadget ป้ายกำกับครับ เบื่อมั้ยกับแบบเรียบๆ ไม่สวย เรามาลองปรับแต่งกันดูมั้ย ฮาๆ งั้นผมไม่พูดมากแล้ว มาทำตามผมกันเลยครับ เข้า  Blogger ของคุณรอเลยนะครับ

      วันนี้ผมจะแนะนำการแต่ง Gadget ป้ายกำกับ  ผมจะสอนแต่งให้เป็นแบบรูปภาพด้านลางนะครับ งั้นเรามาดูวิธีกันเลยครับ 

        วิธีแต่งนะครับ

1.เข้าไปที่ Blogger ของคุณแล้วไปที่ แม่แบบ ---> แก้ไข HTML

2.ค้นหา ]]></b:skin> โดยการกด Ctrl+F ค้นหาครับ

3.จากนั้นก็วางโค้ดด้านล่างไว้ก่อน ]]></b:skin> นะครับ

#Label1 ul li a:hover{color:#fff;text-decoration:none} #Label1 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 40px 0px 0px; min-height: 30px; orphans: 2; padding-top: 10px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #Label1 ul li:first-child:after, #Label1 ul li:first-child + li:after, #Label1 ul li:first-child + li + li:after, #Label1 ul li:first-child + li + li + li:after, #Label1 ul li:first-child + li + li + li + li:after, #Label1 ul li:first-child + li + li + li + li + li:after, #Label1 ul li:first-child + li + li + li + li + li + li:after, #Label1 ul li:first-child + li + li + li + li + li + li + li:after, #Label1 ul li:first-child + li + li + li + li + li + li + li + li:after, #Label1 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} #Label1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #Label1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #Label1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #Label1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #Label1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #Label1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #Label1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #Label1 ul li:first-child + li + li + li + li + li:after{content:"6"} #Label1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #Label1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #Label1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #Label1 ul li:first-child + li + li + li + li:after{content:"5"} #Label1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #Label1 ul li:first-child + li + li + li:after{content:"4"} #Label1 ul li:first-child + li + li{background:#ffde4c;width:90%} #Label1 ul li:first-child + li + li:after{content:"3"} #Label1 ul li:first-child + li{background:#ff764c; width:90%} #Label1 ul li:first-child + li:after{content:"2"} #Label1 ul li:first-child{background:#ff4c54 ;width:90%} #Label1 ul li:first-child:after{content:"1"} #Label1 ul{margin:0;padding:0px 0;list-style-type:none} #Label1 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} Read more: http://www.digitalhubinc.com/2013/01/multi-colored-labels-widget-for-blogger.html#ixzz31KTbACD3

4.จากนั้นก้บันทึกครับ แล้วลองดูบล็อกของคุณเลย

        วิธีนี้ก็เป็นวิธีง่ายๆ เพียงแค่เราก๊อปโค้ด css ไปเพิ่มเท่านั้นเองครับ หากคุณเก่งเรื่อง css ก็จะสามารถแก้ไข เนรมิต บล็อกได้ตามใจเลยครับ สำหรับบทความนี้ผมก็ขอจบเพียงแค่นี้นะครับ มีปัญหาอะไรก้สอบถามได้เลยที่คอมเมนต์นะครับ