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

Kamis, 06 Februari 2014

100 Top Website Indonesia

Berikut ini daftar 100 Website terbaik Indonesia tahun 2014 yang diatur sesuai Rangking. Website ini menjadi Top Website (The best site) berdasarkan banyaknya jumlah pengunjung yang datang. Data ini di ambil dari beberapa situs, jadi data ini bukan data tetap, Data bisa berubah sewaktu-waktu.

1 kaskus.co.id 51 pulsk.com
2 detik.com 52 indoboclub.com
3 tokobagus.com 53 voa-islam.com
4 kompas.com 54 otomotifnet.com
5 viva.co.id 55 siap-online.com
6 merdeka.com 56 bisnis.com
7 berniaga.com 57 indosat.comfalse
8 okezone.com 58 masterweb.net
9 bankmandiri.co.id 59 livingsocial.co.id
10 indowebster.com 60 jpnn.com
11 tribunnews.com 61 idblognetwork.com
12 kompasiana.com 62 sriwijayaair.co.id
13 tokopedia.com 63 mytrans.com
14 bhinneka.com 64 tiki-online.com
15 liputan.com 65 paseban.com
16 smartfren.com 66 tokoone.com
17 blogdetik.com 67 citilink.co.id
18 jne.co.id 68 chip.co.id
19 bni.co.id 69 solopos.com
20 telkomsel.com 70 sindonews.com
21 bola.net 71 catalysttheme.com
22 tabloidpulsa.co.id 72 myesia.com
23 jobstreet.co.id 73 kemdikbud.go.id
24 cineplex.com 74 beritasatu.com
25 bri.co.id 75 kangismet.net
26 antaranews.com 76 kumpulblogger.com
27 bukalapak.com 77 indonesiaindonesia.com
28 komikid.com 78 ui.ac.id
29 kemdiknas.go.id 79 teknoup.com
30 xl.co.id 80 kereta-api.co.id
31 garuda-indonesia.com 81 pelapak.com
32 telkom.co.id 82 kemenag.go.id
33 metrotvnews.com 83 bisnis-jabar.com
34 arrahmah.com 84 ub.ac.id
35 posindonesia.co.id 85 telkomspeedy.com
36 disdus.com 86 netmarble.co.id
37 tri.co.id 87 dailysocial.net
38 internet-positif.org 88 amikom.ac.id
39 propertykita.com 89 dikti.go.id
40 gemscool.com 90 aha.co.id
41 infogue.com 91 yellowpages.co.id
42 rumah.com 92 internetsukasuka.com
43 behindthename.com 93 telkom.net.id
44 masterweb.com 94 cbn.net.id
45 blibli.com 95 undip.ac.id
46 idwebhost.com 96 okezone.tv
47 kontan.co.id 97 itb.ac.id
48 ugm.ac.id 98 sitti.co.id
49 dinomarket.com 99 antarafoto.com
50 siap.web.id 100 indowebsite.net

Jumat, 13 Desember 2013

Cara Merubah Warna Scroll Bar

Tidak hanya tampilan blog yang kita bisa modifikasi melalui kode HTML template kita, namun warna scroll bar dari media browser yang kita gunakan pun bisa kita modifikasi warnanya, dari warna standar ke warna yang kita sukai. Kode untuk merubah warna Scroll Bar adalah kode CSS (Cascading Style Sheets).

scroll bar, cara merubah warna scroll bar, merubah warna scroll bar dengan css,scroll bar cantik,cara modifikasi scroll bar

Sebelum Anda menerapkan tutorial ini, sebaiknya Anda menggunakan media browser (Firefox, Chrome, internet Explorer) yang terupdate karena tutorial ini tidak bekerja dengan baik pada media browser yang lawas.

Cara Memodifikasi Warna Scroll Bar
  • Kunjungi laman Dashboard blogger
  • Klik Template dan Edit HTML
  • Cari kode ]]></b:skin>
  • Setelah menemukan kode ]]></b:skin> letakkan kode berikut diatasnya :
/* tutorialblogspot.com scrollbar effect */
::-webkit-scrollbar {
width:14px; height:8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
background:#eee;
}
::-webkit-scrollbar-thumb {
background: rgba(28,119,229,0.7);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(116,188,99,0.5);
  • Simpan template Anda.

Catatan penting :
  1. Ganti #eee dengan kode warna yang Anda inginkan. Untuk melihat kode warna, klik disini atau disini
  2. untuk mengganti lebar Scroll Bar, rubah angka berikut 14px dan 8px

Sabtu, 07 Desember 2013

Cara Menampilkan Judul Posting Saja Di Homepage Atau Beranda Blogger

Banyak cara yang dilakukan oleh blogger untuk memodifikasi laman Home (Beranda) diantaranya :
  1. Menyembunyikan Widget atau Sidebar di laman Home
  2. Hanya menampilkan Gambar di laman Home
  3. Laman Beranda hanya berisi Kotak Pencarian atau ucapan selamat datang
  4. Laman beranda hanya berisi judul posting (Penggalan posting yang menggunakan fitur Read More di sembunyikan)
  5. Hanya menampilkan Daftar Isi (Table of Content) pada Halaman utama
Nah... Diantara kelima point di atas, hari ini saya akan memberitahu kalian tentang point keempat yaitu tentang bagaimana cara menampilkan judul posting saja pada laman home. Apa mamfaat jika kita menerapkan metode ini? Mamfaat yang kita peroleh adalah :
  1. Loading Blog lebih gesit
  2. Tampilan blog lebih bersih
  3. dan pengelolaan blog terlihat lebih professional.
Cara menampilkan judul post saja di homepage blogger
  • Login ke Blogger.com
  • Pilih menu template
  • Klik Edit HTML
  • Cari kode </head>
  • Letak kode berikut di atas </head>
<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#33AAFF;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#33AAFF;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {color: #333333;}
.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}
</b:if>
</style>
  • Terakhir, simpan template kalian.
Jika posting ini bermamfaat buat kalian, jangan lupa di share ke Facebook atau jejaring sosial Google Plus. Sebelum dan sesudahnya saya ucapkan banyak terima kasih.

Minggu, 03 November 2013

Error Pada HTML5

Line 2, Column 219: Attribute xmlns:b not allowed here.
…www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Line 2, Column 219: Attribute with the local name xmlns:b is not serializable as XML 1.0.
…www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Line 2, Column 219: Attribute xmlns:data not allowed here.
…www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Line 2, Column 219: Attribute with the local name xmlns:data is not serializable as XML 1.0.
…www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Line 2, Column 219: Attribute xmlns:expr not allowed here.
…www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Line 2, Column 219: Attribute with the local name xmlns:expr is not serializable as XML 1.0.
…www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Line 2, Column 219: Attribute b:version is not serializable as XML 1.0.
…www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Line 2, Column 219: Attribute b:version not allowed on element html at this point.
…www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Attributes for element html:
Global attributes
manifest
Line 32, Column 122: & did not start a character reference. (& probably should have been escaped as &.)
…n.css?targetBlogID=4377242372633562018&zx=442b28bd-d9f1-4a8e-a36d-367895448993…
Line 559, Column 31: script element between head and body.

Jika Anda adalah pengguna template HTML5 untuk template default blogger, Anda akan menemukan Error template seperti di atas setelah di cek menggunakan W3C Markup Validation Service. Error itu sudah sering di bahas di beberapa Forum (Forum di dalam negeri maupun di luar negeri), tapi tidak satu pun yang mampu mengatasinya. Saat ini, belum ada web blog yang menyimpan data di server Google yang menyajikan imformasi pemecahan masalah tersebut.

Kamis, 31 Oktober 2013

Membuat Header Menjadi 2 Kolom Pada Template Default Blogger

Template default blogger terdiri atas satu kolom header yang letaknya di bawah elemen Favicon dan navbar. Di dalam elemen header terdapat sebuah tool yang dapat digunakan untuk mengupload gambar. Gambar yang sudah di Upload akan tersimpan di Google+ foto dan di Picasa Web Album. Foto itu akan menjadi Background Header. Itu adalah salah satu kelebihan dari menggunakan template bawaan blogger, banyak tool bermamfaat yang disediakan.

membuat header 2 kolom,menambah elemen header,blogger header,blog favicon,navbar blogspot

Tutorial tentang cara membagi elemen header menjadi 2 kolom ini di buat karena belum ada satupun blog yang membahas tentang hal ini (Khusus untuk template bawaan blogger). Contoh gambar untuk header dua kolom, bisa di lihat pada gambar di atas. Tanpa basa basi lagi, silahkan ikuti langkah di bawah ini!

  • Sign in di blogger.com
  • Pada menu drop down, pilih Template dan Edit HTML
  • Letakkan kode berikut di atas kode ]]></b:skin>
#header, body#layout #header {width:35%;display:inline-block;float:left;padding:0px;}
#header-right, body#layout #header-right  {width:50%;display:inline-block;float:right;padding:0px;}
#header-right .widget {margin:0;}
  • Cari kode di bawah ini
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Blogger Widget Generator (Header)' type='Header'>
          <b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
          <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
          <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
        </b:widget>
      </b:section>
  • Letakkan kode berikut setelah kode di atas
<b:section id='header-right' maxwidgets='1' showaddelement='no'/>
<div style='clear: both;'/>
  • Terakhir, simpan template Anda.



Senin, 14 Oktober 2013

Cara membuat blog terlengkap dan terbaru

Para pengusaha, pelajar, pedagang, tenaga pendidik, politikus, konselor, petani dan profesi yang lainnya mulai banyak yang tertarik untuk memiliki Web blog. Beragam alasan terungkap kenapa mereka membuat Web blog seperti : Untuk mempromosikan usaha, Sebagai wadah berbagi informasi yang diketahui, Untuk mendapatkan uang secara online atau alasan-alasan yang lainnya. Apapapun alasannya, yang pasti web blog dapat menjadi aset berharga buat kita semua untuk hari ini dan untuk masa yang akan datang.

Wordpress.org atau blogger.com? Ada dua situs populer yang menyediakan layanan gratis (Free) untuk membuat blog yaitu Wordpress.org dan blogger.com. Kedua platform tersebut memiliki kelebihan masing-masing dan juga sama-sama memiliki kekurangan. Silahkan Anda cari informasi tentang kekurangan dan kelebihan kedua platform di Google!

Secara pribadi, kedua platform tersebut pernah saya coba. Jadi, kelebihan dan kekurangan kedua platform saya tahu sepenuhnya. Jika ini adalah kali pertama Anda akan menggeluti dunia blogging, saya sarankan Anda untuk membuat blog di blogger.com karena blogger.com adalah situs yang dikelola oleh mesin pencari terbesar di dunia yakni Google.

Google membeli Blogger.com pada tahun 2002. Blogger.com adalah sebuah tool online yang sangat populer yang membantu pengguna dengan mudah membuat dan mengelola blog. Tidak banyak waktu kita yang akan terbuang untuk membuat blog di blogger.com, kita hanya membutuhkan waktu kurang dari 15 menit.

Layaknya mengendarai speda motor dan tinggal di desa/kota, kita dituntut untuk memiliki identitas pengenal berupa SIM dan KTP, begitu juga membuat sebuah blog, kita diharuskankan memiliki identitas pengenal berupa Email. Sebaik-baik email yang digunakan untuk daftar di blogger.com adalah Email Gmail, karena akan ada akun Google terkait yang akan Anda butuhkan untuk kedepannya seperti FeedBurner, Analytics, Google Drive, dll.

Mari mulai membuat web blog dengan membuat Email baru terlebih dahulu
  1. Kunjungi URL berikut ini: mail.google.com/?hl=id
  2. buat email gmail,buat akun,nama pengguna,sandi
  3. Klik tombol merah yang bertuliskan "Buat Akun"
  4. nama,pilih nama pengguna anda,buat sandi,konfirmasi sandi
  5. Pada kolom pertama baris pertama, isikan dengan nama depan Anda dan baris kedua dengan nama belakang Anda.
  6. Kolom kedua isi dengan nama email yang diinginkan tanpa menggunakan Spasi.
  7. Kolom ketiga isi dengan Password Anda dan ulangi isi password Anda pada kolom keempat.
  8. tanggal lahir,gender,ponsel,alamat email
  9. Kolom kelima isikan dengan Tahun Lahir, bulan dan tanggal lahir Anda (Untuk bulan, klik tanda panah. Anda tidak perlu menulis)
  10. Kolom keenam, rubah gender (Jenis kelamin) Anda dengan menggunakan tanda panah
  11. Kolom ketujuh, masukkan No HP Anda dengan berawalan +62........
  12. Kolom kedelapan di lewati saja.
  13. lokasi,langkah berikutnya
  14. Klik tanda centang pada kotak kecil untuk melewati Verifikasi kata.
  15. Tentukan lokasi negara Anda, gunakan juga tanda panah!
  16. Kasih tanda centang pada kalimat "Saya menyetujui persyaratan Layanan dan kebijakan privasi Google
  17. Tekan tombol biru yang bertuliskan "Langkah berikutnya"
  18. verifikasi akun anda,verifikasi sms
  19. Anda akan diajak untuk melewati proses verifikasi akun menggunakan HP. Jadi, siapkan HP Anda yang menggunakan nomor yang sudah Anda gunakan tadi. Jika HP Anda sudah siap, klik tombol "Lanjutkan"
  20. Kode verifikasi
  21. Kemudian masukkan nomor yang Anda terima melalui SMS yang dikirim oleh Google pada kotak yang tersedia.
  22. Selanjutnya, klik tombol lanjutkan
  23. Tambahkan foto profil
  24. Proses Selanjutnya adalah membuat Profil (Hal ini dilakukan karena Akun Gmail yang Anda buat akan menjadi Profil Google+ Anda). Anda bisa mengganti foto frofil terlebih dahulu dengan menekan tombol merah "Tambahkan foto Profil" atau klik "Langkah berikutnya" untuk melewati proses ini. Supaya searah, sebaiknya Anda memilih "Tambahkan foto Profil".
  25. Pilih Foto profil
  26. Jendela baru akan muncul, klik "Pilih foto dari komputer Anda" (Cari foto yang akan digunakan)
  27. Setelah diunggah, klik "Terapkan sebagai Foto Profil"
  28. Edit foto profil
  29. Anda akan diarahkan pada laman sebelumnya, klik "Langkah berikutnya"
  30. Lanjutkan ke Gmail
  31. Klik "Lanjutkan ke Gmail"
  32. Anda akan langsung dibawa ke laman email Gmail, itu artinya akun Email Anda sudah jadi.

Cara Membuat Blog
    blogger.com
  1. Buka tab baru, masukkan URL www.blogger.com pada media browser Anda lalu tekan "Enter"
  2. Masukkan Password akun Gmail Anda dan klik tombol "Masuk"
  3. Konfirmasi Profil
  4. Anda akan diminta kembali untuk Konfirmasikan Profil Anda. Klik "Lanjutkan ke blogger"
  5. Buat blog baru
  6. Klik tombol "Blog Baru"
  7. Daftar blog
  8. Jendela baru muncul, kolom pertama isikan dengan judul blog yang Anda inginkan.
  9. Kolom kedua isikan dengan alamat blog yang Anda sukai tanpa menggunakan spasi (Contoh alamat blog http://ngeblogbersamadiriku.blogspot.com). Alamat blog sudah bayak digunakan oleh pengguna yang lain. Jadi, jika muncul tanda seru dengan background warna kuning, itu artinya Alamat blog sudah dipakai oleh orang lain. Pilihlah alamat blog yang mudah diingat. Bila tanda centang dengan background warna biru sudah muncul, klik tombol "Buat blog".
  10. lihat blog
  11. Klik tombol "Lihat blog" untuk melihat secara langsung blog yang sudah Anda Buat.

Ketika Anda sudah mencapai tahap di atas, itu artinya blog Anda sudah jadi. Tapi disini saya akan tambahkan sedikit dengan bagaimana cara menulis artikel (Posting di blog), supaya blog tidak terlihat polos atau kosong. Berikut ini langkah-langkahnya!

    Menulis artikel,pensil
  1. Klik tombol warna orange yang menggunakan ikon pencil
  2. Cara membuat posting
  3. Kolom Pertama berisi Judul Artikel Anda
  4. Kolom kedua, Isi dengan Artikel Anda
  5. Klik Tombol Publikasikan
  6. Muat Ulang atau reload blog Anda untuk melihat artikel yang sudah Anda buat.

Ada banyak hal yang belum saya jelaskan tentang cara membuat artikel di blog seperti cara memasukkan video, cara menampilkan gambar, cara membuat label dan seterusnya. Untuk itu, selalu kunjungi www.tutorialblogspot.com untuk informasi yang lebih lengkap dan jelas. www.tutorialblogspot.com tidak hanya menyajikan informasi dasar tentang dunia blogger akan tetapi disana Anda bisa memperoleh ratusan informasi untuk membuat blog Anda selayaknya blog atau situs professional.

Kamis, 12 September 2013

Cara Menghilangkan Header Blogger

Tidak bisa dipungkiri kalau Header, Footer dan Blog Post adalah bagian atau elemen penting dalam sebuah template. Tanpa ketiga elemen tersebut, blog tidak akan terlihat menarik. Tapi karena satu dan lain hal, ada saja blogger yang menghilangkan salah satu dari ketiga elemen. Nah...  Kesempatan kali ini, saya akan berbagi tips kepada sobat blogger yang ingin menghilangkan Header dari blog-nya.

header,blog post,elemen template,elemen blog,layout blogger,cara menghapus header blog

Untuk menghilangkan Header blog, kita harus memahami kode yang terdapat di template kita, khusunya kode untuk header. Biasanya, kode Header seperti ini!
#header-wrapper {
background:#ffffff no-repeat 100% 100%; height:auto; margin:0; padding:10px;
}
atau
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}
Kalau kita meletakkan kode "display : none;" setelah kode ".header-outer {" atau "#header-wrapper {" maka header blog akan langsung hilang. Untuk lebih jelasnya penerapan kode, lihat contoh di bawah ini!
#header-wrapper {
display : none;background:#ffffff no-repeat 100% 100%; height:auto; margin:0; padding:10px;
}
atau
.header-outer {
display : none;  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}
Sangat mudah bukan? kita hanya menyisipkan kode display : none; pada kode header template kita.

Sabtu, 31 Agustus 2013

Cara Menghilangkan Judul dan Deskripsi Blog

Menurut saya, mengganti judul blog dan deskripsi blog menggunakan gambar adalah keputusan yang sangat tepat karena blog akan terlihat lebih professional dan menarik. Namun, ada satu hal yang perlu diketahui oleh kita semua bahwa "Ketika kita mengganti judul dan deskripsi blog menggunakan gambar, maka judul dan deskripsi blog tidak langsung hilang, keduanya tetap ada, menempel di depan gambar." Untuk menghilangkannya, kita harus menyisipkan kode "display:none;" pada template kita.

cara menghilangkan judul blog,cara menghilangkan deskripsi blog
Sebelum dan setelah dihilangkan

1. Cara menghilangkan judul blog
Cari kode .Header h1 { kemudian letakkan kode display:none; dibawahnya. Lihat contoh!
.Header h1 {
display:none;
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

2. Cara menghilangkan deskripsi blog
Cari kode .Header .description { lalu letakkan kode display:none; dibawahnya. Lihat contoh!
.Header .description {
display:none;
font-size: $(description.text.size);
color: $(description.text.color);
}
Tidak menutup kemungkinan, blogger pemula akan mengalami kesulitan dalam menerapkan kode di atas. Jadi, silahkan mamfaatkan komentar Google Plus di bawah ini untuk bertanya secara online.

Minggu, 18 Agustus 2013

Cara Menghilangkan Ruang Kosong Di Atas Header Blog

Terdapat blank space atau ruang kosong di atas header blog di saat kita menghapus Navbar. Ruang kosong ini sering dimamfaatkan oleh banyak blogger untuk memasang menu horizontal, Sticky Bar, Notification Bar bahkan untuk memasang iklan. Bagi sebagian blogger, ruang kosong yang ada di atas header sangat mengganggu desain blog oleh karenanya, mereka lebih memilih untuk menghilangkan ruang kosong itu.

space header,ruang kosong,cara menghilangkan jarak header,menghapus jarak di atas blog

Langkah-langkah menghilangkan jarak di atas header blog
  • Masuk ke akun blogger Anda
  • Klik Template -> klik Edit HTML
  • Gunakan Ctrl + F untuk mencari tag </ head>
  • Selanjutnya, tambahkan kode berikut tepat di atas tag </ head>
<style type='text/css'>
.content-inner
{
margin-top: -40px !important;
}
</style>
  • Preview template terlebih dahulu sebelum di simpan

Anda dapat mengubah -40px sesuai nilai yang diinginkan. Terus bereksperimen dengan nilai ini untuk menyesuaikan posisi header. Setelah berhasil menempatkan kode ini di situs Anda, header situs Anda tidak akan memiliki ruang yang tidak perlu di atasnya.

Rabu, 14 Agustus 2013

Cara memasang Profil Pengarang di bawah artikel blog

Memasang Profil Author/Admin di bawah posting atau artikel bukanlah sebuah kewajiban yang harus dijalankan akan tetapi hal ini sangat disarankan oleh Google supaya pengunjung blog kita lebih mengenal kita. Pengunjung blog akan lebih meyakini kebenaran suatu artikel yang mencantumkan nama penulisnya ketimbang meyakini suatu artikel yang tidak jelas siapa penulisnya. Google juga menyarankan setiap pemilik blog untuk segera beralih dari profile Blogger ke profile Google+ (Informasi ini bisa di lihat di Blogger Buzz).

Cara membuat profile author,profile google+,profile blogger,profile admin di bawah posting,profile author di bawah artikel blog,profile pengarang

Blogger.com dan Google+ adalah layanan Google yang tidak bisa dipisahkan, keduanya saling berhubungan. Sebagai contoh : Ketika kita upload gambar/foto melalu post editor blogger, maka gambar/foto itu akan langsung tersimpan di galeri foto kita di Google Plus. Saat ini juga, banyak widget Google+ yang sudah menjadi widget bawaan blogger seperti Widget Google+ followers, Google+ Badge, Google+ share button dan yang lainnya.

Banyak blogger yang tidak tahu bahwa pemilik blog dapat menambahkan Profile Pengarang di bawah pos tanpa edit template. Ha.. ha... Jangan-jangan, sobat blogger juga tidak tahu. Ketimbang ketinggalan informasi, baca tips di bawah ini!

Cara menambahkan profile blogger atau Google+ di bawah posting blog
  1. Masuk ke laman blogger.com
  2. Pilih layout/Tata letak
  3. tata letak,layout,edit
  4. Klik Edit (Pop up window akan muncul)
  5. tampilkan profile pengarang di bawah pos
  6. Kasih tanda centang pada "Tampilkan profil pengarang di bawah pos"
  7. Klik Simpan

Apakah profile pengarang sudah tampil di bawah posting? Kalau Profile pengarang tidak tampil, berarti template yang sobat blogger gunakan tidak memiliki Post Footer (Post Footer di hapus atau disembunyikan). Coba munculkan kembali post footer, Insyaallah, profile pengarang akan langsung muncul.

Jumat, 09 Agustus 2013

Cara Menambahkan Fitur Scroll Pada Widget Blog

Salah satu cara untuk menghemat Space di area widget (Sidebar) adalah dengan memasng fitur scroll pada widget. Dengan adanya penambahan fitur scroll pada widget, tinggi widget bisa kita atur sesuai dengan tinggi yang diharapkan. Pada umumnya, fitur scroll dipasang pada widget daftar isi, widget Recent Post, Widget FeedBurner dan Widget Link Exchange.

scroll widget,cara menambahkan scroll pada widget,cara buat scroll,scrolling,blogger scrolling

Untuk menambahkan fitur Scroll pada Widget, sobat blogger hanya menambahkan kode SEBELUM dan SETELAH kode widget sobat. Berikut ini kode yang disisipkan :
<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #eee;">
Kode Widget Sobat disini
</div>

Tambahan :
  1. Ganti tulisan yang berwarna merah dengan kode Widget Sobat.
  2. height:200px adalah ukuran tinggi widget
  3. Untuk menghilangkan bingkai Scroll, sobat blogger tinggal mengganti angka 1 menjadi 0 (Nol) pada kode border:1px
  4. #eee adalah kode border widget, bisa diganti dengan warna yang lain. Untuk melihat kode warna, silahkan kunjungi link berikut : Web Color Chart

Sabtu, 06 Juli 2013

Bagaimana Tampilan Blog Anda Di Internet Explorer? Wajib di baca

Apakah Anda sudah membuka blog Anda menggunakan IE? Apakah blog Anda Compatible dengan Internet Explorer? Bagaiamana perbedaan blog Anda ketika di buka dengan Internet Explorer dan Firefox? Ketiga pertanyaan di atas kudu Anda jawab karena Internet Explorer tidak menampilkan blog atau situs web seperti media browser yang lain, sebagai contoh Firefox, Chrome, Safari dan Opera.

Internet Explorer,IE,tampilan blog,blog rusak,blog acak-acakan,blog hancur,media browser,blog tidak rapi,blog terlihat hancur,blog terlihat tidak beres,kenapa blog saya terlihat semerawut,kode javascript tidak bekerja

Masalah yang sering ditemukan ketika blog di buka dengan menggunakan Internet Explorer adalah sebagai berikut :
  1. Blog terlihat acak-acakan dan tidak rapi.
  2. Header blog hilang atau tidak terlihat.
  3. Tampilan widget berubah.
  4. Bingkai blog terlihat lebih tebal.
  5. Bentuk font berubah, jika menggunakan font default blogger.
  6. Fungsi Round Corner pada widget akan hilang.
  7. JavaScript tidak bekerja secara maksimal.
  8. Kode CSS tidak berfungsi semestinya
Ada banyak versi Internet Explorer, setiap versi menampilkan suatu blog dengan tampilan berbeda.

Kamis, 04 Juli 2013

Cara Menghilangkan div dir="ltr" style="text-align: left;" trbidi="on" Pada Laman Editor Post Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> merupakan sebuah tag yang menunjukkan bahwa transliterasi diaktifkan. Apa yang di maksud dengan transliterasi? Transliterasi adalah sebuah alat untuk mengonversi kata-kata dari bahasa Inggris ke bahasa yang dipilih. Tool ini bekerja di laman blogger di Editor Post. Ketika kita menulis posting dalam mode HTML, maka kita akan langsung melihat tag ini. Contoh : <div dir="ltr" style="text-align: left;" trbidi="on"> Konten Posting disini... </div>.

<div dir="ltr" style="text-align: left;" trbidi="on">,html editor,editor blogger,tutorial blog,posting blogger,artikel blogspot

Bagi kebanyakan blogger termasuk saya, tool ini tidak begitu bermamfaat. Adanya tag <div dir="ltr" style="text-align: left;" trbidi="on"> juga sangat menggangu saya ketika menulis posting dalam mode HTML. Satu hal lagi, adanya tool Transliterasi membuat posting blog tidak bisa rata kiri kanan secara otomatis (Justify). Untuk membuat posting secara otomatis Justify, sobat blogger bisa baca postingan ini : Posting Otomatis Rata Kiri Kanan

Kembali ke topik utama, untuk menghilangkan Tag <div dir="ltr" style="text-align: left;" trbidi="on"> dari laman Post Editor sangat mudah. Kita cukup menonaktifkan fitur Transliterasi melalui laman blogger.com. berikut ini panduan lengkapnya!
  • Melalui Laman blogger.com, Pilih Setelan
  • Kemudian klik Bahasa Dan Pemformatan
  • Dibagian Aktifkan Transliterasi, Pilih Dinonaktifkan. Coba lihat Screenshot ini!

Bahasa Dan Pemformatan,Transliterasi,alat transliterasi,transliteration blogger

  • Kalau Transliterasi sudah dinonaktifkan, klik tombol Simpan yang terdapat di bagian kanan atas laman tersebut.
  • Tahapan terakhir, reload/refresh laman blogger.com kemudian silahkan buka post editor sobat. Tag <div dir="ltr" style="text-align: left;" trbidi="on"> akan hilang dari laman post editor.

Selasa, 02 Juli 2013

Navigasi Baru Google Webmaster Tool Yang Disempurnakan

Navigasi baru Google Webmaster Tool telah Disempurnakan! Google mengumumkan kalau tim mereka telah memperbarui navigasi dalam Google Webmaster Tools dan juga telah menambahkan fitur baru yakni "search appearance" pop up yang akan membantu webmaster pemula. Google meluncurkan desain navigasi baru untuk Webmaster Tools dalam upaya untuk membuat fitur yang sering digunakan lebih mudah untuk di akses.
Saat ini, fitur Google Webmaster Tool dikelola menurut tahap penelusuran: perayapan, pengindeksan, dan penyajian. Setelan ini telah dipindahkan ke ikon perkakas di pojok kanan atas. Perhatikan gambar berikut untuk lebih jelasnya!

Webmaster tool,navigasi baru,google,fitur baru,cara mudah menelusuri

Bantuan Penelusuran,search help

Klik ikon bantuan untuk membuka bagian Tampilan Penelusuran baru dan mempelajari perubahan yang dapat Anda lakukan pada situs yang akan memengaruhi bagaimana tampilannya di hasil penelusuran.

ikhtisar tampilan penelusuran

Jumat, 21 Juni 2013

Kami Tidak Mendeteksi Masalah Konten Dalam Situs Anda

Bahagia rasanya ketika web blog yang kita kelola terbebas dari penyakit-penyakit blogging seperti :
  1. Duplicate meta descriptions (Duplikasi deskripsi meta)
  2. Duplicate title tags (Duplikasi tag judul).
Hal ini tercermin dari pemberitahuan yang di peroleh di laman Google Webmaster Tools di Tab Penyempurnaan HTML. Berikut ini petikan dari pemberitahuan itu.

Penyempurnaan HTML,html,duplikasi meta tag,duplikasi tag judul

Kami tidak mendeteksi masalah konten dalam situs Anda. Saat kami menjelajahi situs Anda, kami memeriksa untuk mendeteksi potensi masalah pada isi laman, termasuk tag judul atau deskripsi meta yang bermasalah, hilang, atau rangkap. Masalah ini tidak akan menghalangi munculnya situs Anda dalam hasil penelusuran Google, tetapi dengan memberi perhatian kepada masalah tersebut dapat memberi Google informasi lebih lengkap dan bahkan membantu mengarahkan lalu lintas ke situs Anda. Misalnya, teks judul dan deskripsi meta dapat muncul di hasil penelusuran, dan teks yang berguna dan deskriptif lebih mungkin untuk diklik oleh pengguna.

Kamis, 13 Juni 2013

Blog tidak ditemukan. Blog yang anda cari tidak ditemukan. Jika Anda adalah pemilik blog ini, harap masuk. Buka blogger

Senin, Tanggal 22 April 2013, saya sempat dikagetkan dengan sebuah pemberitahuan atau pesan yang menyatakan bahwa "Blog tidak ditemukan. Blog yang anda cari tidak ditemukan. Jika Anda adalah pemilik blog ini, harap masuk. Buka blogger". Waduh... Apa yang terjadi dengan blog saya? Apakah blog saya di Banned Google setelah melakukan ping tadi malam menggunakan FeedBurner? Ataukah pemberitahuan ini muncul karena masa aktif domain yang saya beli akan berakhir 2 bulan lagi?

Blog tidak ditemukan,blog not found,masalah blog,blog tidak dapat diakses,blog tidak bisa dibuka

Untuk mengatasi masalah itu, saya pun mengunjungi Web Hosting tempat saya beli domain. Saya meminta penjelasan mereka tentang apa yang terjadi. Pihak Web Hosting hanya memberikan jawaban "Yang perlu bapak pahami bahwa server yang digunakan tutorialblogspot.com ada di blogspot/google. Tentunya diluar monitoring server kami". Setelah mendengar penjelasan itu, saya pun mengunjungi blogger.com. Saya masuk laman blogger.com, saya diminta untuk melakukan Verifikasi akun melalui SMS atau Panggilan Telpon. Alhamdulillah, setelah melakukan Verifikasi Blog saya bisa diakses lagi. Akhirnya, blog saya bisa normal kembali. Walaupun seperti itu, tetap muncul pertanyaan dalam diri saya "Kok tumben-tumbennya saya mendapatkan pemberitahuan seperti ini! Apa gerangan yang terjadi?"

Jumat, 07 Juni 2013

Ngeblog Terganggu Akibat Jaringan Lelet

Jaringan internet yang lelet, membuat aktivitas blogging saya terganggu. Tidak ada yang bisa saya lakukan kecuali sabar dan terus mencoba menulis artikel. Seharusnya, Jaringan internet tidak lelet ketika berada di antara jam satu malam sampai jam tujuh pagi, karena pada waktu yang disebutkan, hanya sedikit pengguna internet yang aktif atau online. Mungkin, Jaringan telkom yang saya gunakan sebagai jaringan internet lagi Maintance.

Karena gangguan internet ini, muncul pesan "Terjadi kesalahan saat mencoba menyimpan atau memublikasikan pos Anda. Coba lagi. Abaikan Peringatan". Peringatan ini muncul di bagian atas Post Editor dengan warna Background Pink. Saat saya menyimpan artikel yang sudah saya tulis, pesan itu muncul lagi. Hal ini terjadi berulang-ulang atau terus menerus.

Kesalahan  blogger,error blogger,error post editor,kesalahan post editor,pesan kesalahan blogger,abaikan peringatan,Terjadi kesalahan saat mencoba menyimpan atau memublikasikan pos Anda,gangguan saat menulis artikel,masalah blogger,akibat gangguan internet,penyebab internet lelet

Artikel blog tidak bisa disimpan dan tidak bisa juga dipublikasikan. Jadi, saya coba melakukan Pratinjau atau Preview artikel yang sudah saya tulis. Namun, apa yang terjadi? Lagi-lagi pesan kesalahan muncul. Kali ini bertuliskan "Pratinjau Anda gagal dimuat. Tutup jendela ini dan coba lagi"

Pratinjau Anda gagal dimuat,Tutup jendela ini dan coba lagi,error pratinjau,error preview,kesalah saat preview,kesalahan saat pratinjau,pratinjau posting,preview posting,gangguan posting,gangguan saat menulis posting

Kamis, 06 Juni 2013

Menghilangkan Waktu (Hari, Tanggal, Bulan, Tahun dan Jam) Posting Blogger

Posisi waktu posting secara default sejajar dengan judul posting (Align Left), di bagian atas. Posisi ini bisa kita kostumisasi oleh pemilik situs web sesuai dengan yang diharapkan, bisa di bawah judul posting, bisa juga di bawah konten posting. Pada umumnya, Waktu posting menunjukkan hari, tanggal, bulan dan tahun. Tapi, banyak juga yang hanya menampilkan jam saja.

waktu posting,tanggal posting,jam posting,tahun posting,hari posting,waktu artikel blog

Bentuk format waktu dari waktu posting antara satu blog dengan blog yang lain bisa saja berbeda. Perbedaan ini dikarenakan oleh format bahasa yang digunakan. Sebagai contoh, saya menggunakan format Bahasa Indonesia sehingga waktu tampil dengan format seperti ini "Selasa, 23 April 2013", kalau saya ganti ke bahasa Inggris maka bentuknya menjadi Tuesday, April 23, 2013". Bulan di sebut terlebih dahulu baru tanggal, itu kalau bahasa Inggris.

Waduh... Jadi berbelit-belit. Langsung saja ke topik utama yaitu tentang bagaimana menghilangkan waktu posting tanpa edit template.
  1. Masuk ke blogger.com
  2. Pada menu drop down, pilih Layout (Tata Letak)
  3. Layout Blogger,layout,tata letak blogger,tata letak,edit
  4. Perhatikan gambar yang ada, lalu klik link "Edit"
  5. Popup window akan muncul, lalu hilangkan tanda centang pada opsi pertama pada "Opsi Laman Entri"
  6. Opsi laman entri,tanggal posting,waktu posting,format tanggal,pengaturan waktu,setting waktu
  7. Terakhir, tekan tombol Simpan
  8. Reload blog sobat untuk melihat keberhasilan yang sobat buat

Komentar sobat blogger melalui blog ini atau melalui laman Google+ sangat ditunggu...

Senin, 03 Juni 2013

Cara Membuat Template Kosong Atau Blank Template Di Blogger

Kode template Blogger mulai dikembangkan oleh konsorsium dunia Wide Web semenjak tanggal 26 Januari 2000. Mereka bekerja keras merangkai setiap kode sehingga menjadi sebuah template yang indah seperti yang sering sobat blogger lihat. Tidak hanya itu, template yang mereka buat pun dapat kita kustumisasi sesuai dengan yang kita inginkan dengan mudah. Sekarang, kita akan hancurkan hasil kerja keras mereka. Kita akan membuang semua kode template yang telah mereka buat dan menggantinya dengan kode template yang baru sehingga terbentuk template kosong atau blank template.

Blank Template,template kosong,cara membuat template blank,cara membuat template kosong,template tanpa apa-apa,template nol

Blank Template bisa dijadikan sebuah sarana untuk belajar membuat template, belajar bahasa HTML, Cascading Style Sheet dan kode yang lainnya. Contoh perubahan template blogger menjadi Blank template bisa di lihat pada gambar di atas.

Cara Membuat Template Kosong Di Blogger
  • Login di Blogger
  • Pilih Template Dan Edit HTML
  • Block semua kode (Gunakan CTRL + A) kemudian  hapus semua kode yang terdapat di dalamnya.
  • Setelah di hapus, ganti dengan kode di bawah ini
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>Blogger Blank Template</title>
<b:skin><![CDATA[ ]]></b:skin>
</head>
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
<div style='margin-top:400px; '>
<!--Jangan hapus kredit di bawah ini-->
<center><p><a href='http://www.tutorialblogspot.com'>Tutorial Blogspot </a>&#169; 2013.</p></center>
</div>
</body></html>
  • Simpan Template sobat dan lihat hasilnya.

Ketika anda mengunjungi Tab Tata Letak atau Tab Layout Blogger, maka anda tidak akan melihat kolom widget, kolom post editor dan kolom Navbar, semua akan hilang kecuali kolom Favicon.

Kamis, 30 Mei 2013

Cara Berhenti Dari Blog Yang Kita Ikut

Semenjak terjun di dunia blogging, sudah banyak situs web yang sudah diikuti. Kita mengikuti banyak blog karena kita butuh informasi yang mereka publikasikan. Tapi... Seiring berjalannya waktu, blog-blog yang kita ikuti sudah tidak produktif lagi dalam menerbitkan posting. Seandainya mereka menerbitkan posting, posting mereka pun kurang begitu berarti buat kita. Oleh karenanya saya akan mengajarkan sobat blogger bagaimana cara berhenti mengikuti blog yang kita ikuti.
  1. Login ke blogger.com
  2. Pada halaman "Home" Blogger, klik menu setting yang terdapat pada sebelah kanan "Daftar Bacaan"
  3. Sobat blogger akan di bawa ke laman "Kelola Blog yang Saya Ikuti"
  4. Blog yang diikuti,situs yang diikuti,berhenti mengikuti blog,berhenti jadi follower
  5. Disamping URL blog yang kita ikuti terdapat link Setting/Setelan, klik link tersebut
  6. Klik link "Berhenti ikuti situs ini"
  7. Berhenti ikuti situs ini
  8. Kalau muncul sebuah prompt yang bertuliskan "Yakin ingin berhenti mengikuti Blog ..... ?", Klik tombol berhenti mengikuti
  9. Jreng... Blog yang sudah kita ikuti akan langsung hilang dari Daftar Bacaan di halam Home blogger.com

Sebaik-baik cara untuk mengikuti suatu blog adalah melaui Google Plus dengan cara menjadi follower dari blog yang mau kita ikuti