Cara membuat icon sendiri dengan mudah

Tutorial kali ini saya akan coba bagikan tips dan trik tentang cara membuat icon sendiri dengan mudah, menggunakan program microsoft office PowerPoint. Icon atau lambang gambar biasanya digunakan untuk logo website atau blog, ada juga untuk icon disebelah tulisan menu, bahkan digunakan juga sebagai menu.

Contohnya seperti gambar dibawah ini:

Cara membuat icon sendiri dengan mudah
Cara membuat icon sendiri dengan mudah
Cara membuat icon sendiri dengan mudah






Gambar diatas adalah hasil dari pembuatan icon di PowerPoint, yang disave dalam format PNG, agar background icon tetap transparant. Untuk lebih jelasnya tentang cara pembuatan icon di microsoft PowerPoint. Ikuti langkah - langkah dibawah ini.
  1. Silakan buka program PowerPoint. Lalu pilih bagian Insert.
  2. Selanjutnya pilih tulisan Shape dan pilih bentuk gambar yang kita inginkan.
  3. Setelah gambar nya sudah ada, klik gambar tersebut dan pilih Format dibagian atas bar powerpoint.
  4. Lalu edit gambar itu sesuai dengan yang kita inginkan.
  5. Untuk menyimpan gambar, klik Kanan gambar tersebut dan pilih Save as picture lalu save dalam format PNG. Selesai.
Contoh gambar icon yang saya buat. Icon pertama menggunakan satu gambar awan dan Icon kedua menggunakan 2 gambar gambar awan dan matahari.

Cara membuat icon sendiri dengan mudah

Cara membuat icon sendiri dengan mudah




Untuk membuat icon dengan 2 gambar, silakan buat 2 gambar di powerpoint, lalu blok ke 2 gambar setelah itu baru Save As Picture. Selesai. Jika kamu ingin menggunakan icon dengan ukuran yang sama, kamu bisa gunakan photoshop, caranya bisa dilihat di artikel cara membuat icon untuk website.

Untuk mencoba hasil gambar yang telah kamu buat diblog. Kamu bisa baca artikel mengganti tulisan beranda posting lama baru yang letaknya dibawah posting dengan gambar. Tapi sebelumnya upload terlebih dahulu gambar kamu ke blog dan ambil urlnya, caranya baca di cara upload dan ambil url gambar.

Itulah sedikit tips dan trik dari saya dalam membuat icon sendiri dengan mudah menggunakan program microsoft office PowerPoint yang dapat digunakan untuk mendesain icon blog atau website anda sendiri. Semoga bisa bermanfaat untuk anda.

Baca Selengkapnya >>>

Cara merapikan tulisan hasil copi internet

Cara merapikan tulisan hasil copi internet di microsoft word dengan menggunakan program notepad. Jika kita mencopi tulisan dari internet/website atau blog orang, lalu langsung kita pastekan ke microsoft word. Maka format tulisan dari internet pun akan ikut masuk ke microsoft word. Seperti contoh gambar dibawah ini. Sebelum dan sesudah dirapikan.

Cara merapikan tulisan hasil copi internet

Dari gambar diatas kita bisa melihat, tulisan hasil copian internet jika langsung kita pastekan di microsoft word, maka tulisan aslinya pun akan ikut ke microsoft word. Berbeda dengan hasil copian internet jika sudah di pindahkan ke program notepad, lalu baru kembali ke microsoft word. Maka format tulisan akan sama yaitu format font Calibri dengan ukuran 11, tidak ada format lain. Sehingga memudahkan kita untuk merapikannya. 

Langsung saja kebagian utama. Cara merapikan tulisan hasil copi internet.
  1. Pertama, silakan copi tulisan yang ada diinternet. Diwebsite atau diblog orang. Selanjutnya pastekan di Microsoft word.
  2. Dari hasil copian di microsoft word, copi tulisan yang akan dirapikan.
  3. Lalu pastekan ke program Notepad(Start > All Program > Accessories > Notepad)
  4. Setelah itu copi tulisan yang ada dinotepad, dan pastekan kembali ke Microsoft Word. Selesai.
Kekurangan dari format ini adalah notepad tidak membaca gambar, jadi yang terbaca hanya tulisan saja. Bagaimanapun bentuk format tulisan dari sebuah tulisan, jika sudah masuk ke notepad. Maka tulisan tersebut akan berformat font Calibri ukurannya 11. Jadi istilahnya notepad ini gunannya untuk menetralisir format tulisan. 

Memang tidak sepenuhnya rapi, masih harus dirapikan sendiri tulisan di microsoft word. Tapi setidaknya format2 tulisan yang berwarna-warni dari link2 blog orang akan hilang. Jadi tidak harus mengganti warna link satu persatu dimicrosoft word. Semoga Bermanfaat.
Baca Selengkapnya >>>

Cara membuat background warna transparan

Background warna transparan, yang berarti background dengan menggunakan warna transparan, tetapi background aslinya juga terlihat. Jadi background awal juga terlihat, misalkan background awal kita menggunakan gambar, dan background warna transparan kita warnanya hitam. Maka warna transparan hitam dengan background gambar juga akan terlihat.

Cara membuat background warna transparan

Seperti contoh gambar diatas,background dasar yang digunakan adalah background gambar, dan background trasnparanya berwarna hitam. Tapi warna hitam tersebut tidak sepenuhnya hitam. Sedikit hitam dan background gambar awalnya tetap terlihat. Berikut ini adalah beberapa kode warna background yang dapat digunakan untuk membuat background warna transparant.

background:rgba(0,0,0, 0.3);
background:rgba(0,0,0, 0.8);
Sebelumnya saya jelaskan sedikit tentang kode diatas.
  • Ketiga kode awal digunakan untuk mengatur kode warna. kode warna 0,0,0 adalah warna dasar Hitam.
  • Untuk kode terakhir 0.3 dan 0.8 digunakan untuk mengatur ketebalan dari warna hitam 0,0,0 tadi. Semakin besar kode terakhir, maka akan semakin hitam. Kode terakhir ini hanya sampai kode 1. Contoh:0,0,0, 1.
Untuk mengganti dengan warna lain, kamu bisa coba kode dibawah ini.

Untuk warna merah - background:rgba(204,0,0, 0.6);
Untuk warna pink - background:rgba(204,0,204, 0.8);
Untuk warna biru - background:rgba(0,0,204, 0.8);
Untuk warna Hijau - background:rgba(0,204,0, 0.8);
Untuk warna Kuning - background:rgba(204,204,0, 0.8);
Untuk warna Orange - background:rgba(255,102,0, 0.8);
Dan masih banyak lagi warna yang lainnya. Untuk melihat kode warna, kamu bisa lihat diphotoshop, lalu klik pada bagian set foreground color(gambar kotak untu ganti warna). Lalu lihat kode pada bagian RGB nya.

Cara membuat background warna transparan

Seperti contoh gambar diatas, pertama klik dulu bagian kotak yang sudah saya beri tanda merah sebelah kiri, maka akan terbuka Color Picker, dan copi 3 kode RGB yang bertanda kotak merah itu untuk digunakan diwebsite.
Dan yang terakhir adalah cara penerapannya di blogger. Sebagai contoh kita akan coba mengedit pada bagian halaman posting blog. Caranya ikuti langkah-langkah dibawah ini.
  1. Login ke blogger, pada halaman Dasbor pilih pengaturan Tata Letak.
  2. Selanjutnya klik Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode halaman posting ke dalamnya.
  3. .post{border:1px solid #ddd; background:rgba(0,204,0, 0.5);}
  4. Dan lihat perubahannya, background nya itu saya beri warna hijau, dengan ketebalan warna 0.5 hasilnya seperti gambar dibawah ini.
Cara membuat background warna transparan

Untuk mengatur bagian lainnya, coba kamu baca di artikel cara mengganti background blog dengan gambar. Disana ada beberapa kode bagian blog yang dapat kamu gunakan. Semoga Bermanfaat.

Baca Selengkapnya >>>

Cara buat kotak bayangan diblog

Cara membuat kotak bayangan diblog. Maksudnya adalah kita dapat membuat bayangan pada kotak yang ada diblog seperti pada bagian sidebar, posting, header dan juga pada bagian lain-lainnya. Contoh kotak bayangan seperti dibawah ini.



Untuk cara menerapkannya ke blog, kita coba edit pada bagian sidebar blog yang ada disebelah kanan/kiri blog. Caranya ikuti langkah-langkah dibawah ini.

  1. Login keblogger, lalu kepengaturan Tata Letak.
  2. Selanjutnya klik Desainer Template > Tingkat lanjut > Tambahkan Css. Dan masukan kode ini kedalamnya.
  3. .sidebar .widget {box-shadow: 0px 15px 15px #1780dd;}
  4. Maka hasilnya akan seperti contoh kotak bayangan diatas.
  5. Dan klik Terapkan ke blog, untuk menyelesaikan editan.

Berikut ini beberapa contoh kode box-shadow atau kotak bayangan yang dapat anda gunakan diblog.




    box-shadow: 0px 0px 15px #1780dd;


    box-shadow: 5px 5px 5px#1780dd;




    box-shadow: -5px -5px #1780dd;



    box-shadow: inset 0 0 10px;



    box-shadow: 5px 5px 5px 5px #1780dd;















    Silakan dicoba sendiri diblog anda, dengan menggunakan kode2 diatas. Untuk mengedit pada bagian yang lain silakan baca artikel cara mengganti blog dengan gambar atau cara membuat tulisan bayangan diblog disana ada kode2 bagian dari blog, yang dapat anda gunakan juga untuk diedit. Itulah sedikit cara mendesain blog menggunakan kode box-shadow atau kotak bayangan yang dapat digunakan diblog. Semoga bisa bermanfaat untuk anda.

    Baca Selengkapnya >>>

    Cara membuat background gradient 2 warna

    Background gradient fungsinya untuk membuat background warna dengan menggunakan 2 warna sekaligus, dengan perbandingan persen disetiap warnanya. Jadi misalkan kita ingin menggunakan warna putih dan biru dibackground blog kita. Maka kita dapat mengatur warna putih dibagian atas dan warna biru dibagian bawah. Berbeda dengan pengaturan warna biasa yang hanya satu warna.Contoh penggunaannya seperti dibawah ini.


    Background 1 warna dengan menggunakan warna biru.



    Warna Biru Saja

    Background 2 warna dengan menggunakan warna biru dan putih.



    Warna Biru dan Putih

    Selanjutnya adalah cara membuat dan menerapkannya diblog. Sebagai percobaan kamu bisa coba edit warna background dari halaman posting blog. Ke pengaturan tata letak > klik Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode background posting berikut kedalamnya.
    .post{
    background: -moz-linear-gradient(center top , #ffffff 40%, #1780dd 100%);}
    Lalu lihat perubahan background halaman posting, warna putih akan berada diatas dan biru ada dibagian bawah.


    Berikut jenis2 pengaturan warna gradient 2warna yang dapat kita gunakan.


    Atas - Bawah
    background: -moz-linear-gradient(top , #ffffff, #1780dd);


    Kiri - Kanan
    background: -moz-linear-gradient(left , #ffffff, #1780dd);


    Warna Berhenti putih-biru-putih-biru-putih
    background: -moz-linear-gradient(left , #ffffff, #1780dd, #ffffff, #1780dd, #ffffff);


    Warna Berhenti putih-biru-putih-biru-putih dengan persen%
    background: -moz-linear-gradient(left , #ffffff, #1780dd 5%, #ffffff, #1780dd 95%, #ffffff);


    Warna putih dikiri-kanan dan biru ditengah
    background: -moz-radial-gradient(circle, #1780dd, #ffffff);


    Posisi dan Ukuran
    background: -moz-radial-gradient(80% 20%, closest-corner, #1780dd, #ffffff);
    Ukuran: 80% untuk warna putih dan 20% untuk warna biru
    Posisi: closest-corner pada bagian atas bisa diganti dengan kode
    closest-side
    closest-corner
    farthest-side
    farthest-corner
    contain
    cover
    Silakan berkreasi sendiri, dengan kode2 diatas dalam mendesain blog anda agar terlihat lebih menarik. Untuk cara penggunaan dibagian lain, seperti pada bagian header, sidebar atau keseluruh body halaman blog, kamu bisa baca di artikel cara mengganti background blog dengan gambar diartikel itu, ada kode dari bagian2 blog, yang dapat kamu gunakan untuk diberi background 2 warna seperti contoh diatas.
    Catatan: Gradient 2 warna ini tidak bisa dilihat di browser google chrome, sebabnya saya belum tau, jika sudah tau saya akan tambahkan di artikel ini, untuk di mozilla bisa, warna gradient 2 warna terlihat.Semoga bisa bermanfaat untuk anda.

    Baca Selengkapnya >>>

    Menu gambar dengan posisi sembarangan

    Menu gambar dengan posisi sembarangan. Maksudnya adalah membuat menu menggunakan gambar, dengan posisi gambar yang tidak beraturan. Gambar bisa ditempatkan diatas, bawah, kanan, kiri sesuai dengan yang kita inginkan. Contohnya seperti dibawah ini.


    • kumpulan Tutorial Desain Blogger
    • kumpulan Tips dan Trik Blogspot
    • Fandra Juani Contact
    • Daftar Tutorial Desain Blog
    • profil fandra juani









    Cara membuatnya, ikuti langkah-langkah dibawah ini.

    1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
    2. Dan klik Tambahkan Gadget di bawah header atau disidebar. Dan pilih HTML/Javascript.
    3. Selanjutnya copi kode HTML dibawah ini, dan pastekan didalam Gadget HTML/Javascript tadi.
    4. <div id="satu1">
      <ul>
      <li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
      </ul>
      </div>

      <div id="dua2">
      <ul>
      <li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
      </ul>
      </div>

      <div id="tiga3">
      <ul>
      <li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
      </ul>
      </div>

      <div id="empat4">
      <ul>
      <li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html" title="Daftar isi"><img alt="Daftar Tutorial Desain Blog" height="74" src="https://lh5.googleusercontent.com/-nwLpXSpn5gU/Uo5XUDFOgkI/AAAAAAAABW8/7TUzv5rBcFk/s133/Daftar%2520Isi.PNG" title="Daftar isi" width="133" /></a></li>
      </ul>
      </div>

      <div id="lima5">
      <ul>
      <li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
      </ul>
      </div>
    5. Selanjutnya, simpan HTML/Javascript.
    Keterangan kode:
    • Silakan isi URL Menu dengan URL/Halaman web anda.
    • Silakan isi URL dari Gambar dengan URL dari gambar anda.
    • Contoh URL bisa dilihat di div id="empat4

    Setelah itu ke tahap pengaturan posisi gambar, caranya klik Desainer Template(masih pada pengaturan Tata Letak). Lalu Klik Tingkat Lanjut > Tambahkan Css. Dan masukan kode CSS dibawah ini kedalamnya.

    #satu1{background:transparent;margin:-10px 0px 0px -100px;float:left;}
    #satu1 ul{list-style:none}

    #dua2{background:transparent;margin:-40px 0px 0px 0px;float:left;}
    #dua2 ul{list-style:none}

    #tiga3{background:transparent;margin:-10px 0px 0px 0px;float:right;}
    #tiga3 ul{list-style:none}

    #empat4{background:transparent;margin:40px -390px 0px 0px;float:right;}
    #empat4 ul{list-style:none}
    #empat4 img{position:relative;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .1s ease-in-out;transition:all .4s ease-in-out}
    #empat4 img:hover{-o-transform:scale(1) rotate(720deg);-moz-transform:scale(1) rotate(720deg);-webkit-transform:scale(1) rotate(720deg)}

    #lima5{background:transparent;margin:-40px -160px 0px 0px;float:right;}#lima5 ul{list-style:none}

    Keterangan Kode:

    • margin:40px -390px 0px 0px; fungsinya untuk mengatur gambar ke posisi yang kita inginkan, formatnya kode tersebut adalah 40px(atas) -390(kanan) 0px(bawah) 0px(kiri).
    • float:right;  dan float left fungsinya untuk memudahkan kita menempatkan gambar ke bagian kiri atau kanan
    • #empat4 img{ dan #empat4 img:hover{ kode tambahan agar gambar berputar ketika disentuh mouse.
    Atur posisi dari gambar tersebut sesuai dengan yang kalian inginkan.  Setelah selesai mengatur posisi gambar, baru lah klik Terapkan Ke Blog, Selesai.

    Dengan memasukan kode Css ke bagian Tambahkan Css, kita dapat melihat perubahan posisi gambar secara langsung, ketika kita merubah nilai dari kode Css. Contoh gambar penempatan kode Css didalam ruang Tambahkan Css.
    Menu gambar dengan posisi sembarangan

    Silakan baca juga artikel tentang cara membuat menu blog dengan gambar, yang dapat dijadikan pilihan dalam pembuatan menu gambar diblog. Semoga bisa bermanfaat untuk anda.
      Baca Selengkapnya >>>

      Cara membuat menu HTML dan Css

      Cara membuat menu html dan css serta cara mengisi menu tersebut dengan link atau url yang kita inginkan. Perlu diketahui bahwa menu terdiri dari kode HTML sebagai pokok utama dari menu dan CSS sebagai penghiasnya. Akan saya coba jelaskan sedikit demi sedikit.

      Kode dasar HTML dari sebuah menu, kira-kira seperti ini.

      <div id="menu">
      <ul>
      <li><a href="URL alamat web">Beranda</a></li>
      </ul>
      </div>
      Maka hasilnya akan menjadi seperti ini.
      • Beranda
      Selanjutnya kita coba tambahkan menu yang lainnya. Seperti Profil, Contact, dan Daftas isi.
      <div id="menu">
      <ul>
      <li><a href="URL alamat web">Beranda</a></li>
      <li><a href="URL alamat web">Profil</a></li>
      <li><a href="URL alamat web">Contact</a></li>
      <li><a href="URL alamat web">Daftas Isi</a></li>
      </ul>
      </div>
      Maka hasilnya akan menjadi seperti ini.
      • Beranda
      • Profil
      • Contact
      • Daftar Isi
      Dari contoh diatas, setiap menu mempunyai kode sendiri.
      Seperti Beranda kodenya: <li><a href="URL alamat web">Beranda</a></li>.
      Jadi jika ingin menambahkan menu lagi, kita dapat menambahkan kode dengan format
      <li><a href ="URL address">Nama menu yang akan dibuat</a></li>

      Dari kode HTML menu diatas. Menu akan berbentuk menurun/vertical dengan bullet-list disamping kirinya. Sekarang masuk ke bagian CSS/Penghias menu. Dari kode CSS inilah kita dapat membuat menu menjadi bentuk Horizontal atau memanjang kesamping. Mengatur warna tulisan, warna background, jarak antar tulisan dan lain-lainnya. Kode Css akan berjalan sesuai dengan kode HTML yang kita buat.

      Untuk cara memasangnya di blog, ke pengaturan tata letak > klik tambahkan gadget > pilih HTML/Javascipt, lalu masukan kode HTML dan CSS kedalamnya Dengan format seperti dibawah ini.
      <style>
      kode Css
      </style>
      kode html
      Lalu Save, selesai.

      Lanjut ke bagian Css. Seperti contoh kode HTML diatas. Kita membuat menu dengan Kode id=menu maka dikode Css nya juga harus menu. Contoh:
      #menu { background:#eee;border:1px solid #444444;}
      Maka hasilnya akan menjadi seperti ini.

      Selanjutnya menghilangkan bullet list. Tambahkan kode #menu ul {list-style:none;} Maka hasilnya akan menjadi seperti ini.

      Mengatur jarak antar tulisan. Tambahkan kode #menu ul li {padding:5px;} hasilnya.

      Mengatur warna,ukuran,tebal tulisan tambahkan kode Css #menu ul li a{color:#aaaaaa;font-size:12px;font-weight:bold;} Hasilnya:

      Mengatur warna tulisan ketika disentuh mouse. tambahkan kode #menu ul li a:hover{color:#aaa;} Hasilnya.


      Jadi kode keseluruhan dari kode HTML dan CSS diatas adalah seperti ini.

      <style>
      #menu { background:#eee;border:1px solid #444444;}
      #menu ul {list-style:none;}
      #menu ul li {padding:5px;}
      #menu ul li a{color:#000;font-size:12px;font-weight:bold;}
      #menu ul li a:hover{color:#aaa;}
      </style>

      <div id="menu">
      <ul>
      <li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
      <li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
      <li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
      <li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
      </ul>
      </div>


      Sekarang ke tahap pembuatan menu horizontal. Kode HTML nya sama seperti cara diatas, yang berbeda hanyalah kode Css nya kita tambahkan kode float;left pada bagian #menu ul li {padding:5px;float;left; } dan juga kode height:40px; pada bagian #menu { background:#eee;border:1px solid #444444;height:40px;} . Contoh:

      <style>
      #menu { background:#eee;border:1px solid #444444;height:40px;}
      #menu ul {list-style:none;}
      #menu ul li {padding:5px;float;left}
      #menu ul li a{color:#000;font-size:12px;font-weight:bold;}
      #menu ul li a:hover{color:#aaa;}
      </style>

      <div id="menu">
      <ul>
      <li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
      <li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
      <li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
      <li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
      </ul>
      </div>

      HASILNYA



      Dari contoh2 diatas, kita dapat melihat perbedaan antara menu horizontal dan vertical terletak pada kode Cssnya sedangkan kode HTML nya tetap sama. Silakan berkreasi sendiri. Artikel diatas hanyalah sedikit tutorial sederhana dari saya, yaitu tentang dasar pembuatan menu menggunakan kode HTML dan Css, yang dapat anda kembangkan sendiri sesuai dengan keinginan anda. Semoga Bermanfaat.
      Baca Selengkapnya >>>

      Cara merubah bullet list diposting blog

      Cara merubah tampilan bullet list diposting blog menggunakan gambar. Bullet list atau tanda bulat-bulat yang ada diposting blog akan kita ganti dengan menggunakan gambar, agar terlihat lebih stylish. Contoh gambar lihat dibawah ini.

      Cara merubah bullet list diposting blog
      Bagaimana??anda tertarik untuk mengganti bullet list diblog anda dengan gambar. Jika tertarik, silakan ikuti langkah-langkah dibawah ini.
      1. Login ke blogger. Selanjutnya kepengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan Css. 
      2. Lalu copi kode berikut dan pastekan kedalam kotak tambahkan Css.
      3. .post ul {
        list-style:url(https://lh6.googleusercontent.com/-m-YGd6ZluKg/UouNF0lbvbI/AAAAAAAABSU/m2dbKwZp9K8/s12/bullet%2520list.gif);}
      4. Selanjutnya Klik terapkan ke blog, selesai.
      Keterangan Kode:
      • .post ul { kode untuk mengatur bullet list diposting blog.
      • https://lh6.googleusercontent.com/-m-YGd6ZluKg/UouNF0lbvbI/AAAAAAAABSU/m2dbKwZp9K8/s12/bullet%2520list.gif merupakan kode url dari gambar yang akan dijadikan bullet list diposting blog.
      Jika ingin menggunakan gambar sendiri, silakan buat gambar yang akan dijadikan bullet list diprogam gambar, buatlah gambar dengan ukuran yang kecil, misalnya 16x16, seperti contoh gambar diatas, gambar bullet list yang saya gunakan ukurannya 12x10. Untuk cara merubah ukuran gambar, kalian bisa baca di artikel cara membuat icon untuk website menggunakan photoshop.

      Agar tidak memberatkan loading blog, buatlah gambar dengan format Gif. Karena dengan menggunakan format Gif, ukuran gambar bisa dibawah 1kb, seperti contoh gambar, itu ukurannya hanya 873byte. Satu lagi kelebihan format gif, background gambar transparant. Jadi yang terlihat hanya bagian yang berwarna saja.

      Setelah selesai membuat gambar, upload gambar dan ambil Url nya. Caranya bisa baca di artikel cara upload dan ambil url gambar. Dan gunakan url tersebut ke dalam kode .post ul { list-style(url gambar kamu sendiri);}. Selesai. Semoga bisa bermanfaat untuk anda.
        Baca Selengkapnya >>>

        Cara membuat author dibawah posting blog

        Cara membuat author dibawah posting blog. Dengan menambahkan author atau profil penulis blog. Maka pengunjung akan lebih mudah untuk mengenali pemilik/penulis dari blog yang sedang dibacanya. Contoh gambar bisa lihat dibawah ini.

        Cara membuat author dibawah posting blog
        Untuk lebih jelasnya tentang cara membuat author dibawah posting blog. Ikuti langkah-langkah dibawah ini.
        1. Login keblogger, pilh pengaturan template.
        2. Klik edit HTML dan cari kode <data:post.body/> lalu masukan kode ini dibawahnya.
        3. <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <div class='gambar'>
          <img src='https://lh4.googleusercontent.com/-n-7Ujm1j6nk/UYqhfNgBZcI/AAAAAAAAAQQ/nAaz8oHf4CM/s361/Fandra%2520Juani.jpg'/>

          <div class='Penulis'>
          <span>Penulis : <a href='http://fandrajuani.blogspot.com/p/blog-page_25.html'><d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r></a></span>

          <div class='keterangan'>
          <span>Ada Pertanyaan tentang artikel diatas, silakan masukan komentar dibawah. </span>

          <div class='terimakasih'>
          <span>Terima Kasih Atas Kunjungannya. Assalamualaikum wr.wb.</span>
          <div style='clear:both;'/>
          </div></div></div></div></b:if>
          <div style='clear: both;'/>
          </div>
        4. Kode <data:post.body/> di template blog, biasanya ada 3, masukan kode langkah 2, di bawah kode <data:post.body/>, ketiga2nya.
        5. Selanjutnya, cari kode ]]></b:skin> lalu masukan kode ini didalamnya.
        6. .gambar {
          background: url(http://3.bp.blogspot.com/-XQpNUW9Y0BQ/Und_bxqAsyI/AAAAAAAABKI/0xTMRKYDggw/s1600/gt.jpg) repeat-x top center;
          box-shadow:0px 1px 10px #aaaaaa;
          border:2px solid #eeeeee;
          padding:0;
          margin:10px 0;
          font:bold 12px Arial,Sans-Serif;height:100px;}

          .gambar img{
          width:70px;
          height:70px;
          margin:10px;
          float:left;
          padding:4px;
          background:#ffffff;
          border:1px solid #dddddd;
          position: relative;
          -moz-transition:all .4s ease-in-out;;
          -ms-transition:all .4s ease-in-out;;
          -o-transition:all .4s ease-in-out;;
          -webkit-transition:all .1s ease-in-out;
          transition:all .4s ease-in-out;}

          .gambar img:hover{
          -o-transform: scale(1) rotate(720deg);
          -moz-transform: scale(1) rotate(720deg);
          -webkit-transform: scale(1) rotate(720deg);}

          .Penulis{
          float:left;
          margin:10px 0px 0px 0px;
          text-shadow: 2px 2px 5px #107cde;
          font-weight:bold;color:white;}
          d{font-size:180%;color:DarkCyan}
          g{color:red}
          h{color:blue}
          i{color:#ee3e80}
          j{color:pink}
          k{color:black}
          l{font-size:180%;color:violet}
          m{color:DarkCyan}
          n{color:blue}
          o{color:pink}
          r{color:red}

          .Penulis a{
          text-transform:uppercase;
          font-family:Ravie;
          font-size:12px;
          text-shadow:2px 2px 5px #1780dd;
          font-weight:bold;padding:0}

          .keterangan{
          padding:15px 0px 0px 0px;
          color:white;font:italic 12px Arial, Sans-Serif;
          text-shadow: 2px 2px 5px #107cde;font-weight:bold;}

          .terimakasih{
          margin:13px 0px 0px 150px;
          font:italic 12px Arial, Sans-Serif;color:black;
          text-shadow: 2px 2px 5px #ffffff;}
        7. Save template, selesai.
        Keterangan kode langkah 2: 
        • Gambar untuk memasukan foto yang akan kita gunakan sebagai profil author.
        • Penulis isi dengan nama kamu, tulisannya saya buat dengan warna yang berbeda disetiap hurufnya. Untuk penjelasannya baca diartikel tulisan dengan warna yang berbeda.
        Keterangan kode langkah 4: 
        • Gambar untuk memberikan background disemua tulisan. Height nya saya atur 100px bisa anda ganti sesuai dengan keinginan anda.
        • .gambar img{ untuk mengatur ukuran gambar profil author dan juga tambahan kode gambar berputar.
        • .gambar img:hover{ gambar akan berputar ketika disentuh mouse. Penjelasannya baca di artikel cara membuat gambar berputar diblog
        • .Penulis a{ untuk mengatur font atau jenis tulisan nama author.
        • .keterangan{ jika menggunakan keterangan yang panjang. Hapus kode float:left; yang ada di kode .Penulis{ agar keterangan tetap berada disamping gambar profil.
            Silakan diubah sesuai dengan keinginan anda sendiri. Dan baca juga artikel tentang cara membuat tanda penulis dikotak komentar blog, agar terlihat berbeda dengan komentar dari pengunjung, sehingga orang bisa membedakan mana pengunjung, mana penulis blog. Semoga Bermanfaat.
              Baca Selengkapnya >>>

              Modifikasi baca selengkapnya versi Blogger

              Cara modifikasi baca selengkapnya versi blogger. Baca selengkapnya fungsinya untuk memotong artikel pada tampilan awal blog. Jadi pada halaman awal, tidak semua tulisan dari artikel kita akan terlihat, yang terlihat hanya pada bagian awalnya saja. Penggunaannya cukup mudah, kita hanya menekan tombol Insert Jump Break pada saat kita menulis artikel(dientri). Untuk lebih jelasnya, kamu bisa baca di artikel cara membuat read more diblog.

              Dan kali ini kita akan merubah tulisan baca selengkapnya versi blogger dengan menambahkan kode css didalamnya. Contohnya seperti gambar dibawah ini.

              Modifikasi baca selengkapnya versi Blogger
              Langsung saja, cara modifikasi tulisan baca selengkapnya versi blogger. Ikuti langkah-langkah dibawah ini.
              1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
              2. Lalu klik edit HTML dan cari kode <div class='jump-link'>. Dan ganti dengan kode dibawah ini.
              3. <div class='jump-link' style='text-align: right;border:1px solid #dddddd;background:#eeeeee;box-shadow:0px 5px 5px #aaaaaa;margin:5px 0px 0px 450px;padding:5px;background-image: -moz-linear-gradient(center top , #fff 0%, #ddd 100%);'>
              4. Selanjutnya, save template. Selesai.
              Keteranga kode:
              • style='text-align: right; untuk mengatur tulisan baca selengkapnya disebelah kanan.
              • border:1px solid #dddddd; untuk mengatur border kotak baca selengkapnya.
              • background:#eeeeee; warna backgroundnya.
              • box-shadow:0px 5px 5px #aaaaaa; warna bayangan kotak.
              • margin:5px 0px 0px 450px; untuk mengatur lebar dan panjang kotak baca selengkapnya.
              • padding:5px; untuk mengatur tulisan didalam kotak.
              • background-image: -moz-linear-gradient(center top , #fff 0%, #ddd 100%); untuk mengatur warna background atas dan bawah kotak baca selengkapnya.
              Selesai sudah cara modifikasi baca selengkapnya versi blogger, yang dapat anda jadikan pilihan untuk mengatur tampilan blog anda. Silakan dimodifikasi sendiri sesuai dengan tampilan yang kalian inginkan. Jika ingin membuat baca selengkapnya secara auto/otomatis. Kamu bisa baca di artikel cara membuat auto reamore diblog. Semoga Bermanfaat.
                Baca Selengkapnya >>>

                Cara membuat contact form di posting blog

                Cara membuat contact form di blogger, pada halaman posting atau laman blog. Contact form ini fungsinya Untuk memudahkan pengunjung menghubungi kita. Dengan mengisikan nama, email dan juga pesan yang ingin disampaikan ke penulis melalui kotak form yang telah disediakan. Pesan yang dikirimkan, akan masuk ke alamat email yahoo kita, yang kita gunakan diblog. Jadi tinggal buka yahoo dan lihat apakah ada pesan yang masuk dari kontak blogger.

                Cara membuat contact form di blog

                Gambar diatas adalah contoh contact form yang akan kita buat. Caranya ikuti langkah-langkah dibawah ini.
                Langkah pertama : Membuat contact form dihalaman posting atau laman blog.
                1. Login ke blogger, dari halaman dasbor pilih pengaturan Tata Letak
                2. Lalu klik tambahkan Gadget > Gadget Lainnya > lalu pilih Formulir Kontak > Dan letakkan dibagian sidebar paling bawah.
                3. Selanjutnya, memasukan formulir kontak ke halaman posting. Buatlah artikel baru atau buat dilaman > Laman baru > Laman Kosong. Dan Copi kode dibawah ini lalu pastekan dibagian HTML(disebelah compose).
                4. <form name='contact-form'>
                  <div>Nama Kamu:</div>
                  <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>

                  <div>Email:</div>
                  <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>

                  <div>Pesan:</div>
                  <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <p></p>
                  <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>

                  <div style='text-align: center; max-width: 450px; width: 100%'>
                  <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
                  <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </div>
                  </form>
                5. Terakhir beri judul, dan Publikasikan. Selesai.
                Langkah kedua : Merubah tinggi dan panjang dari form nama, email, pesan.
                1. Ke pengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode ini kedalamnya.
                2. /* untuk mengatur ukuran form name dan email*/
                  .contact-form-name, .contact-form-email {
                  max-width: 300px;
                  width: 100%;
                  }
                  /* untuk mengatur ukuran form pesan*/
                  .contact-form-email-message {
                  max-width: 300px;
                  width: 100%;
                  }
                3. Lalu terapkan ke blog, jika ingin merubah tingginya tambahkan kode height:100px;. Silakan diatur sendiri.
                Langkah ke 3 : Menghilangkan Contact Form di halaman Blog.
                1. Ke pengaturan Template > Edit HTML > Dan klik Lompat ke Widget > Pilih ContactForm1.
                2. Selanjutnya, buka semua kode, dan hapus beberapa kode didalamnya(hanya kode dibagian ContactForm1 bagian lain jangan dihapus). Sampai yang tertinggal hanya kode dibawah ini
                3. <b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'>
                      <b:includable id='main'>
                    <b:include name='quickedit'/>
                  </b:includable>
                    </b:widget>
                4. Setelah itu, cari kode ]]></b:skin> dan tempatkan kode dibawah ini, fungsinya untuk menghilangkan sisa dari widget contact form dihalaman blog.
                5. #ContactForm1 {
                  height: 0px;
                  visibility: hidden;
                  display: none;
                  background:transparent;
                  box-shadow:none;}
                6. Save temlate, selesai.
                Widget contact form tetap akan ada di blog kita. Tapi hanya di bagian tata letak saja, pada halaman blog tidak akan terlihat. Jika ingin menambahkan background gambar didalamnya, kamu baca di artikel cara membuat background dihalaman posting. Semoga bisa Bermanfaat untuk anda.
                      Baca Selengkapnya >>>

                      Cara merubah tampilan kotak komentar blog

                      Cara merubah tampilan kotak komentar blog, agar terlihat lebih rapi. Dengan cara menambahkan background, box-shawod, warna, serta ukuran dari tulisan yang ada didalam komentar blog. Contohnya seperti gambar dibawah ini.

                      Cara merubah tampilan kotak komentar blog

                      Untuk lebih jelasnya tentang cara merubah tampilan kotak komentar blog. Ikuti langkah-langkah dibawah ini.
                      1. Login ke blogger, pili pengaturan Tata Letak > Desainer Templates.
                      2. Lalu pilih Tingkat Lanjut > Tambahkan Css
                      3. Dan masukan kode ini kedalamnya.
                      4. .comments h4 {Color:#0b5394;margin:0;}
                        .comments {
                        border:1px solid #cccccc;
                        margin:0px 10px 20px 10px;
                        padding:10px;
                        box-shadow:0px 1px 10px #aaaaaa;
                        background:#ffffff;
                        background-image: -moz-linear-gradient(center top , #fff 0%, #f3f3f3 100%);}

                        .comments .comments-content {
                        background:transparent;
                        margin:-20px 0px -50px 0px;
                        font-size:13px;
                        text-align:left;}

                        .comments .comments-content .user a{
                        color:#1780dd;
                        font-size:14px;
                        font-weight:700;}

                        .comments .comment-replies .comment-thread{
                        border:1px solid #dddddd;
                        box-shadow:1px 1px 1px #bbbbbb;
                        background-image: -moz-linear-gradient(center top , #fff 0%, #e6e6e6 100%);
                        margin:0px 0px 0px 12px;}

                        .comments .continue{border-top:none;}  
                        .comments .comments-content .comment {margin:0px 0px -10px 0px;}
                        .comments .comments-content .datetime{
                        font-size:11px;
                        margin:3px 0px 0px 0px;
                        float:right;font-weight:700;}
                      5. Save template, Selesai.
                      Keterangan Kode:
                      • .comments h4 { untuk mengatur warna tulisan dari jumlah komentar. 
                      • .comments { untuk mengatur warna background dari seluruh kotak komentar blog. 
                      • .comments .comments-content { untuk mengatur warna, ukuran tulisan dari isi komentar, dan jarak tinggi komentar blog. 
                      • .comments .comments-content .user a{  untuk mengatur warna dari seluruh nama yang ada dikotak komentar. 
                      • .comments .comment-replies .comment-thread{ untuk mengatur warna background dari komentar balasan. 
                      • .comments .continue{ untuk mengatur tombol Balas. 
                      • .comments .comments-content .comment { untuk mengatur jarak antar komentar balasan. 
                      • .comments .comments-content .datetime{ untuk mengatur warna dan posisi tanggal.
                      Silakan baca juga artikel yang terkait dengan desain kotak komentar blog. Seperti cara membuat tanda penulis dikotak komentar blog. Dan juga cara menggantu tulisan poskan komentar dengan gambar. Dan juga artikel-artikel lainnya. Semoga Bermanfaat.
                        Baca Selengkapnya >>>

                        Cara membuat tulisan 2 baris dalam satu kotak excel

                        Cara membuat tulisan 2 baris dalam satu kotak excel. Pada dasarnya, saat kita menulis diexcel dengan kata yang panjang, maka tulisan tersebut akan memerlukan banyak kotak colomn kesamping. Agar terlihat rapi, kita dapat membagi tulisan tersebut menjadi 2 row, row atas dan row bawah. Tapi jika membagi kata menjadi 2 row, kita memerlukan waktu yang lama, dan agak sedikit susah membaginya. 

                        Berikut ini adalah cara mudah membuat tulisan yang panjang menjadi 2baris hanya dalam satu kotak excel. Contohnya seperti dibawah ini.

                        Cara membuat tulisan 2 baris dalam satu kotak excel

                        Untuk lebih jelasnya tentang cara membuat 2baris dalam satu kotak excel. Ikuti langkah-langkah dibawah ini.
                        1. Pertama buka program excel kamu. Lalu tulis seperti contoh gambar dibawah ini.
                        Cara membuat tulisan 2 baris dalam satu kotak excel
                        2. Selanjutnya, klik tanda Wrap Text pada menu atas excel. Contoh gambar.
                        Cara membuat tulisan 2 baris dalam satu kotak excel
                        3. Setelah itu atur lebarnya sesuai dengan yang kalian inginkan, selesai.

                        Silakan dibaca juga artikel lainnya tentang excel, seperti cara  cara print banyak kotak diexcel, atau cara menuliskan mata uang rupiah dimicrosoft excel. Dan juga artikel-artikel lainnya. Semoga bermanfaat.

                        Baca Selengkapnya >>>

                        Cara mengganti poskan komentar dengan gambar

                        Cara mengganti tulisan poskan komentar yang berada di atas kotak komentar dengan gambar. Tulisan poskan komentar ini akan muncul jika artikel kita belum ada komentar. Dan akan hilang dengan sendirinya jika artikel sudah ada yang berkomentar.
                        mengganti poskan komentar dengan gambar
                        Gambar diatas adalah contoh tulisan poskan komentar yang berada di atas kotak komentar blog. Untuk menggantinya dengan gambar. Ikuti langkah-langkah dibawah ini.
                        1. Login ke blogger, ke pengaturan Template.
                        2. Lalu klik edit HTML dan cari kode <data:postCommentMsg/>
                        3. Setelah itu ganti tulisan tersebut dengan format kode dibawah ini.
                        4. <img src="URL gambar kalian" />
                        5. Kode <data:postCommentMsg/> ada 4 di template blog Ganti semuanya dengan kode gambar seperti diatas.
                        6. Save template, selesai.
                        Saya beri contoh gambar dan kodenya.
                        mengganti poskan komentar dengan gambar
                        <img src="http://3.bp.blogspot.com/-I0rc7Jma6qA/UoOV4fHN5eI/AAAAAAAABPw/IlyhS9yvPSw/s1600/KOMENTAR+1.gif" />
                        mengganti poskan komentar dengan gambar
                        <img src="http://4.bp.blogspot.com/-kAz9MHOhsww/UoQy58SD5cI/AAAAAAAABQk/O2N9XwV9fH4/s1600/Poskan+Komentar+02.gif" />
                        Silakan gunakan kode dan gambar diatas untuk percobaan diblog anda. Selanjutnya anda bisa gunakan gambar sendiri yang kalian inginkan. Untuk cara upload dan ambil url gambar, upload saja gambarnnya ke blogger, lalu klik kanan dan ambil urlnya, untuk lebih jelasnya bisa kalian baca di cara upload dan ambil url gambar.

                        Setelah mengganti tulisan poskan komentar dengan gambar, kita juga dapat mengatur posisinya, dikanan, dikiri atau ke posisi lainnya yang sesuai dengan keinginan kita. Caranya tempatkan kode berikut diatas ]]></b:skin>
                        .comments h4 img{
                        float:right;
                        margin:-42px  -35px 0px 0px;
                        }
                        Ketarangan kode:
                        • float:right; mengatur posisi gambar berada dikanan. Untuk mengubah menjadi sebelah kiri, hapus saja kode tersebut.
                        • margin:-42px  -35px 0px 0px; untuk mngatur posisi kanan, atas, bawah, kiri gambar.
                        Terakhir save template, selesai. Silakan dibaca juga artikel laiinya yang berkaitan dengan kotak komentar seperti cara membuat tanda penulis di blog pada bagian kotak komentar. Atau cara menghilangkan kotak komentar pada halaman tertentu diblog. Dan juga artikel-artikel lainnya. Semoga bisa bermanfaat untuk anda.
                          Baca Selengkapnya >>>

                          Cara memasukan kode HTML, Css, Script diposting blog

                          Untuk memasukan kode html, css, script diposting blog sebenarnya bisa dapat ditulis secara langsung seperti kita menulis artikel seperti biasa. Tapi dibeberapa blog ada yang tidak dapat menuliskannya secara langsung, seperti menulis kode ]]></b:skin>. Pada saat diketik mungkin bisa, tapi pada saat dipublikasikan, yang tampil hanya kode ]]> ini saja.

                          Kejadian ini saya alami pada saat menggunakan template simple. Terus saya cari tau, kesalahannya dimana. Ternyata kesalahannya ada di pengaturan Setelan entri yang ada disebelah kanan pada saat kita menulis artikel. Jika kamu mengalami hal yang sama. Buka entri baru/atau entri lama kamu, lalu klik pengaturan Setelan Entri > Pilihan > mode tulis > pilih Tunjukan HTML apa adanya dan klik selesai. Maka kode2 yang kita tulis secara langsung diposting blog akan terlihat.

                          Selanjutnya, agar tampilan kode html, css, script diblog kita terlihat rapi. Kita dapat memasukannya ke dalam satu kotak script. Berikut caranya.
                          Pembuatan kotak script
                          1. Pertama, copi kode dibawah ini, lalu pastekan diatas ]]></b:skin>  
                          2. .kotak {
                            padding:10px;
                            margin-top:5px;
                            margin-bottom:10px;
                            border-left: 10px solid #0b5394;
                            border-top:1px solid #ddd;
                            border-bottom:1px solid #eee;
                            border-right:1px solid #eee;
                            box-shadow:0px 3px 3px #aaaaaa;
                            background: url(https://lh4.googleusercontent.com/-20OcWWjnUys/UoH5-kSIcAI/AAAAAAAABNs/qD2oTuhBfPU/s150/Code%2520HTML%2520css.png)
                            no-repeat center center;}
                          3. Save template. Selesai.
                          Cara membuat kotak script didalam posting blog
                          1. Buatlah entri baru atau edit artikel lama kamu. 
                          2. Lalu klik bagian HTML disebelah Compose.
                          3. Lalu ketikan kode ini.
                          4. <div class="kotak">
                            klik disini dan ganti dengan kode script yang ingin kalian masukan
                            </div>
                          5. Lalu kembali ke Bagian Compose dan ganti tulisan klik disini dan ganti dengan kode script yang ingin kalian masukan 
                          6. Setelah itu klik Pratinjau untuk melihat tampilannya. Selesai.
                           Selanjutnya masuk ke tahap overflow, membuat kotak dengan scroll
                          1. Cara membuat Kotak scroll kebawah. Sama seperti cara diatas, lalu tambahkan kode style="overflow: auto; height: 80px; didalamnya. Contohnya seperti dibawah ini.
                          2. <div class="kotak" style="overflow: auto; height: 80px;" >
                            Contoh kotak dengan scroll
                            </div>

                          3. Cara membuat kotak scroll kesamping.
                          4. Contoh penggunaan kotak denga scroll kesamping. Copi kode dibawah ini dan tempatkan dibagian HTML seperti cara diatas.

                            <div class="kotak" style="overflow-x: scroll; overflow-y: hidden; padding: 10px; width: 540px;" >
                            <p style="width:450%;">Masukan kode disini.
                            </p></div><br />
                          Pada saat kita menulis artikel warna dari kotak script tidak terlihat, api pada saat kita Pratinjau atau publikasikan, barulah kotak dengan warna tersebut akan terlihat. Agar kita tidak bingung, sebaiknya pada saat menuliskan kode kotak di HTML(sebelah compose), tambahkan juga tulisan dimana tempat memasukan kodenya. Contoh:
                          <div class="kotak">
                          Tempat memasukan kode script, html, css dan lain-lain.
                          </div>
                          Dengan begitu, tulisan yang akan tampil dihalaman Compose adalah tulisan Tempat memasukan kode script, html, css dan lain-lain. Tinggal kita klik lalu ganti dengan kode yang ingin kita masukan. Selesai.

                          Silakan dibaca juga artikel tentang fungsi border dan penggunaannya diblog yang dapat digunakan untuk mengganti tampilan kotak script dengan tampilan lain. Semoga bermanfaat.
                            Baca Selengkapnya >>>

                            Cara merubah tampilan blockquotes diblog

                            Blockquotes biasanya digunakan untuk memperjelas tulisan, seperti keterangan, tips, trik, saran, atau hal terpenting yang harus dibaca/diingat oleh pembaca. Dengan menggunakan blockquote kita dapat membuat tulisan yang berbeda dengan tulisan yang lainnya, agar lebih mudah untuk dibaca.

                            Cara merubah tampilan blockquotes diblog
                            Untuk lebih jelasnya tentang cara merubah tampilan blockquotes. Ikuti langkah-langkah dibawah ini.

                            Cara merubah tampilan blockquotes.

                            Ke pengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan CSS. Lalu masukan kode ini kedalamnya.
                            .post blockquote {
                            background:#f9f9f9;
                            padding:10px;
                            margin:15px 0px 15px 0px;
                            border-left: 10px solid #0b5394;
                            box-shadow:0px 5px 5px #aaaaaa;
                            border-top:1px solid #ddd; }
                            Setelah itu, klik Terapkan ke blog, Selesai.

                            Cara menggunakan blockquotes di halaman posting blog.

                            Buatlah entri baru, dan menulis seperti biasa. Selanjutnya Blok tulisan yang akan diberi Blockquotes, lalu tekan tanda Quotes(Tanda " disebelah kiri tanda Tx) yang ada di menu bagian atas entri. Setelah itu klik pratinjau untuk melihat hasilnya. Selesai.

                            Cara diatas merupakan contoh sederhana dalam merubah tampilan Blocquotes. Kita dapat juga menggunakan gambar disamping kiri dan kanannya. Contohnya seperti dibawah ini.
                            cara merubah tampilan blockquotes diblog
                            Untuk memasukan gambar kita harus menambahkan kode gambarnya juga. Codenya seperti dibawah ini.
                            .post blockquote {
                            background: url(http://2.bp.blogspot.com/-JFHpSpy5aCE/UoA8G_d-owI/AAAAAAAABKo/fCSr1BlWiRE/s1600/a.png) no-repeat top left;
                            text-indent: 65px; color:#6299E4; }
                            .post blockquote div {
                            display: block; background: url(http://4.bp.blogspot.com/-PEebql5w7PI/UoA8G4mFANI/AAAAAAAABKs/YeT4haCXQIY/s1600/b.png) no-repeat bottom right;
                            padding-bottom:10px; }
                            Tempatkan kode tersebut seperti cara sebelumnya di dalam Kotak Tambahkan CSS, Selesai. Itulah sedikit cara desain blog tentang cara merubah tampilan blockquotes yang dapat digunakan sebagai tambahan piihan dalam menulis artikel di blog. Silakan dibaca artikel lainnya seperti cara mengganti background blog dengan gambar atau cara merubah tampilan sidebar blog. Dan juga artikel lainnya. Semoga bisa bermanfaat untuk anda.
                              Baca Selengkapnya >>>

                              Cara mengganti background blog dengan gambar

                              Cara mengganti background blog dengan gambar, secara keseluruhan. Background akan terlihat disemua bagian yang ada diblog. Contoh background menggunakan gambar bisa dilihat di artikel background berbeda dihalaman berbeda. Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.
                              1. Login ke blogger, dari halaman dasbor pilih pengaturan Tata Letak.
                              2. Dan pilih Desainer template > Tingkat Lanjut > Tambahkan CSS dan masukan kode ini didalamnya.
                              3. body {
                                background: url(http://themes.googleusercontent.com/image?id=1iJBX-a-hBX2tKaDdERpElPUmvb4r5MDX9lEx06AA-UtZIQCYziZg3PFbmOyt-g2sH8Jo) repeat-x fixed top center;}
                              4. Terapkan ke blog selesai.
                              Keterangan kode:
                              • background: url( adalah url dari backgorund gambar yang akan digunakan.
                              • repeat-x gambar mengulang kesamping. bisa diganti dengan repeat-y untuk gambar mengulang ke bawah atau no-repeat gambar tidak berulang.
                              • fixed gambar akan tetap pada posisinya, walaupun halaman blog di scroll ke bawah.
                              • top center posisi gambar. Top bisa diganti dengan bottom dan center bisa diganti dengan right atau left.
                              • jika menggunakan backgorund gambar keseluruh bagian blog. gunakanlah ukuran gambar yang besar, contoh: 1400 x 900
                              Pada dasarnya kode body digunakan untuk mengatur seluruh background blog. Tapi jika tidak bisa jalan ditemplate kamu, coba ganti kode body dengan kode content. Contoh:

                              .content {
                              background: url(http://themes.googleusercontent.com/image?id=1iJBX-a-hBX2tKaDdERpElPUmvb4r5MDX9lEx06AA-UtZIQCYziZg3PFbmOyt-g2sH8Jo) repeat-x fixed top center;}

                              Sekarang coba lihat tampilan blog kamu. Jika background gambar tidak sepenuhnya terlihat. Atau background tertutup oleh background warna. Itu dikarenakan template yang kamu gunakan, sudah menggunakan background warna.

                              Contoh: Misalkan kamu pasang background gambar, tapi pada bagian headernya tertutup background warna putih, agar background warna putih itu hilang dan terganti dengan gambar. Gunakan kode #Header Atur backgroundnya menjadi transparent;. Seperti ini > #Header { background:transparent; }

                              Tempatkan kode #Header { background:transparent; } seperti cara dari langkah 1-3 diatas. Dibawah ini adalah kode-kode dari bagian blog yang saya tau, mulai dari header, tab, sidebar, sampai footer dan juga kode2 lainnya, yang bisa kamu gunakan untuk mengatur background dari halaman blog kamu. Berikut kodenya: 


                               Untuk bagian header

                              #Header { background:transparent; }
                              .header h1  { background:transparent; }
                              .body-fauxcolumn-outer .cap-top { background:transparent; }

                              Untuk bagian posting

                              .post-body { background:transparent; } hanya pada bagian tulisan posting.
                              .post { background:transparent; } bagian posting keseluruhan.
                              .post-outer { background:transparent; }  bagian posting sampai keluar
                              .main-inner { background:transparent; } bagian posting dan sidebar
                              #blog-pager { background:transparent; } pada bagian tulisan beranda, posting lama, posting lebih baru

                              Untuk bagian tab

                              .tabs-outer .PageList { background:transparent; }

                              Untuk bagian sidebar

                              .sidebar .widget { background:transparent; } hanya pada bagian widgetnya saja.
                              .sidebar { background:transparent; } seluruh bagian sidebar

                              Bagian footer.

                              .footer-fauxborder-left { background:transparent; }
                              .footer-outer { background:transparent; }

                              kode-kode lainnya, jika diperlukan.

                              .content-outer { background:transparent; } bagian halaman blog. dari header sampai ke footer.
                              .content-inner { background:transparent; } bagian halaman blog. dari header sampai ke footer. Untuk mengatur warna tulisan juga bisa.
                              .body-fauxcolumn-outer .fauxcolumn-inner { background:transparent; }
                              .body-fauxcolumn-outer .cap-top .cap-left { background:transparent; }
                              Jadi jika ingin menggunakan background gambar diseluruh bagian blog. Cukup menggunakan satu gambar background pada bagian body/content saja, dan yang lainnya di buat menjadi transparent;. Silakan berkreasi sendiri agar sesuai dengan yang kalian inginkan. Semoga bisa bermanfaat untuk anda.
                              Baca Selengkapnya >>>

                              Merubah tampilan sidebar dan posting blog

                              cara merubah tampilan sidebar dan posting blog. Menggunakan kode border, margin, padding, dan box shadow. Sehingga membuat tampilan blog menjadi lebih menarik. Kotak dari judul widget disidebar dan judul posting akan dibuat berbeda dengan isinya. Seperti contoh gambar dibawah ini, salah satu gadget atau widget yang ada disidebar.

                              merubah tampilan sidebar dan posting

                              Langsung saja, cara merubah tampilan bagian sidebar.

                              1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
                              2. Dan pilih Desainer Template > Tingkat Lanjut.
                              3. Tambahkan CSS. lalu masukan kode dibawah ini.
                              4. .sidebar .widget h2{
                                text-align:center;
                                border:1px solid #ddd;
                                margin:-10px -10px 0 -10px;
                                padding:5px 0 5px 10px;
                                background:#eee;
                                box-shadow:0px 5px 5px #aaaaaa;}

                                .sidebar .widget {
                                text-align:center;
                                border:1px solid #ddd;
                                padding:5px 0 5px 0;
                                box-shadow:0px 10px 10px #aaaaaa;}
                              5. Terapkan ke blog. Selesai.
                              Keterangan kode:
                              • .sidebar .widget h2{ mengatur judul pada bagian sidebar.
                              • .sidebar .widget { mengatur isi dari bagian sidebar.
                              • text-align:center; membuat tulisan ditengah.
                              • border garis kotak 
                              • margin membuat kotak judul melebihi lebar dari isi widget atau gadget.
                              • padding mengatur tulisan dibagian dalam tulisan.
                              • background:#eee; warna background.
                              • box-shadow:  warna bayangan dikotak

                              Cara Merubah tampilan posting blog.

                              1. Langkahnya sama seperti cara merubah tampilan sidebar blog. Hanya saja kode yang dimasukan adalah sebagai berikut.
                              2. h2.post-title{
                                border:1px solid #ddd;
                                margin:-12px -20px 0 -20px;
                                padding:5px 0 5px 10px;
                                background:#eee;
                                box-shadow:0px 10px 5px #aaaaaa;}

                                .post{
                                border:1px solid #ddd;
                                padding:10px 10px 0 10px;
                                margin:7px 10px 20px 10px;box-shadow:0px 1px 10px #aaaaaa;}
                              3. Terapkan ke blog. Selesai.
                              Keterangan kode:
                              •  h2.post-title{ untuk mengatur bagian judul posting
                              • .post{ untuk mengatur isi dari bagian posting.
                              • Jika h2.post title tidak ada ganti dengan h3.post title
                              • Untuk kode yang lainnya, fungsinya sama seperti keterangan kode di sidebar.
                              Silakan berkreasi sendiri, artikel diatas hanyalah sedikit contoh cara merubah tampilan sidebar dan posting blog. Silakan baca juga artikel cara desain blog dan tips trik blogspot lainnya. Seperti artikel fungsi margin dan padding di blog dan juga fungsi border dan penggunaannya di blog, yang dapat dijadikan pilihan cara dalam merubah tampilan blog anda. Semoga bermanfaat.
                                Baca Selengkapnya >>>