Sunday, 22 January 2012

Cara Mengganti Default Bullet Icon Blogger

Advertisement

Apakah ada sobat blogger yang merasa bosan dengan default bullet icon bawaan template seperti yang saya alami? Kalau iya berarti sobat kudu merubah atau mengganti bullet icon bawaan template blog sobat tuh. Setelah muter-muter akhirnya saya bisa juga mengganti bullet icon blogspot atau lebih tepatnya default bullet icon bawaan template blog yang saya pakai ini.


mengganti default bullet icon blogspot atau blogger

Bullet icon yang sudah dimodifikasi bisa digunakan untuk mempercantik random posts atau untuk keperluan lain supaya terlihat lebih rapi dan cantik. Tertarik ingin mengganti deault icon bullet list blog sobat? Yaudah lanjutin ajah baca tentang cara mengganti default bullet arrow icon list blogger atau blogspot ini hehehe...

Cara mengganti default bullet icon blogger atau blogspot

  • Login ke blogger

  • Pilih Rancangan / Design kemudian pilih Edit HTML

  • Cari menu li yang ingin diganti dengan arrow icon
    Beda template biasanya juga berbeda, jika sobat ingin merubah default bullet icon pada sidebar maka kodenya terlihat seperti ini

    .sidebar li {
    font-size: inherit;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5UOUN3f3xL8Kte-eEYUIZksra76AcyFnge1lC3yg7Xmfta8cZ5UcC2a3WsylEwrwGHy3d6YpZMg4haCVBvHWyR1ufbs8o3cMZn4hdVwud7Y_jI_62N1J8Gb_ySjTizzkp6lGJNlo5nKVJ/s320/bullet_list_icon.jpg) no-repeat left top; border-bottom: none;
    line-height:1.25em;
    padding-left:1.5em;
    padding-right:1.5em;
    }

  • Jika sobat ingin mengganti bullet icon untuk diletakkan di postingan atau artikel sobat harus cari kode post li terlebih dahulu, biasanya terlihat seperti ini

    .post li {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    line-height: 1.5em;
    }

    Setelah ketemu sobat bisa merubah atau mengganti dengan bullet icon tersebut sesuai selera sobat sehingga akan terlihat seperti ini

    .post li {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5UOUN3f3xL8Kte-eEYUIZksra76AcyFnge1lC3yg7Xmfta8cZ5UcC2a3WsylEwrwGHy3d6YpZMg4haCVBvHWyR1ufbs8o3cMZn4hdVwud7Y_jI_62N1J8Gb_ySjTizzkp6lGJNlo5nKVJ/s320/bullet_list_icon.jpg) no-repeat 0px .30em;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    line-height: 1.5em;
    }


  • Ganti alamat icon yang berwarna merah sesuai alamat icon yang akan sobat gunakan
Selesai deh, mudahkan cara mengganti default bullet icon blogger atau blogspot ini? Selamat mencoba...


EmoticonEmoticon