Cara merubah Warna Dan Huruf Text Widget Sidebar

Merubah warna Dan huruf text widget pada sidebar blog dalam hal ini berarti merubah warna huruf, jenis huruf, ukuran huruf, huruf tebal dan huruf miring. Perubahan ini hanya berlaku pada text dan tidak berlaku pada Link yang ada pada widget sidebar.

Adapun untuk merubah Link selengkapnya dapat dibaca pada artikel Merubah Warna Link Widget Gadget Sidebar Blog

Langkah demi langkah merubah text widget di sidebar:

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

Langkah 2:

Dengan menggunakan Ctrl + F cari kode ]]></b:skin>. Kemudian letakkan kode di bawah ini di atas kode tersebut.

.main-inner .column-right-outer { font-size:14px; /*megatur ukuran font*/ font-family:forte; /*mengatur jenis font*/ font-style:italic; /*mengatur font miring*/ font-weight:700; /*mengatur font tebal bold*/ color:#fbcb09!important; /*mengatur warna font*/ }

Langkah 3:
Jangan Lupa Simpan Template dan lihat hasilnya.

Perubahan text widget pada sidebar dapat dilihat pada gambar:

• Text widget sidebar sebelum dirubah
• Text widget sidebar setelah dirubah

Semoga manfaat. Salam blogger

Baca Selengkapnya »

Merubah Warna Link Widget Gadget Sidebar Blog

Merubah atau mengganti warna link widget atau gadget pada sidebar blog dalam hal ini adalah merubah warna tampilan link, merubah warna link saat dikunjungi dan merubah warna link setelah dikunjungi.

Dengan mengganti warna link gadget disamping lebih variatif juga untuk membedakan antara widget gadget dan bagian blog yang lainnya.

Berikut langkah - langkah dalam merubah warna link widget gadget pada sidebar untuk template asli standart blogger:

Langkah 1:

Login ke blogger.com >>> opsi lainnya>>> template>>> edit template.

Langkah 2:

Cari  kode  ]]></b:skin> dengan menggunakan "Ctrl + F"

Langkah 3:

Copy kode di bawah dan paste kan di atas kode pada langkah 2.

.main-inner .column-right-outer a:link {color: #0f739d;} .main-inner .column-right-outer a:hover {color: #ee0e2e;} .main-inner .column-right-outer a:visited {color: #0b9712;}

Kode yang ditandai dengan # (string) menunjukkan kode warna. a:link adalah sebutan untuk tampilan link, a:hover merupakan tampilan link saat dikunjungi dan a:visited adalah link setelah dikunjungi.

Langkah 4:

Klik simpan dan lihat hasilnya.

Gambar selengkapnya silahkan klik:

• Gambar Warna Link sebelum diganti atau dirubah.
• Gamber Warna Link setelah diganti atau dirubah.

Selamat mencoba.

Baca Selengkapnya »

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 »

Mengubah Atau Mengedit Header Template Asli Blogspot

Header template blog dapat diedit atau dirubah sedemikian rupa sehingga mempunyai tampilan yang berbeda dari header bawaan asli atau standart template blogger atau blogspot.

Mengubah atau mengedit header blog banyak di lakukan oleh blogger untuk memperoleh tampilan blog yang menarik dan berbeda dengan blog lain, sekaligus merupakan kreatifitas positif blogger dalam mengotak atik blognya.

Bagi sebagian blogger, mengubah atau mengedit template blog standart asli bawaan blogspot tidak semudah mengubah template hasil custom dari blogger lainnya (karena sudah terbiasa dengan template custom). Sebab template asli blogspot dalam uraian kode CSS nya banyak berupa variabel - variabel yang membutuhkan pemahaman tersendiri.

Perubahan atau edit yang dapat dilakukan terhadap header blog secara lengkap dapat dibaca pada artikel yang terkait dengan edit header.

Semoga bermanfaat.

Baca Selengkapnya »

Cara Mengubah Atau Mengedit Body Blog

Mengubah atau mengedit body blog adalah salah satu cara membuat penampilan blog lebih menarik, selain merubah header, posting, sidebar, footer dan gadget / widget.

Template blogspot memberikan keleluasaan pada blogger untuk memodifikasi blognya sesuai keinginan dengan kreatifitas masing - masing blogger.

Mengubah body blog tidaklah sulit. Perubahan apa yang dapat dilakukan pada body blog? Banyak hal yang bisa di lakukan dalam merubah template body blog.

Selengkapnya dapat dibaca pada artikel Body Blog.

Baca Selengkapnya »

Cara Mudah Membuat Blog Gratis

Membuat blog gratis yang berplatform blogspot dari google sangatlah mudah, semudah membuat email gmail.

Ikuti langkah demi langkah  lengkap dengan gambarnya bagaimana cara mudah membuat bog gratis.

1. Masuk ke Blogger.com. Masukkan Email Gmail dan pasword nya kemudian klik Masuk. Lihat Gambar 1.
2. Langsung saja klik Lanjutkan Ke Blogger. Hal - hal lain dapat diatur kemudian. Gambar 2.
3. Klik Blog Baru, Gambar 3.
4. Isilah Judul Blog (Dapat di ganti kemudian hari) yang sesuai tema atau topik isi blog. Isilah alamat blog yang diinginkan sampai muncul tulisan Alamat Blog ini Tersedia. Langsung klik Buat Blog. Untuk pilihan Template / skin / bentuk tampilan blog dapat di atur kemudian. Gambar 4.
5. Blog telah selesai dibuat dengan tanda "Judul blog" sudah muncul pada dashboard. Untuk melihat blog klik Lihat Blog. Gambar 5.
6. Terlihat tampilan blog dengan template standart tanpa entry atau posting.Untuk melihat tampilan blog yang menarik dan sesungguhnya maka blog harus di isi dengan artikel atau biasa disebut di posting atau entry, kemudian memilih tampilan template yang mudah di edit dan sesuai dengan yang diinginkan. Gambar 6.

Semoga manfaat. Salam Blogger.

Baca Selengkapnya »

Cara Mudah Membuat Email Gmail 2014

Mempunyai account atau akun email dari google yang biasa disebut dengan Gmail adalah syarat wajib yang harus di penuhi apabila ingin membuat blog yang ber platform Blogspot dari google.

Cara mudah membuat email Gmail 2014 step by step sebagai berikut:

1. Masuk ke link Mail.Google.com.

2. Klik Buat Akun. Gambar 1.

3. Isi form yang tersedia. Untuk verifikasi nantinya bila dibutuhkan pilihannya adalah  memasukkan alamat email apapun (bila punya) atau masukkan no telepon.

Masukkan kode yang terlihat untuk verifikasi atau lewati kode dan klik pada box (lewati verifikasi....) bila ingin verifikasi melalui telepon setelah mengisi nomor telepon.

Klik box "Saya menyetujui ....." Gambar 2.

4. Klik Langkah berikutnya. Gambar 3.

5. Klik Langkah berikutnya. Gambar 4.

6.Lanjutkan Ke Gmail. Untuk keluar klik tanda gambar sebelah kanan atas dan klik keluar. Gambar 5.

Demikian Cara Mudah Membuat Email Gmail 2014. Kelengkapan data profil dan lain sebagainya dapat diisi berikutnya. Email Gmail yang telah jadi dapat dipakai untuk membuat blog platform  blogspot dari google.

Bagaimana cara mudah membuat blog blogspot? ikuti caranya step by step pada artikel Cara Mudah Membuat Blog Gratis.

Baca Selengkapnya »