How to Create Cool Label Widgets on Blogger

Table of Content [Hide]


    How to Create Cool Label Widgets on Blogger -- Labels are a feature on Blogger that is used to group different posts or articles into the same category. This Label widget is usually installed on the blog sidebar so that visitors can be freer to search for the article they want.

    But if it looks ordinary, it must be less attractive, right? Here we will make it nicer and cooler by changing its appearance like #Arlina Design which is one of the Leading Bloggers in Indonesia.

    The tutorial I am giving here is intended for VioMagz template users. You can also attach it to a template in addition to if you can customize it.

    Well, let's get straight to the steps.

    1. Go to Blogger > Theme > Edit HTML.

    2. For VioMagz users, look for codes like this.

    .artikel-terbaru ul li::before, .list-label-widget-content ul li::before, .LinkList ul li::before, .PageList ul li::before

    3. Change the code to something like this.

    .artikel-terbaru ul li::before, .LinkList ul li::before, .PageList ul li::before

    4. Then you look for the code below again and then you delete it.

    .list-label-widget-content ul li::before {
        content: "f07b";

    The above step is done to remove the folder icon on the default label of the VioMagz template. Skip the steps above if you guys are using a template other than that.

    5. After that you put the code below just above ]]></b:skin>.

    /* Label Arlina by */
    .list-label-widget-content ul li a {border-bottom: 1px dotted #e6e6e6;border-radius: 5px;margin-bottom: 3px;font-size: 14px;color: #de0985;text-overflow: ellipsis;transition: initial;overflow: hidden;white-space: nowrap;display: block;transition: initial;padding: 7px 11px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
    .list-label-widget-content ul li a:hover {background: #f5f5f5;color: #888;}
    .list-label-widget-content ul li {list-style-type: none;margin: 0 0;border:none;display: inline-grid;width: 100%;}
    .list-label-widget-content {padding: 0px 7px;}
    div.Label{background: #fff;padding-bottom: 20px;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
    div.Label h2 {border-top: 2px solid #df0d83;padding: 15px 0;text-indent: 20px;width: 100%;border-bottom: 1px solid #dadada;margin-bottom: 5px;}
    .Label h2 svg {float: right;margin-right: 15px;    display: inline-block;width: 20px;height: 20px;vertical-align: -5px;background-repeat: no-repeat !important;content: '';}
    .widget:hover h2 > svg {animation: rubberBand 1s;}
    .list-label-widget-content ul li a:before {background-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns=''><path d='M20,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8A2,2 0 0,0 20,6M17.94,17L15,15.28L12.06,17L12.84,13.67L10.25,11.43L13.66,11.14L15,8L16.34,11.14L19.75,11.43L17.16,13.67L17.94,17Z' fill='%23de0985'></path></svg>");margin-right: 10px;display: inline-block;width: 20px;height: 20px;vertical-align: -5px;background-repeat: no-repeat !important;content: '';}
    @keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

    Please change the color code on the section I marked to change the color of the folder icon

    6. Next, please jump to the Label Widget.

    Label Widget.

    7. Then you guys look for the code <data:title/> and put the code below right after the code.

    <svg viewBox="0 0 24 24">
    <path d="M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z" fill="#e94c60"></path>

    Change the color code on the section I marked to change the color of the icon tag

    8. After that press Save and also make sure your Label Widget is in The List view.

    Related: How to Make Customize of Blogger Comment Message Cooler


    Thus our discussion about How to Create Label Widgets Like Arlina Design on Blogger will hopefully be useful for all of you. If you have anything to ask please just comment below.

    Show Comments

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel