April 2014

Dalam merubah template blog seringkali kita harus mencari kode css ]]></b:skin>, </head> dan </body> untuk meletakkan kode css atau html yang dikehendaki.

Misalnya, untuk merubah background header blog dan mengatur jarak antara header dengan postingan maka kita harus meletakkan kode css background dan kode margin maupun padding di atas ]]></b:skin>. Hal tersebut akan sangat merepotkan bila kita harus selalu mengetik kode - kode tersebut pada kotak pencarian edit html.

Agar tidak repot setiap kali mencari kode ]]></b:skin>, </head> dan </body> berikut adalah cara terbaru dan tercepat dalam mencari kode - kode tersebut:

Poin 1:
Login ke blogger.com ---> Template ---> Edit Html.

Poin 2:
Dengan Ctrl+F carilah kode ]]></b:skin>. Letakkan kode text berikut di atasnya sehingga menjadi:

/*7*/

]]></b:skin>

Poin 3:
Dengan Ctrl+F carilah kode </head>. Letakkan kode text berikut di atasnya sehingga menjadi:


</head>

Poin 4:
Dengan Ctrl+F carilah kode </body>. Letakkan kode text berikut di atasnya sehingga menjadi:


</body>

Poin 5:
Simpan template. selesai.

Selanjutnya bila akan mencari kode - kode ]]></b:skin>, </head> dan </body> tidak perlu mengetikkan kode tersebut, yang diperlukan hanya mengetikkan *7 untuk mencari kode ]]></b:skin>, ketikkan *8 untuk mencari kode </head> dan *9 untuk kode </body> pada kotak pencarian dengan menggunakan Ctrl+F tentunya.

Penulisan kode - kode tersebut contohnya dapat dilihat pada:

Gambar Penulisan kode text untuk mencari kode css skin head dan body pada blog.

Kode - kode tambahan tersebut sebenarnya adalah jenis text untuk memudahkan pencarian saja. Dan kode tersebut tidak akan muncul pada tampilan blog.

Selamat mencoba, semoga sukses.

Baca Selengkapnya »

Cara Mengganti Dan Merubah Warna Link Di Blog

Dapatkah warna link di blog diganti atau dirubah sesuai dengan keinginan kita ? Jawabannya "ya, bisa". Caranya yaitu dengan merubah kode css terkait dengan kode link.

Cara Mengganti Dan Merubah Warna Link Di Blog dalam artikel ini berarti mengubah warna link secara total, baik link yang ada di bagian posting, sidebar, widget, footer dan attribution.

Cara Mengganti Dan Merubah Warna Link Di Blog dapat dilakukan dengan langkah sebagai berikut:

Poin 1:
Login ke blogger.com ---> Template ---> Edit Html. Kemudian Cari kode ]]></b:skin> dengan menggunakan Ctrl + F

Poin 2:
Copy kode css berikut dan letakkan di atas ]]></b:skin>:

a:link {color:#ffffff}
a:hover {color:#f26b2f;text-decoration:underline;}
a:visited {color:#0E9E3E}

Keterangan:
a:link adalah kode css Tampilan Link Sebelum dikunjungi
a:hover adalah kode css Tampilan Link saat dikunjungi
a:visited adalah kode css Tampilan Link setelah dikunjungi
underline adalah garis bawah link pada saat dikunjungi
#6digit adalah kode warna

Bila menginginkan warna yang sama untuk warna link sebelum dikunjungi, saat dikunjungi dan setelah dikunjungi kode css nya adalah:

a:link,a:hover,a:visited {color:#0E9E3E}

Silahkan ganti kode warna link #0E9E3E sesuai dengan yang dikehendaki.

Poin 3:
Dan yang terakhir adalah Simpan Template.

Ilustrasi Cara Mengganti Dan Merubah Warna Link Di Blog dapat dilihat pada:

Gambar Warna Link Di Blog sebelum diganti
Gambar Warna Link Di Blog setelah diganti

Jika menginginkan mengganti warna link khusus hanya pada bagian sidebar penjelasannya ada pada artikel Cara mengganti warna link blog pada widget sidebar.

Terimakasih atas kunjungannya dan selamat mencoba.

Baca Selengkapnya »

Cara Mengganti Background Tulisan "Diposkan Oleh Posted By"

Cara mengganti background tulisan "Diposkan oleh atau Posted By" yang berada dibagian bawah postingan blog atau biasa disebut dengan Post Footer dapat dilakukan dengan cara mengganti kode css Post Footer.

Mengganti kode css untuk mengganti background tulisan "Diposkan oleh atau Posted By" dapat ditempuh dengan 2 (dua) cara, yaitu dengan me non aktifkan post footer atau menjadikan background post footer menjadi transparent sehingga backgroundnya sama dengan warna background postingan blog.

Cara mengganti background tulisan "Diposkan oleh atau Posted By" langkah demi langkah sebagai berikut:

Poin 1:
Login ke blogger.com ---> Template ---> Edit Html. Kemudian Cari kode ]]></b:skin> dengan menggunakan Ctrl + F

Poin 2:
Pilih salah satu kode css berikut dan letakkan di atas ]]></b:skin>:

.post-footer {background: none;border-bottom:none;}

Atau

.post-footer {background: transparent;border-bottom:transparent;}

Bila tidak menginginkan border-bottom (garis bawah) post footer maka hilangkan kode css:
border-bottom:none; atau border-bottom:transparent; yang ada dalam kode css di atas.

Poin 3:
Jangan lupa Simpan Template dan selesai.

Ilustrasi Cara Mengganti Background Tulisan "Diposkan oleh atau Posted By" dapat dilihat pada:

Bila ingin mengganti background postingan, silahkan kunjungi artikel cara mengganti background dan border postingan blog.

Salam blogger.

Baca Selengkapnya »

Cara Mengganti Warna Link Blog Hanya Pada Widget Sidebar

Cara mengganti warna link blog yang ada pada widget / gadget sidebar biasanya dimaksudkan untuk membedakan link yang ada di sidebar dengan link yang ada pada bagian lain. Selain akan nampak lebih bervariasi juga diharapkan lebih menarik, sehingga pengunjung jadi betah lama - lama jelajahi blog.

Cara mengganti warna link blog yang ada pada widget / gadget sidebar dapat dilakukan dengan berbagai variasi warna yang sama maupun berbeda - beda. Warna Link dibagi menjadi 3 (tiga) bagian yaitu warna link asli, warna saat dikunjungi dan warna link setelah dikunjungi. Selain mengganti warna link, tampilan huruf link juga dapat dibuat dengan berbagai variasi.

Cara mengganti warna link blog yang ada pada widget / gadget sidebar dapat dilakukan dengan ilustrasi sebagai berikut:

Poin 1:
Login ke blogger.com ---> Template ---> Edit Html. Kemudian Cari kode ]]></b:skin> dengan menggunakan Ctrl + F

Poin 2:
Bila menginginkan semua warna link yang sama pada warna link saat tampil, saat dikunjungi dan setelah dikunjungi, copy kode css dibawah dan letakkan di atas ]]></b:skin>:

.main-inner .column-right-inner a:link,a:hover,a:visited {color:#fff;}

Jika menginginkan warna link yang berbeda saat tampil, saat dikunjungi dan setelah dikunjungi kode css nya adalah:

.main-inner .column-right-inner a:link {color:#fff;}
.main-inner .column-right-inner a:hover {color:#c61;}
.main-inner .column-right-inner a:visited {color:#0e9e3e;}

Untuk memberikan sentuhan huruf dan ukurant huruf yang berbeda saat link dikunjungi kode css nya adalah:

.main-inner .column-right-inner a:link {color:#fff;}
.main-inner .column-right-inner a:hover {color:#c61; font-family: 'Arizonia',cursive; font-size:16px;}
.main-inner .column-right-inner a:visited {color:#0e9e3e;}

Keterangan:
a:link adalah kode css Tampilan Link Sebenarnya
a:hover adalah kode css Tampilan Link saat dikunjungi
a:visited adalah kode css Tampilan Link setelah dikunjungi
#6digit adalah kode warna
font-family adalah jenis huruf
font-size adalah ukuran huruf.

Kode - kode terebut dapat diganti dan dirubah sesuai kreasi masing - masing.

Poin 3:
Simpan Template dan selesai.

Cara mengganti warna link blog yang ada pada widget / gadget sidebar ilustrasi gambarnya dapat di lihat di:

Gambar warna link sebelum dan setelah diganti
Gambar warna link saat dan setelah dikunjungi

Selamat mencoba dan semoga sukses.

Baca Selengkapnya »

Cara Mengatur Jarak Kotak komentar Dengan Footer Blogger

Cara mengatur jarak kotak komentar dengan footer blog untuk template standar blogger dapat dilakukan dengan hanya merubah padding dari main-inner template tersebut.

Seperti kita ketahui, main-inner dari template standar blogger mempunyai 2 (dua) padding yaitu padding atas atau padding-top dan padding bawah atau padding-bottom. Padding-top adalah untuk mengatur jarak antara header dengan posting dan sidebar, sedangkan padding-bottom untuk mengatur jarak antara kotak komentar dengan footer atau mengatur jarak antara footer dengan kolom posting dan kolom sidebar.

Cara mengatur jarak kotak komentar dengan footer blog untuk template standar blogger dapat dilakukan dengan langkah - langkah berikut:

Poin 1:
Login ke blogger.com ---> Template ---> Edit Html. Kemudian dengan Ctrl+F carilah kode css ]]></b:skin>

Poin 2:
Letakkan kode di bawah ini di atas kode ]]></b:skin>:

.main-inner {
padding-bottom:0px;
}

Padding dari main inner standar blogger biasanya mempunyai nilai 30px. Agar jarak kotak komentar dengan footer menjadi rapat maka padding bagian bawah atau padding-bottom nya harus mempunyai nilai 0 (nol). Atur sesuai keinginan.

Poin 3:
Simpan template dan selesai.

Tambahan:
Setelah mengatur jarak antara kotak komentar dengan footer blog, maka selanjunya adalah mengatur judul widget yang ada di footer agar tidak terlalu renggang dengan tepi footer bagian atas dan mengatur jarak antara isi footer dengan tepi footer bagian bawah.

Caranya adalah dengan merubah padding pada footer. Letakkan kode css berikut di atas ]]></b:skin> dan kemudian simpan template:

.footer-inner {
padding-top:10px;
padding-bottom:10px;
}

Silahkan atur jaraknya sesuai keinginan dengan cara menambah atau mengurangi nilai padding nya.

Adapun ilustrasi cara mengatur jarak antara kotak komentar dengan footer blogger dapat dilihat pada gambar:

Demikian sekilas mengenai Cara mengatur jarak kotak komentar dengan footer blog. Selamat mencoba dan semoga manfaat.

Baca Selengkapnya »

Cara Mengganti Background Dan Border Footer Blog Blogger

Cara mengganti background dan border footer blog tidak jauh berbeda dengan mengganti background bagian posting dan sidebar.

Kalau mengganti background dan border posting berpedoman pada kode css .main-inner .fauxcolumn-center-outer dan jika mengganti background dan border sidebar dengan kode css .main-inner .fauxcolumn-right-outer, maka kalau mengganti background dan border footer pedomannya adalah kode css .footer-outer.

Cara Mengganti Background Dan Border Footer Blog untuk template standar blogger dapat dilakukan sebagai berikut:

Poin 1:
Login ke blogger.com ---> Template ---> Edit Html.

Poin2:
Dengan menggunakan Ctrl+F pada keyboard cari kode css ]]></b:skin>. Dan letakkan kode dibawah ini diatas kode tersebut:

.footer-outer {background:#0c589e;
border:2px solid #000;
}

Border tersebut adalah untuk ke empat sisi yaitu atas, kanan, bawah dan kiri. Bila menghendaki border hanya pada sisi tertentu saja tinggal mengganti kode css border dengan border-left, border-right, border-bottom atau border top.

#0c589e:kode warna background
2px: ketebalan border
solid: jenis border
#000: warna border

Silahkan dicoba dengan variasi lainnya agar mendapatkan tampilan background dan border yang lebih menarik.

Poin 3:
Simpan Template dan selesai.

Ilustrasi cara mengganti Background Dan Border Footer Blog dapat dilihat pada gambar:
Gambar Background Dan Border Footer Blog sebelum diganti
Gambar Background Dan Border Footer Blog setelah diganti

Demikian sekilas mengenai Cara Mengganti Background Dan Border Footer Blog, semoga membawa manfaat.

Baca Selengkapnya »

Cara Mengatur Jarak Header Blog Dengan Posting Dan Sidebar

Cara Mengatur Jarak Header Blog Dengan Posting Dan Sidebar untuk template standar blogger dapat dilakukan dengan mudah yaitu hanya mengatur kode css bagian main inner, posting dan sidebar.

Main inner perlu juga diatur sebab letak area posting dan sidebar sebenarnya ada di dalam main inner. Main inner dalam template asli standar blogger (terkait artikel ini) adalah bidang kosong antara header dengan posting dan sidebar.

Main Inner Bagian Atas (Bidang Kosong)

Cara Mengatur Jarak Header Blog Dengan Posting Dan Sidebar yang perlu dilakukan hanyalah mengatur tata letak kolom posting dan kolom sidebar, tanpa merubah tata letak judul widget sidebar (h2) dan judul posting (h3). Sebab kalau merubah tata letak h2 maka bukan hanya h2 yang berada di sidebar saja yang berubah tapi semua h2 akan berubah, baik yang di sidebar, area posting serta h2 yang ada di footer. Demikian juga degan h3 nya, maka di homepage semua judul posting akan berubah.

Cara Mengatur Jarak Header Blog Dengan Posting Dan Sidebar dapat dilakukan dengan langkah - langkah sebagai berikut:

Poin 1:
Login ke blogger.com --->Template ---> Edit Html.

Poin 2:
Dengan Ctrl+F cari kode css .main-inner . Bila ada kode tersebut teruskanlah ke poin 3.

Poin 3:
Cari kode ]]></b:skin> dan letakkanlah kode berikut tepat di atasnya:

.main-inner {padding-top:0px}
.main-inner .column-center-inner {margin-top:10px}
.main-inner .column-right-inner {margin-top:10px}

Keterangan:
Buat main-inner dengan padding-top sebesar 0px bila ingin tidak ada jarak antara header dengan sidebar dan posting.
.main-inner .column-center-inner adalah untuk mengatur jarak posting dengan header.
.main-inner .column-right-inner adalah untuk mengatur jarak sidebar dengan header.
Silahkan atur besarnya nilai padding dan margin sesuai dengan yang diinginkan. Terkait padding dan margin lebih detai silahkan baca Pengertian Atau Arti Padding Border Dan Margin Pada Blog.

Poin 4:
Simpan Template. Dan lihat hasilnya.

Catatan:
Bila menginginkan tampilan blog tanpa tanggal / date header (Tanggal di atas judul posting), pada langkah poin 3 tambahkanlah kode css:
h2.date-header {display:none} sehingga menjadi:

.main-inner {padding-top:0px}
.main-inner .column-center-inner {margin-top:-10px}
.main-inner .column-right-inner {margin-top:10px}
h2.date-header {display:none;}

.main-inner .column-center-inner margin top nya sengaja bernilai minus yaitu -10px, hal tersebut untuk menyejajarkan posisi judul posting dan judul widget sidebar. Silahkan atur sesuai keinginan.

Cara Mengatur Jarak Header Blog Dengan Posting Dan Sidebar ilustrasinya dapat dilihat di:

Selamat mencoba, semoga sukses.

Baca Selengkapnya »

Cara Mengganti Background postingan dan border blog

Mengganti background postingan dan mengganti border potingan blog standar blogger dapat dilakukan dengan cara merubah atau menambah kode css template blog.

Point: 1
Login ke blogger.com ---> Template ---> Edit Html

Point: 2
None aktifkan border bawaan asli template blogger, caranya dengan menggunakan Ctrl + F cari kode css:
.fauxcolumn-left-outer .fauxcolumn-inner { dan .fauxcolumn-right-outer .fauxcolumn-inner {

Kemudian tambahkan kata none sehingga menjadi:

.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: none;1px solid $(body.rule.color);
}

dan

.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: none;1px solid $(body.rule.color);
}

Point 3:
Cari kode ]]></b:skin>. Dan letakkan kode css berikut di atasnya:

.main-inner .fauxcolumn-center-outer {
background:#9bc3e8;
border:2px solid #000;
}

Kode Css border tersebut adalah untuk border empat (4) sisi. Kalau menghendaki hanya border pada sisi tertentu tinggal mengganti dengan kode:
border-left: untuk sisi kiri
border-right: untuk sisi kanan
border-bottom: untuk sisi bawah
border-top: untuk sisi atas.

2px adalah ketebalan border
solid adalah jenis border
#000 adalah warna border.

Point 4:
Klik Simpan Template. Selesai

Ilustrasi perubahan background dan border postingan blog dapat dilihat pada:

Gambar Background dan border postingan sebelum di ganti.

Gambar Background dan border postingan setelah di ganti.

Selain mengganti background dan border postingan blog, pembaca juga bisa mengganti background dan border sidebar serta mengganti background header blog.

Demikian artikel singkat ini dan salam blogger.

Baca Selengkapnya »

Cara Mengganti background Dan Border Sidebar

Artikel Mengganti background dan border pada sidebar blog banyak kita jumpai saat browsing di internet. Tapi kebanyakan isinya adalah menjelaskan bagaimana mengganti background dan border sidebar untuk template hasil custom, bukan template asli bawaan atau standar blogger. Dan biasanya kode css sidebar dari template hasil custom adalah #sidebar-wrapper {....}.

Dalam artikel ini saya berusaha menjelaskan bagaimana cara mudah mengganti background dan border sidebar blog untuk template asli bawaan blogger atau standar blogger.

Poin 1:
Login ke blogger.com ---> Template ---> Edit HTML.

Poin 2:
Dengan menggunakan CTRL-F, carilah kode css ]]></b:skin>

Poin 3:

Letakkan kode css di bawah ini tepat diatas kode ]]></b:skin>

.main-inner .fauxcolumn-right-outer {
border-left: 2px solid #c61;
border-right: 2px solid #c61;
background: #C9D0E0 ;
}

Css border diatas hanya untuk border kiri dan kanan. Untuk border atas dan border bawah kode css nya adalah border-top dan border-bottom. Jika menghendaki border pada empat sisi tinggal mengganti kode css bordernya menjadi: border: 2px solid #c61.

2px adalah ketebalan garis atau border
solid adalah jenis atau bentuk border
#c61 adalah warna border
#C9D0E0 adalah warna background.
Silahkan uji coba degan berbagai macam variasi warna dan jenis border.

Poin 4:
Simpan Template dan lihatlah hasilnya.

Gambar ilustrasi mengganti background dan border sidebar bisa dilihat di:

Gambar background dan border sidebar sebelum diganti

Gambar background dan border sidebar setelah diganti

Sebenarnya ada cara mudah dan praktis untuk menentukan kode css mana yang hendak dirubah kalau ingin merubah tampilan template blog. Penjelasan selengkapnya silahkan baca Cara Mengetahui Ukuran Dan Kode Css Pada Blog.

Salam sukses.

Baca Selengkapnya »

Cara Mengetahui ID Blog Dan ID Lainnya Di Blog

ID blog, Id Widget dan Id Post serta ID lainnya pada sebuah blog dapat diketahui dengan cara yang sangat mudah dan cepat tanpa harus login ke blogger. Caranya ? hanya menggunakan fasilitas Inspect Element yang telah disediakan oleh browser Mozilla, Chrome serta IExplorer.

Mengetahui ID blog, ID widget dan ID Postingan sangatlah penting, sebab ID blog biasanya digunakan saat kita memasang widget tertentu yang diperoleh dari luar blogger. Sedangkan ID Posting, ID Widget serta ID lainnya banyak digunakan saat kita mengganti atau merubah template blog.

Berikut cara mengetahui dengan cepat dan mudah ID blog, ID widget serta ID posting beserta contoh penggunaannya:

Poin 1:
Buka blog yang ingin diketahui ID nya dengan browser Mozilla Firefox. Atau bisa juga menggunakan browser lainnya, dalam hal ini saya contohkan dengan browser Firefox.

Poin 2:
Misalnya kita ingin merubah warna background widget sidebar yang berjudul "Arsip Blog". Untuk merubah background tersebut kita harus tahu terlebih dahulu apa ID atau identitas dari widget "Arsip Blog". Caranya, arahkan pointer atau mouse ke judul widget kemudian klik kanan dan klik inspect element. Lihat Gambar 1.

Poin 3:
Nampak tampilan terbelah menjadi dua bagian. Pada tampilan bagian bawah itulah terdapat ID dari widget "Arsip Blog" yaitu dengan nama ID "BlogArchive1". Lihat Gambar 2.

Poin 4:
Dengan diketahuinya ID widget "Arsip Blog" tersebut, kalau kita login ke blogger --> Template --> Edit Html, kemudian kita tambahkan kode css ID widget untuk mengganti background :

#BlogArchive1 {
background:#C9D0E0 ;
}

dan meletakkannya di atas kode ]]></b:skin> maka background dari widget "Arsip Blog" akan berubah. Lihat Gambar 3.

Gambar 1, 2 Dan 3. Klik Gambar untuk memperbesar tampilan

Untuk mengetahui ID Blog dan ID Posting caranya tidak jauh berbeda dengan cara mengetahui ID Widget.

Arahkan Pointer atau mouse ke salah satu judul posting ---> klik kanan ---> klik inspect element. Maka di belahan bawah layar akan nampak ID blog dan ID Posting yang dituju.

Nampak ID blog dengan nomor 1190252569424539924 dan post ID 754081553204596678 untuk artikel dengan judul "Gambar Membuat background ....."

Kalau misalnya ingin merubah background dari artikel dengan judul "Gambar Membuat background .....", maka tinggal menambahkan kode css background:

#post-body-754081553204596678 {
background:#C9D0E0 ;
}

dan meletakkannya di atas kode ]]></b:skin>. Ilustrasi selengkapnya dapat dilihat pada gambar di bawah.

Klik Gambar untuk memperbesar tampilan

Untuk penggunaan ID blog saya belum mempunyai contoh riilnya jadi visual gambarnya belum ada. Demikianlah sedikit penjelasan tentang ID Blog, ID Widget dan ID Posting semoga bermanfaat.

Baca Selengkapnya »