Cảm ơn bạn đã tham gia khảo sát
Đóng góp của bạn sẽ giúp chúng tôi dần cải thiện về mặt nội dung cũng như giao diện của trang.

Khanh Blogger

Khanh Blogger

Tạo Widget Label Đẹp cho Blogspot

Chào các bạn hôm nay mình sẽ chia sẻ cho các bạn thủ thuật tạo Widget Label tuyệt đẹp cho blogspot dạng cột. Đây là widget thích hợp cho các web chia sẻ giao diện, chia sẻ ảnh cũng như khá phù hợp cho blog cá nhân.
Tạo Widget Label Đẹp cho Blogspot

XEM DEMO

Hướng dẫn cách làm

Bước 1: Vào bố cục >> Thêm tiện ích >> Thêm tiện ích nhãn >> Làm theo hình dưới

Tạo Widget Label Đẹp cho Blogspot

Bước 2: Chèn đoạn code dưới đây vào dưới thẻ <body> hoặc bất kì đâu trong template

<style> .cloud-label-widget-content{display:inline-block;text-align:center} .cloud-label-widget-content .label-size{display:inline-block;float:center;font-size:14px;font-weight:600;line-height:normal;margin:0 5px 5px 0;opacity:1} .cloud-label-widget-content .label-size a{background:#fff;color:#333;float:left;line-height:100%;margin:0;padding:15px 15px;transition:all .6s;border:1px solid #ddd} .cloud-label-widget-content .label-size span{background:#00a2ff;color:#fff;float:left;line-height:100%;margin:0;padding:15px 15px;transition:all .6s;border:1px solid #ddd} .cloud-label-widget-content .label-size:hover a{color:#FFF!important} .cloud-label-widget-content .label-size .label-count{background:#eee;color:#444;white-space:nowrap;display:inline-block;padding:0 15px;margin-left:-3px;height:44px;line-height:44px;font-size:13px;font-weight:600;border:1px solid #ddd} .Label li{position:relative;padding:5px 20px 10px 30px!important;list-style:disc;display:block;font-size:15px} .Label li:before{content:"\f111";font-family:fontAwesome;color:#ccc;font-size:8px;margin-left:15px;position:absolute;top:9px;left:0;padding:0;text-decoration:none;margin-top:1px} .Label li a{color:#2D2D2D;font-family:'Roboto','sans-serif';font-weight:700} .Label li:hover:before{color:#00a2ff;transition:all .6s} .Label li span{padding:0 10px;display:block;line-height:20px;position:absolute;right:15px;top:10px;font-size:11px;background:#00a2ff;color:#fff} .Label li:hover span{background:#FC3931;transition:all .6s} .bttn-unite a{margin:0;padding:0;border-width:0;border-color:transparent;background:transparent;font-weight:400;cursor:pointer;position:relative;font-family:inherit;padding:5px 12px;z-index:0;overflow:hidden;border:1px solid #1d89ff;color:#1d89ff;-webkit-transition:color .3s cubic-bezier(.02,.01,.47,1),border-color .3s cubic-bezier(.02,.01,.47,1);transition:color .3s cubic-bezier(.02,.01,.47,1),border-color .3s cubic-bezier(.02,.01,.47,1)} .bttn-unite.bttn-primary a:before{background:#d6e3ff;-webkit-transform:translate3d(-110%,-10%,0) skewX(-20deg);transform:translate3d(-110%,-10%,0) skewX(-20deg)} .bttn-unite.bttn-primary a:after,.bttn-unite.bttn-primary a:before{position:absolute;top:0;left:0;width:100%;height:120%;content:'';opacity:0;z-index:-1;-webkit-transition:opacity .15s cubic-bezier(.02,.01,.47,1),-webkit-transform .15s cubic-bezier(.02,.01,.47,1);transition:opacity .15s cubic-bezier(.02,.01,.47,1),-webkit-transform .15s cubic-bezier(.02,.01,.47,1);transition:transform .15s cubic-bezier(.02,.01,.47,1),opacity .15s cubic-bezier(.02,.01,.47,1);transition:transform .15s cubic-bezier(.02,.01,.47,1),opacity .15s cubic-bezier(.02,.01,.47,1),-webkit-transform .15s cubic-bezier(.02,.01,.47,1)} .bttn-unite.bttn-primary a:after{background:rgba(214,227,255,.7);-webkit-transform:translate3d(110%,-10%,0) skewX(-20deg);transform:translate3d(110%,-10%,0) skewX(-20deg)} .bttn-unite.bttn-primary a:focus,.bttn-unite.bttn-primary a:hover{box-shadow:0 1px 8px rgba(58,51,53,.3);color:#1d89ff;-webkit-transition:all .5s cubic-bezier(.02,.01,.47,1);transition:all .5s cubic-bezier(.02,.01,.47,1)} .bttn-unite.bttn-primary a:focus:before,.bttn-unite.bttn-primary a:hover:before{-webkit-transform:translate3d(-50%,-10%,0) skewX(-20deg);transform:translate3d(-50%,-10%,0) skewX(-20deg)} .bttn-unite.bttn-primary a:focus:after,.bttn-unite.bttn-primary a:focus:before,.bttn-unite.bttn-primary a:hover:after,.bttn-unite.bttn-primary a:hover:before{opacity:1;-webkit-transition:opacity .25s cubic-bezier(.02,.01,.47,1),-webkit-transform .25s cubic-bezier(.02,.01,.47,1);transition:opacity .25s cubic-bezier(.02,.01,.47,1),-webkit-transform .25s cubic-bezier(.02,.01,.47,1);transition:transform .25s cubic-bezier(.02,.01,.47,1),opacity .25s cubic-bezier(.02,.01,.47,1);transition:transform .25s cubic-bezier(.02,.01,.47,1),opacity .25s cubic-bezier(.02,.01,.47,1),-webkit-transform .25s cubic-bezier(.02,.01,.47,1)} .bttn-unite.bttn-primary a:focus:after,.bttn-unite.bttn-primary a:hover:after{-webkit-transform:translate3d(50%,-10%,0) skewX(-20deg);transform:translate3d(50%,-10%,0) skewX(-20deg)} .bttn-unite.bttn-primary a{border-color:#1d89ff;color:#1d89ff} .bttn-unite.bttn-primary a:focus,.bttn-unite.bttn-primary a:hover{background:#1d89ff;color:#fff} .bttn-unite.bttn-primary a:before{background:#006de3} .bttn-unite.bttn-primary a:after{background:#1d89ff} </style>

Bước 3: Vào chủ đề >> Chỉnh sửa HTML >> Tìm đến tiện ích label1 >> Thay thế toàn bộ code bên dưới này trong cặp thẻ <b:includable id='main'> ... </b:includable>

<b:includable id='main'> <b:if cond='data:title != &quot;&quot;'> <h2><data:title/></h2> </b:if> <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'> <b:if cond='data:display == &quot;list&quot;'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=12&quot;'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>(<data:label.count/>)</span> </b:if> </li> </b:loop> </ul> <b:else/> <b:loop values='data:labels' var='label'> <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize + &quot; btn btn-primary btn-round bttn-unite bttn-lg bttn-primary&quot;'> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;max-results=12&quot;'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'>(<data:label.count/>)</span> </b:if> </span> </b:loop> </b:if> <b:include name='quickedit'/> </div> </b:includable>

Trên đây mình đã tích hợp cả trang search label không bị lỗi Phân trang nhé. Bạn cũng có thể dùng CSS để ẩn đi widget này trên mobile vì nó sẽ mất đi tính thẩm mỹ nếu ở thiết bị có kích thước màn hình nhỏ. Ngoài ra bạn cũng có thể tùy biến sử dụng loại button khác nếu không thích loại button của mình. Nếu có gì thắc mắc comment bên dưới nha.

Chúc các bạn thành công!

Bình luận

XEM NHIỀU TRONG TUẦN

Bạn có thể quan tâm