Cara merubah warna block di blog

Cara merubah warna block di blog. Block disini maksudnya, warna tulisan dan juga background pada saat kita klik tulisan lalu kita tahan dan tarik sehingga ada warna yang terlihat. Block biasanya digunakan untuk mengcopy tulisan yang ada diwebsite atau blog.

Block sederhananya berwarna biru langit di backgroundnya dan juga warna hitam ditulisannya. Disini kita akan mencoba merubah warna dari background dan warna tulisannya dengan warna yang kita inginkan. Contohnya seperti gambar dibawah ini.
Cara merubah warna block di blog
Seperti contoh gambar diatas. Background tulisan saat di block berwarna hitam dan juga warna tulisannya berwarna putih. Dan kamu bisa menggantinya dengan warna yang kamu inginkan. Cara membuatnya silakan ikuti langkah-langkah dibawah ini.
  1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
  2. Lalu klik edit HTML dan cari kode ]]></b:skin> lalu masukan kode berikut ini diatasnya.
  3. ::selection {background:#000000;color:#FFFFFF;}
    ::-moz-selection {background:#000000;color:#FFFFFF;}
    ::-webkit-selection {background:#000000;color:#FFFFFF;}
  4. Terakhir, Save template dan selesai.
Keterangan kode:
  • background:#000000; untuk warna background
  • color:#FFFFFF; untuk warna tulisan
  • jika ingin mengganti background dan warna tulisan gantilah ketiga kode diatas dengan kode warna yang sama
Contoh penggantian warna block background dan warna tulisan 
::selection {background:#107cde;color:#0000000;}
::-moz-selection {background:#107cde;color:#000000;}
::-webkit-selection {background:#107cde;color:#000000;}
Silakan diganti sesuai dengan warna yang kamu inginkan, dan silakan baca juga artikel saya yang lainnya yang berkaitan dengan warna seperti cara membuat background warna transparan atau cara membuat background gradient 2 warna dan juga artikel-artikel lainnya. Semoga artikel diatas bisa bermanfaat untuk anda.
Baca Selengkapnya >>>

Cara mengatur spasi tulisan di blog

Tips dan Trik kali ini adalah tentang cara mengatur spasi tulisan di blog. Spasi atau jarak kosong antara kalimat pada baris atas dan juga baris bawah. Dan juga jarak kosong antara huruf satu dengan yang lainnya. Tujuannya agar tulisan diblog terlihat lebih rapi, dan lebih mudah untuk dibaca.

Contoh spasi atau jarak kosong antar baris kalimat:
Contoh jarak spasi antar baris
Terlihat jauh jarak antara tulisan ini dengan tulisan atas.
Dan contoh spasi atau jarak kosong antar huruf.
Contoh jarak spasi antar huruf
Jarak antara huruf satu dengan huruf yang lain.

Dari contoh diatas sudah jelas kan, perbedaan antara spasi atau jarak kosong antar baris kalimat dan antar huruf. Berikut ini adalah contoh penerapan pengaturan spasi tulisan pada bagian posting blog. Ikuti langkah-langkah dibawah ini.
  1. Silakan login ke blogger, lalu pada halaman dasbor pilih pengaturan Template.
  2. Lalu klik edit HTML dan cari kode ]]></b:skin> dan masukan kode berikut ini diatasnya.
  3. .post-body {
    line-height:1.8em;
    letter-spacing: 0.1px;
    }
  4. Save template, selesai.
Keterangan kode diatas.
  • .post-body { untuk mengatur tulisan di halaman posting blog
  • line-height:1.8em; untuk mengatur spasi antar baris kalimat
  • letter-spacing: 0.1px; untuk mengatur spasi antar huruf
Silakan diatur sendiri sesuai dengan keinginan anda, untuk menambahkan atau mengurangi jarak antar baris ganti  nilai line-height:1.8em; contoh: 2.8em dan untuk spasti antar huruf ganti nilai letter-spacing: 0.1px; contoh: 1px;

Kalau seperti contoh diatas. itu kode spasi antar barisnya saya atur menjadi 2.8em dan spasti antar hurufnya 5px. Untuk pengaturan keseluruhan tulisan dari halaman posting artikel blog saya ini. saya atur spasi antar barisnya menjadi line-height:1.6em; dan untuk spasti antar hurufnya letter-spacing: 0.1px;. Menurut saya sudah cukup enak dilihat tulisan di blog saya ini dengan pengaturan nilai 1.6em untuk baris kalimat dan 0.1 untuk spasi huruf.

Silakan dibaca juga artikel2 saya yang lainnya, seperti membuat pangkat atas12 dan bawah90 di artikel tips dan trik menulis di blog. Dan juga artikel saya yang lainnya. Terima kasih telah berkunjung ke blog saya, dan semoga artikel diatas bisa bermanfaat untuk anda.
    Baca Selengkapnya >>>

    Cara membatasi jumlah artikel di Label

    Cara membatasi jumlah artikel di label atau kategori. Membatasi yang berarti akan ada batas jumlah artikel yang akan kita tampilkan. Seperti halnya halaman awal blog, kita dapat membatasi jumlah posting menjadi 4 atau 5 sesuai dengan yang kita inginkan. Dengan cara mengatur jumlahnya di pengaturan Tata Letak bagian Posting.


    Bagaimana dengan halaman Label. Normalnya jika kita membuka halaman label, maka semua artikel dengan label yang sama akan terbuka. Tapi dengan menambahkan beberapa kode di URL dari label atau kategori kita dapat mengatur tampilan jumlahnya.

    Dari link diatas, anda akan melihat artikel2 dengan label desain blog, jumlahnya ada 8, dan dibawahnya ada page navigation yang bertuliskan beranda dan posting lama. Jika posting lama diklik maka akan terbuka artikel2 lainnya yang berlabel desain blog.

    Diblog ini jumlah artikel dengan label desain blog sudah mencapai 50an lebih, kalau tampilannya tidak dibatasi, maka artikel yang akan tampil saat dibuka sekitar 20an, diatur oleh blogger sendiri. Dan pasti lama membukanya. Contohnya bisa di klik di link ini Desain blog tanpa pengaturan batas jumlah tampilan. Langsung saja, Cara membatasi jumlah artikel di Label silakan ikuti langkah-langkah dibawah ini.
    1. Login ke blogger, lalu buka halaman blog kamu.
    2. Lalu klik salah satu label yang kamu miliki. Lalu copi URL di address bar dan pastekan ke Notepad.
    3. Selanjutnya tambahkan kode ?max-results=8 dibelakangnya. Contoh:
    4. http://fandrajuani.blogspot.com/search/label/Desain%20Blog

      dan tambahkan kode ?max-results=8 jadinya seperti dibawah ini.

      http://fandrajuani.blogspot.com/search/label/Desain%20Blog?max-results=8
    5. Sekarang, cara memasangnya di blog. contohnya di menu laman. Silakan ke pengaturan Laman > Laman Baru > Alamat Web > lalu masukan Alamat web (URL) dan beri judul sesuai dengan nama label. Save, Selesai.
    Ganti Kode 8 dari kode ?max-results=8 dengan jumlah yang diinginkan, misalkan 5 atau 4. Silakan diatur sendiri sesuai dengan keinginan. Itulah sedikti tips trik tentang Cara membatasi jumlah artikel di Label. Semoga bisa bermanfaat untuk anda.
      Baca Selengkapnya >>>

      Cara membuat link terbuka di tab baru

      Kali ini saya akan coba bagikan kode HTML yang berfungsi untuk membuat semua link yang ada di blog terbuka ditab baru pada saat diklik. Dengan begitu pengunjung blog akan lebih mudah untuk membuka link2 yang ada diblog kita, jadi tidak perlu lagi klik kanan open link in new tab.

      Link adalah alamat url dari suatu halaman website, contohnya seperti ini fandrajuani.blogspot.com. Langsung saja kebagian inti, cara membuat link terbuka ditab baru. Ikuti langkah-langkah dibawah ini.
      1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
      2. Dan klik Edit HTML, lalu cari kode </head> gunakan Ctrl + F untuk memudahkan pencarian.
      3. Setelah ketemu, masukan kode berikut ini diatasnya.
      4. <base target='_blank'/>
      5. Terakhir, save template. Selesai.
      Mudahkan, dengan menambahkan kode <base target='_blank'/>, maka seluruh link yang ada di blog kita akan terbuka dihalaman atau tab baru ketika diklik. Selain untuk memudahkan pengunjung untuk membuka setiap link yang ada di blog, kode ini juga akan meningkatkan total tayangan laman dari blog kita. 

      Atau jika ingin membuat link terbuka ditab baru, tapi tidak disemua link di blog. Kamu bisa tambahkan kode target="_blank" atau target='_blank' di kode link HTML kamu. Contoh:
      <a href="http://fandrajuani.blogspot.com/p/blog-page_25.html" target="_blank" title="Profil">Profil</a>
      Hasilnya: Silakan klik link ini Profil

      Silakan dibaca juga artikel2 saya yang lainnya seputar seo seperti artikel tentang belajar seo untuk blogger pemula, tips dan mempercepat loading blog dan juga cara mempercepat loading blog lanjutan. Sedikit informasi seo kepanjangannya search engine optimization, fungsinya agar blog kita bisa masuk di halaman google search, jadi ketika ada yang mencari artikel yang berkaitan dengan judul artikel yang telah kita buat. 

      Maka blog kita akan muncul, walaupun tidak dihalaman pertama, bisa jadi dihalaman kedua dan seterusnya. Seiring waktu berjalan, jika artikel kita sudah sering dikunjungi. Maka nantinya akan masuk kehalaman pertama dari google search, sesuai dengan kata kunci yang dimasukan orang ke dalam mesin pencari google search. Terima kasih telah berkunjung dan semoga artikel diatas bisa bermanfaat untuk anda.
        Baca Selengkapnya >>>

        Cara membuat google custom search diblog

        Cara membuat google custom search di blog, yang berfungsi untuk memudahkan pengunjung untuk mencari artikel yang ada diblog. Cara menggunakannya, masukan kata kunci tulisan ke dalam kotak search, lalu enter atau klik tombol search, maka artikel2 yang berhubungan dengan artikel yang dicari akan muncul. Contoh gambar kotak search google custom.

        Cara membuat google custom search diblog
        Seperti contoh gambar diatas, ada tulisan GoogleTM Pencarian Kustom didalam kotak penelusurannya. Untuk lebih jelasnya tentang cara membuat google custom search di blog. Ikuti langkah-langkah dibawah ini.
        1. Login ke blogger. Selanjutnya kunjungi situs ini https://www.google.com/cse/
        2. Lalu pada situs itu, Masukan alamat blog kamu. Dan atur languange nya ke bahasa indonesia(jika ingin seperti contoh gambar diatas) untuk bahasa inggris tulisannya kira-kira akan menjadi seperti ini GoogleTM Custom Search. Silakan diatur sesuai dengan yang diinginkan. Lalu klik Create.
        3. Cara membuat google custom search diblog
        4. Setelah itu klik get code dan copi kode scriptnya.
        5. Selanjutnya, kembali ke blogger. Pilih pengaturan Tata Letak > klik Tambahkan Gadget > HTML/Javascript dan pastekan kode script dari google tadi.
        6. Save dan tempatkan gadget sesuai dengan yang kalian inginkan. Selesai.
        Untuk merubah tampilan kotak google custom search, kunjungi lagi situs  https://www.google.com/cse/ lalu  klik search engine yang telah dibuat tadi, dan pada pilih Look and Feel. Nah disitu ada pengaturan Layout, Themes, Customize, dan Thumbnail silakan atur sesuai dengan yang dinginkan. Setelah selesai memodifikasi tampilannya, klik Save & Get Code dan pastekan lagi ke Gadget HTML/Javascript di pengaturan Tata Letak tadi. 

        Jika ingin hasil pencarian dari kotak seacrh google custom terbuka dihalaman tab baru. Pada pengaturan layout di situs google custom tadi, pilih Google Hosted dan pilih New Window. Jangan lupa disave dan ambil/copi kode scriptnya, dan pastekan kembali ke gadget HTML di blogger.
        Untuk pembuatan kotak penelusuran yang lebih mudah, silahkan baca di cara membuat kotak penelusuran. Selesai. Semoga Bermanfaat.
          Baca Selengkapnya >>>

          Cara menuliskan rumus di microsoft word

          Kali ini saya akan coba bagikan artikel tentang Cara menuliskan rumus di microsoft office word, seperti rumus matematika dan lain-lainnya. Caranya cukup sederhana, kita hanya perlu memilih format rumus yang telah disediakan oleh microsoft word dan mengeditnya sesuai dengan yang kita inginkan. Untuk lebih jelasnya silakan ikuti langkah-langkah dibawah ini.
          1. Silakan buka program microsoft word, lalu klik Insert pada Tab atas disebelah HOME.
          2. Lalu klik Equation letaknya berada dipojok kanan atas. Contoh gambar:
          3. Cara menuliskan rumus di microsoft word
          4. Dan pilih salah satu format rumus lalu edit sesusi dengan yang kamu inginkan. Selesai.
          Untuk mengedit rumus, klik rumus lalu ganti dengan kode yang diinginkan, untuk menambahkan kode baru, klik rumus yang sudah dibuat. Lalu klik tab Design yang ada dipojok atas menu bar. dan cari kode rumus baru yang ingin dimasukan. Untuk memindahkan posisinya, blok rumus yang sudah dibuat > Cut > dan pastekan ketempat yang diinginkan. Seperti contoh gambar dibawah ini, rumus diletakan ditengah-tengah tulisan.

          Cara menuliskan rumus di microsoft word

          Jika ingin menempatkan rumus tidak ditengah2 tulisan kalimat seperti gambar diatas atau diletakan dibaris baru, klik rumus yang sudah dibuat, lalu klik HOME pada bagian atas kiri menu word dan klik paragraph pada bagian align, lalu pilih posisi yang diinginkan, selesai. Semoga Bermanfaat.
          Baca Selengkapnya >>>

          Cara menghilangkan widget dihomepage

          Cara menghilangkan widget dihomepage atau halaman awal blog. Widget akan dihilangkan atau disembunyikan pada halaman homepage blog saja, widget tersebut hanya akan muncul di halaman posting blog. 

          Dengan begitu kita dapat menghemat ruang dari halaman homepage blog. Untuk lebih jelasnya tentang cara menghilangkan widget tertentu dihalaman awal blog, silakan ikuti langkah-langkah dibawah ini.
          Pertama yang harus dilakukan adalah menentukan widget mana yang akan kita sembunyikan dan Mengambil kode ID nya.
          Contoh: Widget dengan judul Random Post. Maka kita cari kode ID dari widget yang berjudul Random post. Caranya: Login ke blogger, pilih pengaturan template > klik edit HTML > Lalu cari kode Random Post(Gunakan Ctrl F untuk memudahkan pencarian). Seperti contoh gambar dibawah kode id dari widget Random Posts adalah HTML4
          Cara menghilangkan widget dihomepage
          Setelah menemukan kode ID dari widget yang akan disembunyikan. Sekarang cari kode </head> lalu masukan kode berikut ini diatas </head>
          <style type='text/css'>
          <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          #HTML4{display:none;}
           </b:if> </b:if> </style>
          Terakhir Save template, selesai.
          Kode #HTML4 adalah kode ID dari widget yang akan disembunyikan dan kode display:none berfungsi untuk menyembunyikan widgetnya. Widget tersebut akan hilang dari halaman awal blog, dan akan muncul pada halaman posting blog.

          Silakan mencoba dengan widget2 yang lainnya. Yang terpenting adalah kita harus mencari terlebih dahulu kode id dari widget yang akan disembunyikan dari halaman awal blog, lalu meletakannya diatas </head> dengan format kode seperti diatas. Selesai.
          Baca Selengkapnya >>>

          Cara membuat tabel diblog

          Cara membuat tabel diblog. Akan kita mulai dari Tabel sederhana terlebih dahulu.
          Silakan buka entri baru, lalu klik pada bagian HTML disebelah Compose.
          Selanjutnya ketikan kode berikut ini.
          <table>
          <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          </tr>
          </table>
          Setelah itu klik bagian Compose, Maka hasilnya akan menjadi seperti ini.
          123
          Selanjutnya membuat tabel 2 baris
          <table>
          <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          </tr>

          <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          </tr>
          </table>
          Hasilnya
          123
          456
          Dari contoh diatas, kita dapat melihat bahwa kode tr digunakan untuk membuat tabel ke bawah, sedangkan kode td digunakan untuk tabel kesamping. Jadi jika ingin menambahkan jumlah tabel, silakan tambahkan kode tr dan kode td sesuai dengan keinginan.
          Selanjutnya membuat Tabel dengan warna background, lebar tabel serta warna tulisan dengan cara menambahkan kode bgcolor="red" border="1" style="color: white; width: 400px;" pada bagian <table>. Contoh:
          <table bgcolor="red" border="1" style="color:white;width:400px;">
          <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          </tr>
          <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          </tr>
          </table>
          Hasilnya
          123
          456
          Sekarang kita coba menggunakan tabel dengan judul diatasnya, dan juga mengatur lebar disetiap judul tabel. Tambahkan kode <th>Judul</th> Contoh:
          <table bgcolor="red" border="1" style="color: white;">
          <tbody>
          <tr>
          <th width="40">No</th>
          <th width="400">Nama</th>
          <th width="400">Kelas</th>
          </tr>
          <tr>
          <td>1</td>
          <td>Fandra Juani</td>
          <td>3</td>
          </tr>
          <tr>
          <td>2</td>
          <td>Juani Fandra</td>
          <td>6</td>
          </tr>
          </table>
          Hasilnya
          NoNamaKelas
          1Fandra Juani3
          2Juani Fandra6
          Bisa juga dengan menggunakan background yang berbeda. Contoh:
          <table bgcolor="white" border="1" style="color: black;">
          <tr>
          <th bgcolor="blue" width="40">No</th>
          <th bgcolor="green" width="400">Nama</th>
          <th bgcolor="red" width="400">Kelas</th>
          </tr>
          <tr>
          <td>1</td>
          <td>Fandra Juani</td>
          <td>3</td>
          </tr>
          <tr>
          <td>2</td>
          <td>Juani Fandra</td>
          <td>6</td>
          </tr>
          </table>
          Hasilnya
          NoNamaKelas
          1Fandra Juani3
          2Juani Fandra6

          Untuk mengatur posisi tulisan kamu bisa gunakan Tool Alignment yang ada dipilihan tool pada saat kita menulis di entri. Sebenarnya masih banyak kode dengan fungsi lain yang dapat digunakan untuk membuat tabel diblog, insyaallah nanti akan saya coba buat diartikel lainnya. Silakan dicoba sendiri dan Semoga bisa bermanfaat untuk anda.
          Baca Selengkapnya >>>

          Cara merubah tampilan dan posisi tanggal di blog

          Artikel kali ini saya akan coba bagikan cara merubah tampilan tanggal diblog dengan menambahkan kode css, serta merubah posisi tanggal ke bagian bawah judul posting atau bisa juga kita pindahkan ke sebelah kanan judul posting.

          Cara merubah tampilan dan posisi tanggal blog

          Seperti contoh gambar diatas, tampilan tanggal sudah saya modifikasi jadi berwarna putih dengan background warna biru, serta posisinya yang berada disebelah kanan judul posting blog. Cara membuatnya, ikuti langkah2 dibawah ini.
          1. Login ke blogger, ke pengaturan tata letak > desainer template > tingkat lanjut > tambahkan Css. Lalu masukan kode ini kedalamnya.
          2. h2.date-header{
            margin:3px 0px 0px 0px;
            float: right;
            z-index: 99;
            background-image: -moz-linear-gradient(center top , #107cde 40%, #004d94 100%);
            box-shadow:0px 10px 10px #aaaaaa;}
          3. Terapkan ke blog, selesai.
          Keterangan kode:
          • margin: untuk mengatur spasi atas(3px) kanan(0px) bawah(0px) kiri(0px) tanggal.
          • float: right; menempatkan tanggal diposisi kanan sebelah judul posting.
          • z-index: 99; gunanya agar tanggal terlihat.
          • background-image: fungsinya untuk mengatur warna background tanggal
          • box-shadow: warna bayangan diluar kotak tanggal.

          Selanjutnya adalah menempatkan tanggal dibawah judul posting dengan posisi sebelah kanan, contohnya seperti gambar dibawah ini.


          Cara merubah tampilan dan posisi tanggal blog

          Cara membuatnya, ikuti langkah-langkah dibawah ini:
          1. Login ke blogger, kepengaturan template. Klik edit HTML dan cari kode dibawah ini.
          2. <b:if cond='data:post.dateHeader'>
            <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
            </b:if>
          3. Kamu akan menemukan 3 kode yang sama dengan kode diatas, Cut atau potong kode yang pertama. Lalu pastekan di Notepad.
          4. Selanjutnya cari kode <div class='post-header-line-1'/>. Setelah ketemu, pastekan kode dari langkah 1 tadi ke bawah <div class='post-header-line-1'/>.
          5. Save template Selesai.
          Catatan: ada 2 kode <div class='post-header-line-1'/> yang ada ditemplate, pilih yang kedua. Lalu pastekan kode dari langkah 1 kebawahnya. Jangan lupa juga untuk mengatur kode css dari tampilan tanggalnya, seperti yang tertera di Keterangan kode. Khusus untuk kode float:right; jika kamu ingin menempatkan tanggal disebelah kiri dibawah judul posting. ganti kode float:right; dengan kode float:left;.

          Semoga Bermanfaat.
              Baca Selengkapnya >>>

              Cara membuat tombol sosial media share diblog

              Cara membuat sosial media share, seperti facebook, google+, twitter dan lain2nya diblog. Tombol sosial media share dapat kita tempatkan dibawah judul posting atau dibawah posting. Dan dapat juga ditempatkan diwidget HTML/javascript di bagian sidebar blog.
              Cara membuat tombol sosial media share
              Cara membuat sosial media share di blog, ikuti langkah-langkah dibawah ini.
              1. Login ke blog, lalu pilih pengaturan Template.
              2. Klik edit HTML dan cari kode </head> lalu masukan kode berikut ini diatasnya.
              3. <script src="http://w.sharethis.com/button/buttons.js" type="text/javascript"></script>
                <script type="text/javascript">stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
              4. Save template. Selesai.
              Setelah menempatkan kode script. Sekarang kita akan coba memasukan kode share di bagian2 blog, seperti di bawah judul posting, diwidget sidebar atau dibawah posting blog. Silakan dipilih salah satu. Caranya seperti dibawah ini.
              Sosial media share dibawah judul posting
              1. Ke pengaturan template, klik edit hmtl dan cari kode <div class='post-header-line-1'/>
              2. Kode <div class='post-header-line-1'/> ada 2,  piih yang nomor 2 lalu masukan kode share button ini dibawah nya.
              3. <b:if cond='data:blog.pageType == &quot;item&quot;'>
                <p align='left' class='kode-share-buttons'>
                <keterangan>Bagikan Artikel >>></keterangan>
                <span class='st_facebook_hcount' displayText='Facebook'/>
                <span class='st_plusone_hcount' displayText='Google +1'/>
                <span class='st_twitter_hcount' displayText='Tweet'/>
                <span class='st_pinterest_hcount' displayText='Pinterest'/>
                <span class='st_digg_hcount' displayText='Digg'/>
                <span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>
                <span class='st_fblike_hcount' displayText='Facebook Like'/>
                </p></b:if>
              4. Silakan gunakan kode share yang kalian inginkan, dan untuk tulisan Bagikan Artikel >>> Kamu bisa ganti dengan kata yang kamu inginkan. Setelah itu save template, selesai.
              Sosial media share dibawah posting
              1. Ke pengaturan template, klik edit hmtl dan cari kode <data:post.body/>
              2. Kode <data:post.body/> ada 3,  piih yang nomor 3 lalu masukan kode share button dibawah nya.
              3. Kode kode share button yang digunakan sama seperti kode Sosial media share dibawah judul posting
              4. Save template, selesai.
                Sosial media share di widget atau sidebar
                1. Kepengaturan tata letak, Klik Tambahkan widget/gadget > HTML/Javascipt.
                2. Lalu masukan kode share button yang digunakan sama seperti kode Sosial media share dibawah judul posting
                3. Save gadget/widget, lalu tempatkan sesuai dengan yang kalian inginkan, selesai.
                Dan yang terakhir adalah menambahkan  kode css untuk menambah tampilan dari tombol sosial media share. Caranya.
                1. Kepengaturan TATA LETAK. Klik desainer template > tingkat lanjut > tambahkan css. Lalu masukan kode ini kedalmnya.
                2. .kode-share-buttons{border-top:1px dashed #ccc;border-bottom: 1px dashed #ccc;padding: 10px;}
                  keterangan {color:#000;font-weight:bold;margin-right:20px;}
                3. Terapkan ke blog selesai.
                Semoga Bermanfaat.
                Baca Selengkapnya >>>

                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 >>>