android nexus 7: CSS tricks

Home / Posts filed under CSS tricks

Tampilkan postingan dengan label CSS tricks. Tampilkan semua postingan

How to Customize your Bullets Style in Blogger

Posted by Unknown Selasa, 14 Januari 2014 0 komentar

Customize Bullets Style in Blogger:By default blogger have simple Bullets style that is Circle.Which does'nt look good as visitors likes creativity.So its the time to customize your bullets style easily.Follow the below easy steps to customize your bullets style.

How To customize your bullets style in blogger

Visit Blogger dashboard >> template >> Edit HTML (As shown in the image below).

Now search for below code (press ctrl+F to find).

.post-footer

Now copy the below code and paste it above the .post-footer code.

.post ul {list-style:none;
}
.post ul li {
    line-height: 1.4em;
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnxntsglUyZZbMk8LyZKZxdjwOeXqDTSK64NAseoWqWcbHRK02U2-RXMyVeRBlYd3gmoYkA-Ml10QnAqtGnH4nDv_sDbFpo8iz9o9_ZCWauNfbwLJAi-a0fv0n6_by6MuOmYQlCnPTrSA/s400/255.gif) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}
.post ul li:hover {
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAa1M1MlYLVC7y7RZgEfOj8wEbIlzwrU8-9kez6HoQ-gRQiA7Ayiqiqzld8D6dEPY-wVwHW2SSG-1lAbt9TlFAuZnp8YiOpk4YpyacX0c-a11l3shHl4s4UCNNM4e2QSnQsY_7Hkxz-wQ/s400/251.gif) no-repeat scroll 0px 4px;
}

Now save your template because you have customized your blogger bullets style!!

For any problems and feedback comment it!

Baca Selengkapnya ....

How To add a background image to Widgets Title in blogger

Posted by Unknown Jumat, 29 November 2013 0 komentar

Add Background image to Sidebar widgets in Blogger: Recently one of our blog readers ask me how he can add a background image to Widgets title in blogger. So its really simple here I am going to show you how you can add a background image to widgets title actually adding background image to to widget title increases your blog attraction.Following is the detailed tutorial how you can do it:

How To Add Background Image To Widgets Title in Blogger

Visit Blogger dashboard.
Click on template>>Edit HTML.
Proceed and press ctrl+f find ]]></b:skin>
Now copy the below CSS coding and paste it above the ]]></b:skin> tag.

.sidebar h2 {
background: url("http://3.bp.blogspot.com/-UOvBXjlSo9A/UbImv57RXCI/AAAAAAAAMtM/oYUarpzF2U4/s1600/sidebar.png") repeat scroll 0 0 transparent;
color: #FFFFFF;
font-family: "Open Sans",georgia,arial,verdana;
font-size: 20px;
font-weight: bold;
height: 50px;
line-height: 34px;
margin: 0 0 0 -10px;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
width: 269px;}