Cara Membuat Widget Komunitas Di Blogger Menggunakan Widget Generator

Halo sobat blogger semua. Pada postingan kali ini, saya menyiapkan sobat blogger sebuah tool atau generator yang dapat membuat sebuah widget komunitas. Widget komunitas adalah sebuah widget yang menampilkan FaceBook Like dan Follow Twitter yang muncul di bagian sisi bawah blog. Widget komunitas ini muncul ketika Scroll Bar media browser di tarik ke bawah. Untuk melihat demo-nya, klik tombol di bawah ini!

Demo Widget komunitas,pratinjau widget komunitas,demo,contoh

Bagaimana? Cantik bukan tampilan widget komunitas ini? Untuk memasangnya, sobat blogger tidak perlu edit template. Yang perlu sobat blogger lakukan hanya, membuat kode menggunakan alat atau generator yang ada di bawah ini.

Widget Komunitas,comunity Widget,widget generator,generator widget komunitas,cara membuat widget komunitas di blog

Cara menggunakan Generator Widget Komunitas
  1. Pilih Warna Widget : Tentukan warna widget komunitas dengan cara meng-klik tombol yang terdapat disampingnya.
  2. Kostumisasi : Kolom pertama diisi dengan nama akun FB dan kolom kedua dengan nama akun Twitter. Untuk posisi widget, gunakan arah panah yang tersedia untuk merubahnya (Left = Kiri dan Right = Kanan).
  3. Aplikasi Tombol : Untuk mendapatkan kode widget komunitas klik tombol "Dapatkan kode". Untuk membuat ulang widget komunitas, tekan tombol "Reset"
  4. Kode Widget : Ketika sobat blogger meng-klik tombol "Dapatkan Kode", secara otomatis kode akan muncul di kolom yang tersedia. Sobat tinggal copy paste kode yang di peroleh ke blog sobat.




Cara memasukkan kode Widget Komunitas ke Blogger
  1. Masuk ke blogger.com
  2. Pada menu drop down, pilih Layout (Tata Letak)
  3. HTML/JavaSript,html,javascript,widget blogspot
  4. Klik Add a Gadget (Tambahkan gadget)
  5. Pilih HTML/JavaScript
  6. Cara menambahkan widget ke blog,cara memasukkan kode ke blogger
  7. Masukkan kode yang diperoleh lalu klik tombol Save

Picasa Redirect ke Google Plus Foto

Saat ini Google berusaha keras untuk meyakinkan pengguna Album Web Picasa untuk berpindah ke Google+ Foto. URL http://picasaweb.google.com tidak lagi membawa kita ke Picasa Web Album melainkan mengarahkan kita ke laman Foto Google+. April lalu, Google menonaktifkan Picasa Web Album Uploader untuk Mac dan Picasa Web Album Plugin untuk iPhoto. Apakah untuk kedepannya, Google akan menonaktifkan Picasa untuk semua kategori? Belum ada penjelasan untuk semua ini.

picasa,picasa redirect,cara mengunjungi laman picasa,picasa google+,foto google

Bagaimana cara mengunjungi laman Picasa Web Album?
Bagi Pengguna Picasa yang ingin tetap menggunakan Album Web Picasa, dapat mengakses situs yang lama dengan menggunakan URL https://picasaweb.google.com/lh/myphotos?noredirect=1 . Ketika kita mengunjungi URL tersebut, Google akan menyimpan cookie ke browser kita sehingga untuk kedepannya kita tidak akan diarahkan lagi ke laman Foto Google+.

Cara Menghapus Navbar Blog Secara Permanent

Ada banyak hal yang harus dirubah atau diedit ketika kita menggunakan template default blogger. Salah satunya adalah menghilangkan penampakan yang ada di atas blog (Maksud saya, menghilangkan Navbar). Sembilan dari 10 blogger, bisa dipastikan menggunakan template tanpa Navbar. Do you know, why? Karena Navbar mempunyai tampilan yang tidak bagus walaupun terdapat banyak fitur yang bermamfaat di dalam Navbar itu sendiri.

Google beberapa bulan yang lalu sudah memberikan kemudahan kepada blogger untuk menghilangkan Navbar yaitu dengan menambahkan fungsi "Off" pada navbar (Silahkan baca bagaimana penggunaannya disini). Sekarang, yang mau saya share ke sobat blogger adalah bagaimana cara menghapus navbar secara permanent di blog.
  1. Login ke blogger
  2. Pilih template dan backup template sobat (Bagaimana cara backup template, baca disini).
  3. Klik tombol "Edit HTML"
  4. Gunakan menu drop down "Lompat ke Widget" dan Pilih Navbar1 (Kita akan langsung diarahkan pada kode HTML navbar). Perhatikan Gambar!
  5. html editor,template editor,cara menghapus navbar blogger secara permanent
  6. Disebelah kode navbar, terdapat tanda panah. Jangan tekan tanda panah itu. Block saja kode itu dari arah kanan ke kiri lalu di hapus.
  7. Pratinjau template sobat terlebih dahulu sebelum di simpan.

Kalau langkah-langkah di atas sudah dijalankan, silahkan menuju laman layout blogger. Sobat tidak akan menemukan elemen navbar lagi seperti gambar di bawah ini.
Layout blogger,tata letak,cara menghilangkan navbar

Cara disable atau menonaktifkan AntiVirus Defender pada windows 8

Salah satu alasan kenapa pengguna komputer banyak yang beralih dari Operating System yang lain ke Windows 8 adalah "Adanya AntiVirus Defender Full Version yang terdapat di dalamnya". Seperti yang kita ketahui, Defender merupakan salah satu AntiVirus terbaik di dunia selain Kaspersky, Avast, dan Avira. AntiVirus bawaan windows 8 ini dapat digunakan oleh pengguna windows 8 sepanjang waktu (All time) sacara gratis.

AntiVirus Full Version,Defender Full Version,disable AntiVirus,AntiVirus,cara disable defender,cara menonaktifkan defender,antivirus windows 8,windows 8 security system

Bagi sebagian kecil pengguna komputer, keberadaan AntiVirus sangat menggangu karena keberadaanya membuat loading komputer lambat dan keberadaannya membuat beberapa aplikasi tidak bisa berjalan dengan semestinya, sehingga mereka lebih memilih untuk tidak memasang AntiVirus pada komputer atau laptop yang dimilikinya. Menginstall atau menguninstall AntiVirus sangat mudah dilakukan. Tapi yang jadi pertanyaan sekarang, bagaimana cara menonaktifkan atau menguninstall AntiVirus Defender bawaan windows 8? karena Antivirus ini tidak terlihat di Installed Program di Control Panel. Kalau itu adalah masalah yang Anda pikirkan, tidak perlu pusing lagi karena video di bawah ini akan menjelaskan Anda tentang bagaimana cara disable AntiVirus Defender pada Windows 8. Check it out...!!!

Cara Menghilangkan Judul dan Deskripsi Blog

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

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

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

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

Menambahkan Garis Di Sidebar Blog Sebagai Pemisah

Tutorial ini menunjukkan kepada Anda tentang bagaimana menambahkan atau menyisipkan garis di antara satu widget dengan widget yang lainnya. Garis ini nanti akan berfungsi sebagai pemisah widget yang tentunya dapat memperindah sidebar blog Anda. Untuk menjalankan tutorial ini, Anda tidak akan kebingungan karena Anda tidak akan mengobrak abrik kode Template Anda (Kok bisa Sich..!!!). Karena kita akan melakukannya melalui "Perancang Template Blogger". Follow me!

Garis Sidebar,garis pembatas,garis pemisah,garis,garis widget,pembatas widget,cara buat garis di sidebar,label blog,entri populer

Memasang Garis Pemisah Di Antara Widget Blogger
  • Masuk menggunakan akun blogger Anda di blogger.com
  • Pilih Template dan Klik tombol "Sesuaikan"
  • Klik "Tingkat Lanjut" dan "Tambahkan CSS"
  • Paste kode berikut di kolom yang tersedia
.sidebar .widget {
border-bottom: 1px solid #474747;
}
  • Lihat Live Preview yang ada di bawahnya. Jika sukses, klik tombol "Terapkan ke blog"

Tambahan :
  1. Angka 1 adalah ketebalan Garis, rubah saja sesuai yang diharapkan
  2. #474747 adalah kode warna. Bisa dirubah sesuai selera Anda. Untuk melihat kode warna, klik disini.

10 Bingkai / Border Untuk Menghias Gambar Blog

Jika kita menambahkan border atau bingkai pada gambar blog kita, maka posting kita akan terlihat lebih rapi dan gambar blog menjadi lebih cantik. Oleh sebab itu, saya menyiapkan sobat blogger 10 kode CSS yang digunakan untuk membuat bingkai pada gambar blog. Sobat blogger dapat mengkostumisasi kode CSS ini sesuai dengan harapan sobat. Posting yang sobat blogger baca ini berbanding terbalik dengan posting sebelumnya yaitu "Cara Menghilangkan Bingkai, Border Atau Bayang Pada Gambar Blog". Tapi sudahlah, jangan dipikirkan. Bagaimana cara menerapkan kode CSS ini pada template blogger? Gampang sekali, sobat blogger hanya meletakkan satu dari 10 kode CSS berikut di atas kode ]]></b:skin>

Berikut ini kode CSS beserta screenshot hasil kode setelah diterapkan :

Border Gambar

1. Kode 1
.post-body img{
border: 1px solid #4C3C1B;
padding: 5px;
width: 300px;
background-color: #EFEECB;
}

Bingkai Gambar

2. Kode 2
.post-body img{
border: 1px solid #666666;
padding: 10px 10px 60px 10px;
}

Bingkai Foto

3. Kode 3
.post-body img{
border-style: double;
padding: 16px;
background-color: #DCDCED;
}

Border Foto

4. Kode 4
.post-body img{
border-top-width: 4px;
border-bottom-width: 4px;
border-top-style: double;
border-bottom-style: double;
border-top-color: #E1A60A;
border-bottom-color: #E1A60A;
padding: 8px 0px;
}

Border Cantik

5. kode 5
.post-body img{
border: 10px dotted #29C3FF;
margin: 0;
padding: 0;
}

Border biru

6. Kode 6
.post-body img{
width: 300px;
padding: 0px 6px 6px 0px;
background-color: #9FB2C1;
border-top-width: 2px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 2px;
border-style: solid;
border-color: #082F70;
}

Cara Buat Border

7. Kode 7
.post-body img{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3gETB3j3WrCm3GCrsyNXWo94z_R7PhX1sQvxnuKQGAYUG9oERN7sSh7C6Canytxs7LHdHRtO66O9MZQzZ_PfuV6NW1yX5m_ZjpgHrMx3BIduuPdbpMhjrjkY3aldGfQnSijVpXyPeDOU/s400/image-background.png) repeat scroll 0 0 transparent;
padding:7px;
border:1px solid #cecece;
-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB;
}

border keren

8. Kode 8
.post-body img{
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Bingkai merah pink

9. Kode 9
.post-body img{
color: #000;
font-weight: bold;
background-color: #f99;
border: 3px solid #c00;
}

Bingkai Sederhana

10. Kode 10
.post-body img{
border-style: dotted;
}

Bagi sobat blogger yang ingin mengcopy paste tutorial ini, jangan lupa mencantumkan URL blog ini sebagai sumber artikel. Blogger yang baik adalah blogger yang saling menghargai setiap karya dari temannya. Terima kasih untuk pengertiannya!