Mengganti Dan Menghilangkan Tulisan Diposkan Oleh

Tulisan " diposkan oleh, bagi ke facebook " dan lainnya yang berada di bawah posting (post footer ) dapat diganti, dihilangkan atau di atur agar lebih menarik.

Penggantian atau pengaturan yang dapat dilakukan terhadap " tulisan di bawah posting " atau post-footer diantaranya adalah merubah jenis ukuran warna dan besarnya huruf, background, warna link dan border ( garis batas ).

Berikut langkah - langkah mengganti, menghilangkan dan mengatur  tulisan " diposkan oleh " atau yang biasa disebut post footer:

Langkah 1:
Login ke blogger.com  >>> Opsi Lainnya >>> Template >>> Edit Template.

Langkah 2:
Letakkan kode dibawah ini di atas kode  ]]></b:skin> :

.post-footer{display:yes;font-color:#098a28;font-family:forte;font-size:14px;border:2px #f68307 solid;background:#f8f6bb} a:link{color:#111010} a:hover{color:#ee0e2e} a:visited{color:#0b9712}

Penjelasan kode Css:
display: yes [berarti post footer ditampilkan. Ganti dengan none untuk menyembunyikan.]
font-color, family, size [menunjukkan warna huruf, jenis atau model huruf dan ukuran uruf]
border 2px menunjukkan ketebalan garis batas dan solid adalah garis batas normal.
background untuk menentukan latar berupa warna atau gambar tertentu.
a:link : warna link, a:hover: warna link saat dikunjungi, a:visited: warna link setelah dikunjungi.
Sedangkan kode warna ditunjukkan dengan kode 6 digit:  #123456.

Langkah 3:
Jangan lupa klik Simpan Template.

Kalau semuanya benar maka tampilan post footer akan terlihat seperti pada gambar berikut:
Gambar post footer sebelum diganti.
Gambar 1 post footer setelah diganti.
Gambar 2 post footer setelah diganti.

Salam sukses.

Baca Selengkapnya »

Cara Membuat Alamat Adress Url Gambar Di Blog

Dalam posting blog, gambar bisa langsung di upload dari hardisk komputer atau laptop melalui fasilitas "Insert Image" yang ada di postingan.

Tapi bagaimana bila ingin memasang gambar untuk widget gadget, background body blog, dan yang lainnya? Gambar dari komputer tidak bisa langsung di upload untuk kebutuhan tersebut, jadi gambar harus dibuatkan alamat, adress atau url nya terlebih dahulu.

Untuk membuat url image atau gambar dibutuhkan image hosting online misalnya photobucket, tinypic, facebook, dan lain sebagainya. Tapi kelemahannya adalah kita perlu dua kali login saat mengedit blog. 

Untuk menghindari login dua kali , sebaiknya dalam akun google yang sama kita membuat dua blog.  Seperti yang penulis lakukan yaitu topindoblog.blogspot.com sebagai blog sesungguhnya dan picmixblog.blogspot.com sebagai blog khusus untuk menyimpan gambar / image hosting.

Berikut penjelasan Cara Membuat Alamat atau Adress url gambar untuk blog, sekaligus juga merupakan cara memasang gambar di postingan / entry:

Langkah 1:
Siapkankan gambar yang hendak dibuat alamat atau adress url nya di komputer, laptop atau yang lainnya.
Langkah 2:
Login ke blogger.com teruskan klik membuat Entry Baru. Gambar 1.
Langkah 3:
Berilah Judul Entry misal: Gambar Blog. Kemudian klik insert image. Gambar 2.
Langkah 4:
Klik upload teruskan dengan pilih file untuk mengambil gambar yang telah disiapkan. Gambar 3.
Langkah 5:
Klik gambar yang telah disiapkan di komputer kemudian klik open. Gambar 4.
Langkah 5:
Klik Gambar yang muncul teruskan klik add selected. Gambar 5.
Langkah 6:
Gambar akan muncul dalam entry. Klik HTML. Gambar 6.
Langkah 7:
kode http://4.bp.blogspot.com/bla.. bla.. bla.. dst sampai dengan/robin_260x194.jpg dalam background biru itulah url gambar yang barusan dibuat. Gambar 7.
Langkah 8:
Klik Simpan dan Tutup. Jangan di Publikasikan sebab entry tersebut hanya sebagai image hosting dan bukan sebagai artikel blog.

Untuk menguji apakah alamat url gambar / image tersebut valid atau tidak, silahkan buka tab baru di browser lalu copy url tersebut dan paste di adress browser. Kalau di tab baru nampak gambar seperti yang dibuatkan url nya, berarti url gambar tersebut valid dan bisa dipakai.

Semoga manfaat. salam Blogger.


 

Baca Selengkapnya »

Cara Mengganti Background Blog Template Blogspot

Cara Mengganti background blog template standart blogspot dapat dilakukan dengan 2 (dua) cara. Yang pertama adalah melalui sesuaikan template (bawaan standart blogspot) dan kedua adalah melalui edit template dalam arti merubah kode - kode css yang ada dalam template.

Untuk cara yang pertama, masuklah ke dashboard blogger kemudian ke template lanjut ke sesuaikan teruskan ke tingkat lanjut  dan latar. Dalam point latar, hanya ada tiga macam background yang dapat dirubah, yaitu latar atau background luar / body, bacground header dan background content (halaman utama dari header sampai footer). Tidak bisa untuk mengganti background sidebar, background footer dan background dengan gambar.

Dalam blog ini penulis akan uraikan secara detail bagaimana cara mengganti background blog dengan cara merubah atau mengganti kode css template (agar lebih bervariasi dan leluasa).

Detail dan langkah - langkah dalam mengganti background atau latar blog dapat dibaca pada artikel edit background.

Salam blogger.

Baca Selengkapnya »

Cara Mengetahui Ukuran Header Footer Sidebar Pada Blog

Mengetahui ukuran lebar dan tinggi dari bagian struktur blog yaitu header, footer, sidebar, post/posting, body blog dan content sangatlah penting. Sebab hal itu nantinya akan dijadikan sebagai pedoman dalam merubah kode Css template blog untuk memperoleh tampilan blog yang diinginkan.

Untuk Mengetahui atau melihat ukuran bagian blog, dapat dilakukan dengan berbagai cara, diantaranya adalah dengan memanfaatkan fasilitas yang telah disediakan oleh browser. Dalam hal ini kita pakai Mozilla Fire Fox dan Chrome.

Berikut langkah demi langkah cara melihat ukuran bila memakai Browser Mozilla Fire Fox (contoh melihat ukuran header, sidebar dan footer):

Langkah 1: Tampilkan blog dengan browser mozilla, lalu Arahkan mouse / pointer ke bagian  blog yang ingin diketahui ukurannya kemudian klik kanan.

Langkah 2:  Klik   Inspect Element sehingga layar akan terbelah menjadi dua bagian.

Langkah 3 :  Bidang yang dituju akan ditampilkan dengan garis batas terputus - putus. Bila belum ketemu, geser cursor / pointer ke atas dan ke bawah pada kode - kode tag belahan bawah layar lalu klik.

Langkah 4:  Bila bidang yang dituju sudah ketemu, untuk mengetahui ukurannya teruskan dengan meng klik "Box Model" yang terletak di belahan bawah layar sebelah pojok kanan atas.

Nampak ukuran bidang "lebar x tinggi" dalam satuan pixel. Lebih jelasnya, lihat Gambar Ukuran Header, Ukuran Sidebar dan Ukuran Footer.

Jika memakai browser Google Chrome langkah - langkahnya hampir sama: 

Langkah 1: Tampilkan blog dengan browser Chrome, lalu Arahkan mouse / pointer ke bagian  blog yang ingin diketahui ukurannya kemudian klik kanan.

Langkah 2:  Klik Kanan Periksa Elemen sehingga layar akan terbelah menjadi dua bagian.

Langkah 3: Bidang yang dituju akan ditampilkan dengan warna yang lebih terang dari bidang lainnya. Bila belum ketemu, geser cursor / pointer ke atas dan ke bawah pada kode - kode tag belahan bawah layar lalu klik.

Ukuran dari bidang yang dituju akan muncul di bawah bidang yang bercahaya lebih terang seperti yang terlihat pada Gambar Ukuran Header, Ukuran Sidebar dan Ukuran Footer.

Ukuran dari bagian blog yang telah diketahui dapat dijadikan acuan dalam  meng edit atau merubah bagian blog yang lainnya, yaitu:

• Body blog
• Footer
• Header
• Sidebar
• Post / Posting
• Gadget / Widget.

Semoga manfaat.

Baca Selengkapnya »

Menyembunyikan Navbar Navigasi Bar Pada Blog

Navbar atau Navigasi bar dapat disembunyikan dari tampilan blog. Navbar merupakan fasilitas navigasi bawaan blogspot yang mempunyai banyak fungsi / kegunaan dengan tujuan untuk mempermudah navigasi blogger dalam blogging dan secara default terletak di atas header. Meski demikian, Navbar dengan batas tertentu dapat kita atur atau rubah sesuai keinginan.

Ada 2 (dua) cara untuk menyembunyikan navbar, yaitu melalui edit tata letak dan melalui edit template / html. Tinggal pilih mana yang lebih mudah. Perbedaan tampilan blog yang memakai navbar dan tidak dapat dilihat pada Gambar 1 dan Gambar 2.

Cara Menyembunyikan Navbar Melalui Edit Tata Letak:

• Login ke blogger .
• Klik Tata Letak Kemudian Klik Edit pada gadget Navbar seperti terlihat dalam Gambar 3.
• Pilih Off pada pilihan Navbar kemudian Simpan. Gambar 4.

Cara Menyembunyikan Navbar Melalui Edit Template:

• Login ke blogger.
• Klik Template kemudian Edit Template.
•  Letakkan kode berikut di atas kode : ]]></b:skin>

/*mengatur navbar -- mulai*/ #navbar-iframe { visibility:hidden; display:none } /*mengatur navbar -- selesai*/

• Kemudian Simpan Template. 

Selain dapat disembunyikan, navbar juga dapat dihapus secara permanen caranya dengan menghapus navbar melalui template.

Untuk mendapatkan penampilan blog yang sesuai keinginan selain merubah navbar banyak yang dapat kita lakukan, yaitu merubah atau mengatur header blog.

Baca Selengkapnya »

Mengganti Background Header Blog Dengan Dua Warna

Background atau Latar header blog selain bisa diganti hanya dengan satu warna, juga bisa diganti dengan dua warna. Caranya sangat mudah, tetap berpedoman pada header-outer hanya kode css nya yang dirubah.

Berikut langkah - langkahnya merubah atau mengganti background atau latar header blog dari satu warna (orange) menjadi  2 (dua) warna yaitu bagian Atas Hijau dengan kode #0c8d2a  dan bagian bawah Biru dengan kode #0d4fa9 :

Langkah 1:

Login ke blogger.com, teruskan klik Template dan Edit Template.

Langkah 2:

Carilah kode .header-outer atau yang mirip, lebih lengkapnya :

.header-outer {

background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none;

}

Langkah 3:

Hapus semua kode di atas dan ganti dengan kode di bawah ini:

.header-outer { background-image: -ms-linear-gradient(top, #0c8d2a 50%, #0d4fa9 50%); background-image: -moz-linear-gradient(top, #0c8d2a 50%, #0d4fa9 50%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #0c8d2a), color-stop(0.5, #0d4fa9)); _background-image: none; }

 Kode css di atas adalah untuk komposisi warna bagian atas hijau dan bawah biru. Silahkan ganti kode warna tersebut sesuai keinginan.

Kalau menginginkan warna hijau di sebelah kiri dan warna biru disebelah kanan kode css nya adalah:

.header-outer { background-image: -ms-linear-gradient(left, #0c8d2a 50%, #0d4fa9 50%); background-image: -moz-linear-gradient(left, #0c8d2a 50%, #0d4fa9 50%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, #0c8d2a), color-stop(0.5, #0d4fa9)); _background-image: none; }

Langkah 4:
Simpan Template dan lihat hasilnya. Ilustrasi perubahan background header sebelum ganti background dan setelah ganti background bisa dilihat di Gambar 1, Gambar 2 dan Gambar 3.

Bila ada komentar atau kesulitan dalam menerapkan artikel ini silahkan isi form komentar. Selamat mencoba.

Baca Selengkapnya »

Mengganti Background Header Blog Dengan Satu Warna

Warna Background atau latar header blog dapat diganti atau dirubah sesuai keinginan. Perubahan yang dapat dilakukan diantaranya adalah penggantian warna background header dengan 1 (satu) warna.

Langkah - langkah penggantian warna background header dengan ilustrasi dari warna biru #052d52 menjadi merah #b02045 sebagai berikut:

Langkah 1:

Login ke blogger.com, teruskan klik Template dan Edit Template.

Langkah 2:

Carilah kode .header-outer atau yang mirip, lebih lengkapnya :

.header-outer {

background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none;

}

Langkah 3:

Tambahkan kode warna pada bcakground sehingga menjadi:

.header-outer {
background: #b02045; $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}

Langkah 4:
Simpan Template dan lihat hasilnya. Ilustrasi perubahan background header sebelum ganti background Gambar 1 dan setelah ganti background Gambar 2.

Jika menginginkan background yang lebih variatif silahkan baca Cara Mengganti Background Header Blog Dengan Dua Warna.

Baca Selengkapnya »

Cara Mengetahui Atau Melihat Ukuran Header Blog

Untuk Mengetahui atau melihat ukuran header blog dapat dilakukan dengan berbagai cara, diantaranya adalah dengan memanfaatkan fasilitas yang telah disediakan oleh browser. Dalam hal ini kita pakai Mozilla Fire Fox dan Chrome.

Mengetahui ukuran header sangatlah penting, sebab hal ini sangat diperlukan bila akan mengedit atau merubah lebar dan tinggi header yang dikehendaki.

Cara mengetahui atau melihat ukuran header blog sebagai berikut:

Browser Mozilla Firefox

• Tampilkan Blog  lalu Arahkan mouse / pointer ke bagian header blog yang ingin diketahui ukurannya.

• Klik Kanan >>> Inspect Element sehingga layar akan terbelah menjadi dua bagian.
• Bidang yang dituju akan ditampilkan dengan garis batas terputus - putus. Bila belum ketemu, geser cursor / pointer ke atas dan ke bawah pada kode - kode tag belahan bawah layar lalu klik.
• Bila bidang yang dituju sudah ketemu, untuk mengetahui ukurannya teruskan dengan meng klik "Box Model" yang terletak di belahan bawah layar sebelah pojok kanan atas.
• Nampak ukuran bidang "lebar x tinggi" dalam satuan pixel. Lebih jelasnya lihat Gambar 1.

Browser Chrome

• Tampilkan Blog  lalu Arahkan mouse / pointer ke bagian header blog yang ingin diketahui ukurannya.
• Klik Kanan >>> Periksa Elemen sehingga layar akan terbelah menjadi dua bagian.
• Bidang yang dituju akan ditampilkan dengan warna yang lebih terang dari bidang lainnya. Bila belum ketemu, geser cursor / pointer ke atas dan ke bawah pada kode - kode tag belahan bawah layar lalu klik.
• Ukuran dari bidang yang dituju akan muncul di bawah bidang yang bercahaya lebih terang.
• Nampak ukuran bidang "lebar x tinggi" dalam satuan pixel. Dapat dilihat pada Gambar 2

Cara melihat atau mengetahui ukuran Header tersebut juga dapat dipakai untuk mengetahui bagian lain misalnya ukuran Posting, Sidebar dan lain - lain.

Setelah mengetahui cara melihat ukuran header, perlu juga dibaca bagaimana Cara Mengganti Background Header dan Cara Merubah Ukuran Header.

Baca Selengkapnya »