Maret 2014

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:

http://4.bp.blogspot.com/-ysAgfC_3di0/Uy9uWeskb5I/AAAAAAAAAGM/ld3lnwJuB1Q/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

Contoh Padding, Border dan Margin pada Title Wrapper / Area Judul blog dapat dilihat pada ilustrasi gambar sebagai berikut.

Klik Gambar Untuk Memperbesar Tampilan

Padding, Border Dan Margin Sebelum Berubah

Title Wrapper dengan:

Padding atas dan bawah sebesar 22px, Padding Kiri dan kanan sebesar 30px.

Tanpa border dan tanpa margin.

Klik Gambar Untuk Memperbesar Tampilan

Padding, Border Dan Margin Setelah Berubah

Title Wrapper dengan:

Padding atas dan bawah sebesar 22px, Padding Kiri dan kanan sebesar 30px,

Border: 2px (warna biru)

Margin: Atas 20px, Bawah 10px, Kiri 20px dan Kanan 20px.

Semoga bermanfaat dan salam blogger

Baca Selengkapnya »

Cara Mengetahui Ukuran Dan Kode Css Pada Blog

Mengetahui ukuran dan kode Css dari header, Main Post, Sidebar dan footer serta bagian blog lainnya sangatlah penting jika ingin merubah template blog. Sebab untuk merubah template, langkah awalnya adalah harus tahu terlebih dahulu kode - kode Css dan Html yang dipakai oleh template tersebut.

Jika kode Css dan Html dari bagian blog yang ingin dirubah sudah diketahui, dengan pedoman kode - kode tersebut tinggal menganti, mengedit atau merubahnya.

Untuk mengetahui ukuran dan kode Css serta kode Html blog, dapat memakai fasilitas Inspect Element yang disediakan oleh browser Chrome, Mozilla maupun Explorer. Dalam hal ini saya contohkan memakai browser Mozilla Firefox untuk mengetahui ukuran, kode css dan html sidebar Widget kanan.

Langkah 1:
Buka Browser Mozilla Firefox, kemudian ketikkan di addres browser alamat blog yang ingin diketahui kode css dan html nya.

Langkah 2:
Arahkan Mouse / pointer ke bagian blog yang ingin dituju (contoh: Bagian Sidebar). Klik kanan dan pilih Inspect Element Lihat . Layar monitor akan terbelah menjadi 2 bagian. Bagian bawah layar adalah kode Html dan Css. Lihat

Langkah 3:
Bagian blog yang dituju akan ditunjukkan dengan garis putus - putus. Bila bagian blog yang dituju belum sesuai dengan yang diinginkan, geserlah ke atas dan ke bawah pada kode - kode html yang ada, bukalah tanda segitiga hitam yang ada dengan cara meng klik nya.

Jika bagian blog yang dituju sudah ketemu, kemudian klik Rules yang ada pada belahan layar bagian kanan. Maka di bawahnya akan muncul kode - kode css terkait dengan Sidebar Widget. Dalam contoh kode css nya adalah:

.main-inner .column-right-inner {
padding: 0px 15px;
}

Artinya: Sidebar tersebut menerapkan Padding / Jarak Batas keluar sebesar 0 px untuk batas atas dan bawah dan 15 px untuk batas kiri dan kanan.

Yang paling penting dalam hal ini adalah: jika ingin merubah bagian tertentu pada sidebar widget gunakanlah kode:

.main-inner .column-right-inner {.........}

Contoh merubah kode Css Sidebar Widget (coba letakkan kode css di bawah ini diatas </b:skin> lalu lihat hasilnya):

.main-inner .column-right-inner {
    padding: 0px 10px;
    font-family: forte;
    font-size: 11px;
   background: #900;
}

Langkah 4:
Klik Computed utk melihat kode css sidebar dan kode umum dari body blog. Font untuk melihat jenis huruf yang berlaku saat ini. Box Model untuk melihat ukuran bidang yang dituju Lebar X Tinggi dalam satuan pixel. Secara berurutan (dari tengah) angka - angka tersebut menunjukkan Ukuran Bidang Tujuan - Padding dan Margin.

Lebih jelasnya silahkan lihat ilustrasi gambar berikut:

Sebelum mengganti atau merubah template sebaiknya baca juga bagaimana cara merubah template yang aman.

Baca Selengkapnya »

Mengganti Dan Merubah Template Blog Dengan Aman

Mengganti atau merubah template blog berarti juga menganti atau merubah kode - kode Css dan Html dari template blog itu sendiri. Dalam mengganti Css dan Html template haruslah berhati - hati. Sebab dengan kesalahan sedikit saja bisa membuat tampilan blog jadi rusak atau berantakan.

Lantas bagaimana cara yang tidak hanya sekedar mudah tapi juga harus aman dalam mengganti dan merubah template blog ?

Langkah 1:

Dalam browsing dan posting blog saya selalu menggunakan browser Chrome. Tapi dalam urusan mengganti atau merubah template wajib hukumnya bagi saya untuk menggunakan mozilla firefox. Sebab tampilan blog bisa berbeda di chrome dan di firefox, dan saya pernah mengalaminya. Hal tersebut dikarenakan Mozilla Firefox terlalu peka terhadap tanda (.) (') (spasi). Sedangkan browsing chrome lebih familiar dalam menerjemahkan tanda - tanda itu.

Langkah 2:

Buatlah cadangan atau backup template aslinya dengan menggunakan fasilitas dari blogger cadangkan / pulihkan. Berilah nama file cadangan tersebut dengan nama yang mudah diingat dan simpanlah pada folder khusus di komputer. Misalnya dengan nama: 1-template-asli.xml.

Langkah 3:

Dalam merubah kode Css sebaiknya semua diletakkan diatas kode ]]></b:skin> dan berilah keterangan agar mudah dalam merubahnya bila nanti dibutuhkan. Kode Css biasanya di awali dengan tanda dot (.) atau string (#). Misalnya merubah warna background header:

/*merubah header start*/

.header-outer {background: #a8a8a8;}

/*merubah header finish*/

]]></b:skin>

Langkah 4:

Berilah keterangan bila merubah atau menambah kode Html. Kode Html biasanya diawali dengan tanda tag <. Contoh menambah kode untuk membuat search engine:

langkah 5:

Simpanlah setiap artikel untuk posting dan widget / gadget kedalam file tersendiri di komputer dengan menggunakan notepad.

Langkah 6:

Cadangkan / backup template setiap selesai melakukan perubahan pada bagian blog. Misalnya setelah merubah bagian header cadangkan template dengan memberi nama file:

template: 2-template-sd header.xml

Enam langkah itulah yang telah saya tempuh dalam mengganti atau merubah template blog. Tidak hanya sekedar mudah tapi juga aman dan saya sudah membuktikannya. Salam sukses.

Baca Selengkapnya »

Mengganti Background Header Blog Dengan Mudah

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.

Contoh mengganti warna background header dengan ilustrasi dari warna biru #052d52 menjadi merah #b02045 sebagai berikut:

Langkah 1:

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 background 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 dapat dilihat pada:

Gambar sebelum ganti background header.
Gambar setelah ganti background header.

Jika menginginkan background berupa gambar atau foto untuk header, maka langkah awalnya adalah harus tahu terlebih dahulu ukuran header nya.

Semoga artikel yang ringkas ini membawa manfaat.

Baca Selengkapnya »