Archive for June 2013

Macam Bentuk Numbered List dan Bullet List

1:57 AM 0
Macam Bentuk Numbered List dan Bullet List yang bisa dipakai di blogger. Cara menggunakannya lihat dibawah ini.
  1. Buatlah entri baru atau edit artikel lama
  2. Dan Klik Numbered List 
  3. Lalu klik bagian HTML di sebelah Compose.
  4. Terus ganti kode <ol> dengan salah satu kode dibawah.
  5. Terakhir kembali ke Compose, maka tampilan numbered list akan berubah.
  6. Untuk Bullet list, klik bullet list, lalu lihat pada bagian HTML 
  7. Dan ganti kode <ul> dengan salah satu kode bentuk bullet list dibawah.
Macam Bentuk Numbered List
  1. Bentuk Dasar, <ol> Tanpa Edit HTML
  1. Mulai dari angka 8, Ganti kode <ol> dengan <ol start="8">
  2. Setelah dienter, maka akan berlanjut ke nomor 9 dan seterusnya, seperti tulisan ini.
  1. Dalam Bentuk Huruf Besar, <ol type="A">
  1. Dalam Bentuk Huruf Kecil, <ol type="a">
  1. Dalam Bentuk huruf atau angka romawi, <ol type="I">
  1.  Angka romawi huruf kecil, <ol type="i">
  1. Angka Romawi Besar dimulai dari angka 5, <ol type="I" start="5">
  2. Setelah dienter, maka akan berlanjut ke angka romawi 5 dan seterusnya.
Macam Bentuk Bullet List
  • Bentuk dasar bullet list, <ul> tanpa edit html
  • Bentuk Bulat sederhana, <ul type="circle">
  •  Bentuk Kotak, <ul type="square">
Dan yang terakhir, tips meratakan tampilan kiri-kanan Numbered list. Seperti contoh gambar dibawah ini.
menggunakan numbered list di blog
Contoh gambar
Dari gambar diatas Tampilan numbered list, rata dengan kalimat yang ditulis seperti menulis biasa diblog, diatur menggunakan justify rata kiri kanan kalimat. Standar blogger, tampilannya akan ada spasi jarak sehingga tidak sejajar dengan kalimat yang ditulis biasa tanpa numbered list.
Berikut sedikit trik cara agar tampilan numbered list rata dengan tulisan biasa.
  1. Login ke blogger, dari halaman dasbor, pilih pengaturan template.
  2. Terus edit html, dan cari kode ]]></b:skin> lalu letakan kode berikut ini diatasnya.
    3. .post ol {
    padding:0px 24px 0px;
    width:96%;max-width:100%;}
  3. Keterangan kode: padding:0px 24px 0px; Rata Kiri dan width:96%;max-width:100%; Rata Kanan.
  4. Jika belum rata, Ganti 24px dan 96% agar rata dengan tampilan posting kamu.
  5. Save template, selesai.
Pada saat menulis, tampilan numbered list tetap seperti biasa, tetapi jika sudah dipublikasikan, maka tampilannya akan berubah, rata dengan tulisan biasa. Preview dulu tulisan untuk melihat hasilnya.
Itulah sedikit tips trik menulis artikel menggunakan numbered list dan bullet list di blog, silakan baca juga tips trik menulis artikel di blog menggunakan numbered list yang disisipkan gambar, atau kode script ditengah-tengahnya. Semoga Bermanfaat.

Cara Mengganti Judul Blog Dengan Gambar

3:05 AM 0
Cara mengganti judul blog dengan gambar. Header blog standar blogger biasanya hanya berbentuk huruf tulisan, dan tulisan tersebut bisa kita ganti dengan gambar yang kita inginkan, tanpa menghilangkan H1 title blog yang bisa mengganggu Seo blog. 
cara mengganti header blog dengan gambar

Sebenarnya blogspot sudah menyediakan Tool untuk mengganti judul blog dengan gambar, yaitu dengan menambahkan langsung gambar di widget header blog pada bagian tata letak. Kekurangan dari tool tersebut, gambar akan menghilangkan H1 title dari judul blog, sehingga blog tidak mempunyai H1.

Berikut ini adalah cara mengganti judul blog dengan gambar tanpa menghilangkan H1 header blog. Ikuti langkah-langkah dibawah ini.
  1. Login ke blogger. Dari halaman Dasbor pilih pengaturan TATA LETAK.
  2. Selanjutnya Add Gadget atau Tambahkan Gadget dan pilih HTML/JavaScript.
  3. Lalu Pastekan kode berikut ini ke dalamnya.
    4. <h1>
    <a href="http://fandrajuani.blogspot.com/"><img alt="Desain Blog Tutorial dan Tips Trik Blogspot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFYGtapEf0OcnMYWZPpWxcE1rdDtLbwpSnQE0sz-bhvmB4Ha-FM7kcuUxWjpqrjsm0x0LronY11OnvVFftSyesabIbOF1y7Ihvc5cDSbeD7i0COdccSNMuTu1IacTYyGC5xhnK3DHvQCml/s1600/Fandra+Juani.jpg" title="fandrajuani.blogspot.com" /></a>
    </h1>
  4. Keterangan Kode diatas.
      5. http://fandrajuani.blogspot.com/ Ganti dengan URL Awal Blog Kamu
      Desain Blog Tutorial dan Tips Trik Blogspot Ganti dengan img Alt yang kamu inginkan
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFYGtapEf0OcnMYWZPpWxcE1rdDtLbwpSnQE0sz-bhvmB4Ha-FM7kcuUxWjpqrjsm0x0LronY11OnvVFftSyesabIbOF1y7Ihvc5cDSbeD7i0COdccSNMuTu1IacTYyGC5xhnK3DHvQCml/s1600/Fandra+Juani.jpg Ganti dengan URL gambar yang akan menjadi HEADER BLOG
      fandrajuani.blogspot.com Ganti Title gambar dengan yang kamu inginkan
      • Setelah itu Beri Judul Gadget HTML dan Save Gadget dan tempatkan dibawah Header Blog.
      • Tampilan template di Tata Letak menjadi seperti ini.
        • cara mengganti judul blog dengan gambar
      • Sekarang blog mempunyai 2 Header yaitu Widget header dan gambar Header.
      • Hapus widget Header, contoh: Fandra Juani (Header). Sehingga blog hanya mempunyai 1 Header. Selesai.
      Jika Widget Header tidak bisa dihapus, ikuti langkah dibawah ini.
      1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
      2. Selanjutnya Klik edit HTML dan cari kode ini.
        3. <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Nama Blog Kamu (Header)' type='Header'>
      3. Setelah itu ganti kata true dengan false 
      4. Terakhir save template, lalu kembali ke pengaturan tata letak, widget header sudah bisa dihapus. Selesai.
      Untuk mengembalikan Widget Header Blog yang sudah dihapus, kembali ke Tata Letak dan tambahkan Gadget pilih dasar-dasar, dan pilih Header Halaman.

      cara mengganti judul blog dengan gambar
      Menghapus Widget Header seperti contoh diatas Fandra Juani (Header) blog tidak akan mengganggu Seo Blog, karena judul blog header sudah diganti dengan gambar. Gambar tersebut fungsinya sama seperti judul blog standar blogger yang berupa huruf, apabila di klik maka akan kembali ke URL halaman awal blog.
      Setelah melakukan cara diatas, silakan cek di situs - situs yang menyediakan cek SEO blog, seperti situs www.chkme.com, www.seositecheckup.com,  www.seoptimer.com dan lain-lain. Untuk melihat masih ada atau tidak Header H1 Title judul blog.
      Untuk cara Upload Gambar dan Ambil URL gambar, bisa dibaca di artikel tentang cara cara upload dan ambil url gambar. Silakan dibaca juga Artikel-artikel lainnya yang masih berkaitan dengan memasukan gambar di blog seperti cara membuat menu blog dengan gambar icon disamping kiri judul menu blog.

      Jika tidak ingin menggunakan cara diatas, kamu bisa baca artikel cara merubah tampilan header blog. Di artikel itu header blog tidak dihapus, hanya diberi background dibelakangnya, yang dapat anda jadikan pilihan dalam merubah tampilan header dari blog anda. Itulah sedikit cara desain blog sendiri di blogspot menggunakan template asli blogger yaitu dengan mengganti tulisan judul blog dengan gambar. Semoga Bermanfaat.

        Cara Membuat Menu Blog Dengan Gambar

        1:40 AM 0
        Cara membuat menu blog dengan gambar dengan keterangan dibawahnya seperti beranda, daftar isi, hubungi, dan lain-lain. Untuk lebih jelasnya lihat gambar dibawah ini. Lalu klik salah satu gambar, maka akan terbuka halaman baru sesuai dengan URL halaman yang saya masukan.

        • membuat menu blog dengan gambar
          Beranda
        • membuat menu blog dengan gambar
          Desain Blog
        • membuat menu blog dengan gambar
          Tips dan Trik
        • membuat menu blog dengan gambar
          Hubungi
          Cara membuat menu blog dengan gambar. Ikuti langkah-langkah dibawah ini.
          1. Login ke blogger. Dari halaman dasbor pilih pengaturan Tata Letak.
          2. Lalu Add Gadget, setelah itu Pilih HTML/JavaScript.
          3. Selanjutnya susun kode CSS dan HTML Seperti format dibawah ini.
            4. <style>
            KODE CSS
            </style>
            KODE HTML
          4. Sebagai contoh, Copy semua kode dibawah ini. dan Pastekan di Gadget HTML/JavaScript Tadi.
            5. <style>
            #tabs31{margin:0;padding:0;}
            #tabs31 ul{list-style: none;}
            #tabs31 ul li{float:left; margin-right:25px;}
            #tabs31 img {width:50px; height:50px;}
            figcaption {text-align:center;color: blue;font-weight:bold;font-size:10px;}
            </style>

            <div id="tabs31">
            <ul>
            <li><a href="http://fandrajuani.blogspot.com/">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3lQft71wXVGibH5NlBEqtXNXcmHJgWvcamhs2SLp-h6FFaBt3OKTtDwBsu2Nj2JfpeshCRvKO0p_z8sX3M-qp7BGX2UV1HGlXAWlv4AXIIQNkRgB8rBvRsYdFerPvy9Q3oZduYhSiFpy1/s128/DAFTAR-ISI.jpg" title="Beranda" width="50" height="50" /></a>
            <figcaption>Beranda</figcaption></li>

            <li><a href="http://fandrajuani.blogspot.com/search/label/Desain%20Blog">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjELRxxBzGhU8efTvjWmWir3aItxjC8wvKqZ9AGp2ooFw3Q3nVsc6d5ErIoJ5PW3j7aEsKpxxDhKlpPfuj8wZJYWLYrz5bVMqaH9PvVTXfEXQjKFbfI-DvurjJZkzz306knlb7V7vr4cKiL/s128/DESAIN.jpg" title="Desain Blog" width="50" height="50" /></a><figcaption>Desain Blog</figcaption></li>

            <li><a href="http://fandrajuani.blogspot.com/search/label/Tips%20dan%20Trik">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrYql0qwKdhjkehMEQ3QB_qMxN-gAHR7JV4XN7fHBLBbfJwUKOgDG11GC9mmJnZrjploXCZZzhSn3OZ8c8qEcHdRvE3Jrzc84S7iCldIEavrg7wQ0pQ9zMJKlJ1VeCxo25HxY_D3ilYAEe/s128/TIPS-DAN-TRIK.jpg" title="Tips dan Trik" width="50" height="50" /></a>
            <figcaption>Tips dan Trik</figcaption></li>

            <li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">
            <img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTct5Nc6eIuhR-GfpJEKQHbaY99SI1lNH4ne6rGFBeCs-mNYkl3jzNy-NWCLhQ3ESrWkF7LI-IzVSqh_gXE8W1um1iCHzi6bRpQRAJ771ljtEVJPEKtphQAvOvP0g67BGxd2yf2d-Kqd-e/s128/HUBUNGI.jpg" title="Hubungi" width="50" height="50" /></a>
            <figcaption>Hubungi</figcaption></li>

            </ul>
            </div>
          5. Save Gadget, selesai.
          Keterangan Kode Css Langkah 5: 
          • #tabs31 ul{list-style: none;} untuk menghilangkan list-style bulet.
          • #tabs31 ul li{float:left; membuat gambar horizontal, dan margin-right:25px; spasi atau jarak kanan antar gambar.
          • #tabs31 img {width:50px; height:50px;} tinggi dan lebar gambar.
          • figcaption untuk mengatur keterangan dibawah tulisan.
          Keterangan Kode HTML Langkah 5:
          • format dari menu <li><a href="url halaman menu">
          • <img src="Url gambar" title="keterangan gambar saat disentuh mouse" width="50" height="50" /></a>
          • <figcaption>Keterangan dibawah gambar</figcaption></li>
           Jika ingin menambahkan menu tambahkan format seperti dibawah ini.
          <li><a href="url halaman menu"><img src="Url gambar" title="keterangan gambar saat disentuh mouse" width="50" height="50" /></a><figcaption>Keterangan dibawah gambar</figcaption></li>
          Gunakanlah gambar dengan ukuran yang sama disetiap gambar, agar tampilan menu terlihat rapi, caranya bisa lihat di cara membuat icon blog. Cara mengambil URL gambar, bisa kamu baca di artikel cara upload dan ambil url gambar. Cara mengisi url halaman menu, baca artikel cara membuat dan mengisi menu blog. URL Label atau kategori juga bisa kita masukan ke menu.
          Semoga Bermanfaat.
            Subscribe to: Posts (Atom)