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. 
   
6. Setelah pembuatan account selesai, maka akan terbuka halaman import elemen laman, seperti gambar dibawah ini.
   
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.

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.
<b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>...</b:widget>
3. Klik tanda >...< maka kode akan menjadi seperti ini.
<b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
<b:includable id='main'>...<b:includable>
</b:widget>
4. Klik lagi tanda >...< maka kode akan menjadi seperti ini.
<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>
5. Selanjutnya masukan kode <b:if cond='data:blog.pageType == "item"'> dan </b:if>, jadi kode lengkapnya seperti ini.
<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>
6. Preview dulu. Sudah hilang belum tombol share di halaman awal blog kamu. Jika sudah hilang seperti gambar dibawah ini. Baru di save/simpan template.
7. 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.

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.

Cara mengganti tulisan home previous 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 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 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 adalah background 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 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>
.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 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 baru dan 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 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

Update Blogger 2014: Untuk menamplkan menu laman yang telah dibuat.

1. Ke pengaturan tata letak.
2. Selanjutnya klik tambahkan gadget.
3. Dan pilih LAMAN.
4. Simpan.

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