Tips Blog | Tutorial Blog | Belajar Blog

Mengatasi Judul Widget / Gadget Yang Tidak Boleh Kosong

Pada zaman dahulu kala blogger mengijinkan widget dengan tanpa judul (title) namun sekarang kebebasan itu dikekang oleh blogger, jadi setiap widget/gadget harus ada title atau judulnya. Namun sering kali kita tidak menginginkan gadget/widget tanpa judul, dan jika dipaksa akan muncul pesan perintah error "Required field must not be blank" atau intinya judulnya harus ada dan tidak bisa dilanjutkan bila tanpa judul.

Nah bagaimana mengatasinya?

Caranya cukup mudah kita tinggal mengisi title atau judul gadget dengan code

<!--->

lihat contoh dibawah ini

Dan hanya cukup code diatas tidak perlu tambahan apa-apa lagi.

Sekian deh cukup semoga bermanfaat bagi Anda

Widget Attribution Dari Blogger

Apa ini ?

Wah ternyata ini adalah widget ketentuan dari blogger untuk "Copyright" platform blogger, widget ini tidak bisa pindahkan bahkan tidak bisa di hapus untuk template blogger yang baru widget ini ada, namun untuk template lama dalam artian dalam pembuatan blog dari blogger udah lama, widget ini belum muncul, entah mungkin kapan ada ketentuan widget ini ada untuk semua pengguna blogger.


Nah terlihat di atas adalah screenshotnya dan bisa kita lihat widget ini terkunci tidak bisa dihapus dan digeser untuk dipindahkan.

Nah Saya beri tips bagaimana memindahkan widget ini dan memberi style tersendiri.

1. Cara memindah

Biasanya Atribut Copyright seperti ini berada pada bawah halaman situs, nah defaultnya widget atribut ini berada pada sidebar. nah dibawah ini adalah cara memindahkanya dari sidebar ke footer (bagian bawah blog)

Masuk pada bagian "Design" kemudian masuk pada "Edit HTML" lihat kebawah dan temukan code seperti ini

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

Lalu Cut code diatas dan taruh pada tag footer. Lihat code dibawah ini untuk lebih jelasnya

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
</div>


Lalu SAVE dan selesai

2. Menambah Style CSS

Style CSS fungsinya untuk mengubah tampilan widget atribut ini supaya terkesan lebih cantik tidak monoton dengan cara :

tambah code css dibawah ini diatas code ]]></b:skin>
#Attribution1 {
color:red;
font-weight:bold;
text-transform:capitalize;
}

Style diatas hanya sebuah contoh untuk mengganti warna hurufnya, menebalkan huruf dan membuat capitalis pada textnya. Dengan CSS diatas Anda bisa menentukan tampilan dari widget tersebut mungkin dengan menambahkan background, border dsb.

Kemudian SAVE dan lihat hasilnya deh.

Nah mungkin informasi ini berguna bagi Anda untuk para blogger dan semoga bermanfaat Saja. terima kasih.

Mengatasi Eror Judul/Title Pada Widget HTML/Javascript

Belakangan ini ada beberapa sobat blogger yang mengeluh pada saat menambahkan widget HTML/Javascript pada blog. Dikarenakan judul pada widget tersebut harus di isi, karena jika dibiarkan kosong maka akan terjadi error dengan keterangan seperti pada gambar dibawah.

image

Ada cara mudah mengatasinya, tetap tambahkan kodenya seperti biasa, klik pada Tambah Gadget -�> pilih HTML/Javascript -�> tambahkan kodenya kedalam kotak kosong yang tersedia, kemudian beri pada judul dengan kode <h2></h2>

 

image

 

Oke, semoga tips singkat ini bisa bermanfaat. Thumbs-up

Membuat Menu Vertikal Sederhana

MenuSebelumnya saya selalu menulis mengenai pembuatan menu horizontal dan tidak pernah sekalipun menulis artikel menu vertikal. Pembuatan menu vertikal ini sangat mudah, hanya sedikit menambahkan kode css pada bagian template dan kode html pada sidebar. Bisanya kita yang malas berpikir untuk membuat menu vertikal, mengambil jalan mudah dengan menambahkan kode <ul><li> sehingga yang muncul adalah list-style-type bawaan template.

 

Untuk demo bisa sobat lihat disini, pada bagian menu vertikal tersebut saya menggunakan image sederhana yang hanya akan berwarna biru jika cursor menyorot pada link. Bisa saja membuat current page hover pada link, yang jika di klik akan selamanya berwarna biru selama kita berada pada halaman link tersebut, namun untuk awalnya sebaiknya menggunakan menu yang sederhana dulu. smile_teeth

  1. Masuk ke bagian Edit HTML
  2. Tambahkan kode css berikut ini sebelum kode ]]></b:skin>

    .clearit {
        margin: 0;
        padding: 0;
        height: 0;
        clear: both;
    }

     

    /* BUBBLE PLASTIC VERTICAL MENU */

    .bubplastic.vertical {
        width: 150px;
        margin: 0px;
        padding: 0px;
        display: block;
    }
    .bubplastic.vertical ul {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .bubplastic.vertical ul li {
        display: block;
        float: left;
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top left no-repeat;
    }

    .bubplastic.vertical ul li a {
        display: block;
        margin: 0;
        width: 100%;
        padding-left: 15px;
        text-transform: uppercase;
        font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
        font-size: 70%;
        color: #FFFFFF;
        text-decoration: none;
        background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top left no-repeat;
    }

    .bubplastic.vertical ul li a span.menu_ar {
        display: block;
        margin: 0;
        width: 100%;
        height: 22px;
        padding-top: 5px;
        padding-right: 15px;
        background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top right no-repeat;
        cursor: pointer;
    }

    /* BLUE HOVER */
    .bubplastic.blue ul li a:hover,
    .bubplastic.blue ul li.highlight a {
        background: transparent url(http://lh4.ggpht.com/_7Y9pl24WpQY/TCTaTTyG38I/AAAAAAAAEOk/s7mSQh3v_oo/bg-bubplastic-h-blue_thumb%5B3%5D.gif) top left no-repeat;
    }
    .bubplastic.blue ul li a:hover span.menu_ar,
    .bubplastic.blue ul li.highlight a span.menu_ar {
        background: transparent url(http://lh4.ggpht.com/_7Y9pl24WpQY/TCTaTTyG38I/AAAAAAAAEOk/s7mSQh3v_oo/bg-bubplastic-h-blue_thumb%5B3%5D.gif) top right no-repeat;
    }

  3. Simpan Template.
  4. Masuk Ke Elemen Halaman.
  5. Klik Tambah Gadget pada bagian sidebar.
  6. Pilih yang HTML/Javascript, kemudian masukkan kode berikut kedalamnya :

    <div class="menu bubplastic vertical blue">
        <ul>
            <li><span class="menu_r"><a href="http://kutu-blogspot.blogspot.com/" target="_self"><span class="menu_ar">About</span></a></span></li>
            <li><span class="menu_r"><a href="http://kutu-blogspot.blogspot.com/" target="_self"><span class="menu_ar">Contact Us</span></a></span></li>
            <li><span class="menu_r"><a href="http://kutu-blogspot.blogspot.com/" target="_self"><span class="menu_ar">Advertiser</span></a></span></li>
            <li><span class="menu_r"><a href="http://kutu-blogspot.blogspot.com/" target="_self"><span class="menu_ar">Banner</span></a></span></li>
            <li><span class="menu_r"><a href="http://kutu-blogspot.blogspot.com/" target="_self"><span class="menu_ar">Link</span></a></span></li>
        </ul>
        <br class="clearit" />
    </div>

  7. Simpan.

 

Yang harus diganti adalah tulisan yang berwarna hijau dan merah. Selamat mencoba !

Simple CSS

Simple CSS

 

Template Information

 

Name Simple CSS
Author My Blogger Themes
Type Blogger Template
Properties White, Red, 2 Columns, Right Sidebar, Simple