Membuat background Pada Judul Sidebar

Ingin mengganti background pada judul atau titel sidebar seperti contoh dibawah ini?
mengganti background pada judul atau titel sidebar< mengganti background pada judul atau titel sidebar<






Berikut cara mengganti background pada judul sidebar, tutorial ini sudah anaa praktekan diblog anaa disini dan disini

    * Loggin ke Blogger => Layout =>Edit HTML dan cari kode dibawah.

    .sidebar h2 {

    * Tambah kode berikut dibawah kode tadi

    background:url(alamat image anda disini)repeat-x;

    * Isi tulisan berwarna merah diatas dengan alamat gambar anda
    * Kalau ditemplate anda tidak menemukan kode .sidebar h2 {
    * Tambahkan saja kode berikut pada sidebar content

    .sidebar h2 {
    background:url(alamat image anda disini)repeat-x;
    color: #FFFF66;
    font-size: 11px;
    font-family: Georgia;
    font-weight: strong;
    margin: 0px 0px 5px 0px;
    padding: 3px 0px 3px 10px;
    text-align:center;
    }

    * Note edit tulisan berwarna merah dengan alamat image/ gambar anda, warna ungu warna tulisan, warna biru ukuran tulisan, warna hijau kedudukan tulisan!

Untuk mengedit warna font anda bisa lihat kode warna disini

    * Simpan template!

Semoga bermanfaat!

»»  READMORE...

Membuat Background Pada Judul Postingan

Postingan anaa kali ini masih tentang modifikasi background pada template kalau sebelumnya trik membuat background pada judul sidebar sekarang anaa ingin berbagi trik sederhana lagi, bagaimana membuat background pada judul atau titel posts yang contohnya bisa dilihat pada gambar berikut atau aplikasi nyatanya disini
background pada titel posts
Mudah saja, berikut langkah langkah membuat background pada titel posts:

    * Log in ke blogger=> pada dasbor=> klik tata letak=> edit HTML=> cari kode berikut:

    .post h3 {
      margin:.25em 0 0;
      padding:0 0 4px;
      font-size:140%;
      font-weight:normal;
      line-height:1.4em;
    text-align:center;
    }

    * kalau sudah dapat sisipkan kode berikut

    background: url(alamat image anda)repeat-x;

    * Sehingga keselurahannya menjadi seperti ini:

    .post h3 {
      background: url(alamat image anda)repeat-x;
      margin:.25em 0 0;
      padding:0 0 4px;
      font-size:140%;
      font-weight:normal;
      line-height:1.4em;
    text-align:center;
    }

    * Terakhir klik save/ simpan.

Nah benar mudah bukan? Kalau hanya ingin mengganti background judul postingan dengan warna cukup sisipkan kode warna pada background seperti contoh berikut:

    background: #5FB404;

Untuk melihat macam macam kode warna klik disini

»»  READMORE...

Membuat Efek Stabilo/ Background Tulisan

Kalau sebelumnya anaa pernah membuat postingan cara membuat background pada postingan, kali ini anaa ingin sharing lagi cara membuat efek stabilo atau cara membuat background pada tulisan. Seperti ini:
Contoh tulisan Dengan Efek Stabilo

Contoh tulisan Dengan Efek Stabilo
Bagaimana cara membuatnya? Mudah saja hanya dengan menambahkan code berikut

    <span style="background-color:#FFFFB3;"> Disini letak tulisan yang ingin diberi efek stabilo </span>

Untuk menambahkan code tersebut anda harus dalam edit HTML.
Untuk melihat code warna dapat merujuk disini

»»  READMORE...

Cara Membuat Link Memiliki Ragam Efek Menarik

Bingung mau ngasih judul apa, maksud anaa jika Ingin link tersentuh pointer menjadi huruf besar, bekedip kedip warna pelangi dan backgroundnya seperti kembang api atau bintang bertaburan (contohnya seperti di blog ini).
Berikut cara buatnya:

    * Loggin ke blogger
    * Klick layout atau tata letak
    * Edit HTML
    * Cari code berikut:

    hover

    * Untuk memudahkan tekan ctrl+F, hasilnya akan banyak.
    * Setelah ketemu tambahkan code berikut sejajar pada setiap code tadi.

    { color: #00FFFF; text-transform: uppercase; font-weight: bolder; font-size: 20px; background-image: url(http://i27.tinypic.com/2626vyh.jpg); }

    * Silahkan edit codenya sesuai selera anda, font size, image backgroud dan warna font, untuk code warna bisa lihat disini
    * Jangan lupa save, simpan template!

Kalau ingin linknya berkedip warna pelangi lihat disini

»»  READMORE...

Membuat Effect Hover Pada Image Dengan CSS

Postingan kali ini saya hanya ingin mengetengahkan trik sederhana membuat effect hover pada image dengan bantuan CSS. Seperti apa effect yang terlihat, silahkan sorotkan pointer pada sample image dibawah ini:

Nah cara menambahkan effect hover pada image untuk template blogger sebagai berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

    .hovereffect img {
    opacity:0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity:0.5;
    }
    .hovereffect:hover img {
    opacity:1.0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -moz-opacity:1.0;
    -khtml-opacity:1;
    }

3. Simpan Template

Sedikit penjelasan dari kode CSS diatas, untuk membuat effect buram atau hover pada image kode yang kita tambahkan adalah "hovereffect" sedangkan "opacity", "filter:" alpha, "-moz-opacity" dan "-khtml-opacity" adalah digunakan untuk membuat effect hover terbaca pada beberapa browser. Seperti:

Properti "opacity" digunakan untuk browser yang mendukung standar CSS3 (sebagian besar browser modern mendukung CSS3).
Sementara "filter: alpha" adalah untuk Internet Explorer,
"-Moz-opacity" adalah untuk untuk Firefox, walaupun versi baru mendukung "opasitas",
"-Khtml-opacity" adalah untuk Safari dan Chrome untuk kompatibilitas ke belakang.
"0.5" dan "1.0" digunakan untuk memberitahu browser kuantitas kegelapan.

Sekarang untuk menambahkan effect ini, sobat harus menambahkan class = "hovereffect" untuk image sobat.

Sebagai contoh biasanya ketika kita menambahkan image kodenya sebagai berikut:

    <a href="http://i42.tinypic.com/6ellog.jpg"><img border="0" height="240" src="http://i42.tinypic.com/6ellog.jpg" width="320" /></a>

Untuk menambahkan effect hover pada image kodenya jadi seperti dibawah ini:

    <a class="hovereffect" href="http://i42.tinypic.com/6ellog.jpg"><img border="0" height="240" src="http://i42.tinypic.com/6ellog.jpg" width="320" /></a>

Effect hover ini tidak saja berfungsi untuk blogger tapi juga dapat digunakan dalam platform blog yang menggunakan CSS, seperti Wordpress.

Lihat juga cara membuat hover pada link disini

»»  READMORE...

Merubah Posisi Sidebar & Main Pada Template Blogger

InsyaAllah kali ini saya ingin berbagi trik mudah bahkan sangat sederhana, yang saya temukan hasil dari otak-atik CSS saat mencoba mendesain template baru. Yaitu cara merubah posisi sidebar dan main (kolom utama tempat postingan) pada template blogger, sebagai contoh tampilan elemen halaman template default minima seperti image berikut:

Merubah Posisi Sidebar Dan Main Pada Template Blogger

Dari gambar diatas kita bisa melihat posisi sidebar berada disebelah kanan, sedangkan kolom utama disebelah kiri. Untuk merubah posisi sidebar dan main menjadi sebaliknya seperti gambar dibawah ini, mudah saja silahkan ikuti tutorial berikut:

Merubah Posisi Sidebar Dan Main Pada Template Blogger

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Cari kode berikut:

    #main-wrapper {
      width: 410px;
      float: $startSide;
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
      overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
      }

    #sidebar-wrapper {
      width: 220px;
      float: $endSide;
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
      overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
    }

3. Yang perlu diperhatikan hanya tulisan yang berwarna merah, silahkan ganti dengan kode berikut:

    #main-wrapper {
      width: 410px;
      float: right;
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
      overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
      }

    #sidebar-wrapper {
      width: 220px;
      float: left;
      word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
      overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
    }

4. Simpan template. Silahkan lihat hasilnya pada bagian elemen halaman.

InsyaAllah postingan berikutnya saya akan mengetengahkan trik CSS dan HTML lainnya, yaitu cara menambahkan 4 kolom/ elemen halaman baru diatas footer.

»»  READMORE...