dropdown

Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Jumat, 24 Januari 2014

Menghilangkan tang obeng

Cara Menghilangkan Tang Obeng Blog

Cara menghilangkan tang obeng di blog. Gambar tang dan obeng berada di setiap widget blog, fungsinya adalah untuk mengedit dengan cepat. Jika kita klik pada suatu widget, maka akan terbuka halaman pengaturan widget tersebut. Untuk lebih jelasnya, coba lihat gambar dibawah ini.
cara menghilangkan tang obeng blog
Mungkin sedikit berantakan, jika melihat halaman blog dihiasi gambar tang obeng di setiap widget blog. Sehingga ada keinginan untuk menghapus atau menghilangkannya dari halaman blog. Cara menghilangkan gambar tang obeng di blog.
Ikuti langkah-langkah dibawah ini.
  1. Login ke blogger.
  2. Dari halaman dasbor, buka pengaturan template.
  3. Selanjutnya klik edit HTML dan cari kode ]]></b:skin>
  4. Dan tempatkan kode berikut ini diatasnya.
  5. .quickedit{display:none;}
  6. Terakhir klik preview, jika sudah hilang gambar tang-obeng, baru save template, selesai.

Tambahan: Cara menghilangkan tang obeng di blog

Ternyata setelah saya pelajari lagi, cara diatas hanya menyembunyikan tampilan quick edit saja. Saya coba test seo tools di http://chkme.com/ , dan hasilnya masih terdapat gambar yang tidak mempunyai  title dan deskripsi gambar. Gambarnya seperti dibawah ini.
cara menghilangkan tang obeng blog
Saya coba buka satu persatu gambar diatas, ternyata gambar tang obeng. Jadi bingung, padahal gambar sudah hilang dari blog. Akhirnya dapat juga cara menghilangkan quickedit dan juga mematikan fungsinya. Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.
  1. Login ke blogger. ke pengaturan template.
  2. Selanjutnya klik edit HTML dan cari kode <b:include name='quickedit'/> dan ganti menjadi.
  3. <!--b:include name='quickedit'/-->
  4. Akan ada banyak kode yang sama, Ganti semuanya. Karena memang kode itu ada disetiap widget dan posting blog. 
  5. Selanjutnya, coba cek di http://chkme.com/. Dari yang saya coba, gambar quick edit sudah hilang, hanya tinggal 2. Seperti gambar dibawah ini.
  6. cara menghilangkan tang obeng blog
  7. Gambar yang tertinggal itu adalah gambar quick edit di widget google friend connect dan widget atribut blogger, yang bertuliskan diberdayakan oleh blogger. Ternyata memang kedua widget tersebut, gambar quick editnya tidak bisa dihapus. 
  8. Setelah melakukan cara diatas, score seo di situs chkme naik.
Dengan kedua cara diatas, maka blog akan terlihat rapi dan juga bisa menambah tingkat seo blog. Loading blog pun akan bertambah sedikit lebih cepat, karena disembunyikannya gambar tang dan obeng di blog. Semoga Bermanfaat.

Selasa, 21 Januari 2014

Membuat gambar Header

Cara Membuat Gambar Header Blog

Cara Membuat Gambar Header Blog. Satu lagi cara desain blog sendiri, yaitu dengan menambahkan gambar di header blog. Cara membuat gambarnya bisa menggunakan software, bisa juga secara online. Artikel ini akan menjelaskan tentang cara membuat gambar header blog secara online. Prosesnya tidak lama, cukup mengunjungi situs penyedia layanan pembuatan gambar, dan memilih salah satu bentuk gambar yang kita inginkan. Setelah itu download dan pasang di blog kita. Silakan lihat dulu contoh gambar dibawah ini.

cara membuat gambar header blog
Gambar diatas adalah contoh gambar dalam bentuk tulisan yang pernah saya gunakan di blog ini. Dengan menggunakan gambar, kita punya banyak pilihan bentuk dan juga warna yang bisa digunakan. Berbeda dengan tampilan huruf blog, yang warna dan bentuknya terbatas, hanya bisa menggunakan satu warna.

Ukuran gambar yang dihasilkan cukup kecil dan juga tidak memberatkan loading blog, ukuran huruf bisa diatur sesuai dengan yang kita inginkan. Disitus tersebut ada juga jenis gambar animasi, seperti huruf yang mengeluarkan api, Petir, animasi Glow yang bergerak dan masih banyak lagi.
  1. Gambar yang dihasilkan berformat PNG dan juga GIF, sesuai dengan bentuk dan animasi yang digunakan. Dan ukuran File gambar yang dihasilkan juga berbeda, antara Png dan Gif, sesuai dengan ukuran huruf gambar yang digunakan.
  2. Untuk gambar animasi ukuran huruf 40 keatas bisa sampai 50-70kb dalam format Gif. Sedangkan untuk gambar biasa tanpa animasi hanya 10-30kb dalam format png.
  3. Silakan pilih bentuk dan ukuran gambar yang sesuai dengan yang kalian inginkan.
Untuk lebih jelasnya, Cara membuat gambar header blog. 
Ikuti langkah-langkah dibawah ini:
  1. Kunjungi situs http://cooltext.com/ 
  2. Selanjutnya pilih salah satu gambar huruf yang kalian suka.
  3. Dan atur warna dan juga bentuk hurufnya.
  4. Setelah selesai, lihat bagian bawah, klik Creat Logo.
  5. Terakhir Download. Seperti gambar dibawah ini.
  6. cara membuat gambar header blog
  7. Sekarang, memasang gambar tersebut di blog kita.
  8. Login ke blog, dan Klik pengaturan Tata Letak.
  9. Pada bagian layout Header Blog, Klik Edit. Dan Upload gambar tadi.
  10. Selanjutnya atur penempatan gambar. Pilih dibalik judul dan keterangan.
  11. Terakhir Save pengaturan gambar. Dan lihat, gambar berada di belakang judul dan deskripsi. Jika ingin menyembunyikan tulisan judul dan deskripsi blog. Ikuti langkah-langkah dibawah ini.

Cara menyembunyikan judul dan deskripsi blog

    1. Sekarang kita sembunyikan tulisan judul dan deskripsi dari halaman blog, cari kode ]]></b:skin> dan tempatkan kode ini diatasnya.
    2. .Header h1 {
         height: 0px;
         visibility: hidden;
         display: none;
      }

      .Header .description {
         height: 0px;
         visibility: hidden;
         display: none;
      }
    3. Setelah menambahkan kode diatas maka judul blog dan deskripsi akan disembunyikan dari tampilan blog, tinggal gambar saja.
    4. Dengan begitu judul dan deskripsi tetap ada, hanya disembunyikan.
    5. Silahkan cek di chkme.com untuk melihat masih ada atau tidak title judul blog H1, jika ada berarti gambar header tidak akan mempengaruhi seo blog.
    Jika kita memliih menempatkan gambar selain judul dan keterangan atau tempatkan keterangan setelah gambar. Maka H1 header akan hilang, dan itu mempengaruhi seo blog. Jika ingin mencoba silahkan saja cek di chkme.com atau disitus chek seo blog lainnya. Agar H1 header blog disembunyikan dari halaman blog tanpa mempengaruhi seo blog, gunakanlah cara seperti diatas. Semoga Bermanfaat.

    Membuat Scroll

    Cara Membuat Scroll di Blog

    Cara membuat Scroll di blog untuk widget seperti Arsip Blog, populer posts, kategori/label, artikel terbaru dan lain-lain. Scroll berfungsi untuk mempersingkat tampilan dan juga menghemat tempat. Scroll juga membuat halaman blog menjadi lebih cepat untuk dibuka. Untuk lebih jelasnya silakan lihat gambar dibawah ini.
    cara membuat scroll di blog
    Dari gambar diatas, judul artikel yang terlihat hanya sebatas 4 judul dengan gambar, tapi ketika di scroll menggunakan mouse, maka akan terlihat artikel lainnya, dengan posisi dan tempat yang sama. Sehingga tidak memakan tempat yang banyak. Untuk cara membuatnya. Ikuti langkah-langkah dibawah ini.

    Cara Membuat Scroll di Blog

    1. Login ke Blogger
    2. Dari halaman dasbor Pilih pengaturan Template.
    3. Selanjutnya Klik Edit Html.
    4. Dan Cari tulisan widget yang akan kita beri scroll. Misalnya widget dengan judul Populer Posts maka kita cari populer posts. Untuk memudahkan pencarian Tekan control F di keyboard dan masukan tulisan Populer Posts .
    5. Jika sudah ketemu maka kode lengkapnya seperti dibawah ini.

    <b:widget id='PopularPosts1' locked='false' title='Populer Posts' type='PopularPosts'>
    6. Sekarang Copy PopularPosts1 ke Notepad dan tambahkan kode lengkap seperti dibawah ini di Notepad.
    #PopularPosts1 .widget-content{
    height:200px;
    width:auto;
    overflow:auto;
    }
    7. Selanjutnya cari kode ]]></b:skin>
    8. Copy Kode diatas dan letakkan di Atas kode ]]></b:skin>
    Contoh:

    #PopularPosts1 .widget-content{
    height:200px;
    width:auto;
    overflow:auto;
    }
    ]]></b:skin>

    Catatan: height:200px itu tinggi kotak scroll nya, silakan diganti jika kurang panjang. misalnya jadi height:400px; 

    9. Terakhir Klik Preview untuk melihat hasilnya. Jika Populer posts sudah ada scroll nya baru dah di Save. Selesai. Semoga Bermanffat.

    Catatan: Jika arsip blog yang ingin diberi sroll. Maka cari dulu tulisan arsip blog di edit html. klo sudah ketemu, copy kode SETELAH tulisan <b:widget id='  terus lanjutkan ke langkah 6 Seperti diatas. Untuk yang lain juga seperti itu caranya. Silakan dicoba.


    Membuat menu

    Cara Membuat Menu di Blog

    Cara membuat menu di blog dengan mudah. Fungsi menu itu bisa dibilang untuk memudah kan pengunjung blog mengetahui tentang pemilik blog, isi seluruh blog atau bagian-bagian blog kita, Biasanya menu banyak ditempatkan dibawah judul blog atau disamping kiri blog. Seperti about me/us sitemap/daftar isi blog, contact us/me dan lain-lain. Cara ini adalah cara yang paling mudah dan sederhana, tidak harus edit html yang bisa bikin pusing klo dilihat dengan banyak kode-kode. Silahkan dilihat dulu gambar menunya dibawah ini atau lihat dibawah judul ini blog.
    cara membuat menu di blog
    Cara membuat menu di blog. Ikuti langkah-langkah dibawah ini.
    1. Login ke Blog kamu.
    2. Dari halaman awal pilih laman. Lihat gambar dibawah ini.
    cara membuat menu di blog
    3. Selanjutnya klik laman baru seperti gambar dibawah ini. Ada 2 pilihan, Laman kosong seperti kita menulis entri baru dan Alamat Web, seperti www.pacebook.om dll. Untuk percobaan Pilih Laman Kosong. 
    cara membuat menu di blog

    4. Terus kita beri judul Tentang saya. Sebagai percobaan dulu. Dan klik Publikasikan.
    cara membuat menu di blog

    5. Setelah dipublikasikan, pilih Tab atas, maka laman yang baru saja dibuat tadi akan muncul dibawah judul blog.
    cara membuat menu di blog
    6. Selesai. Lihat blog maka laman baru akan tampil dibawah judul blog. seperti gambar dibawah ini.
    cara membuat menu di blog
    7. Untuk mengisi menu blog, bisa kalian isi dengan about me, Daftar Isi, contact us dan lain-lain. Sebagai Contoh silakan dilihat

    Dropdown blogger

    Cara Membuat Menu Dropdown di Blog

    Menu dropdown, berarti menu yang menurun. Menu yang lebih simple, dan tidak banyak memakan tempat. Sebelumnya saya sudah menjelaskan cara membuat menu di blog, dengan memanfaatkan laman untuk membuat menu blog. Caranya sedikit lebih sederhana, dari pada menu dropdown yang akan saya jelaskan kali ini. Untuk lebih jelasnya, lihat dulu gambar menu dropdown dibawah ini.
    cara membuat menu dropdown di blog
    Menu dropdown ini ada yang satu cabang, dan juga ada yang 2 cabang. Saya akan coba menjelaskan sesederhana mungkin, cara membuat dan mengatur menu dropdown sesuai dengan keinginan, agar mudah untuk dimengerti. Menu dropdown ini tidakmengedit kode html di template, tapi menggunakan widget/gadget di blog, jadi template aman ketika ada kesalahan dalam pembuatannya.Cara membuat menu dropdown di blog.
    Ikuti langkah-langkah dibawah ini:

    Membuat Menu Dropdown

    1. Pertama, lihat susunan kode dibawah ini. Inilah struktur keseleuruhan kode yang akan kita pakai dalam membuat menu drop down.
    2. <style>
      KODE CSS
      </style>
      KODE HTML
    3. Dari susunan kode diatas, <style> ditempatkan diawal, selanjutnya Kode Css, dan ditutup dengan </style>, terakhir Kode HTML.
    4. Sekarang yang kita butuhkan adalah, Kode Css dan HTML nya. Tidak harus buat sendiri. Cukup kunjungi situs dibawah ini.
    5. http://cssmenumaker.com/. Selanjutnya, pilih salah satu menu dropdown yang kamu inginkan.
    6. Setelah memilih, maka akan terbuka halaman baru. Pilih Costumize.
    7. Dan atur nama dan isi dari menu dropdown, gunakan add item untuk menambah menu dan gunakan edit item untuk memasukan url isi dari menu tersebut. Seperti gambar dibawah ini.
    8. cara membuat menu dropdown di blog
    9. Setelah selesai mengatur isi menu dropdown, ambil/copy kode CSS dan HTML nya. Dan pastekan di Notepad susun seperti langkah pertama.

     Memasang Menu di Widget atau Gadget

    1. Setelah selesai menyusun semua kode di Notepad. Sekarang ke bagian Tata Letakdi blog. Dan Klik Tambahkan Gadget, dan pilih HTML/JavaScript.
    2. Copy semua kode di Notepad tadi dan Pastekan semua kode ke GadgetHTML/JavaScript. Dan Simpan.
    3. Selanjutnya pindahkan Gadget HTML/JavaScript ke bawah Header. Dan Silakan lihat blog.
    4. Menu Dropdown sudah jadi. Jika menu dropdown nya tidak turun. Itu berarti kita harus mengedit bagian header blog.
    5. Silakan ke Bagian Template, klik edit HTML, dan cari kode <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> kode lengkapnya kira-kira seperti dibawah ini.
    6. <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='Nama Blog Kamu (Header)' type='Header'>
      <b:includable id='main'>
    7. Ganti maxwidget='1' menjadi maxwidget='3' dan showaddelement='nomenjadishowaddlement='yes'. Dan Save Template.
    8. Kembali lagi ke pengaturan Tata Letak, pindah-pindahkan Gadget HTML/JavaScript tadi, dibawah header. Dan save.
    9. Setelah itu lihat blog, jika menu masih belum turun, ulangi lagi ke pengaturan Tata Letak, pindahkan lagi kode html ke bawah Header dan Save. Sampai Menu Drop Down berjalan dengan benar.
    10. Selesai, menu dropdown sudah jadi. Untuk cara mengubah warna dari menu dropdown, silakan kunjungi situs ini, http://www.cssportal.com/css3-menu-generator/ , disitu kita bisa belajar, cara mengubah bentuk dan warna menu dropdown, juga kode css dan html dari menu dropdown yang kita gunakan.

    Cara lain dengan memasukan kode css dan html di template blog

    1. Cara diatas adalah memasukan kode di widget blog, lebih aman. Tapi jika kamu ingin mencoba cara lain, dengan memasukannya ke template blog. Masukan kode css dan html dengan format seperti dibawah ini. Cara ini tidak menggunakan <style> </style> seperti memasang menu di widget.
    2. Kode CSS
      ]]></b:skin>
      <div class='tabs-outer'>
      Kode HTML
    3. Seperti format diatas, pertama kamu cari kode ]]></b:skin> dan tempatkan kode CSS diatasnya. Selanjutnya Cari kode <div class='tabs-outer'> dan tempatkan kode HTML di bawahnya. Lalu save template.
    4. Menu Dropdown akan muncul dibawah header. Jika ingin ditempatkan diatas header, pindahkan kode html tadi ke <div class='header-outer'>. Selesai. Semoga Bermanfaat.