Cara Membuat Menu Blog Dengan Gambar

Cara membuat menu blog dengan gambar dengan keterangan dibawahnya seperti beranda, daftar isi, hubungi, dan lain-lain. Untuk lebih jelasnya lihat gambar dibawah ini. Lalu klik salah satu gambar, maka akan terbuka halaman baru sesuai dengan URL halaman yang saya masukan.

• 
  Beranda
• 
  Desain Blog
• 
  Tips dan Trik
• 
  Hubungi

---

Cara membuat menu blog dengan gambar. Ikuti langkah-langkah dibawah ini.

---

1. Login ke blogger. Dari halaman dasbor pilih pengaturan Tata Letak.
2. Lalu Add Gadget, setelah itu Pilih HTML/JavaScript.
3. Selanjutnya susun kode CSS dan HTML Seperti format dibawah ini.
<style>
KODE CSS
</style>
KODE HTML
4. Sebagai contoh, Copy semua kode dibawah ini. dan Pastekan di Gadget HTML/JavaScript Tadi.
<style>
#tabs31{margin:0;padding:0;}
#tabs31 ul{list-style: none;}
#tabs31 ul li{float:left; margin-right:25px;}
#tabs31 img {width:50px; height:50px;}
figcaption {text-align:center;color: blue;font-weight:bold;font-size:10px;}
</style>

<div id="tabs31">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqil7qXy0kYlW4XFoNK1QIzFn7_lQ8ezwcYmSfCXbdS_UYC90HBabJlMmu_pfgZqDCzr414ra4R1ioYr-5DtoLaT6gKhuxdjufcEbtzqincw0XELgRpo1d7UfOMRj7pjlOlgCK7XwkHEx/s128/DAFTAR-ISI.jpg" title="Beranda" width="50" height="50" /></a>
<figcaption>Beranda</figcaption></li>

<li><a href="http://fandrajuani.blogspot.com/search/label/Desain%20Blog">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN0mTEYQ26AG8RS2sgafsZz_jq5wZJQFvT7pezEakL4Drb2P7BSPDxDzA98gS7BiqahMHzPf7qn-CFfQu_V4G0LSvFnDJWqKRBJnuMmVragYf_MdeoKN4S22j8M2fI7UYFB79vzhzMkWJI/s128/DESAIN.jpg" title="Desain Blog" width="50" height="50" /></a><figcaption>Desain Blog</figcaption></li>

<li><a href="http://fandrajuani.blogspot.com/search/label/Tips%20dan%20Trik">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9npg-LVshr2Wd7MGftouccXmIaVf7ee_sO_PGH9YSajL-Ex2OoNFsF-aBUZs7mXaz_emH3807_I4VGFWkiXSWP0MYxJ62gnBadEOy7-qT3-Ia3z0heETJ1q6lK6lEETMtuOx_FLTbCdr3/s128/TIPS-DAN-TRIK.jpg" title="Tips dan Trik" width="50" height="50" /></a>
<figcaption>Tips dan Trik</figcaption></li>

<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">
<img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggfpHS3mLFQSr8b7Xqa8wwkPknUAYCtUoh4jPPFPvgvJrqBBAWZiDxLmpdv2DvSE6UOZWhyphenhyphenpgmvkAHMO7eV3hsfOlbF3g761KmN_yNYB3-N2wFZoA79hSHgYR7z0ViZhDAXEmsN1rtNWpT/s128/HUBUNGI.jpg" title="Hubungi" width="50" height="50" /></a>
<figcaption>Hubungi</figcaption></li>

</ul>
</div>
5. Save Gadget, selesai.

---

Keterangan Kode Css Langkah 5: 

---

• #tabs31 ul{list-style: none;} untuk menghilangkan list-style bulet.
• #tabs31 ul li{float:left; membuat gambar horizontal, dan margin-right:25px; spasi atau jarak kanan antar gambar.
• #tabs31 img {width:50px; height:50px;} tinggi dan lebar gambar.
• figcaption untuk mengatur keterangan dibawah tulisan.

---

Keterangan Kode HTML Langkah 5:

---

• format dari menu <li><a href="url halaman menu">
• <img src="Url gambar" title="keterangan gambar saat disentuh mouse" width="50" height="50" /></a>
• <figcaption>Keterangan dibawah gambar</figcaption></li>

 Jika ingin menambahkan menu tambahkan format seperti dibawah ini.
<li><a href="url halaman menu"><img src="Url gambar" title="keterangan gambar saat disentuh mouse" width="50" height="50" /></a><figcaption>Keterangan dibawah gambar</figcaption></li>

---

Gunakanlah gambar dengan ukuran yang sama disetiap gambar, agar tampilan menu terlihat rapi, caranya bisa lihat di cara membuat icon blog. Cara mengambil URL gambar, bisa kamu baca di artikel cara upload dan ambil url gambar. Cara mengisi url halaman menu, baca artikel cara membuat dan mengisi menu blog. URL Label atau kategori juga bisa kita masukan ke menu.

Semoga Bermanfaat.

Menambahkan Gambar Disamping Judul Posting

Cara menambahkan gambar disamping judul posting blog.

Gambar diatas dengan lingkaran merah adalah contoh gambar yang ditempatkan di samping kiri posting blog, gambar tersebut akan muncul di setiap posting blog yang ada. Akan saya coba jelaskan secara detail, agar bisa di mengerti. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, ke pangaturan template.
2. Selanjutnya klik edit HTML dan cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin>
h3.post-title {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOo9V1KNYQQ5pPrEpHX8ykiOXCBwEoj2c61sW5HB222sEj8Y55QW36S8iwdZCWF0ZLrldXJ7KDG5lK0Lt_bhnXGql42FgfFzWtFA9X0GLpqzDExhWHkGLFXLc0h5weEwpUsQLwMWPD9LWI/s1600/32x32.jpg")no-repeat;padding:10px 0px 0px 40px;}
3. Save template, Selesai.

Keterangan kode langkah 2:

url("gambar.jpg") adalah kode url sumber gambar yang akan digunakan.
no-repeat membuat gambar tidak berulang.
padding:10px 0px 0px 40px; mengatur posisi tulisan judul posting.

Jika gambar ingin ditempatkan disebelah kanan atau tengah judul posting blog. Tambahkan kode berikut disamping no-repeat; contoh: no-repeat top right;

•  right untuk bagian kanan.
•  center untuk bagian tengah

Untuk membuat icon dengan gambar sendiri, silakan baca di cara membuat icon website. Dan untuk cara mengambil URL dari gambar sendiri, baca di cara upload dan ambil url gambar.

Itulah sedikit cara untuk mendesain blog sendiri, dengan menambahkan gambar disamping judul posting blog, yang akan muncul disetiap posting artikel yang ada di blog. Silakan baca juga cara membuat tulisan bayangan di blog di judul, deskripsi blog bagian tab, sidebar dikiri-kanan blog, sampai judul posting, bisa kita beri tulisan bayangan. Semoga Bermanfaat.

Cara Mengganti Tulisan Beranda,Posting Lama,Posting Lebih Baru

Cara mengganti tulisan beranda, posting lama, posting lebih baru di blog dengan kata-kata sendiri atau dengan gambar navigasi halaman.Tulisan tersebut berada di bawah bagian akhir pada saat kita membuka artikel, atau bagian bawah dari daftar posting di halaman awal blog. Untuk blog berbahasa inggris biasanya bertuliskan home, next, previous. Untuk lebih jelasnya lihat gambar dibawah ini.

Tulisan seperti contoh gambar diatas itulah yang akan kita ganti. cara mengganti tulisan beranda, posting lama, posting lebih baru di blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blog, dan pilih pengaturan template.
2. Selanjutnya klik Edit HTML dan cari 3 kode Biru dibawah ini. Gunakan Ctrl F untuk mempermudah Pencarian.
1. expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
Keterangan: Posting Lebih Baru(Previous)

2. expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
Keterangan: Posting lama(Next)

3. <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
Keterangan: Beranda(Home)
3. Jika hanya ingin mengganti tulisannya saja dengan kata-kata kita sendiri. maka ganti Format kode diatas menjadi seperti ini.
expr:title='data:olderPageTitle'>Selanjutnya</a>
expr:title='data:newerPageTitle'>Sebelumnya</a>
<a class='home-link' expr:href='data:blog.homepageUrl'>Rumah</a>
4. Ganti kode warna merah dengan kata yang kamu inginkan. Untuk beranda/home ada 2 kode yang sama, ganti kedua2nya. Selanjutnya Preview, jika sudah berubah baru save.
5. Jika ingin mengganti tulisannya dengan gambar, maka tambahkan Url gambar, Contoh:
expr:title='data:newerPageTitle'><img src='http://c.dryicons.com/images/icon_sets/blue_velvet/png/32x32/back.png'/></a>

expr:title='data:olderPageTitle'><img src='http://b.dryicons.com/images/icon_sets/blue_velvet/png/32x32/forward.png'/></a>

<a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://c.dryicons.com/images/icon_sets/blue_velvet/png/32x32/home.png'/></a>
6. Kode warna Biru itu URL gambar dengan tambahan formtanya. Beranda/home ada 2 kode yang sama, ganti kedua2nya. Jika sudah, silakan dipreview dulu, klo sudah berubah baru save.
7. Untuk mengganti dengan gambar lain, ganti url gambar, dengan url gambar yang kamu inginkan. Format gambar seperti dibawah ini.
<img src='URL gambar kamu'/></a>
8. Coba cari digoogle gambar, dengan kata kunci icon home. Cari gambar yang ada pilihan ukurannya. Pilih gambar ukuran 32 atau sesuai dengan yang kamu inginkan. Selanjutnya Copy URLnya(klik kanan tepat digambar dan pilih copi URL gambar) dan masukan kodenya di format kode diatas.
9. Salah satu web yang menyediakan icon gambar adalah http://dryicons.com/icon/blue-velvet/home/ silakan dicari gambar yang sesuai dengan yang kamu inginkan.

Silakan dibaca juga cara menghilangkan diberdayakan oleh blogger yang berada dibawah posting blog dan juga fitur-fitur lainnya, seperti navbar, langganan entri atom dan masig banyak lagi. Itulah sedikit cara untuk mendesain blog sendiri menggunakan template asli blogger, yaitu dengan mengganti tulisan beranda, posting lama dan posting lebih baru di blog. Semoga Bermanfaat.

Tombol Sosial Share Widget Untuk Blogger

Tombol sosial share widget untuk blogger. Seperti facebook tombol like, send, subcribe, recommend, Twitter follow, Google +, Google + 1 dan masih banyak lagi. Tombol share akan muncuk dibawah posting disetiap artikel yang ada di blog.

Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.

1. Kunjungi situs sharethis.com
2. Selanjutnya lakukan registrasi pendaftaran disitus tersebut.
3. Setelah selesai melakukan registrasi, silakan masuk Log In.
4. Dan klik Get Sharing Tools. 
5. Selanjutnya Step 1 pilih Platform Blogger
6. Step 2 Style, pilih bentuk tombol share yang kamu inginkan.
7. Step 3, atur tombol share yang akan dipasang di blog.

8. Setelah selesai, klik Finish Get the Code dan Pilih Multi Post
9. Selanjutnya klik Go, maka akan terbuka halaman baru Import Elemen Laman.

10. Dan klik Menambah Widget, pindahkan saja widget ke bagian footer bawah blog. Selesai.

Tombol sosial share sudah ada di blog, tapi muncul juga dihalaman awal blog. Cara menyembunyikannya, agar muncul hanya di bagian posting blog saja. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan Template.
2. Selanjutnya klik Edit HTML dan cari kode share this yang mirip dengan kode dibawah ini.
<b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>...</b:widget>
3. Semua kode masih tersembunyi, klik tanda >...< untuk membuka semua kode, sehingga tampilannya menjadi seperti ini.
<b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
<b:includable id='main'>...<b:includable>
</b:widget>
4. Klik lagi tanda >...< maka akan terbuka semua kode sharethis seperti dibawah ini.
<b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
5. Sekarang, tambahkan kode <b:if cond='data:blog.pageType == "item"'> dan </b:if> diantara kode lengkap sharethis diatas, contohnya:
<b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
6. Terakhir, Preview template, jika sudah hilang dari halaman awal blog, baru save template, Selesai.

Sekarang coba buka salah satu artikel di blog, dan lihat tombol sosial share yang sudah kamu buat tadi akan muncul dibawah posting, disetiap artikel yang ada. Jadi tidak menggangu tampilan awal halaman blog.

Silakan dibaca juga artikel lainnya tentang cara membuat komentar facebook diblog yang berada dibawah artikel blog, agar blog bisa dikomentari menggunakan akun facebook. Atau cara membuat facebook like page yang berbentuk kotak dengan tombol Like halaman, serta tampilan foto pengguna facebook yang menyukai halaman blog. Semoga Bermanfaat.

Breadcrumb Seo untuk Blogspot

Breadcrumb Seo untuk Blogspot. Breadcrumb berguna untuk memudahkan google untuk menelusuri isi dari blog kita, dan juga memudahkan pembaca melihat informasi letak artikel yang sedang dibaca. Breadcrumb letaknya berada di bawah menu header, dan diatas judul artikel yang sedang dibuka. Untuk lebih jelasnya, lihat contoh gambar dibawah ini.

Cara membuat breadcrumb seo untuk blogspot. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Selanjutnya klik edit HTML dan cari kode <b:include data='top' name='status-message'/> dan masukan kode berikut ini diatasnya.
<b:include data='posts' name='breadcrumb'/>
3. Setelah itu cari kode <b:includable id='main' var='top'> dan masukan kode berikut ini diatasnya.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:loop>
 » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
4. Save template, selesai.
5. Jika ingin merubah tampilan breadcrumb, tambahkan kode css diatas ]]></b:skin>
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;}
6. Silakan ubah sendiri, kode css nya sesuai dengan yang kalian inginkan.

Dari sini, pembuatan breadcrumb sudah selesai. Sekarang mengecek breadcrumb di google. Breadcrumb yang terindeks google, tampilannya akan seperti gambar dibawah ini.

Cara ceknya:

1. Kunjungi situs google http://www.google.com/webmasters/tools/richsnippets
2. Selanjutnya masukan URL dari salah satu artikel di blog kamu.
3. Klik Pratinjau, Selesai.

Setelah memasang breadcrumb seo di blog, google akan mengindeksnya dalam beberapa hari di hasil pencarian google. Silakan dibaca juga artikel lainnya tentang seo, yaitu tentang Belajar seo untuk blogger pemula Semoga Bermanfaat.

Belajar Seo untuk Blogger Pemula

Belajar Seo untuk blogger pemula. Seo atau search engine optimization berguna untuk meningkatkan peringkat artikel blog di mesin pencari google. Atau cara agar artikel blog berada di halaman pertama di google, ketika ada orang yang memasukan kata kunci di google search yang sesuai dengan isi dari artikel yang sudah kita buat.

Bicara tentang seo, ada banyak faktor yang membuat artikel bisa berada di halaman pertama google, dari umur blog, content isi dari artikel yang berkualitas, backlink dan banyak lagi yang lain. Disini kita akan mempelajari dasar-dasarnya terlebih dahulu. Dari mengubah title judul blog, menambahkan deskripsi, keywoards, dan tools seo yang sudah disediakan oleh blogger. Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.

Merubah Judul Title Blog

1. Login ke blogger > pengaturan template  > Edit HTML
2. Dan Cari kode <title><data:blog.pageTitle/></title> ganti menjadi
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/> | Desain Blog Tutorial dan Tips Trik Blogspot</title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
3. Ganti "Desain Blog Tutorial dan Tips Trik Blogspot" dengan judul yang kamu inginkan, tidak lebih dari 60 karekter. Dan tanda | dan - itu batas pemisah.
4. Save template, selesai.

---

Menambahkan meta deskripsi di Halaman awal dan setiap posting blog

1. Login ke blogger, dari halaman dasbor pilih Setelan > Preferensi Penelusuran > Tag Meta Deskripsi.
2. Pilih Aktifkan deskripsi penelusuran, dan isi deskripsi blog dengan penjelasan dari judul blog, panjang deskripsi Maksimum 150 karakter.

3. Simpan Perubahan, Selesai.
4. Sekarang, menambahkan Deskripsi di setiap posting blog.
5. Buka Entri Baru atau Edit posting yang ada. 
6. Dan Lihat bagian kanan entri, di bagian Deskripsi penelusuran isi dengan penjelasan dari isi posting blog, disarankan 20-30 kata saja.

7. Setelah itu klik selesai.

---

Menambahkan meta keywords kata kunci Blog

1. Login ke Blog, pengaturan template, edit HTML dan tempatkan keywoard yang berhubungan dengan isi blog, dibawah kode judul blog tadi.
<meta content='Fandra Juani,Desain blog,blogger,blogspot,tutorial,cara,belajar,Tips,Trik,edit template,pemula' name='keywords'/>
2. Ganti kata kunci diatas dengan kata kunci yang kamu inginkan. Isi keywords dengan kata kunci yang berbeda satu sama lainnya dan pisahkan setiap kata dengan tanda koma.

Setelan mengganti Title judul blog, menambahkan deskripsi dan keywords. Sekarang test tingkat seo blog kita, kunjungi http://www.submitshop.com/seo-tools/meta-tag-analyzer untuk melihat berapa skor seo title keseluruhan blog. Setelah selesai, lanjut ke langkah seo berikutnya yaitu menambahkan title dan alt gambar di posting blog.

---

Menambahkan Title dan Alt text gambar blog

1. Klik gambar di entri blog, dan isi title text dengan kata kunci 1 sampai 3 kata saja. Dan isi Alt text dengan penjelasan kata kunci gambar, jangan terlalu panjang. Contoh:

2. Isi setiap gambar dengan title dan alt yang sesuai dengan isi dari posting blog.

---

 Mengatur Tautan Permanen URL Posting Blog

1. Buka Entri Baru, dan klik bagian kanan entri pada Tautan permanen. Contoh:

2. Gunakan Tautan Permanen Khusus, jika judul posting terlalu panjang. Buatlah URL yang masih bisa dimengerti maksudnya, walaupun diperpendek url nya, setidaknya 4 sampai 7 kata saja. Setelah di publikasikan URL posting blog tidak bisa diedit lagi alias permanen, karena itu setiap kita membuat entri baru, buatlah judul yang benar-benar sesuai dengan isi dari posting artikel.

Selanjutnya adalah menambahkan Internal link url dari satu posting ke posting yang lain. Masukanlah Link Url dari posting atau artikel yang saling berhubungan antara satu dengan yang lainnya. Contoh: Jika kita sedang membuat artikel dengan judul belajar membuat blog, maka masukanlah link url dari posting kita yang lain seperti belajar menulis blog yang telah dipublikasikan sebelumnya.

---

Cara Menggunakan Internal Link Blog

1. Klik Link pada bagian tools entri, dan masukan url artikel dari dalam blog. contoh:

2. Masukan url di bagian web address, dan ganti tulisan di bagian text to display dengan judul atau isi dari url tersebut.
3. Jangan gunakan kata Disini atau Klik Disini, Baca Disini pada bagian text to display.
4. Gunakanlah kalimat sesuai judul, maksimal 4 sampai 5 kata saja, jangan panjang-panjang.
5. Selanjutnya klik Ok. Abaikan saja pengaturan yang lainnya.

Seperti contoh diatas, saya memasukan link url dari posting yang lain berjudul cara mempercepat loading blog dengan 4 kata saja. URL yang dimasukan sesuai dengan isi dari artikel ini, tentang belajar seo, karena loading juga mempengaruhi seo. Sekarang coba klik tulisan ini tentang cara menulis artikel di blog , maka akan terbuka halaman baru yang berisi artikel lain yang ada di blog ini.

Terakhir adalah tentang Eksternal link atau memasukan URL dari situs lain diluar blog kita. Contohnya facebook.com yahoo.com dan lain-lain. Cara memasukannya di posting blog, sama seperti memasukan url internal link, yang membedakan adalah kita harus mencentang Add 'rel=nofollow' attribute. Untuk meningkatkan seo blog di google.

Untuk lebih jelasnya lagi tentang belajar seo blogger, coba cari di google dengan kata kunci seo for blogger, baca dari situs google, jangan situs lain, biasanya dalam format PDF untuk seo starter guide, isinya lebih lengkap dari cara diatas dan yang pasti sumber terpercaya dari google sendiri. Semoga Bermanfaat.

Tips dan Trik Mempercepat Loading Blog

Tips dan Trik Mempercepat Loading Blog. Untuk lebih jelasnya, ikuti langkah-langkah dibawah ini.

Tips Mempercepat Loading Blog

1. Mempersingkat Tampilan awal atau home blog dengan cara membuat baca selengkapnya di setiap halaman posting. Dengan begitu loading blog dihalaman awal blog akan terbuka lebih cepat.
2. Mengurangi atau mendelete widget yang tidak diperlukan, seperti widget jam, tanggal dan lain-lain. Jika memang tetap ingin mempertahankan widget2 tersebut, tempatkan widget di bagian footer bawah blog. Maka loading blog akan sedikit bertambah cepat, karena bagian-bagian terberat blog akan dibuka belakangan. 
3. Menampilkan 4 sampai 5 posting saja di halaman beranda/home blog. 
4. Jangan terlalu banyak menggunakan gambar di blog.
5. Kompres gambar yang akan dimasukan di blog, menggunakan Ms. Office Picture Manager atau software Compress gambar lainnya.
6. Menghilangkan gambar tang obeng diblog,  yang berada di setiap bagian widget yang digunakan.
7. Compress Template Blog. Caranya, silakan lihat di bawah.
8. Menghilangkan sidebar widget pada halaman tertentu. Caranya, lihat dibawah.
9. Mengatur lebar gambar agar tidak melebihi halaman posting.

---

Trik Mempercepat Loading Blog

---

Sebelumnya, test dulu kecepatan blog kamu di situs ini http://gtmetrix.com. Untuk melihat berapa skor kecepatan dari blog kamu. Selanjutnya, setelah melakukan cara-cara dibawah ini, test kembali kecepatan loading blog kamu di situs tersebut, untuk melihat berapa besar perbedaannya.

---

Cara Kompres Template Blog

---

1. Login ke blog, Dari halaman dasbor pilih pengaturan template.
2. Edit HTML dan Copy semua kode yang ada di template kamu dari awal sampai akhir.
3. Selanjutnya kunjungi situs http://htmlcompressor.com/compressor.html
4. Dan Pastekan semua kode tadi ke kotak yang ada disitus tersebut.
5. Setelah itu click COMPRESS dan pilih CHANGE

6. Terahir, Copy semua kode hasil compress tadi, dan pastekan ke template blog kamu. Save template, Selesai.

---

Menghilangkan Sidebar Widget pada halaman tertentu

---

1. Ada 2 cara menyembunyikan sidebar widget di halaman terntentu di blog.
2. Cara Pertama, Login ke blogger > pengaturan template > edit html > cari kode </head>
3. Dan tempatkan kode berikut diatas </head>
<b:if cond='data:blog.url == "http://fandrajuani.blogspot.com/p/daftar-isi_12.html"'>
<style type='text/css'>
.main-inner .columns {
padding-left: 0px;
padding-right: 0px;
}
.main-inner .column-left-outer {
display: none;
}
.main-inner .column-right-outer {
display: none;
}
</style>
</b:if>
4. Ganti ihttp://fandrajuani.blogspot.com/p/daftar-isi_12.html dengan URL halaman yang ingin sidebarnya disembunyikan. Save Template, selesai.
5. Cara kedua, cari kode <head>,
6. Dan tempatkan kode berikut diatas <head>
<b:if cond='data:blog.url == "http://fandrajuani.blogspot.com/p/hubungi.html"'>
<style type='text/css'>
.sidebar{
display: none;
}
</style>
</b:if>
7. Ganti http://fandrajuani.blogspot.com/p/hubungi.html dengan url dari halaman kamu. Save template, Selesai.

Dan yang terakhir, mengatur lebar gambar di postingan blog agar tidak melebihi halaman. Jika kita menggunakan ukuran gambar ekstra besar, biasanya gambar akan melewati batas halaman posting, bisa sampai terkena widget bagian sidebar kanan, dan itu akan membuat loading blog lebih lambat. Berikut ini adalah script kode untuk mengatur lebar gambar, untuk lebih jelasnya ikuti langkah-langkah dibawah ini.

---

Mengatur lebar gambar posting blog

---

1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Dan klik edit HTML, selanjutnya cari kode  ]]></b:skin> dan masukan kode berikut diatasnya.
#header img { max-width: 99%; max-height:90%; margin:1px 1px;padding:0px;}
.post img { vertical-align:bottom; max-width:90%; max-height:90% }
#navigation img { vertical-align:bottom; max-width:80%; }
3. Save Template, selesai.

Sebenarnya blogger sudah memberikan tools untuk mengatur gambar saat kita menulis artikel, tapi itu tidak cukup untuk mengatur gambar dengan lebar yang sangat besar. Setelah memasukan kode diatas, maka gambar dengan lebar ekstra besar, tidak akan melewati lebar halaman posting, dan cukup membantu untuk mempercepat loading blog. Silakan baca juga cara mempercepat loading blog lanjutan dari artikel ini. Untuk menambah kecepatan loading blog anda. Semoga Bermanfaat.

Cara Membuat Tulisan Bayangan di Blog

Cara Membuat Tulisan Bayangan di judul Blog, deskripsi, text tab dibawah header, sidebar widget yang berada di kanan-kiri blog, footer bagian bawah dan juga judul posting blogspot. Contoh gambar silakan lihat dibawah ini.

Gambar diatas adalah contoh judul sidebar widget yang diberi tulisan bayangan. Tulisan bayangan membuat tulisan terlihat seperti ada 2 tulisan yang menyatu, dengan warna bias yang bisa diganti dengan warna lain dan juga tingkat bias tulisan yang bisa diatur sesuai keinginan. Untuk lebih jelasnya lagi, coba lihat tulisan dibawah ini.

CONTOH TULISAN DENGAN WARNA BAYANGAN

Cara Membuat Tulisan Bayangan di Blog. Silakan ikuti langkah-langkah dibawah ini.

Cara Membuat Tulisan Bayangan di Blog

1. Login ke blogger, dari halaman dasbor pilih pengaturan template.

2. Klik edit HTMl dan cari kode ]]></b:skin>
3. Pilih dan Pasang kode berikut di atas kode ]]></b:skin>

1. Judul Blog
.Header h1 { text-shadow: 2px 2px 5px #1780dd; }
2. Deskripsi
.Header .description { text-shadow: 2px 2px 5px #1780dd; }
3. Text Tab dibawah Header
.tabs-inner{ text-shadow: 2px 2px 5px #1780dd; }
4. Judul Sidebar Widget dikiri-kanan blog.
.sidebar .widget h2 { text-shadow: 2px 2px 5px #1780dd; }
5. Judul Footer Widget bagian bawah.
.footer-inner .widget h2{ text-shadow: 2px 2px 5px #1780dd; }
6. Judul Posting Blog.
h3.post-title{ text-shadow: 2px 2px 5px #1780dd; }

3. Ganti #1780dd; dengan warna yang kalian inginkan. 

4. Save Template, Selesai.

Mungkin setiap kode awal diatas tidak semuanya sama dengan kode di template kamu. Biasanya yang berbeda di bagian .sidebar .widget h2 { dan .footer-inner .widget h2{ , coba ganti keduanya dengan kode awal h2 { . Maka h2 { akan merubah semua judul widget sidebar dan footer. Dan juga kode h3.post-title{ jika tidak berjalan di blog kamu, coba ganti dengan h3.post-title, .comments h4 { atau h3.post-title, h4 {.

Setiap template mempunyai perbedaan kode, tapi dari yang pernah saya coba, biasanya perbedaan berada di awal atau akhir kode. Jika memang berbeda dengan kode2 diatas, coba cari kode yang semirip mungkin. Silakan dibaca juga cara membuat facebook box like yang berbentuk kotak facebook dengan tombol like di blog.

Dan juga Tips Trik menulis artikel blog menggunakan gambar dan kotak script, yang dimasukan ke tengah-tengah daftar di numbered list. Atau menghilangkan atribut lengkap blogger seperti tulisan diberdayakan oleh blogger, navbar, langganan entri atom, gambar tang obeng yang berada disetiap widget blog, dan juga meghilangkan tulisan tampilkan posting dengan label ketika kita membuka halaman label, semuanya ada. Semoga Bermanfaat.

Cara membuat facebook fans page di blog

Cara membuat facebook fans page di blog. Untuk membuat kotak facebook fans page atau facebook like box. Kita perlu membuat halaman di facebook, agar bisa tersambung ke blog. Untuk lebih jelasnya, ikuti langkah² dibawah ini.

Cara membuat halaman facebook

1. Kunjungi http://www.facebook.com/pages/create/

2. Dan buat halaman baru, pilih salah satu.

---

3. Sebagai contoh pilih perjuangan atau komunitas. Lalu isi judul komunitas, dan klik mulai.

---

4. Selanjutnya masukan alamat URL Blog dan deskripsi halaman kamu.

5. Terahir Lewati langkah-langkah selanjutnya. Dari sini pembuatan halaman facebook sudah selesai. Dan selanjutnya membuat kotak facebook fans page atau facebook like box untuk dimasukan ke blog.

---

Cara Membuat facebook like box di blog

1. Kunjungi https://developers.facebook.com/docs/reference/plugins/like-box/

2. Dan masukan alamat URL halaman dari facebook yang kamu buat tadi di kotak Facebook page URL.

---

3. Selanjutnya atur tampilan kotak facebook page sesuai dengan yang kalian inginkan.

4. Lalu klik Get Code pada bagian bawah.

---

5. Maka akan terbuka halaman kode plugin like box. Pilih bagian IFRAME

6. Copi kode script IFRAME, 

---

7. Dan pastekan di Gadget HTML blog. Caranya: Dari blogger pilih pengaturan tata letak dan klik tambahkan gadget, lalu pilih HTML/Javascript. Dan pastekan kode IFRAME didalamnya.

---

8. Beri judul lalu save template. Dan lihat tampilan blog.

9. Selesai.

---

Ulangi cara membuat facebook fans page jika kurang lebar atau kurang tinggi kotak page facebooknya. Jika ingin membuat tombol page like saja, kunjungi situs plugin facebook tadi, dan pilih like button, lalu  ikuti seperti cara membuat kotak facebook fans page.

Berikutnya adalah menyembunyikan kotak facebook fans page dari halaman awal blog.

1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Dan klik edit HTML dan cari kode NAMA JUDUL dari kotak facebook fans page kamu. Contohnya Belajar blog. kodenya seperti ini.
<b:widget id='HTML1' locked='false' title='Belajar Blog' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
3. Sekarang tempatkan kode <b:if cond='data:blog.pageType == "item"'> dan </b:if> diantara kode-kode diatas. Contohnya.
  <b:widget id='HTML1' locked='false' title='Belajar Blog' type='HTML'>
    <b:includable id='main'>
      <b:if cond='data:blog.pageType == "item"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
        </b:if>
</b:includable>
  </b:widget>
4. Save template selesai. 

Setelah menambahkan kode <b:if cond='data:blog.pageType == "item"'> dan </b:if> maka kotak facebook tidak akan muncul di halaman awal blog, tapi di halaman posting blog. Jika tidak ingin menyembunyikan kotak facebook fans page di awal blog, lewati saja cara ini.

Sekarang coba baca juga cara  membuat komentar facebook di blog dibawah posting blog. Bersebelahan dengan kotak komentar blogger. Semoga Bermanfaat.

Tips dan Trik Menulis Artikel Di Blog

Tips dan Trik Menulis Artikel Di Blog dengan  gambar dan kotak script yang ditempatkan di paragraf daftar bernomor Numbered List. Untuk lebih jelasnya, ikuti langkah-langkah dibawah ini.

Memasukan gambar di daftar bernomor Numbered List

1. Buatlah seperti gambar disamping ini. 3 daftar bernomor menggunakan Numbered List dan kosongkan dibagian nomor 2.

---

2. Selanjutnya masukan gambar diatas 3 daftar tadi, dan Klik gambar, dan klik kanan pilih CUT.

---

3. Setelah di cut, maka akan ada ruang kosong dengan alamat url yang tertinggal dari gambar tadi, klik Link untuk menghilangkan URL gambar.

---

4. Selanjutnya Paste kan gambar tadi ke daftar kedua. Lihat gambar.

5. Lihat tanda kotak di nomor 2, akan kita hapus, jadi urutannya 1 Daftar, gambar dan 2 nama. caranya.

---

6. Klik HTML disebelah Compose, lalu lihat dibagian URL Gambar, hapus kode <li> diawal dan </li> akhir kode Url Gambar. Lihat Gambar.

---

7. Setelah kode  <li> dan </li> dihapus, kembali lagi klik Compose, dan lihat urutan gambar.

8. Berurutan 1. Daftar, Gambar dan 2. Nama. Selesai.

---

Itulah sedikit trik menempatkan gambar di paragraf daftar bernomor(Numbered List), Tulisan blog jadi lebih tersusun rapi, tanpa menghitung gambar didalam paragraf nomor. Trik Berikutnya adalah memasukan Kotak script di daftar bernomor(Numbered List).

Memasukan Kotak Script di daftar bernomor Numbered List

1. Sama Seperti cara diatas, buatlah daftar numbered list.

---

2. Lalu Klik lagi bagian HTML, dan lihat kode <li>&nbsp;</li> seperti gambar disamping ini.

---

3. Sekarang ganti <li>&nbsp;</li> dengan kode script dibawah ini.

<div style="border: 3px #1780dd solid; padding: 10px;background-color:#ffffff; height: 100px; width: 300px;
text-align: left;">
.kode script disini.</div>

---

 4. Maka tampilan HTML menjadi seperti gambar disamping.

---

5. Setelah itu klik lagi compose, dan lihat urutan daftar numbered list.

6. Klik tulisan kode script disini, dan masukan kode script yang kamu inginkan.

7. Selesai.

---

Dengan begitu urutan paragraf bernomor Numbered list di blog terlihat lebih rapi. Yang menjadi masalah dalam melakukan kedua cara diatas adalah ketelitian, bagaimana kita bisa melihat kode yang harus dihapus di url gambar dan kode script <li></li> yang harus diganti untuk memasukan kotak script didalam daftar numbered list. Satu lagi trik menulis artikel, yaitu dengan mengganti numbered list dengan huruf. Berikut caranya.

Mengganti numbered list dengan Huruf

1. Buatlah Numbered List seperti biasa.
2. Selanjutnya klik bagian HTML disebelah Compose, dan cari kode <ol> tambahkan kode type="A" didalamnya. contohnya seperti dibawah ini.
<ol>
<li><br /></li>
</ol>

Menjadi

<ol type="A">
<li><br /></li>
</ol>
3. Setelah menambahkan kode type="A" , kembali ke bagian compose, maka angka 1 berubah menjadi A, untuk B,C,D dan seterusnya akan berurutan otomatis sesuai abjad, seperti kita menggunakan numbered list 1,2,3,4. Selesai.

Contoh diatas hanya menggunakan satu gambar di 3 daftar Numbered list. Bayangkan dengan tulisan yang, bisa sampai 8 daftar Numbered list ditambah lagi dengan banyak gambar. Dan juga menggunakan kotak script didalam daftar numbered list. Sekali lagi ketelitian adalah kuncinya. Coba satu persatu terlebih dahulu dengan daftar Numbered list yang pendek, klo sudah bisa baru gunakan kedua2nya dalam satu daftar Numbered list.

Semoga kedua cara diatas dapat membantu kamu menulis artikel dengan rapi di blog. Silakan baca juga cara menghilangkan diberdayakan oleh blogger dan fitur tulisan dan gambar dari blog. Atau baca juga cara membuat menu di blog yang berada di bawah judul blog. Semoga Bermanfaat.

Cara Menghilangkan Diberdayakan Oleh Blogger

Cara menghilangkan diberdayakan oleh blogger, dan tulisan fitur blogger lainnya seperti tulisan langganan entri atom, tampilkan posting dengan label, gambar tang obeng dan juga navbar dibagian atas blog. Untuk lebih jelasnya, ikuti langkah-langkah dibawah ini.

Cara Menghilangkan Diberdayakan Oleh Blogger

1. Login ke blogger. Dari halaman dasbor ke pengaturan template.
2. Selanjutnya klik edit HTML dan cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin>
#Attribution1 { height:0px; visibility:hidden; display:none }
3. Save Template, Selesai.

---

Cara menghilangkan tulisan langganan entri atom

1. Login ke blogger. Dari halaman dasbor ke pengaturan template.
2. Selanjutnya klik edit HTML dan cari kode berikut ini.
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
3. Dan hapus delete kode-kode diatas. Simpan template, Selesai.

---

Cara menghilangkan tulisan tampilkan posting dengan label

1. Login ke blogger. Dari halaman dasbor ke pengaturan template.
2. Selanjutnya klik edit HTML dan cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin>
.status-msg-wrap{ display:none; }

.status-msg-body{ display:none; }

.status-msg-border{ display:none; }
3. Save template, Selesai.

---

Cara menghilangkan Gambar Tang Obeng

1. Login ke blogger. Dari halaman dasbor ke pengaturan template.
2. Selanjutnya klik edit HTML dan cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin>
.quickedit{display:none;}
3. Selanjutnya cari kode <b:include name='quickedit'/> ada banyak kode yang sama dengan  <b:include name='quickedit'/> ganti semua kode menjadi.
<!--b:include name='quickedit'/-->
4. Save Template, Selesai.

---

Cara menghilangkan Navbar

1. Login ke blogger. Dari halaman dasbor ke pengaturan template.
2. Selanjutnya klik edit HTML dan cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin>
#navbar, #navbar-iframe { height: 0px; visibility: hidden; display: none; }
3. Save template, Selesai.

Selesai sudah cara menghilangkan tulisan diberdayakan oleh blogger, navbar, tampilkan semua posting, langganan entri atom, dan juga gambar tang obeng di blog. Silakan baca juga cara membuat dan mengisi menu blog dan juga cara membuat baca selengkapnya otomatis di blog. Semoga Bermanfaat.

Cara Membuat dan Mengisi Menu Blog

Cara membuat dan mengisi menu blog dengan daftar isi, contact, label, kategori dan lain-lain. Menu yang terletak dibawah header blog. Untuk lebih jelasnya, ikuti langkah-langkah dibawah ini.

Cara membuat menu blog

1. Login ke blogger. Dari halaman dasbor klik Laman.
2. Ada 2 pilihan pembuatan menu, Pertama Laman kosong dan yang kedua Alamat Web(UPDATE:2014 TIDAK ADA LAGI). Seperti gambar dibawah ini.

3. Jika memilih Laman kosong, maka tampilannya seperti menulis artikel di entri, silakan isi tulisan didalamnya lalu beri Judul laman Contoh:Daftar isi. Dan klik Publikasikan.

4. Jika memilih Alamat web. Pada kolom Alamat web (URL) isi dengan alamat url kamu, contohnya: coba buka salah satu artikel kamu, dan copi url yang ada di address bar bagian atas, contohnya seperti url halaman artikel yang sedang anda baca ini. http://fandrajuani.blogspot.com/2013/05/cara-membuat-dan-mengisi-menu-blog.html.
   
   Selanjutnya pastekan url di kolom Alamat web (URL) seperti gambar dibawah ini, lalu isi kolom atasnya dengan judul menu, contoh: Membuat Menu dan klik Simpan.

5. Selanjutnya, kembali ke pengaturan laman dan pilih Tampilkan Laman sebagai Tab Atas.

6. Terakhir Save pengaturan, Dan Lihat tampilan blog kamu, maka akan ada menu dibawah judul blog. Selesai.

Update Blogger 2014: Untuk menamplkan menu laman yang telah dibuat.

1. Ke pengaturan tata letak. 
2. Selanjutnya klik tambahkan gadget. 
3. Dan pilih LAMAN. Simpan.

---

Setelah bisa membuat menu di blog, sekarang kita coba mengisi nya dengan daftar isi, contact, dan memasukan label ke menu laman. Berikut cara membuatnya.

Cara Mengisi Menu Blog Dengan:

Daftar isi atau Sitemap

1. Buka laman baru seperti cara diatas, dan pilih Laman Kosong.

2. Dan Klik Bagian HTML, Lalu masukan kode berikut didalamnya. Seperti gambar diatas.
<script src="http://me-sitemap.googlecode.com/files/sitemapblog.js" type="text/javascript">
</script>
<script src="http://fandrajuani.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
3. Ganti http://fandrajuani.blogspot.com/ dengan alamat web kamu. Save Template, Selesai. 
4. Jika belum ada juga daftar isinya, coba edit salah satu artikel kamu, lalu Klik Label yang letaknya disebelah kanan, dibawah tulisan setelan entri. Lalu beri nama yang kalian inginkan.

5. Selanjutnya Klik selesai. Dan Klik Perbarui.
6. Terakhir, coba lihat lagi daftar isi kamu. Selesai.
7. Agar semua artikel kamu masuk ke daftar isi, beri nama label di setiap artikel kamu. Seperti langkah 4.

---

Contact atau Hubungi

1. Buka laman baru, dan pilih laman kosong, pada bagian Compose isi dengan alamat email kamu yang bisa dihubungi. Save Template, Selesai.
2. Atau Jika ingin membuat contact dengan kotak, bisa kalian buat dialamat web ini http://123contactform.com nanti akan dijelaskan caranya disitus tersebut.

---

Mengisi menu dengan Label atau ketegori

1. Buka laman baru, dan pilih Alamat Web.
2. Dan Masukan Alamat URL Label atau kategori yang ingin dimasukan, dan beri judul.

3. Terakhir, publikasikan. Selesai.

---

Cara ambil URL Label atau Kategori

1. Klik Label atau Kategori yang ingin diambil URL nya. Contoh: Label Menu Desain

2. Maka akan terbuka halaman label dengan isi artikel yang sama nama labelnya.
3. Copy alamat URL Pada bagian Address Bar bagian atas.

4. Dan pastekan ke alamat web di Laman Tadi. Tampilan alamat URL ada persennya seperti ini http://fandrajuani.blogspot.com/search/label/Menu%20Desain.
5. Save Laman, Selesai.

Lakukan cara yang sama jika ingin menambahkan label yang lain ke laman menu. Artikel diatas merupakan contoh pembuatan menu menggunakan Laman di blog, ada juga membuat menu menggunakan Html dan css agak sedikit ribet karena menggunakan banyak kode, caranya baca di artikel cara membuat menu html dan css. Dan Silakan baca juga artikel lainnya seperti cara membuat komentar facebook dibawah postingan blog dan cara mengganti warna sidebar. Atau menghilangkan tulisan diberdayakan oleh blogger. Semoga Bermanfaat.