Cara Desain Blog Sendiri

Cara Desain Blog Sendiri. Desain blog sendiri menggunakan template blogger bisa dibilang cukup susah. Apalagi pemula seperti saya ini. Susahnya kita harus banyak membaca dan mempelajari cara mengedit HTML template, menambahkan kode css dan lain-lain. Tapi untungnya menggunakan template asli blogger. Kita bisa dengan mudah untuk mengedit warna, tata letak, mengatur lebar posting, dan masih banyak lagi yang disediakan oleh desainer template.

Jika menggunakan template buatan sendiri, atau download template dari situs lain. Kita tidak bisa menggunakan desainer template dari blogger, karena blogger tidak mendukung template luar. Kalau sudah begitu, mau mengganti warna saja susah, harus edit-edit html lagi, salah sedikit eror template. Masih mending menggunakan template asli blogger, susah diawal, karena harus banyak belajar, tapi seterusnya kita bisa edit template dengan mudah, menggunakan desainer template blogger. Berikut ini adalah daftar cara desain blog sendiri untuk pemula, menggunakan template asli blogger. Semoga Bermanfaat.

1. cara menghilangkan navbar blog
2. cara memasang jam digital di blog
3. cara memberi warna background judul
4. cara membuat gambar header
5. cara membuat label atau kategori
6. cara membuat menu dropdown
7. cara mempercepat loading blog
8. cara menghapus akun google analystics
9. cara menghilangkan tulisan langganan entri atom
10. cara merubah ukuran kotak komentar
11. cara agar gambar posting tidak melebihi halaman
12. cara memasang google translate
13. cara membuat breadcrumb
14. cara membuat scroll
15. cara membuat tombol share
16. cara membuat auto read more
17. cara membuat contact us
18. cara membuat daftar isi blog
19. cara membuat kotak script di posting
20. cara membuat menu di blog
21. cara membuat tulisan bayangan di blog
22. cara menambah kan widget di samping header
23. cara mengganti email blog
24. cara mengganti tulisan home previous dan next di blog
25. cara mengganti tulisan read more
26. cara mengganti warna background judul sidebar blog
27. cara menghapus tulisan jumlah komentar
28. cara menghapus tulisan tampilan posting dengan label
29. cara menghilangkan sidebar blog pada posting tertentu
30. cara menghilangkan tang obeng di blog
31. cara menghilangkan tombol share di blog

Cara membuat Scroll di blog

Cara membuat Scroll di blog untuk widget seperti Arsip Blog, populer posts, kategori/label, artikel terbaru dan lain-lain. Scroll berfungsi untuk mempersingkat tampilan dan juga menghemat tempat. Scroll juga membuat halaman blog menjadi lebih cepat untuk dibuka. Untuk lebih jelasnya silakan lihat gambar dibawah ini.

Dari gambar diatas, judul artikel yang terlihat hanya sebatas 4 judul dengan gambar, tapi ketika di scroll menggunakan mouse, maka akan terlihat artikel lainnya, dengan posisi dan tempat yang sama. Sehingga tidak memakan tempat yang banyak. Untuk cara membuatnya. Ikuti langkah-langkah dibawah ini.

Cara Membuat Scroll di Blog

1. Login ke Blogger

2. Pilih Template terus klik cadangkan template, unduh template untuk jaga-jaga.

3. Klik Edit Html dan Centang Expand Widget Template.

4. Cari tulisan widget yang akan kita beri scroll. Misalnya Populer Posts maka kita cari populer posts Untuk memudahkan pencarian Tekan control F di keyboard dan masukan tulisan Populer Posts .

5. Jika sudah ketemu maka kode lengkapnya seperti dibawah ini.

<b:widget id='PopularPosts1' locked='false' title='Populer Posts' type='PopularPosts'>

6. Sekarang Copy PopularPosts1 ke Notepad dan tambahkan kode lengkap seperti dibawah ini di Notepad. 

#PopularPosts1 .widget-content{

height:200px;

width:auto;

overflow:auto;

}

7. Selanjutnya cari kode ]]></b:skin>

8. Copy Kode diatas dan letakkan di Atas kode ]]></b:skin>

Contoh:

#PopularPosts1 .widget-content{

height:200px;

width:auto;

overflow:auto;

}

]]></b:skin>

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

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

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

Cara Memasang Jam di Blog

Cara memasang jam digital, jam clasik di blog. Dibawah ini adalah contoh gambarnya.

Cara pasangnya ikuti langkah-langkah dibawah ini.

1. Login ke Blogger.com

2. Selanjutnya Klik Opsi lainnya dan pilih tata letak. Seperti gambar dibawah ini.

3. Dari halaman tata letak Klik Tambahkan Gadget / add Gadget.

4. Pilih Gadget lainnya. Dan tuliskan clock di kotak pencarian. Maka akan muncul banyak pilihan Jam. Tinggal pilih jam mana yang kamu pasang di Blog.

5. Selanjutnya Klik tanda + disebelah kanan untuk dipasang ke blog. Dan atur ukurannya, klo untuk jam digital ada pilihan mengatur warna background dan warna angkanya juga. Setelah selesai baru disave.

6. Setelah itu atur dimana jam akan ditampilkan, caranya klik gadget jam yang baru dibuat tadi, dan tarik. selanjutnya Klik simpan setelan. Dan lihat blog. selesai. Semoga Bermanfaat.

Cara memasang google translate di blog

Cara memasang google translate di blog. ada 3 pilihan bentuk google translate yang disediakan oleh blogger. Dibawah ini adalah contoh gambarnya.

Cara pasangnya ikuti langkah-langkah dibawah ini:
1. Lohin ke Blogger.com
2. Pilih Opsi lainnya dan pilih tata letak

3. Dari halaman tata letak klik tambahkan gadget/ add gadget.

4. Selanjutnya Pilih dasar-dasar dan tarik kursor kebawah cari Terjemahan.

5. Selanjutnya Klik tanda + disebelah kanan terjemahan.

6. Dan atur bentuk google translate yang kamu inginkan. ada 3 jeni bentuk pilihan. 

• Vertikal
• Horizontal
• Hanya naik-turun

Bentuknya lihat digambar pertama diatas.

7. Save dan simpan setelan, selanjutnya Lihat blog. Selesai. Semoga Bermanfaat

Cara Membuat Daftar Isi Blog

Cara membuat daftar isi blog. Gunanya untuk memudahkan pengunjung untuk melihat semua daftar artikel blog yang dikelompokan sesuai dengan kategori artikel. Setiap membuat artikel atau posting baru, otomatis akan masuk ke daftar isi ini. Contoh gambar.

Read more »

Cara membuat menu di blog

Cara membuat menu di blog dengan mudah. Fungsi menu itu bisa dibilang untuk memudah kan pengunjung blog mengetahui tentang pemilik blog, isi seluruh blog atau bagian-bagian blog kita, Biasanya menu banyak ditempatkan dibawah judul blog atau disamping kiri blog. Seperti about me/us sitemap/daftar isi blog, contact us/me dan lain-lain. Cara ini adalah cara yang paling mudah dan sederhana, tidak harus edit html yang bisa bikin pusing klo dilihat dengan banyak kode-kode. Silahkan dilihat dulu gambar menunya dibawah ini atau lihat dibawah judul ini blog.

Cara membuat menu di blog. Ikuti langkah-langkah dibawah ini.

1. Login ke Blog kamu.

2. Dari halaman awal pilih laman. Lihat gambar dibawah ini.

3. Selanjutnya klik laman baru seperti gambar dibawah ini. Ada 2 pilihan, Laman kosong seperti kita menulis entri baru dan Alamat Web, seperti www.pacebook.om dll. Untuk percobaan Pilih Laman Kosong. 

4. Terus kita beri judul Tentang saya. Sebagai percobaan dulu. Dan klik Publikasikan.

5. Setelah dipublikasikan, pilih Tab atas, maka laman yang baru saja dibuat tadi akan muncul dibawah judul blog.

6. Selesai. Lihat blog maka laman baru akan tampil dibawah judul blog. seperti gambar dibawah ini.

7. Untuk mengisi menu blog, bisa kalian isi dengan about me, Daftar Isi, contact us dan lain-lain. Sebagai Contoh silakan dilihat

• Cara Membuat Daftar isi Blog.
• Cara Membuat Contact Us di Blog.
• Semoga Bermanfaat.

Cara membuat contact us di blog

Cara membuat contact us di blog atau hubungi kami. Contact us ini fungsinya untuk memudahkan pengunjung untuk menghubungi pemilik blog. Dengan mengirimkan pesan pertanyaan, saran, ataupun kritik ke pemilik blog melalui Email. Biasanya form contact di letakan di halaman baru, didalam tab menu dibawah judul blog. Untuk melihat contoh contact us, silakan lihat contact us di blog ini, dibagian atas. Untuk lebih jelasnya ikut langkah-langkah dibawah ini.

 Cara Membuat Contact Us di Blog

1. Kunjungi http://www.123contactform.com/

2. Pilih SIGN UP FOR FREE terus Basic, Klik Sign Up

3. Daftar account dengan memasukan username, password, dan email. dan klik Create Account.

4. Setelah terdaftar, pilih Contact Form, Seperti dibawah ini. dan isi judul contact form nya.

5. Klik Ok. Selanjutnya ada 3 langkah, lewat kan saja langkah pertama, langsung klik yang kedua Form settings dan centang email, seperti gambar dibawah ini.

6. Langkah ke tiga, klik publish Form dan klik Finisihed disebelah kanan.

7. Selanjutnya dikotak My forms klik Getcode&Publish. 

8. Klik Blogger dan Copy semua kode yang disediakan.

9. Sekarang langkah pemasangan ke blog kita. Buka Laman dan pilih laman barudan laman kosong.

10. Dari halaman ada 2, Compose dan HTML, Klik HTML dan Paste semua kode tadi.

11. Beri nama judul halaman dengan contact me atau contact us. Terakhir Publikasikan. Dan lihat hasilnya. Selesai. Sekarang kamu sudah punya menu baru contact us di blog. Semoga Bermanfaat.

Catatan: Jika tidak terlihat di blog menu baru contact me, coba buka pengaturan laman. klik laman dan disamping tulisan tampilan laman sebagai, klik tab atas.

Cara mengganti warna Background judul sidebar blog

Cara mengganti warna Background judul sidebar blog, yang dimaksud dengan sidebar itu termasuk widget yang ada dikiri-kanan dan juga bagian bawah(footer)blog. Seperti Arsip Blog, Populer Posts, kategori, Artikel terbaru, Pengikut, dan lain-lain, sesuai dengan widget yang ada di blog kamu. Yang akan kita ganti warnanya itu adalahbackground judulnya. 
Contohnya: Judul Arsip Blog, Background bawaan asli blogger, warnanya putih, akan kita ganti jadi biru atau warna lainnya. Silakan lihat gambar disamping kiri atas untuk melihat hasilnya.

Cara Mengganti Warna Background Judul Sidebar Blog

Ikuti langkah-langkah dibawah ini.

1. Login ke dasbor Blogger.
2. Pilih pengaturan template dan klik edit html.
3. Klik cadangkan/pulihkan dan unduh template blog, untuk jaga-jaga. klo terjadi eror kamu bisa mengembalikannya lagi kesemula.
4. Selanjutnya Klik Edit Html dan Cari kode h2 { . Lengkapnya seperti dibawah ini.
/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}
5. Tambahkan kode background:#2288BB; padding:4px 15px 3px;text-transform:none;
6. Jadi kode lengkapnya seperti ini.
/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);background:#2288BB;
  padding:4px 15px 3px;text-transform:none;
}
7. Ganti kode #2288BB; dengan kode warna yang kamu inginkan. 
8. Setelah itu coba di Preview / pratinjau template kamu. Jika sudah berubah warna background judul sidebar kamu. Baru di Save.
9. Jika Belum, Coba dilihat lagi kode warnanya, background:#2288BB; Pastikan Kode ini " ; " ada dibelakang kode warna(tanpa tanda ""), jika kode itu hilang maka warna tidak akan berubah. Selesai.

Jika sidebar kamu ingin diberi lengkungan di setiap sudutnya. Kalian bisa tambahkan kode border-radius: 11px 0px 11px 0px; keterangan kode: border-radius: atas kiri-atas kanan-bawah kiri-bawah kanan. Untuk lebih jelasnya kalian bisa edit di sini http://www.cssportal.com/css3-rounded-corner/.

Cara diatas akan merubah warna judul sidebar widget di bagian kiri-kanan blog, dan juga footer widget dibagian bawah. Jika ingin membuat warna background judul yang berbeda antara sidebar dan footer. Gunakan cara dibawah ini.

Hanya sidebar widget bagian kiri-kanan blog

1. Cari kode .sidebar .widget h2 { dan tambahkan kode background:#2288BB; padding:4px 2px 2px; dibawahnya. Save Template selesai.
2. Atau gunakan cara dibawah ini. Cari kode ]]></b:skin> dan tambahkan kode berikut di atas kode ]]></b:skin>
.sidebar .widget h2 {
background:#2288BB; padding:4px 2px 2px;
} 

Hanya Footer widget bagian bawah blog.

1. Cari kode .footer-inner .widget h2 { dan tambahkan kodebackground:#2288BB; padding:4px 2px 2px; dibawahnya. Save Template selesai. 
2. Atau gunakan cara dibawah ini. Cari kode ]]></b:skin> dan tambahkan kode berikut di atas kode ]]></b:skin>
.footer-inner .widget h2 {
background:#2288BB; padding:4px 2px 2px;
}

Setiap template mempunyai perbedaan. Jika tidak menemukan kode-kode diatas. Cobalah untuk mencari kode yang semirip mungkin dengan kode HTML diatas. Semoga Bermanfaat.

Cara mengganti tulisan read more di blog

Cara mengganti tulisan read more di blog dengan kata yang kamu inginkan. Sebelumnya kamu baca dulu, Cara membuat Read More  di Blog dengan mudah. Fungsi read more ini adalah untuk meringkas tampilan artikel di halaman utama blog. Jadi tidak semuanya dari awal sampai akhir tulisan di tampilkan di awal halaman blog.


Read more ini juga gunanya untuk mempercepat loading blog dan membuat blog terlihat lebih rapi. Dan tidak memakan tempat yang banyak. Walaupun disingkat, bukan berarti artikel kita juga singkat. Artikel tetap sama seperti yang kita buat, hanya saja tampilannya dipotong dari halaman awal blog. Jadi ketika di klik tulisan baca selengkapnya, maka akan terbuka halaman baru yang menampilkan semua isi dari artikel yang dipilih. Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.

Cara Mengganti Tulisan Read More di Blog

1. Login ke Blog.
2. Dibagian Dasbor Pilih pengaturan Tata Letak.
3. Dan Klik edit di Posting Blog. Lihat gambar agar lebih jelas

4. Selanjutnya ganti tulisan "Baca Selengkapnya" dengan kata yang kamu inginkan.

5. Simpan Pengaturan, dan lihat hasilnya. Selesai. Semoga Bermanfaat.

Cara mengganti tulisan home previous dan next di blog

Cara mengganti tulisan home previous dan next di blog dengan kata-kata sendiri atau dengan gambar navigasi halaman. Salah satu cara untuk menghias blog agar terlihat lebih rapi dan indah dipandang. Untuk blog yang diatur kedalam bahasa indonesia biasanya tulisan navigasi halamannya adalah beranda, posting lama dan posting baru dengan desain asli blogger, kurang menarik menurut saya. Silakan lihat gambar dibawah ini, atau untuk lebih jelasnya silakan lihat navigasi halaman blog saya yang ada dibawah, karena navigasi jenis gambar seperti itu lah yang akan saya bagikan di posting kali ini.

Jika sudah, silakan ikuti langkah-langkah dibawah ini.

1. Login ke blog, dan pilih pengaturan template.
2. Selanjutnya klik Edit HTML dan cari 3 kode Biru dibawah ini. Gunakan Ctrl F untuk mempermudah Pencarian.
1. expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
Keterangan: Posting Lebih Baru(Previous)

2. expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
Keterangan: Posting lama(Next)

3. <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
Keterangan: Beranda(Home)
3. Jika hanya ingin mengganti tulisannya saja dengan kata-kata kita sendiri. maka ganti Format kode diatas menjadi seperti ini.
expr:title='data:olderPageTitle'>Selanjutnya</a>
expr:title='data:newerPageTitle'>Sebelumnya</a>
<a class='home-link' expr:href='data:blog.homepageUrl'>Rumah</a>
4. Ganti kode warna merah dengan kata yang kamu inginkan. Untuk beranda/home ada 2 kode yang sama, ganti kedua2nya. Selanjutnya Preview, jika sudah berubah baru save.
5. Jika ingin mengganti tulisannya dengan gambar, maka tambahkan Url gambar, Contoh:
expr:title='data:newerPageTitle'><img src='http://c.dryicons.com/images/icon_sets/blue_velvet/png/32x32/back.png'/></a>

expr:title='data:olderPageTitle'><img src='http://b.dryicons.com/images/icon_sets/blue_velvet/png/32x32/forward.png'/></a>

<a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://c.dryicons.com/images/icon_sets/blue_velvet/png/32x32/home.png'/></a>
6. Kode warna Biru itu URL gambar dengan tambahan formtanya. Beranda/home ada 2 kode yang sama, ganti kedua2nya. Jika sudah, silakan dipreview dulu, klo sudah berubah baru save.
7. Untuk mengganti dengan gambar lain, ganti url gambar, dengan url gambar yang kamu inginkan. Format gambar seperti dibawah ini.
<img src='URL gambar kamu'/></a>
8. Coba cari digoogle gambar, dengan kata kunci icon home. Cari gambar yang ada pilihan ukurannya.  Pilih gambar ukuran 32 atau sesuai dengan yang kamu inginkan. Selanjutnya Copy URLnya(klik kanan tepat digambar dan pilih copi URL gambar) dan masukan kodenya di format kode diatas.
9. Salah satu web yang menyediakan icon gambar adalah http://dryicons.com/icon/blue-velvet/home/ silakan dicari gambar yang sesuai dengan yang kamu inginkan. Semoga Bermanfaat.

Cara Baru Menghilangkan Navbar Blog

Navbar merupakan salah satu fiture asli bawaan blogger, yang menyediakan pilihan untuk masuk ke pengaturan desain blog, dan memudahkan kita untuk membuat entri baru juga login-logout dari blog. Navbar juga memperlihatkan alamat email yang sedang kita gunakan untuk masuk ke blog. Tapi disisi lain, ada jarak pemisah antara halaman blog dengan tab browser kita, sehingga terlihat sedikit kurang rapi, karena adanya navbar.

Sekarang menghilangkan navbar di blog lebih mudah, navbar hanya disembunyikan dari halaman blog, hasilnya tidak ada jarak pemisah antara halaman blog dengan tab browser kita. Beda dengan yang lama, jika ingin menghilangkan navbar, harus edit html dulu, baru bisa hilang navbarnya, kalau hanya disembunyikan, jarak pemisah masih terlihat.

Satu lagi kelebihan pengaturan navbar sekarang, yang dulunya kalau navbar dihapus dari blog, maka halaman blog akan sedikit naik. Sekarang tidak, kalau navbar disembunyikan, halaman blog tidak naik. Tinggi halaman masih seperti ketika ada navbar, hanya navbarnya saja yang hilang.

Langsung saja dicoba, Cara baru menghilangkan navbar di blog dengan mudah tanpa edit html.

Ikuti langkah-langkah dibawah ini.

1. Login ke Blog dan masuk ke pengaturan Tata Letak.
2. Selanjutnya klik edit di layout Navbar dan pilih off dipengaturan navbar. Lihat gambar:
 
3. Simpan dan lihat hasilnya. Selesai. 

Tambahan: Jika cara diatas tidak berhasil diblog kamu, coba gunakan cara dibawah ini. 

1. Klik pengaturan  template, klik edit HTML dan cari kode ]]></b:skin> gunakan Ctrl F untuk memudahkan pencarian.
2. Pasang kode berikut diatas ]]></b:skin>
#navbar, #navbar-iframe {
   height: 0px;
   visibility: hidden;
   display: none;
3. Selanjutnya pratinjau template untuk melihat apakah navbar sudah disembunyikan atau belum. Jika sudah baru save template. Selesai.
4. Fungsi dari kode diatas adalah menyembunyikan tampilan navbar dari halaman blog. Sehingga blog terlihat lebih rapi. 
5. Setiap template blog mungkin mempunyai perbedaan dalam menyembunyikan navbar. Jika cara pertama tidak berhasil, gunakan cara yang kedua.

Baca juga Cara mengganti warna background sidebar  blog, dan Cara mengganti tulisan home next  previous di blog dengan gambar untuk menghias tampilan blog kamu atau baca juga Cara buat scroll di kotak Widget Blog. untuk mempersingkat panjang dari arsip atau post populer blog agar tidak menghabiskan banyak tempat disidebar blog. Semoga Bermanfaat.