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

"

            บทความนี้ก็จะพูดถึง Blogger นะครับวันนี้ผมจะมาสอนการปรับแต่ง  Gadget Label ให้สวยงามครับก็เหมือนๆกับบทความอื่นคือเพิ่ม css  ครับก็จะทำให้มันดูดียิ่งขึ้น ซึ่งตัวนี้ผมใช้อยู่ครับ งั้นไม่เสียเวลามาดูกันเลยครับ

        ผมจะสอนปรับแต่งให้เหมือนรูปด้านบนนะครับ มาดุกันเลยครับ

วิธีทำนะครับ มาดูกันเลยย
1.เข้าไปที่ blogger ของคุณไปที่ แม่แบบ ---> แก้ไข HTML
2. ค้นหาโค้ดด้วยการกด Ctrl + F ค้นหา ]]></b:skin>   นะครับ
3. วางโค้ดด้านล้างไว้ก่อนหน้า ]]></b:skin>  นะครับ .label-size{ margin:0; padding:0; position:relative; } .label-size a{ float:left; height:24px; line-height:24px; position:relative; font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; }.label-size a:before{ content:""; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent; border-style:solid; border-width:12px 12px 12px 0; }.label-size a:after{ content:""; position:absolute; top:10px; left:0; float:left; width:4px; height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; } .label-size a:hover{background:#555;}.label-size a:hover:before{border-color:transparent #555 transparent transparent;} 4. บันทึกเทรมเพรตของเรา แล้วดูบล็อกครับ Gadget Label  ก็จะสวยขึ้นทันที

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

            บทความนี้ก็จะพูดถึง Blogger นะครับวันนี้ผมจะมาสอนการปรับแต่ง  Gadget Label ให้สวยงามครับก็เหมือนๆกับบทความอื่นคือเพิ่ม css  ครับก็จะทำให้มันดูดียิ่งขึ้น ซึ่งตัวนี้ผมใช้อยู่ครับ งั้นไม่เสียเวลามาดูกันเลยครับ

        ผมจะสอนปรับแต่งให้เหมือนรูปด้านบนนะครับ มาดุกันเลยครับ

วิธีทำนะครับ มาดูกันเลยย
1.เข้าไปที่ blogger ของคุณไปที่ แม่แบบ ---> แก้ไข HTML
2. ค้นหาโค้ดด้วยการกด Ctrl + F ค้นหา ]]></b:skin>   นะครับ
3. วางโค้ดด้านล้างไว้ก่อนหน้า ]]></b:skin>  นะครับ .label-size{ margin:0; padding:0; position:relative; } .label-size a{ float:left; height:24px; line-height:24px; position:relative; font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; }.label-size a:before{ content:""; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent; border-style:solid; border-width:12px 12px 12px 0; }.label-size a:after{ content:""; position:absolute; top:10px; left:0; float:left; width:4px; height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; } .label-size a:hover{background:#555;}.label-size a:hover:before{border-color:transparent #555 transparent transparent;} 4. บันทึกเทรมเพรตของเรา แล้วดูบล็อกครับ Gadget Label  ก็จะสวยขึ้นทันที

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