Cara Agar Gambar Posting Tidak Melebihi Halaman Blog

Cara agar gambar posting  tidak melebihi halaman blog. Memasukan gambar didalam posting blog, merupakan salah satu cara agar isi artikel lebih mudah untuk dimengerti oleh pembaca. Namun, jika ukuran gambar melebihi lebar halaman posting, maka tampilan artikel terlihat menjadi tidak rapi. Apalagi sampai menyentuh widget-widget yang berada di samping kanan blog.
cara agar gambar posting tidak melebihi halaman blog
Sebenarnya, blogger sudah menyediakan tool untuk mengatur ukuran gambar, gambar bisa dikecilkan atau dibesarkan. Caranya klik gambar maka akan ada tool dengan pilihan small, medium, large, x-large atau ukuran gambar yang sebenarnya. Tapi pada postingan tertentu, mungkin kita ingin menambahkan gambar yang lebar dengan title gambar yang terlihat jelas.

Menggunakan tool dari blogger tidak cukup untuk mengatur lebar gambar, terkadang gambar masih melebihi lebar halaman posting blog. Berikut ini adalah cara agar gambar dipostingan blog tidak melebihi lebar halaman blog. 
Ikuti langkah-langkah dibawah ini.
  1. Login ke blogger. Ke pengaturan template.
  2. Klik edit html, dan cara kode ]]></b:skin> , gunakan Ctrl f untuk memudahkan pencarian.
  3. Letakan kode berikut di atas ]]></b:skin>
  4. #header img { max-width: 99%; max-height:90%; margin:1px 1px;padding:0px;}
        .post img { vertical-align:bottom; max-width:90%; max-height:90% }
        #navigation img { vertical-align:bottom; max-width:80%; }
  5. Selanjutnya save template, selesai.
Gambar dengan ukurang yang besar, otomatis tidak melebihi lebar posting blog. Dengan begitu, tampilan posting blog akan terlihat rapi, dan juga bisa menambah kecepatan loading blog. Untuk mengoptimalkan lagi lebar gambar, agar tidak melebihi halaman blog. Ada baiknya, sebelum gambar di upload ke blog. Gambar di kompress terlebih dahulu.

Terkadang, gambar dengan ukuran extra besar, masih bisa melewati batas halaman blog. Walaupun sudah ditambah pengaturan seperti diatas. Tapi pada umumnya, blog yang sudah diberikan pengaturan gambar seperti diatas. Gambarnya tidak akan melewati batas halaman. Mengatur ukuran gambar bisa dibilang sebagai salah satu cara untuk meningkatkan search engine optimazation atau yang biasa disingkat seo dalam dunia website.
Selanjutnya coba baca juga cara mengubah gambar jpg menjadi kecil, dengan title gambar yang masih bisa dilihat. Dan juga cara compress gambar JPG, agar ukuran file gambar menjadi lebih kecil lagi. Semoga Bermanfaat.
Baca Selengkapnya >>>

Menghitung Jumlah Kata di Ms Word 2007

Menghitung jumlah kata di microsoft word 2007. Pengenalan sedikit tentang microsoft word. Microsoft Word atau Microsoft Office Word adalah perangkat lunak pengolah kata (word processor) andalan Microsoft. Pertama diterbitkan pada 1983 dengan nama Multi-Tool Word untuk Xenix, versi-versi lain kemudian dikembangkan untuk berbagai sistem operasi, misalnya DOS (1983), Apple Macintosh (1984), SCO UNIX, OS/2, dan Microsoft Windows (1989). Setelah menjadi bagian dari Microsoft Office System 2003 dan 2007 diberi nama Microsoft Office Word. Sumber : http://id.wikipedia.org/wiki/Microsoft_Word.

Dengan alasan tertentu, mungkin teman-teman sedang membutuhkan cara menghitung kata, huruf atau karakter dan juga jumlah paragraf. Bayangkan jika harus menghitungnya satu per satu, pasti membutuhkan waktu yang lama dan ketelitian tinggi. Salah sedikit, bisa lupa jumlah kata atau huruf yang sedang dihitung. Ada cara mudah dan tidak perlu waktu lama, yaitu dengan menggunakan microsoft word 2007.

Kamu hanya perlu memasukan kalimat atau kata yang akan dihitung ke microsoft word 2007, dan microsoft word akan menghitungnya dengan cepat. Untuk lebih jelasnya. cara menghitung jumlah kata di microsoft word 2007. Ikuti langkah-langkah dibawah ini.
  1. Buka microsoft word 2007 kamu.
  2. Selanjutnya masukan kalimat atau buka document yang ingin kalian hitung.
  3. Dari Tab atas, Klik Tab Review, seperti gambar dibawah ini.
  4. menghitung jumlah kata di ms word 2007
  5. Selanjutnya Klik Word Count.
  6. menghitung jumlah kata di ms word 2007
  7. Maka akan terbuka halaman jumlah halaman, kata, karakter dengan spasi, karakter tanpa spasi, dan juga paragraf. Seperti gambar dibawah ini.
  8. menghitung jumlah kata di ms word 2007
  9. Selesai sudah. Jika mengikuti langkah-langkah diatas dengan benar, insyaallah bisa.  Semoga Bermanfaat.
Baca Selengkapnya >>>

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.
cara desain blog sendiri

  1. Cara Membuat Menu Di Blog.
  2. Cara Buat Daftar Isi Blog.
  3. Cara Buat Contact Us
  4. Cara Buat Label atau Kategori.
  5. Cara Membuat Read More Versi Blogger. 
  6. Cara Buat Tombol Share.
  7. Cara Buat Gambar Untuk Header Blog.
  8. Cara Buat Tulisan Bayangan Pada Judul Blog.
  9. Cara Buat Scroll.
  10. Mengatur Gambar posting tidak melebihi halaman blog. 
  11. cara menambahkan widget disamping header. 
  12. Cara Membuat Menu Dropdown dengan Mudah.
  13. Mengganti Tulisan Home-Previous-Next dengan Gambar.
  14. Cara Mengganti Warna Background Judul Sidebar.
  15. Memberi Warna Background di Judul Posting.
  16.  Mangatur Ukuran Kotak Komentar Blog.
  17. Cara Menghilangkan Navbar Blog.
  18. Menghilangkan Sidebar Pada Posting Tertentu.
  19. Menghapus Tulisan Jumlah Komentar.
  20. Menghilangkan Tulisan Langganan Entri Atom.
  21. Menghilangkan Gambar Tang-Obeng.
  22. Menghilangkan Tombol Share di Halaman Awal Blog.
  23. Menghapus tulisan tampilkan posting dengan label. 
Update Tutorial Desain Blog: Dapat di lihat di Daftar Isi.
Baca Selengkapnya >>>

Cara Membuat Kotak Script di Posting Blog

Cara membuat kotak script di posting blog. Kotak script, biasanya digunakan untuk memasukan kode2 script ke dalam posting. Agar terlihat rapi dan tidak memakan banyak tempat. Ada yang berbentuk kotak sederhana, ada juga yang berbentuk kotak dengan tambahan scroll, dan lain-lainnya. Kotak script juga bisa diberi warna dibagian backgroundnya, dan juga border yang berbentuk kotak, bisa diatur bentuknya. Cara membuatnya, Ikuti langkah-langkah dibawah ini.
  1. Login ke blogger. Dan pilih entri baru.
  2. Selanjutnya buatlah tulisan seperti dibawah ini.
  3. cara membuat kotak script di posting blog
  4. Selanjutnya Klik HTML dan masukan kode berikut, dibawah tulisan cara membuat kotak script. 
  5. <div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
    text-align: left;">
    .Klik Disini.</div>
  6. Untuk lebih jelasnya, lihat gambar dibawah ini.
  7. cara membuat kotak script di posting blog
  8. Sekarang Klik Compose, maka akan ada kotak script. Contoh gambar:
  9. cara membuat kotak script di posting blog
  10. Selanjutnya Klik di dalam kotak tersebut, dan hapus tulisan Klik Disini.
  11. Terakhir, Masukan kode script yang ingin kamu masukan, didalam kotak itu. Selesai.

Keterangan Kode:

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.Klik Disini.</div>
  1. border: 3px = ketebalan kotak script. dan #1780dd = warna kotak script.
  2. Double; = Bentuk kotak, bisa diganti dengan, 
  3. dashed
    dotted
    Double
    Groove
    inset
    outset
    ridge
  4. Padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
  5. background-color:ffffff; = warna dalam kotak. 
  6. Dan text-align:left; = posisi tulisan didalam kotak di kiri.

Kotak Script Dengan Scroll.

<div style="border: 3px #1780dd solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 50px; width: 300px;
text-align: left;">
.kode script disini.</div>
  1. Sama seperti cara diatas, masukan kode script ke HTML.
  2. overflow:auto; = fungsi scrollnya. height(tinggi kotak) dan width(lebar kotak)
  3. Kotak script bisa juga dipindahkan ke kanan, dengan menambahkan kode float: right; ditengah kode diatas.
  4. <div style="border: 3px #1780dd solid; float: right; dan lain-lain.
    Kotak Posisi Kanan
  5. Untuk yang posisi tengah, saya belum tau, nanti jika sudah tau, akan saya tambahkan kembali diposting ini. 
Dengan menambahkan kotak script di posting blog, maka halaman blog akan terlihat lebih rapi. Dan tidak memakan banyak tempat. Tanpa harus mengurangi isi dari posting. Semoga Bermanfaat.

Baca Selengkapnya >>>

Cara Menghilangkan Tombol Share Di Blog

Cara menghilangkan tombol share di blog. Tombol share adalah salah satu alat untuk membagikan posting ke facebook, twitter, googleplus dan lain-lain, yang disediakan oleh blogger. Letaknya berada dibawah posting blog. Tombol tersebut akan muncul dihalaman awal blog, dari setiap posting. Untuk lebih jelasnya, silakan lihat gambar dibawah ini.
cara menghilangkan tombol share diblog
Dari gambar diatas, tombol share tepatnya berada di bawah tulisan diposkan oleh xxx. Mungkin sedikit menggantu tampilan awal blog. Untuk cara menghilangkan tombol share di blog, agar tidak terlihat di halaman awal, tapi muncul di setiap halaman posting blog yang dibuka. Untuk lebih jelasnya.
Ikuti langkah-langkah dibawah ini.
  1. Login ke Blogger.
  2. Dari halaman dasbor. Pilih pengaturan Template.
  3. Selanjutnya klik edit HTML dan cari kode <b:includable id='shareButtons' var='post'> Tampilan kode awalnya kira-kira seperti ini.
  4. <b:includable id='shareButtons' var='post'>...</b:includable>
  5. Klik tanda >...<  maka akan terbuka semua kode lengkapnya.
  6. Sekarang yang harus kita lakukan adalah, menambahkan kode <b:if cond='data:blog.pageType == "item"'> dan </b:if> diantara kode-kode tombol share diatas.
  7. Berikut contoh lengkap penempatan kodenya.
  8. <b:includable id='shareButtons' var='post'>
     <b:if cond='data:blog.pageType == "item"'> 
    <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email'....
    .............................................................................................................................................
     <data:post.dummyTag/></div></b:if></b:if>
    </b:includable>
  9. Selanjutnya klik preview, untuk melihat sudah hilang atau belum tombol share di halaman awal blog. Jika sudah hilang, baru Save Template. Selesai.
Dengan menyembunyikan tombol share dari halaman awal blog. Maka akan menambah kecepatan loading blog. Walaupun hanya sedikit, tapi itu sangat berpengaruh, karena tombol share yang ditampilkan adalah berupa gambar. Dengan menyembunyikan tombol share, blog akan terlihat rapi tidak berantakan.

Tanpa harus menghapus atau menonaktifkan fungsi tombol share. Karena tombol share sendiri sangat bermanfaat bagi blog, untuk membagikan isi dari artikel blog ke situs sosial media atau situs lainnya.

Sekarang, coba baca juga cara membuat tombol share di blog. yang pasti tampilannya beda dengan tombol share default blogger. Disitu juga dijelaskan agar tombol share tidak muncul di halaman awal blog. Tapi munculnya disetiap halaman posting yang di buka. Semoga Bermanfaat.
Baca Selengkapnya >>>

Cara Menghilangkan Tang Obeng Blog

Cara menghilangkan tang obeng di blog. Gambar tang dan obeng berada di setiap widget blog, fungsinya adalah untuk mengedit dengan cepat. Jika kita klik pada suatu widget, maka akan terbuka halaman pengaturan widget tersebut. Untuk lebih jelasnya, coba lihat gambar dibawah ini.
cara menghilangkan tang obeng blog
Mungkin sedikit berantakan, jika melihat halaman blog dihiasi gambar tang obeng di setiap widget blog. Sehingga ada keinginan untuk menghapus atau menghilangkannya dari halaman blog. Cara menghilangkan gambar tang obeng di blog.
Ikuti langkah-langkah dibawah ini.
  1. Login ke blogger.
  2. Dari halaman dasbor, buka pengaturan template.
  3. Selanjutnya klik edit HTML dan cari kode ]]></b:skin>
  4. Dan tempatkan kode berikut ini diatasnya.
  5. .quickedit{display:none;}
  6. Terakhir klik preview, jika sudah hilang gambar tang-obeng, baru save template, selesai.

Tambahan: Cara menghilangkan tang obeng di blog

Ternyata setelah saya pelajari lagi, cara diatas hanya menyembunyikan tampilan quick edit saja. Saya coba test seo tools di http://chkme.com/ , dan hasilnya masih terdapat gambar yang tidak mempunyai  title dan deskripsi gambar. Gambarnya seperti dibawah ini.
cara menghilangkan tang obeng blog
Saya coba buka satu persatu gambar diatas, ternyata gambar tang obeng. Jadi bingung, padahal gambar sudah hilang dari blog. Akhirnya dapat juga cara menghilangkan quickedit dan juga mematikan fungsinya. Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.
  1. Login ke blogger. ke pengaturan template.
  2. Selanjutnya klik edit HTML dan cari kode <b:include name='quickedit'/> dan ganti menjadi.
  3. <!--b:include name='quickedit'/-->
  4. Akan ada banyak kode yang sama, Ganti semuanya. Karena memang kode itu ada disetiap widget dan posting blog. 
  5. Selanjutnya, coba cek di http://chkme.com/. Dari yang saya coba, gambar quick edit sudah hilang, hanya tinggal 2. Seperti gambar dibawah ini.
  6. cara menghilangkan tang obeng blog
  7. Gambar yang tertinggal itu adalah gambar quick edit di widget google friend connect dan widget atribut blogger, yang bertuliskan diberdayakan oleh blogger. Ternyata memang kedua widget tersebut, gambar quick editnya tidak bisa dihapus. 
  8. Setelah melakukan cara diatas, score seo di situs chkme naik.
Dengan kedua cara diatas, maka blog akan terlihat rapi dan juga bisa menambah tingkat seo blog. Loading blog pun akan bertambah sedikit lebih cepat, karena disembunyikannya gambar tang dan obeng di blog. Semoga Bermanfaat.
Baca Selengkapnya >>>

Cara Membuat Gambar Header Blog

Cara Membuat Gambar Header Blog. Satu lagi cara desain blog sendiri, yaitu dengan menambahkan gambar di header blog. Cara membuat gambarnya bisa menggunakan software, bisa juga secara online. Artikel ini akan menjelaskan tentang cara membuat gambar header blog secara online. Prosesnya tidak lama, cukup mengunjungi situs penyedia layanan pembuatan gambar, dan memilih salah satu bentuk gambar yang kita inginkan. Setelah itu download dan pasang di blog kita. Silakan lihat dulu contoh gambar dibawah ini.

cara membuat gambar header blog
Gambar diatas adalah contoh gambar dalam bentuk tulisan yang pernah saya gunakan di blog ini. Dengan menggunakan gambar, kita punya banyak pilihan bentuk dan juga warna yang bisa digunakan. Berbeda dengan tampilan huruf blog, yang warna dan bentuknya terbatas, hanya bisa menggunakan satu warna.

Ukuran gambar yang dihasilkan cukup kecil dan juga tidak memberatkan loading blog, ukuran huruf bisa diatur sesuai dengan yang kita inginkan. Disitus tersebut ada juga jenis gambar animasi, seperti huruf yang mengeluarkan api, Petir, animasi Glow yang bergerak dan masih banyak lagi.
  1. Gambar yang dihasilkan berformat PNG dan juga GIF, sesuai dengan bentuk dan animasi yang digunakan. Dan ukuran File gambar yang dihasilkan juga berbeda, antara Png dan Gif, sesuai dengan ukuran huruf gambar yang digunakan.
  2. Untuk gambar animasi ukuran huruf 40 keatas bisa sampai 50-70kb dalam format Gif. Sedangkan untuk gambar biasa tanpa animasi hanya 10-30kb dalam format png.
  3. Silakan pilih bentuk dan ukuran gambar yang sesuai dengan yang kalian inginkan.
Untuk lebih jelasnya, Cara membuat gambar header blog. 
Ikuti langkah-langkah dibawah ini:
  1. Kunjungi situs http://cooltext.com/ 
  2. Selanjutnya pilih salah satu gambar huruf yang kalian suka.
  3. Dan atur warna dan juga bentuk hurufnya.
  4. Setelah selesai, lihat bagian bawah, klik Creat Logo.
  5. Terakhir Download. Seperti gambar dibawah ini.
  6. cara membuat gambar header blog
  7. Sekarang, memasang gambar tersebut di blog kita.
  8. Login ke blog, dan Klik pengaturan Tata Letak.
  9. Pada bagian layout Header Blog, Klik Edit. Dan Upload gambar tadi.
  10. Selanjutnya atur penempatan gambar. Pilih dibalik judul dan keterangan.
  11. Terakhir Save pengaturan gambar. Dan lihat, gambar berada di belakang judul dan deskripsi. Jika ingin menyembunyikan tulisan judul dan deskripsi blog. Ikuti langkah-langkah dibawah ini.

Cara menyembunyikan judul dan deskripsi blog

  1. Sekarang kita sembunyikan tulisan judul dan deskripsi dari halaman blog, cari kode ]]></b:skin> dan tempatkan kode ini diatasnya.
  2. .Header h1 {
       height: 0px;
       visibility: hidden;
       display: none;
    }

    .Header .description {
       height: 0px;
       visibility: hidden;
       display: none;
    }
  3. Setelah menambahkan kode diatas maka judul blog dan deskripsi akan disembunyikan dari tampilan blog, tinggal gambar saja.
  4. Dengan begitu judul dan deskripsi tetap ada, hanya disembunyikan.
  5. Silahkan cek di chkme.com untuk melihat masih ada atau tidak title judul blog H1, jika ada berarti gambar header tidak akan mempengaruhi seo blog.
Jika kita memliih menempatkan gambar selain judul dan keterangan atau tempatkan keterangan setelah gambar. Maka H1 header akan hilang, dan itu mempengaruhi seo blog. Jika ingin mencoba silahkan saja cek di chkme.com atau disitus chek seo blog lainnya. Agar H1 header blog disembunyikan dari halaman blog tanpa mempengaruhi seo blog, gunakanlah cara seperti diatas. Semoga Bermanfaat.
Baca Selengkapnya >>>

Cara Membuat Menu Dropdown di Blog

Menu dropdown, berarti menu yang menurun. Menu yang lebih simple, dan tidak banyak memakan tempat. Sebelumnya saya sudah menjelaskan cara membuat menu di blog, dengan memanfaatkan laman untuk membuat menu blog. Caranya sedikit lebih sederhana, dari pada menu dropdown yang akan saya jelaskan kali ini. Untuk lebih jelasnya, lihat dulu gambar menu dropdown dibawah ini.
cara membuat menu dropdown di blog
Menu dropdown ini ada yang satu cabang, dan juga ada yang 2 cabang. Saya akan coba menjelaskan sesederhana mungkin, cara membuat dan mengatur menu dropdown sesuai dengan keinginan, agar mudah untuk dimengerti. Menu dropdown ini tidak mengedit kode html di template, tapi menggunakan widget/gadget di blog, jadi template aman ketika ada kesalahan dalam pembuatannya.Cara membuat menu dropdown di blog.
Ikuti langkah-langkah dibawah ini:

Membuat Menu Dropdown

  1. Pertama, lihat susunan kode dibawah ini. Inilah struktur keseleuruhan kode yang akan kita pakai dalam membuat menu drop down.
  2. <style>
    KODE CSS
    </style>
    KODE HTML
  3. Dari susunan kode diatas, <style> ditempatkan diawal, selanjutnya Kode Css, dan ditutup dengan </style>, terakhir Kode HTML.
  4. Sekarang yang kita butuhkan adalah, Kode Css dan HTML nya. Tidak harus buat sendiri. Cukup kunjungi situs dibawah ini.
  5. http://cssmenumaker.com/. Selanjutnya, pilih salah satu menu dropdown yang kamu inginkan.
  6. Setelah memilih, maka akan terbuka halaman baru. Pilih Costumize.
  7. Dan atur nama dan isi dari menu dropdown, gunakan add item untuk menambah menu dan gunakan edit item untuk memasukan url isi dari menu tersebut. Seperti gambar dibawah ini.
  8. cara membuat menu dropdown di blog
  9. Setelah selesai mengatur isi menu dropdown, ambil/copy kode CSS dan HTML nya. Dan pastekan di Notepad susun seperti langkah pertama.

 Memasang Menu di Widget atau Gadget

  1. Setelah selesai menyusun semua kode di Notepad. Sekarang ke bagian Tata Letak di blog. Dan Klik Tambahkan Gadget, dan pilih HTML/JavaScript.
  2. Copy semua kode di Notepad tadi dan Pastekan semua kode ke Gadget HTML/JavaScript. Dan Simpan.
  3. Selanjutnya pindahkan Gadget HTML/JavaScript ke bawah Header. Dan Silakan lihat blog.
  4. Menu Dropdown sudah jadi. Jika menu dropdown nya tidak turun. Itu berarti kita harus mengedit bagian header blog.
  5. Silakan ke Bagian Template, klik edit HTML, dan cari kode <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> kode lengkapnya kira-kira seperti dibawah ini.
  6. <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Nama Blog Kamu (Header)' type='Header'>
    <b:includable id='main'>
  7. Ganti maxwidget='1' menjadi maxwidget='3' dan showaddelement='no' menjadi showaddlement='yes'. Dan Save Template.
  8. Kembali lagi ke pengaturan Tata Letak, pindah-pindahkan Gadget HTML/JavaScript tadi, dibawah header. Dan save.
  9. Setelah itu lihat blog, jika menu masih belum turun, ulangi lagi ke pengaturan Tata Letak, pindahkan lagi kode html ke bawah Header dan Save. Sampai Menu Drop Down berjalan dengan benar.
  10. Selesai, menu dropdown sudah jadi. Untuk cara mengubah warna dari menu dropdown, silakan kunjungi situs ini, http://www.cssportal.com/css3-menu-generator/ , disitu kita bisa belajar, cara mengubah bentuk dan warna menu dropdown, juga kode css dan html dari menu dropdown yang kita gunakan.

Cara lain dengan memasukan kode css dan html di template blog

  1. Cara diatas adalah memasukan kode di widget blog, lebih aman. Tapi jika kamu ingin mencoba cara lain, dengan memasukannya ke template blog. Masukan kode css dan html dengan format seperti dibawah ini. Cara ini tidak menggunakan <style> </style> seperti memasang menu di widget.
  2. Kode CSS
    ]]></b:skin>
    <div class='tabs-outer'>
    Kode HTML
  3. Seperti format diatas, pertama kamu cari kode ]]></b:skin> dan tempatkan kode CSS diatasnya. Selanjutnya Cari kode <div class='tabs-outer'> dan tempatkan kode HTML di bawahnya. Lalu save template.
  4. Menu Dropdown akan muncul dibawah header. Jika ingin ditempatkan diatas header, pindahkan kode html tadi ke <div class='header-outer'>. Selesai. Semoga Bermanfaat.
Baca Selengkapnya >>>

Cara membuat daftar artikel terbaru di blog

Cara membuat daftar artikel terbaru di blog. Daftar artikel terbaru atau artikel yang baru saja di publikasikan. Biasanya terletak di sidebar kanan atau kiri blog. Fungsinya sendiri adalah untuk menampilkan daftar artikel terbaru, yang mungkin saja ingin dilihat oleh pengunjung. Atau juga sebagai penanda, bahwa penulis blog, selalu update artikel atau posting terbaru di blognya. Untuk lebih jelasnya silakan lihat gambar dibawah ini.
cara membuat daftar artikel terbaru
Dengan adanya daftar artikel terbaru. Maka kemungkinan pengunjung untuk membuka dan membaca artikel lain di blog kita semakin besar. Dan itu bagus untuk meningkatkan jumlah View dari pengunjung. Artikel ini akan menjelaskan cara membuat daftar artikel terbaru di blog. Kurang lebih gambarnya seperti diatas. cara membuatnya cukup mudah, tidak harus edit html, yang terkadang eror, cukup memasukan url blog ditambah beberapa kode untuk menampilkan artikel terbaru. Untuk lebih jelasnya.

Cara membuat daftar artikel terbaru di blog

Ikuti langkah-langkah dibawah ini.
  1. Login ke blogger.
  2. Dari halaman dasbor ke Tata Letak.
  3. Selanjutnya dibagian layout klik Tambahkan gadget. Dan pilih Feed, seperti gambar dibawah ini.
  4. cara membuat daftar artikel terbaru
  5. Selanjutnya masukan alamat feed dari url blog kamu, dengan menambahkan atom.xml dibelakangnya. Dan klik Lanjutkan. Ganti Url dengan alamat blog kamu.
  6. cara membuat daftar artikel terbaru
  7. Maka akan terbuka pengaturan konfigurasi feed seperti gambar dibawah ini. Beri judul sesuai dengan yang kamu inginkan, dan centang buka link dijendela baru. Dan simpan.
  8. cara membuat daftar artikel terbaru
  9. Sekarang coba lihat blog kamu. Daftar artikel terbaru sudah tampil. Selesai. 
Setiap artikel terbaru yang baru saja kamu publikasikan. Akan terlihat di daftar artikel terbaru. Dengan batas tampilan 5 artikel. Untuk menampilkan artikel terbaru lebih dari 5, silahakan baca di cara membuat widget artikel terbaru. Artikel yang ditampilkan hanya judul saja, tidak menggunakan gambar. Untuk label, yang ditampilkan adalah semua label, tergantung label atau kategori mana yang kita masukan. Jadi bukan menampilkan satu label atau kategori yang sama, tapi semua. Semua artikel terbaru, akan terlihat di daftar artikel terbaru. Semoga Bermanfaat.
Baca Selengkapnya >>>

Cara Menghilangkan Tulisan Langganan Entri Atom

Cara Menghilangkan Tulisan Langganan Entri Atom. Langganan Entri Atom. Tulisan yang berada di bawah daftar posting blog. biasanya setelah tulisan Home-Previous-Next di blog. Tulisan asli dari bawaan blogger yang muncul pada setiap blog. Fungsinya sendiri adalah tombol untuk berlangganan artikel atau posting blog.

Jadi ketika ada pengunjung yang ingin berlangganan artikel di blog, tinggal klik langgana entri atom itu saja. Maka akan terbuka halaman baru untuk berlangganan, dengan memasukan alamat email yahoo, google atau bookmart dari browser yang ingin di kirimkan berlangganan artikel. Untuk lebih jelasnya silakan lihat gambar dibawah ini.
cara menghilangkan tulisan langganan entri atom
Tulisan langganan entri atom diatas mungkin sedikit menggangu tampilan blog, sehingga banyak blogger yang ingin menghapusnya, agar tampilan blognya terlihat rapi sesuai dengan keinginan. Cara menghilangkan tulisan langganan entri atom di blogger. Ikuti langkah-langkah dibawah ini.
  1. Login ke blogger.
  2. Dari halaman dasbor, buka Template. Dan Klik edit HTML
  3. Selanjutnya cari kode <div class='feed-links'> . Gunakan Ctrl F untuk memudahkan pencarian. Kode lengkapnya seperti dibawah ini.
  4. <div class='feed-links'>
    <data:feedLinksMsg/>
    <b:loop values='data:links' var='f'>
    <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
    </b:loop>
    </div>
  5. Hapus atau delete semua kode diatas.
  6. Selanjutnya klik preview. Untuk memastikan bahwa tulisan langganan entri atom sudah hilang atau belum. Jika sudah hilang, baru Save. Selesai.
Setelah melakukan cara diatas, maka tampilan blog akan terlihat lebih rapi. Dan juga bisa menambah kecepatan loading blog karena walaupun sedikit tetapi tulisan langganan entri atom masih dihitung bytenya, karena kita membukanya melalui website blogspot yang membutuhkan koneksi internet untuk membukanya.

Itulah cara menghilangkan atau menghapus tulisan langganan entri atom di blog. Silakan baca juga cara mengganti tulisan home-previous-next dengan tulisan sendiri atau dengan gambar. Agar tampilan blog menjadi lebih menarik.Atau juga menambahkan Tombol share di bawah postingan blog seperti facebook, twitter, dan lain-lain, disetiap posting. Semoga Bermanfaat.
Baca Selengkapnya >>>

Cara Menghapus Tulisan Jumlah Komentar Di Blog

Cara menghapus tulisan jumlah komentar di blog yang berada di bawah posting blog, dari halaman home/awal blog. Seperti tulisan, tidak ada komentar dan jumlah komentar. Jumlah komentar, tergantung dari berapa banyak komentar yang ada di artikel tersebut. jika ada 2 komentar, maka tulisannya menjadi 2 komentar. Jika tidak ada komentar, maka tulisannya tidak ada komentar.

Bagi sebagian orang, tulisan jumlah komentar tersebut sedikit mengganggu, jika dilihat dari halaman home, yang berada dibawah posting. Termasuk juga saya, tulisan jumlah komentar tersebut, sudah saya hapus dari halaman awal blog saya. Sehingga tampilan posting blog terlihat bersih, tanpa banyak tulisan. Silakan lihat gambar dibawah ini untuk lebih jelasnya.

cara menghapus tulisan jumlah komentar di blog

Tulisan Tidak ada komentar: seperti gambar diatas itulah yang akan kita hapus, dari halaman awal blog, di bawah posting blog.. Bagi yang ingin halaman posting awalnya rapi, dan tidak ingin tulisan jumlah komentar tampil di halaman blog(dibawah posting). Cara menghapus tulisan jumlah komentar blog. 
Ikuti langkah-langkah dibawah ini.
  1. Login ke Blogger.
  2. Dari halaman Dasbor, Pilih Template, dan Klik edit HTML.
  3. Selanjutnya cari kode <span class='post-comment-link'> , kode lengkapnya seperti dibawah ini.
  4. <span class='post-comment-link'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:post.allowComments'>
    <b:include data='post' name='comment_count_picker'/>
    </b:if>
    </b:if>
    </b:if>
    </span>
  5. Setelah ketemu, silahkan hapus kode2 diatas. Ada 2 kode yang sama seperti diatas, yang terdapat di blog. Silakan hapus kedua-duanya.
  6. Selanjutnya, silakan dipreview dulu. Untuk memastikan sudah hilang atau belum, tulisan jumlah komentar di bawah posting blog, dari halaman awal blog. Jika sudah hilang, baru save template. Selesai.
  7. Itulah cara menghapus tulisan jumlah komentar di blog. Sebenarnya ada cara lain untuk menghapus tulisan tidak ada komentar, tapi hasilnya kotak komentar dibawah posting blog juga akan hilang.
  8. Jika ingin mencoba, silakan ke pengaturan tata letak, dan di bagian layout posting blog, klik edit, dan hilangkan tanda centang  di 5 komentar, dan simpan. Tapi cara tersebut tidak saya anjurkan, karena akan menghilangkan kotak komentar, sehingga orang tidak bisa berkomentar di artikel kita.
  9. Selanjutnya, saya akan coba membagikan cara menyembunyikan tombol share dari halaman awal blog, yang bertulisakan + Rekomendasikan ini di google. Semoga Bermanfaat.
Baca Selengkapnya >>>

Cara Mengganti Email Blog di blogger

Cara mengganti email blog. Akun Gmail atau google account adalah id yang diperlukan untuk masuk ke blog, yang didapatkan dengan cara mendaftarkan Email terlebuh dahulu ke Gmail, agar bisa menggunakan layanan blogspot. Tanpa adanya akun Gmail, maka kita tidak bisa masuk ke blog. Jika kita lupa dengan password Gmail, maka kita masih memerlukan Email yang kita daftarkan ke Gmail untuk mendapatkan password yang baru. Password baru itu akan dikirimkan ke alamat Email kita. Maka dari itu, Email sangat penting untuk menjaga keamanan id Gmail yang digunakan untuk masuk ke blogspot.

Mengganti email blog dengan email yang baru, dengan alasan keamanan blog sudah tidak lagi aman karena email blog sudah banyak diketahui orang, atau kita tidak ingin email kita dibanjiri pesan masuk dari blogspot.. Artikel ini akan menjelaskan bagaimana cara mengganti email blog yang lama, dengan email blog yang baru. Cara Mengganti Email Blog.
Ikuti langkah-langkah dibawah ini.

Menambahkan Penulis Blog

  1. Login ke Blog. Dari halaman dasbor, pilih Setelan.
  2. Selanjutnya dibagian Dasar, lihat Izin Penulis Blog, klik + tambahkan penulis dan masukan alamat email baru. Seperti gambar dibawah ini.
  3. cara mengganti email blog
  4. Keterangan: Alamat email yang dimasukan, harus sudah punya akun Google, jika belum punya silakan daftar dulu akun google. 
  5. Dan Klik Undang Penulis. Selanjutnya Logout dari Blospot.

Menerima pesan undangan sebagai penulis blog

  1. Sekarang, Buka Yahoo dan buka alamat email baru yang dimasukan tadi. 
  2. Selanjutnya buka Kotak masuk, dan buka pesan undangan penulis dari blog. seperti gambar dibawah ini.
  3. cara mengganti email blog
  4. Klik Url http://www.blog Seperti gambar diatas. Maka akan terbuka halaman baru, Seperti gambar dibawah ini.
  5. cara mengganti email blog
  6. Masuklah dengan akun Gmail (dari alamat email yang kita masukan tadi) Dan klik Terima undangan. Dan kamu akan masuk ke halaman blogger sebagai penulis.
  7. Sekarang, silakan logout dari blogger.

Merubah penulis menjadi admin blog

  1. Dan login ke blog dengan akun g'mail lama.
  2. Buka bagian setelan, maka akan ada 2 email, email lama sebagai admin, email baru sebagai penulis.
  3. cara mengganti email blog
  4. Untuk mendapatkan akses keseluruhan blog. Maka email baru kita harus ubah dari penulis menjadi Admin. Seperti gambar dibawah ini.
  5. cara mengganti email blog
  6. Setelah selesai. maka akan ada 2 Admin dalam satu blog. Sekarang hapus email lama dengan klik tanda X di email lama seperti gambar diatas. Selesai.
Sekarang untuk masuk ke Blog, kamu harus menggunakan Akun Gmail dari alamat email yang baru. Sedangkan Akun Gmail dari email lama tidak bisa lagi masuk dan menggunakan blog tersebut.
Jika ingin Akun Gmail dari email lama masih bisa menggunakan blog tersebut, biarkan saja blog menjadi 2 admin, atau email lama ubah menjadi penulis. Maka kita bisa masuk ke satu blog, menggunakan 2 alamat Akun Gmail. Semoga Bermanfaat.
Baca Selengkapnya >>>

Cara Menghilangkan Sidebar Blog Pada Posting Tertentu

Cara menghilangkan sidebar blog pada posting tertentu. Menghilangkan bukan berarti menghapus. Sidebar hanya disembunyikan dari halaman tertentu. Dengan tujuan agar posting suatu halaman terlihat rapi dan bersih dari Widget atau Gadget yang berada di kanan atau kiri posting blog. Sebagai contoh kalian bisa lihat menu  About,  dan Contact dari blog ini. Dengan menghilangkan Sidebar, dapat juga mempercepat loading blog untuk di akses.
cara menghilangkan sidebar blog pada posting tertentu
Ada 2 cara yang berbeda yang akan saya jelaskan, yang pertama adalah menyembunyikan sidebar dengan lebar posting sampai ke samping, hampir seluruh ukuran web digunakan untuk posting. Dan yang kedua adalah menyembunyikan sidebar dengan lebar yang masih sama seperti ketika ada Widget/Gadget dikanan-kiri posting, contohnya lihat about di blog ini. Silahkan pilih kedua cara tersebut, sesuaikan dengan fungsinya, jika ingin dibuat lebih lebar,  maka pilih cara yang pertama, sidebar disembunyikan, dan lebarnya sampai kesamping. Untuk cara membuat sidebar menghilang dari posting tertentu. Ikuti langkah-langkah dibawah ini.

 Cara menyembunyikan sidebar yang Pertama

  1. Login ke blogger. 
  2. Dari dasbor pilih menu template dan klik edit HTML.
  3. Dan Cari kode </head> (Gunakan Ctrl F) dan letakkan kode berikut diatas </head>
  4. <b:if cond='data:blog.url == "http://pengguna-komputer.blogspot.com/"'>
    <style type='text/css'>
    .main-inner .columns {
    padding-left: 0px;
    padding-right: 0px;
    }
    .main-inner .column-left-outer {
    display: none;
    }
    .main-inner .column-right-outer {
    display: none;
    }
    </style>
    </b:if>
  5. Keterangan: Ganti kode biru dengan url dari posting kamu yang ingin dihilangkan sidebarnya.
  6. Kode Merah diatas gunanya untuk menyembunyikan sidebar bagian kiri. Dan Kode Hijau itu untuk menyembunyikan sidebar bagian kanan. Jadi kalian bisa atur sidebar yang mau disembunyikan, yang kanan atau yang kiri, atau kedua-duanya di sembunyikan. Berikut: Contoh susunan kode kanan dan kiri.
  7. Untuk yang Kanan. 
    <b:if cond='data:blog.url == "http://pengguna-komputer.blogspot.com/"'>
    <style type='text/css'>
    .main-inner .columns {padding-right: 0px;}
    .main-inner .column-right-outer {display: none;}
    </style>
    </b:if>

    Untuk yang Kiri.
    <b:if cond='data:blog.url == "http://pengguna-komputer.blogspot.com/"'>
    <style type='text/css'>
    .main-inner .columns {padding-left: 0px;}
    .main-inner .column-left-outer {display: none;}
    </style>
    </b:if>
  8. Atur sesuai keinginan kamu, Terakhir Save template, dan lihat hasilnya. Selesai.

Cara menyembunyikan sidebar yang kedua

  1. Cara menyembunyikan sidebar yang kedua, seperti halaman about dan contact di blog ini. Cara ini sedikit lebih simpel jika dibandingkan dengan cara yang pertama.
  2. Caranya klik Edit HTML dan Cari kode <head> dan tempatkan kode berikut diatas <head>
  3. <b:if cond='data:blog.url == "http://pengguna-komputer.blogspot.com/p/var-servicedomainwww.html"'>
    <style type='text/css'>
    .sidebar{
    display: none;
    }
    </style>
    </b:if>
  4. Keterangan: Ganti kode Merah  dengan url posting yang akan kamu sembunyikan. .sidebar{
    display: none; } itu artinya kiri-kanan sidebar disembunyikan. tapi lebarnya posting tetap sama, tidak berubah.
  5. Terakhir Save dan lihat hasilnya, Selesai. Semoga Bermanfaat.
Baca Selengkapnya >>>

Cara Membuat Label atau Kategori di Blog

Cara Membuat Label atau Kategori di Blog. Label atau kategori di blog yang berarti mengelompokan jenis artikel berdasarkan pembahasan yang berkaitan antara satu dan lainnya. Misalnya kita punya 3 artikel dengan judul ayam jantan, ayam hias dan ayam kampung, maka dari ketiga judul tersebut kita kelompokan menjadi satu jenis, yaitu ketegori ayam. Jadi ketika orang buka label/kategori ayam, maka ketiga judul tersebut akan tampil dalam satu halaman.

Itulah sedikit penjelasan apa yang dimaksud dengan label atau kategori. Untuk lebih jelasnya bisa kalian lihat di Kategori sebelah kiri blog ini. Klik salah satu kategori, maka akan terbuka halaman baru, dengan isi semua artikel yang kategorinya sama. Untuk lebih jelasnya. Cara membuat label atau kategori di blog.
Ikuti langkah-langkah dibawah ini.
  1. Buatlah 3 entri baru atau edit 3 artikel lama kamu.
  2. Dan dibagian Setelan Entri(sebelah kanan entri) Klik Label dan beri label dengan nama Tutorial Blog dan klik Selesai. Tulis ketiga artikel kamu dengan nama label yang sama Tutorial Blog. Lihat gambar dibawah untuk lebih jelasnya.
  3. cara membuat label atau kategori di blog
  4. Setelah Selesai memberi nama label. Buka pengaturan Tata Letak.
  5. Klik Tambahkan Gadget atau add gadget.Dan cari Label seperti gambar dibawah ini.
  6. cara membuat label atau kategori di blog
  7.  Klik Tanda + di sebelah kanan Label gambar diatas dan beri judul label atau kategori, dan klik Simpan. seperti gambar dibawah ini.
  8. cara membuat label atau kategori di blog
  9. Contoh tampilan kategori atau label di blog lihat gambar dibawah ini.
  10. cara membuat label atau kategori di blog
  11. Letakan label/kategori sesuai dengan yang kamu inginkan. dan Lihat hasilnya.Widget degan nama kategori/label sudah ada di blog kamu. Selesai.
Dengan adanya label, maka kita dapat dengan mudah membagi setiap artikel menjadi beberapa nama kelompok artikel yang sesuai dengan yang kita inginkan. Dalam satu artikel, kita juga bisa membuatnya menjadi 2 label atau lebih. Jadi tidak harus menempatkan satu artikel kedalam satu kategori. Tapi bisa kebanyak kategori

Jika nanti label/kategori kamu sudah banyak, tambahkan fungsi scroll agar tidak banyak menghabiskan tempat. Jika ingin memberi warna background pada judul kategori, dan lain-lainnya.  Baca Disini. Semoga Bermanfaat.
Baca Selengkapnya >>>

Cara Mempercepat Loading Blog

Cara Mempercepat Loading Blog. Loading blog yang berarti pemuatan blog, maksudnya adalah membuka akses suatu halaman blog dengan kecepatan yang tergantung dari cepatnya akses internet dan isi dari halaman blog. Kedua faktor tersebut sangat mempengaruhi lama atau tidaknya waktu yang dibutuhkan untuk membuka suatu halaman blog.

Ketika akses internet sudah cepat tapi masih juga lambat membuka suatu halaman blog, itu berarti blog yang sedang dikunjungi mempunyai banyak isi sehingga memberatkan loading blog, entah itu widget, kode html, ataupun iklan-iklan yang berserakan. Cara mempercepat loading blog agar lebih mudah untuk diakses. Ikuti langkah-langkah dibawah ini.Cara yang pertama adalah:
  1. Menghapus atau menempatkan Widget/gadget yang berat dibagian bawah blog(Footer) Seperti Translate, Jam di blog, kalender dan lain-lain.
  2. Dan yang kedua adalah memasang Fungsi Scroll di Arsip blog, Populer Posts, atau Label/kategori agar tidak banyak memakan tempat. 
  3. Ketiga adalah mempersingkat tampilan halaman posting menggunakan Read More dan membatasi jumlah tampilan artikel di awal blog, Cukup 4 sampai 5 posting saja.
  4. Terakhir, Dengan mengcompress html blog.

Cara mengcompress HTML blog

  1. Login ke blog dan klik pengaturan template. Cadangkan template dulu(untuk jaga-jaga).
  2. Klik edit HTML. Dan copy semua kode yang ada ditemplate.
  3. Selanjutnya, Kunjungi situs http://htmlcompressor.com/compressor.html
  4. Paste kan kode yang di copy tadi ke situs diatas, dan klik Compress.
  5. Selanjutnya akan ada Pemberitahuan seperti dibawah ini.
  6. cara mempercepat loading blog
  7. Klik Change, maka situs compress akan menyesuaikan dengan template blog, tanpa merusak fungsi-fungsi blog yang ada.
  8. Selanjutnya tunggu sampai proses compress selesai. Setelah selesai. Copy semua kode hasil compress dari http://htmlcompressor.com/compressor.html dan Paste kan di edit HTML blog tadi. Dan save template. Selesai.

Atau Download hasil Compress, dan unggah ke blog.

cara mempercepat loading blog

Dari gambar diatas, hasil compressnya hanya sedikit, karena memang sudah 2 kali template yang saya gunakan sebagai contoh ini, di compress. Pertama kali dikompress, dari 110kb an bisa jadi 90kb, lumayan banyak compress nya untuk template asli blogger. Dan itu sangat membantu untuk mempercepat loading blog saya.
Mempercepat loading blog merupakan salah satu cara untuk meningkatkan seo blog. Karena semakin cepat blog, maka akan semakin mudah pengunjung untuk membuka halaman dari blog. Semoga Bermanfaat. Semoga Bermanfaat.
Baca Selengkapnya >>>

Cara Membuat Breadcrumb di Blog

Breadcrumb adalah salah satu alat navigasi blog, yang berfungsi untuk menampilkan lokasi artikel yang sedang dibaca. Breadcrumb biasanya terletak diatas artikel, dibawah header atau dibawah menu horizontal. Bentuk breadcrumb sendiri biasanya seperti ini, Judul Blog >> Label/Kategori >> Judul Posting. Dari susunan katanya saja, kita sudah dapat mengetahui bahwa artikel yang sedang dibaca, berada di label/kategori a, dari awal halaman blog.

Dan itu sangat memudahkan pengunjung untuk melihat judul posting yang lain, yang berada di label/kategori yang sama. Ketika pengunjung klik Label/kategori di Breadcrumb, maka akan terbuka halaman baru yang berisi artikel dengan Label/kategori yang sama. Begitu juga jika yang di klik adalah judul blog, maka akan terbuka halaman awal dari blog. Contoh gambar Breadcrumb dibawah ini atau lihat diatas judul artikel ini.

cara membuat breadcrumb di blog

Cara membuat Breadcrumb di blog. Ikuti langkah-langkah dibawah ini.
  1. Login ke Blog dan klik pengaturan template. Back up dulu template kamu(jaga2).
  2. Klik Edit HTML dan cari kode ]]></b:skin> (gunakan Ctrl F untuk memudah kan pencarian) dan tempatkan kode dibawah ini, diatas ]]></b:skin> .
  3. .breadcrumbs{
    padding:5px 5px 5px 0;
    margin:0;
    font-size: 90%;
    line-height:1.4em;
    border-bottom:1px dotted #666666;
    }
  4. Keterangan: border-bottom:1px adalah garis bawah setelah breadcrumb. dan dotted #666666; adalah bentuk dan warna garis bawah Breadcrumb. Dotted = bentuknya Titik(...) bisa diganti dengan Solid( ___ ) atau Double (=).
  5. Selanjutnya, Cari kode <b:includable id='post' var='post'> lengkapnya kira-kira seperti dibawah ini.
  6. <b:includable id='post' var='post'>...</b: includable>
  7. Klik tanda >...< maka kodenya menjadi seperti dibawah ini.
  8. <b:includable id='post' var='post'>
      <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
        <b:if cond='data:post.firstImageUrl'>
          <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
        </b:if>
  9. Sekarang Tempatkan kode berikut dibawah <b:includable id='post' var='post'> 
  10. <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='breadcrumbs'>
    <a expr:href='data:blog.homepageUrl'>Pengguna Komputer</a> &gt;&gt;
    <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
    </b:loop>
    </b:if> &gt;&gt; <data:post.title/>
    </div>
    </b:if>
    </b:if>
  11. Keterangan: Pengguna Komputer bisa diganti dengan Home atau nama halaman blog kamu. &gt;&gt; itu bentuk tanda >> setelah judul. 
  12. Sekarang save template kamu, dan buka salah satu artikel. Breadcrumb sudah jadi, Selesai.

Update: Cara Buat Breadcrumb yang terindeks Google. 

Google Breadcrumb for Blogger
Sebelum menggunakan cara ini, hapus dulu breadcrumb yang sudah terpasang di template kamu. Selanjutnya.
  1. Login ke Blogger. Ke pengaturan Template.
  2. Edit HTML dan cari kode <b:include data='top' name='status-message'/>
  3. Selanjutnya masukan kode <b:include data='posts' name='breadcrumb'/> diatasnya.
  4. Sekarang cari <b:includable id='main' var='top'> dan masukan kode berikut ini diatasnya.
  5. <b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == "static_page"'>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
    <b:else/>
    <b:if cond='data:blog.pageType == "item"'>
    <!-- breadcrumb for the post page -->
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
    <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
    <b:loop values='data:post.labels' var='label'>
     » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
    </b:loop>
     » <span><data:post.title/></span>
    </div>
    <b:else/>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
    </b:if>
    </b:loop>
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <div class='breadcrumbs'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
    </div>
    <b:else/>
    <b:if cond='data:blog.pageType == "index"'>
    <div class='breadcrumbs'>
    <b:if cond='data:blog.pageName == ""'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
    <b:else/>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
    </b:if>
    </div>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>
  6. Selanjutnya, Save template. Dan buka salah satu postingan kamu. Copy alamat URL nya. 
  7. Dan pastekan di http://www.google.com/webmasters/tools/richsnippets
  8. Untuk mengecek breadcrumb sudah di indeks google atau belum. Jika sudah, maka tampilanya akan seperti gambar diatas. Semoga Bermanfaat.
Baca Selengkapnya >>>

Cara Membuat Tulisan Bayangan Pada Judul Blog

Cara membuat tulisan bayangan pada judul blog. Sebenarnya tidak hanya dijudul blog yang bisa diberi tulisan bayangan, tapi semua tulisan yang ada di blog juga bisa kita beri tulisan bayangan. Tapi yang harus kita ketahui terlebih dahulu adalah kode html pada bagian-bagian blog, setelah ketemu dengan kodenya baru bisa kita beri tulisan bayangan.

Kali ini akan saya bagi cara membuat tulisan bayangan di judul blog dan juga deskripsi blog. Untuk contohnya bisa kalian lihat dibagian judul dan deskripsi blog ini atau gambar dibawah ini. Text bayangan yang saya gunakan itu hanya sedikit. Agar tidak berlebihan, tapi kalian bisa nanti menggunakan text bayangan sesuai dengan yang kalian inginkan. Untuk cara membuat tulisan bayangan di blog.
cara membuat tulisan bayangan pada judul blog

Ikuti langkah-langkah dibawah ini.

Text Bayangan di Judul Blog

  1. Login ke blog, dan ke pengaturan Template
  2. Klik edit HTML, dan cari kode .Header h1 { lengkapnya seperti dibawah ini.
  3. .Header h1 {
      font: $(header.font);
      color: $(header.text.color);
      text-shadow: 0 0 $(title.shadow.spread) #000000;
    }
  4. Setelah ketemu dengan kode diatas maka tambahkan kode text-shadow: 2px 2px 5px #800000; Jadi kode lengkapnya seperti dibawah ini.
  5. .Header h1 {
      font: $(header.font);
      color: $(header.text.color);
      text-shadow: 2px 2px 5px #800000;
    }
  6. Sekarang coba dipreview/pratinjau dulu template kamu, dan lihat sudah ada text bayangan belum judul blog kamu. Jika sudah berubah baru Di save.
  7. text-shadow: 2px 2px 5px ini adalah horizontal dan vertikal dari text bayangannya. dan #800000; adalah warna dari text bayangan. Silakan diganti sesuai dengan yang kalian inginkan.
  8. Untuk lebih jelasnya, kalian bisa atur text bayangan sesuai dengan yang kalian inginkan disini http://www.cssportal.com/css3-text-shadow-generator/

Text Bayangan di Deskripsi Blog

  1. Login ke blog, dan ke pengaturan Template
  2. Klik edit HTML, dan cari kode .Header .description { lengkapnya seperti dibawah ini.
  3. .Header .description {
      font: $(description.font);
      color: $(description.text.color);
    }
  4. Sama seperti diatas, tambahkan kode text-shadow: 2px 2px 5px #800000; lengkapnya.

  5. .Header .description {
      font: $(description.font);
      color: $(description.text.color);
    text-shadow: 2px 2px 5px #800000;
    }
  6. Silakan di preview/pratinjau untuk melihat perubahannya. Setelah berubah baru save.
Atau cara cepatnya, letakan diatas ]]></b:skin> kode2 diatas. contoh:
  1. logn ke blogger, dari halaman dasbor pilih pengaturan template.
  2. trus klik edit html dan cari kode ]]></b:skin>
  3. dan letakan kode berikut diatas ]]></b:skin>
  4. .Header h1 {

      font: $(header.font);

      color: $(header.text.color);

      text-shadow: 2px 2px 5px #800000;

    }

    .Header .description {

      font: $(description.font);

      color: $(description.text.color);

    text-shadow: 2px 2px 5px #800000;

    }
  5. Save template selesai.
contoh gambar penempatan kode diatas ]]></b:skin>, 

cara membuat tulisan bayangan pada judul blog

  1. Untuk mempermudah edit text bayangan seperti yang kalian inginkan, silakan kunjungi situs ini http://www.cssportal.com/css3-text-shadow-generator/
  2. Selesai. Silakan dibaca juga cara-cara menghias blog yang lain, seperti Cara membuat tombol share facebook, twitter dan cara memberi warna background pada judul posting blog atau cara mengganti tulisan home next  previous di blog. Semoga Bermanfaat.
Baca Selengkapnya >>>

Cara Memberi Warna Background Judul Posting Blog

Satu lagi cara agar tampilan blog lebih menarik yaitu dengan memberi warna pada background judul posting blog. Dengan memberikan warna background di judul posting, maka akan mempermudah pengunjung untuk melihat judul artikel apa yang sedang pengunjung baca.

cara memberi warna background judul posting

Dan juga tidak membuat pengunjung menjadi bosan, dengan tampilan huruf yang biasa-biasa saja, yang terkadang hampir sama tampilannya antara judul dengan isi artikel, yang membedakan hanya besar kecil huruf, ataupun ketebalan huruf. Silakan lihat tulisan dibawah ini untuk contoh judul posting dengan garis bawah atau lihat judul dari artikel yang sedang anda baca ini.

Cara Memberi Warna Background Judul Posting Blog

Ikuti langkah-langkah dibawah ini.
  1. Login ke blog dan pilih pengaturan template
  2. Klik Edit HTML dan cari kode h3.post-title, h4 { atau h3.post-title saja, gunakan Ctrl f untuk memudahkan pencarian. kode lengkapnya seperti dibawah ini.
  3. h3.post-title, h4 {
      font: $(post.title.font);
      color: $(post.title.text.color);
    }
  4. Jika sudah menemukan kode seperti diatas. Tambahkan kode ini dibawah nya.
  5. background:#0a58a3;
    border-bottom:4px solid #1780dd;
    padding:6px 15px 4px;
  6. Jadi kode lengkpnya seperti ini.
  7. h3.post-title, h4 {
      font: $(post.title.font);
      color: $(post.title.text.color);
    background:#0a58a3;
    border-bottom:4px solid #1780dd;
    padding:6px 15px 4px;
    }
  8. Keterangan:
  9. background:#0a58a3;  warna background, ganti #0a58a3; dengan warna yang kamu inginkan
    border-bottom:4px solid #1780dd;  ini warna garis bawah
    padding:6px 15px 4px; ini fungsinya untuk meratakan atas bawah huruf judul posting.
  10. Silakan diubah sesuai dengan keinginan kalian, untuk padding, Jika tidak salah, 6px itu untuk jarak huruf dengan batas posting atas, 15px  untuk kanan, 4px untuk kiri. Silakan coba diganti agar sesuai dengan posting kalian.
  11. Setelah selesai, dipreview dulu, jika sudah berubah warna background judul posting kamu, baru disave. Selesai.
Efek dari h3.post-title, h4 { itu akan mengganti warna background judul posting dan juga tulisan poskan komentar/tidak ada komentar di atas kotak komentar blog.
Satu lagi efek dari h3.post-title, h4 {  tulisan yang berada ditengah posting ini, yang bergaris bawah adalah kalimat yang diubah formatnya menjadi heading saat menulis artikel ini, hasilnya menjadi seperti itu. Jika ingin mengganti background judul posting saja. Ikuti langkah-langkah dibawah ini.
  1. Cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin>
  2. h3.post-title{
            padding:4px 2px 2px;
            border-bottom:1px dotted #28b;
    }
  3. Save Template, Selesai.
Baca juga cara mengganti warna judul sidebar blog, maksudnya judul widget di kiri kanan blog, seperti arsip, populer post, dll. Jika ingin memasang tombol share dibawah posting blog, baca cara membuat tombol share  facebook, twitter dan google +. Semoga Bermanfaat.
Baca Selengkapnya >>>

Cara Merubah Ukuran Kotak Komentar Blog

Cara Merubah Ukuran Kotak Komentar Blog. Kotak komentar, sesuai dengan namanya kotak komentar berfungsi sebagai suatu wadah tempat untuk mengirimkan pertanyaan atau komentar dari suatu halaman artikel blog. Blogger sudah menyediakan kotak komentar dibawah posting blog. Secara default form kotak komentar blog kadang tidak sesuai dengan lebar posting blog. Terlalu lebar atau terlalu kecil dari lebar blog. Atau juga mungkin kotak komentar terlalu tinggi dari yang kita inginkan.

Ada banyak cara untuk merubah tampilan blog agar sesuai dengan keinginan kita, salah satunya mengatur ukuran kotak komentar. Blogger sudah menyediakan kotak komentar dibawah posting blog. Secara default form kotak komentar blog kadang tidak sesuai dengan lebar posting blog. Terlalu lebar atau terlalu kecil dari lebar blog. Atau juga mungkin kotak komentar terlalu tinggi dari yang kita inginkan. Dan kali ini saya akan mencoba untuk berbagi " Cara merubah ukuran kotak komentar blog" sesuai dengan yang kita inginkan.
Cara merubah ukuran kotak komentar blog

Ikuti langkah-langkah dibawah ini.
  1. Login Blog. Dari halaman dasbor, klik pengaturan template.
  2. Terus klik edit html dan cari kode <iframe allowtransparency='true' lengkapnya seperti dibawah ini.
  3. <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
  4. Silakan Ganti width='100%' untuk lebar dan height='410' untuk tinggi kotak komentar.
  5. Secara default, "ada 6 kode yang sama" dengan <iframe allowtransparency='true' , ganti 4 kode yang mirip dengan kode lengkap diatas.
  6. Terakhir save. Dan buka salah satu artikel. Lihat ukuran kotak komentar apakah sudah berubah atau belum. Jika belum silakan diperiksa 4 kode yang harus diganti, mungkin masih ada yang belum diganti. Selesai.
Sekarang coba periksa halaman blog yang sudah ada komentarnya. Karena ukuran kotak komentar blog berbeda antara kotak komentar kosong dengan yang ada komentarnya. Kotak komentar yang sudah berisi komentar, biasanya lebih lebar dari ukuran semula ketika kotak komentar kosong. 
Maka ada baiknya untuk mengubah ukuran kotak komentar. Gunakan kotak komentar yang sudah berisi untuk dijadikan contoh preview atau pratinjau blog.

Baca juga cara membuat tombol facebook, twitter dibawah posting blog. agar terlihat lebih menarik. Dan juga cara mengganti tulisan home next previous diblog. dengan tulisan sendiri atau dengan gambar yang kita inginkan. Semoga Bermanfaat.
Baca Selengkapnya >>>

Cara Membuat Tombol Share di Blog

Cara membuat Tombol Share di Blog. Tombol share sosial media memudahkan pengunjung untuk berbagi artikel yang dibaca, atau sekedar memberikan like dari artikel yang dibacanya. Seperti facebook, twitter, google +. Tombol share merupakan salah satu cara untuk mempromosikan blog kita ke banyak orang.

Dan dapat meningkatkan jumlah pengunjung blog, semakin banyak yang share, maka akan semakin banyak kemungkinan orang yang akan mengunjungi blog. Tombol share yang akan kita buat ini akan ditempatkan di bawah posting blog. Jadi setelah pengunjung membaca sebuah artikel, pengunjung akan melihat tombol share untuk berbagi. Untuk melihat contohnya silakan lihat tombol share di bagian bawah artikel ini.
Cara membuat tombol share di blog. Ikuti langkah-langkah dibawah ini:
  1. Kunjungi situs www.sharethis.com. dan pilih get the button.
  2. Step 1 pilih Blogger dan Klik Next Step 2.
  3. Step 2 Pilih style Buttons yang kalian inginkan. dan klik next step 3.
  4. Step 3, atur tombol share apa saja yang akan kalian masukan ke blog. 
  5. Dan klik Finish get the code dan isi pembuatan account dengan email dan password untuk masuk ke sharethis.com. 
    cara membuat tombol share di blog
  6. Setelah pembuatan account selesai, maka akan terbuka halaman import elemen laman, seperti gambar dibawah ini.
    cara membuat tombol share di blog
  7. Klik Menambah Widget. Selanjutnya di tata letak blog kamu akan ada widget ShareThis. Pindahkan widget ShareThis ke bagian bawah(footer) blog dan save.
  8. Sampai disini, pembuatan tombol share sudah selesai, silakan lihat blog kamu. Tombol share sudah tampil dibawah posting Blog. Tapi juga terlihat di halaman awal blog.cara membuat tombol share di blog

Tambahan: Untuk mengatur agar tombol share hanya terlihat di bawah posting blog.

  1. Buka pengaturan template, dan klik edit html.
  2. Cari kode sharethis gunakan Ctrl + F untuk mempermudah pencarian. Maka akan terdapat kode seperti dibawah ini.
  3. <b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>...</b:widget>
  4. Klik tanda >...< maka kode akan menjadi seperti ini.
  5. <b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
    <b:includable id='main'>...<b:includable>
    </b:widget>
  6. Klik lagi tanda >...< maka kode akan menjadi seperti ini.
  7. <b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
        <b:includable id='main'>
      <!-- only display title if it's non-empty -->
      <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'><data:title/></h2>
      </b:if>
      <div class='widget-content'>
        <data:content/>
      </div>

      <b:include name='quickedit'/>
    </b:includable>
      </b:widget>
  8. Selanjutnya masukan kode <b:if cond='data:blog.pageType == "item"'> dan </b:if>, jadi kode lengkapnya seperti ini.
  9. <b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
        <b:includable id='main'>
    <b:if cond='data:blog.pageType == "item"'>
      <!-- only display title if it's non-empty -->
      <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'><data:title/></h2>
      </b:if>
      <div class='widget-content'>
        <data:content/>
      </div>
    </b:if>
      <b:include name='quickedit'/>
    </b:includable>
    </b:widget>
  10. Preview dulu. Sudah hilang belum tombol share di halaman awal blog kamu. Jika sudah hilang seperti gambar dibawah ini. Baru di save/simpan template.cara membuat tombol share di blog
  11. Selanjutnya lihat blog kamu. dan klik salah satu artikel kamu dan lihat dibagian bawah artikel. tombol share sudah ada. dan hanya tampil disetiap artikel, tidak tampil di halaman awal blog. selesai. Semoga Bermanfaat.
Baca Selengkapnya >>>

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. Cara baru menghilangkan navbar blog cara baru menghilangkan navbar blog
  4. 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>
  3. #navbar, #navbar-iframe {
       height: 0px;
       visibility: hidden;
       display: none;
  4. Selanjutnya pratinjau template untuk melihat apakah navbar sudah disembunyikan atau belum. Jika sudah baru save template. Selesai.
  5. Fungsi dari kode diatas adalah menyembunyikan tampilan navbar dari halaman blog. Sehingga blog terlihat lebih rapi. 
  6. 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.
Baca Selengkapnya >>>