Cara Ngeblog

Tampilkan postingan dengan label Templates. Tampilkan semua postingan

Cara Memasang Breadcrumb Agar Terindeks Google

Cara Memasang Breadcrumb Agar Terindeks Google buat yang pengen melengkapi template seo Friendly nya dan membuat navigasi atau breadcrum yang diindeks oleh mesin pencari google silahkan mengikuti langkah langkah berikut ini

Berikut ini adalah Cara Agar Breadcrumb Langsung Terindeks di Google :

Login ke blogger.com.
Pada Dashboard klik design, kemudian klik Edit HTML
Kemudian centang Expand Template Widget
Cari kode berikut:

<div class='post hentry'> atau <div class='post hentry uncustomized-post-template'>

5. Copy kode dibawah ini dan paste atau letakkan diatas kode yang tadi.

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'> <span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"> <a expr:href='data:blog.homepageUrl' itemprop="url"><span itemprop="title">Home</span></a> > </span><span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' itemprop="url"><span itemprop="title"><data:label.name/></span></a> <b:if cond='data:label.isLast != "true"'> > </b:if> </b:loop> </b:if> > </span><span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title"><data:post.title/> </span></span></div> </b:if></b:if>

6. Kemudian cari kode </b:skin> lalu setelah ketemu copy dan paste kode dibawah ini di atas kode </b:skin> tadi.

.breadcrumbs{padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px;font-size:95%;line-height:1.4em; border-bottom:3px double #cadaef;}

7. Terakhir klik simpan/save
Postingan Cara Memasang Breadcrumb Agar Terindeks Google ini untuk melengkapi postingan saya mengenai breadcrumb beberapa waktu yang lalu

Seo Friendly Blogger Template

Seo Friendly Blogger Template, Template merupakan salah satu faktor juga dalam serp di goole kata para master sih, la wong saya sediri juga cuma asal kalo pilih tempalte hee, akan tetapi pada postingan berikut ini saya ingin memberikan beberapa rekomendasi template yang seo friendly katanya, dimana penentuan seo friendly sebuah template berdasarkan plugin seo doctor yang saya install di mozzila saya,

Dan selain itu faktor fast loading juga sangat berpengaruh dalam serp, jika memilih template sebaikanya memilih tampilan yang sedikit gambar, berikut ini beberapa blogger template yang seo friendly menurut saya, dan pastinya template ini semuanya gratis asal kalian mejaga etika dengan tidak menghilangkan link kredit di footer, dan semoga kalian menghargai hasil karya orang lain,

1. Simple SEO Blogger Template

Features Of Simple SEO Blogger Template

3 Column Blogger Template
Right Sidebar
Search Engine Friendly
Meta Tag ready (easy edited)
Adsense ready (easy edited)
Thumbnail Recent Post installed (easy edited)
Different admin comment
Compatible With Mozilla, Flock, Chrome, Opera and IE

Live Demo | Download | Download Mirror

2. Thesis SEO Blogspot Template

Apa saja fitur-fitur template SEO Friendly ini ?

SEO Friendly
Visitor Friendly
Dilengkapi dengan Dinamic heading (h1 pada header di index, dan h1 di judul post pada halaman posting)
Dilengkapi dengan dinamic metatag deskripsi dan keyword otomatis (metatag wajib untuk menghindari duplikat meta deskripsi & keyword)
Quicklink ke kotak komentar
Sudah dipersenjatai Autoreadmore
dilengkapi dengan tambahan beberapa Meta tag untuk mempermudah robot menjelajah blog sobat.
Loading yang cepat
Konsep minimalis & simple

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh8BLe5DlPsYQnA4xFf1F0XcXwZQppk2x5nu1aCDZhNUxQv153bKX7TtExYvwmMj1vtte2CTLHv_-PMlB06d9C4cIs14oaEt2WTWj2s40BEtVh0uGUQYe8uBPDojIf1wThtGk__0_vgd-0/s320/Thesis_for_blogger.png

Demo dan Download
Live Demo : Thesis for Blogger/Blogspot
Download : Download via box

3. Modify My Blogspot

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhunAb2znAPmo0Cdl5BfrlPpV49okhQoYFa_y3xbk9VuOT63Z7aLvqkQCiK4GNfDd-CC2sF-QvpjUnyu3fZeWFijHpi4D60EU34j1LL4-riy6RJDDuIx3iZxEUCTDqbxMzBpAUWM30YRB6b/s400/Modify+My+Blogspot.jpg

Demo | Download

Diatas merupakan beberpa contoh Seo Friendly Blogger Template yang bisa kalian jadikan tampilan untuk blogger anda, dan bagi yang masih punya referensi untuk Seo Friendly Blogger Template silahkan share di kolom komentar

Cara mengganti header pada templates blog, ini mungkin bagi para master blog merupakan perkerjaan yang sangatlah mudah, dan tidak perlu mikir, heee, tapi saking banyaknya yang menayakan kepada saya bagaimana cara mengganti header, maka belajar kelompok kali ini kita akan membahas hal tersebut,
Sebelum mengganti header templates teman-teman harus menyiapkan gambar yang akan dipakai sebagai heder, bisa dibuat sendiri menurut selera kita masing-masing, dan untuk formatnya usahakan gambar yang akan kita pakai formatnya memanjang,
Ini tak kasih contoh gambar yang bisa digunakan sebagai header, seperti yang ada diblog saya ini

Setelah itu buka account blogger kita, kemudaian klik layout, pada bagian header, klik edit, setalh itu pilih gambar, pilih dari computer klik browse, dan kita cari gambar yang telah kita simpan tadi,
Disini ada 3 pilihan untuk setting gambar
1. Dibalik Judul dan keterangan, ini menandakan judul blog dan diskripsinya akan tetap tampil diatas gambar header yang kita masukan,
2. Selain Judul dan keterangan itu menandakan hanya gambar header saja yang akan tampil, Judul dan diskripsi tidak akan muncul
3. Susutkan agar sesuai, untuk menyesuakan ukuran gambar dengan besarnya gambar yang ada di header kita
Setah kita masukan gambar, kemudian simpan, dan blog kita sudah mempunyai header yang kita inginkan,

Cara mengganti background pada templates

Lama ga up date mungkin postingan ini udah banyak di bahas ama master-master tutorial blog lainya, tapi ga ada salahnya jika saya memberanikan diri untuk kembali mengulas tetang cara mengganti background templates, atau latar belakang tampilan templates kita

Yang kita perlukan hanyalah ,mengerti kode-kode warna yang ada bisa lihat pada postingan master tips dan trik blogging berikut ini mengenai kode warna

Setelah mengetahui kode warna gimana ya? Ga usah kawatir, sekarang coba kita masuk ke account blogger kita dan kemudian masuk ke pengaturan dan edit html,

Jangan lupa untuk menghindari hal-hal yng tidak diinginkan download templates lama kita jika ada sesuatu hal yang tidak kita inginkan terjadi, setelah itu, cari kode sperti di bawah ini

body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

dan apabila menginginkan pergantian warna maka ganti teks yang berwarna merah diatas dengan kode warna yang ada inginkan seperti yang ada di tempatnya mas kendhin yang tadi

setelah selesai kemudian pratinjau templates, jika sudah sesuai dengan keinginan kita tinggal kita save aja, jadi deh, gampang to? tapi ini khusus untuk templates yang minima, Moga-moga tips ini bermanfaat

Cara memperlebar kolom pada templates blog

Setelah beberapa hari tidak up date blog, gatal juga pengen kasih sesuatu heee, tapi yan gini Cuma trik sederhana cara meperlebar kolom pada templates blog kita, tetapi untuk templates bawaan dari blogger, bukan dari templates yang sudah dimodifikasi
Sebelum kita masuk ke masalah ada baiknya kita mengenal dulu bagian- bagian dari templates blogger, maka sebuah template akan mempunyai tiga elemen penting, yaitu :
• Elemen Header
• Elemen Outer
• Elemen Footer
Untuk elemen Outer di bagi kembali menjadi :
• Elemen main, elemen main ini adalah elemen tempat kita menyimpan posting, jadi apabila kita memposting sebuah artikel maka akan masuk dan di tampilkan pada elemen ini

• Elemen Sidebar, elemen sidebar ini adalah merupakan elemen untuk menyimpan berbagai blog tools ataupun aksesori yang kita inginkan untuk mempercantik blog.

Outer-Wrapper merupakan wadah untuk menyimpan main-wrapper serta sidebar-wrapper. Jadi jika kita ingin menambah kolom baru atau dengan kata lain sidebar baru, maka hal yang pertama wajib di lakukan adalah menambah nilai lebar dari Outer-wrapper itu sendiri

Nah sekarang bagaimana cara melebarkan kolom yang ada pada templates kita, tetapi sekali lagi ingat ini hanya untuk tempalates yang masih asli bawaan dari blogger atau templates minima,

Ikuti langkah2 berikut ini tapi dengan catatan jangan mencentang Expand Widget Template, karena akan muncul kode-kode yang tidak saya mengerti

Nah Langkah pertama cari kode seperti dibawah ini

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Ganti 660px menjadi 760px sehingga menjadi seperti bawah ini

#header-wrapper {
width:760px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

cari kode seperti dibawah ini

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Ganti 660px menjadi 760px dan scriptnya menjadi seperti dibawah ini

#footer {
width:760px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

nah untuk wadah nya istilahnya kita sudah memperlebar dari 660px menjadi 760px maka kolom sidebarnya bisa kita tambahin lebar 100px dan untuk menambahkan lebar sidebarnya kita tinggal mencari kode di bawah ini

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

ganti 220px menjadi 320px ( atau selebar jumalah yang kita tambah tadi )jika kita ingin menambah lebar lagi tergantung berapa px yang kita tambah saat di #header-wrapper { dan footernya tadi,

jika yang ingin diperlebar main atau kolom utamanya yang biasanya berisi tentang postingan kita, maka kita tingagl cari kode di bawah ini

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Tapi ingat jika kita menambahkan lebar keduanya kita juga harus menambah jumlah px yang kita tambahkan di #header-wrapper, dan footer-wrapernya tadi
ok selamat mencoba , tapi ingat jangan mencoba pada blog utama kita terlebih dahulu, coba pada blog percobaan dulu
semoga berhasil.. pren

free templates buat blog

pada saat kita belajar bersama cara buat blog, sudah tersedia templates dari blog yang asli, akan tetpi tidak banyak pilihnya dan mungkin tidak sesuai dengan pilihan topik yang kita bahas di blog,

untuk membuat teplates sebenarnya bisa kita utak-atik sendiri sehingga bisa sesuai dengan kemauan kita, akan tetapi untuk blogger pemula seperti kita hal ini cukup sulit dan rumit,

tapi tidak usah berkecil hati, karena untuk saat ini banyak sekali diosediakan templates geratis buat blog kita

berikut ini beberapa daftar web yang menyediakan free bloger templates tau template gratis buat kita antra lain :

http://www.eblogtemplates.com/

http://www.finalsense.com/

http://www.blogspottemplate.com/

http://www.geckoandfly.com/blogspot-templates/freshbloggertemplates.blogspot.com/

http://www.gosublogger.com/

http://www.giselejaquenod.com.ar/blog/blogger-templates/

http://template-unik.blogspot.com/
http://www.suckmylolly.com/

http://k2modify.blogspot.com/

http://www.blogcrowds.com/

http://webbietips.blogspot.com/