Mengganti Dan Merubah Template

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 »

Ganti Template Standar Blogger

Ganti template blog standar asli bawaan blogger biasanya dilakukan oleh blogger di saat membuat blog, baik itu blog yang pertama maupun yang dibuat berikutnya. Template blog bisa diperoleh dengan mendownload template hasil custom dari situs lain atau mengambil langsung dari blogger.com yang biasa disebut dengan template standar asli bawaan blogger.

Dalam artikel ini pokok bahasannya adalah mengganti template blog dengan template asli standar blogger. Cara mengganti template blogspot dengan template standar asli blogger sangat mudah, sebab fasilitas untuk mengganti dan menyesuaikan template yang sesuai keinginan sudah disediakan oleh blogger.

Nampak tampilan perbedaan template sebelum diganti dan sesudah diganti.

Klik Gambar untuk memperbesar tampilan.

Berikut langkah demi langkah cara ganti template standar blogger lengkap beserta gambar visualnya:

Langkah 1:
Login ke blogger.com ----> klik Template. Nampak tampilan template blog sebelum ganti template.

Langkah 2:
Nampak pilihan template blog. Diantaranya adalah template jenis simple atau sederhana. Arahkan pointer ke template yang dipilih. Saya coba klik pada template sederhana motif merah.

Langkah 3:
Nampak preview template yang dipilih. Untuk memakainya tinggal klik terapkan ke blog.

Langkah 4:
Nampak template yang baru diganti.

Yang saya jelaskan di atas adalah mengganti template secara global. Bila ingin merubah tampilan template tetapi masih tetap memakai template yang sama dapat menggunakan fasilitas blogger sesuaikan template.

Atau jika ingin merubah tampilan template secara lebih komplit, detail dan lebih bervariasi lagi bisa di baca di berbagai cara mengganti dan merubah template.

Semoga bermanfaat.

Baca Selengkapnya »

Cara Mendapatkan Alamat Url Foto Dengan Mudah

Mendapatkan alamat url foto atau gambar sangatlah penting bagi seorang blogger. Dalam merubah bagian tertentu dari template misalnya untuk membuat background header dan background blog yang berupa gambar, maka gambar harus dibuatkan alamat url nya terlebih dahulu. Sebab gambar tidak bisa langsung di upload sebagaimana halnya upload foto saat membuat posting.

Cara membuat alamat url foto yang paling cepat, mudah dan praktis bagi seorang blogger adalah dengan memanfaatkan images hosting picasaweb dari google. Karena dengan memakai picasaweb kita tidak perlu login dua kali dan tidak perlu memiliki account images hosting lainnya. Dengan satu account email Gmail dapat kita pakai masuk dalam dashboard blogger dan picasaweb.

Berikut langkah - langkahnya untuk mendapatkan url gambar melalui picasaweb:

Langkah 1:
Siapkan foto atau gambar yang akan di upload di komputer. Kemudian Login ke picasaweb.google.com dengan account Gmail.

Langkah2:
Tampak halaman Google plus. Kemudian klik tulisan klik disini untuk kembali ke album web picasa, teruskan dengan klik Unggah. Lihat Gambar 1.

Langkah 3:
Buatlah album baru atau masukkan foto yang akan di upload ke album yang sudah ada. Lalu klik Pilih Foto Dari Komputer. Lihat Gambar 2.

Langkah 4:
Klik gambar yang hendak di upload dari komputer. contoh: saya ambil tiga gambar. Kemudian klik open. Lihat Gambar 3.

Langkah 5:
Gambar dalam proses upload. Tunggu sejenak sampai semua gambar yang diupload muncul. Lalu klik selesai teruskan dengan klik beranda. Lihat Gambar 4.

Langkah 6:
Klik album dimana gambar dimasukkan. Contoh: saya klik album "Foto Proses". Lihat Gambar 5.

Langkah 7:
Pilih foto yang hendak didapatkan alamat url nya dengan cara meng klik nya. Teruskan dengan klik kanan dan pilih Copy Image Location. Lihat Gambar 6.

Langkah 8:
Bukalah Notepad dan pastekan alamat url dari foto tersebut dan simpan. contoh alamat url foto dari picasaweb:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZusXVEO7EQa6DM07POfNq6xEqTc-NASRu26VwyBNVkoylJ6_ZA2h74JqdGX4wsV_jypLc912QZGZ8MsYM38wpSKPgD_fosf8vcOoQayx17IvJ2rOjJy4mNh3wdm5dYICrAqVQVWOA8lY/s1600/c-p-b-m.png.

Langkah 9:
Bukalah tab baru di browser, kemudian pastekan alamat url foto tersebut. Bila di layar monitor muncul gambar seperti yang diharapkan berarti alamat url gambar tersebut valid dan bisa digunakan.

Demikian penjelasan saya dalam mendapatkan alamat url foto. Selamat mencoba semoga manfaat.

Baca Selengkapnya »

Penghitung Huruf Karakter Blog Seo Friendly

Menghitung huruf, karakter termasuk tanda baca dan spasi adalah sangat penting agar blog tetap seo friendly sehingga tidak sungkan - sungkan lagi untuk tampil di halaman pertama search engine.

Salah satu yang harus di atur atau di hitung adalah jumlah huruf, karakter, tanda baca dan spasi dalam Judul Artikel dan Deskripsi blog. Sebab mesin pencari akan menganggap tidak efektif bila judul artikel dan deskripsi blog terlalu panjang dengan jumlah huruf yang banyak.

Sumitexpress.com adalah salah satu web terpercaya dalam menganalisa meta tag agar seo friendly. Agar blog seo friendly maka huruf, tanda baca dan spasi untuk Judul Artikel tidak boleh lebih dari 80 karakter. Silahkan cek homepage dan halaman artikel di web tersebut.

Penghitung Huruf - Karakter - Kata Online

Hitung Sekarang

Semoga membawa manfaat.

Baca Selengkapnya »

Arti Padding Border Dan Margin Pada Blog

Dalam mengganti, merubah dan mengatur template sebuah blog tidak terlepas dari istilah content, padding, border dan margin.

Bagi blogger baru (seperti saya), pada awalnya istilah padding, margin dan border tersebut sungguh sangat membingungkan sebab setiap kali browsing ke blog lain yang ada hanya gambat skema saja. Tidak ada gambar untuk contoh yang riil.

Berikut saya ulas lagi pengertian Padding, Border dan margin lengkap dengan contoh riil pada bagian Title Wrapper / area judul blog yang telah saya praktekkan.

Content: Arti sebenarnya adalah isi. Karena dalam contoh praktek ini adalah area Title Wrapper, maka yang di maksud dengan content adalah " Judul Blog ". Letaknya dipusat paling dalam.

Padding: Adalah jarak antara content dengan border (Garis Batas). Biasanya dalam satuan pixel (px).

Border: Adalah Garis batas dengan ketebalan tertentu dalam satuan px misalnya 2px, yang letaknya di akhir ukuran / nilai padding.

Margin: Adalah jarak antara Border dengan garis terluar dari halaman atau yang bisa disebut dengan content outer/inner/wrapper atau bisa juga berupa perbatasan dengan content lainnya, misalnya dengan Description Wrapper atau deskripsi blog.

Secara skematik content, padding, border dan margin dapat di lihat pada gambar di bawah.

Klik Gambar Untuk Memperbesar Tampilan