cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di...

33
cara membuat breadcumb di blog 00:18 Bang Kewok Lumayan cukup lama juga saya tidak mengupdate dan membuat artikel baru di blog ini,oleh karena itu pada malam ini,saya akan membuat tutorial cara membuat breadcumb di blog.Breadcumb ini,konon katanya bisa menjadikan blog kita SEO friendly dan disukai oleh google,maka dari itu tidak ada salahnya anda memasang breadcumb ini.Selain itu,dengan adanya breadcumb maka akan memudahkan pengunjung blog untuk mengetahui letak dimana artikel anda tersimpan alias navigasinya menjadi lebih mudah.Bila anda belum tahu seperti apa itu breadcumb,silahkan lihat gambar dibawah ini. Lihat yang dilingkari garis warna merah,itu adalah breadcumb.Jika anda ingin memasang atau membuat breadcumb di blog,silahkan baca artikel ini sampai selesai :). Pertama-tama,masuk ke menu Rancangan - Edit HTML - Expand template widget.Lalu cari kode di bawah ini melalui F3 atau Ctrl+F <b:if cond='data:post.title'> Dan bila sudah ditemukan,simpan kode ini dibawah kode yang diatas tadi. <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumb'> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;

Transcript of cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di...

Page 1: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

cara membuat breadcumb di blog

00:18 Bang Kewok Lumayan cukup lama juga saya tidak mengupdate dan membuat artikel baru di blog ini,oleh karena itu pada malam ini,saya akan membuat tutorial cara membuat breadcumb di blog.Breadcumb ini,konon katanya bisa menjadikan blog kita SEO friendly dan disukai oleh google,maka dari itu tidak ada salahnya anda memasang breadcumb ini.Selain itu,dengan adanya breadcumb maka akan memudahkan pengunjung blog untuk mengetahui letak dimana artikel anda tersimpan alias navigasinya menjadi lebih mudah.Bila anda belum tahu seperti apa itu breadcumb,silahkan lihat gambar dibawah ini.

Lihat yang dilingkari garis warna merah,itu adalah breadcumb.Jika anda ingin memasang atau membuat breadcumb di blog,silahkan baca artikel ini sampai selesai :).

Pertama-tama,masuk ke menu Rancangan - Edit HTML - Expand template widget.Lalu cari kode di bawah ini melalui F3 atau Ctrl+F<b:if cond='data:post.title'>

Dan bila sudah ditemukan,simpan kode ini dibawah kode yang diatas tadi.

<b:if cond='data:blog.pageType == "item"'><div class='breadcrumb'><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop>&gt;</b:if>

Page 2: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

<data:post.title/></div></b:if>

Sehingga menjadi seperti ini:<b:if cond='data:post.title'><b:if cond='data:blog.pageType == "item"'><div class='breadcrumb'><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop>&gt;</b:if><data:post.title/></div></b:if>Setelah langkah tadi selesai,cari kode ]]></b:skin> dan simpan kode ini di atas kode tersebut.

.breadcrumb {padding:4px 4px 4px 0px;margin: 0px 0px 10px 0px;font-size:96%;line-height: 1.2em;border-bottom:2px double #003000;}

Hasilnya seperti ini :

.breadcrumb {padding:4px 4px 4px 0px;margin: 0px 0px 10px 0px;font-size:96%;line-height: 1.2em;border-bottom:2px double #003000;}]]></b:skin> Selanjutnya,simpan template dan lihat apakah sekarang blog anda sudah ada breadcumbnya atau belum.Silahkan baca juga artikel tips blogger dan SEO lainnya dibawah.Semoga bermanfaat dan jangan lupa berkomentar ya kalau tips nya sukses.Selamat mempraktekan cara membuat breadcumb di blog.

Page 3: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

Cara Menghilangkan Navbar Blogger

Sobat Ihsan mengajukan pertanyaan yang di tulis melalui shoutbox. Beliau menanyakan bagaimana cara menghilangkan Navbar Blogger, dan kali ini saya akan mencoba membahasnya. Apa itu Navbar Blogger? navbar blogger adalah suatu frame yang berukuran kecil miliknya blogger yang terdapat di bagian atas blog. frame ini berfungsi untuk login ke blogger atau bisa juga sebagai jalan untuk melihat blog lain atau bisa juga untuk menandai blog yang sekiranya melanggar TOS blogger seperti blog yang mengandung unsur SARA ataupun pornografi untuk dilaporkan ke pihak blogger.

Apakah kita bisa menghilangkan Navbar Blogger? jika pertanyaannya seperti itu maka tentu jawabanya adalah bisa, akan tetapi sebelum menghilangkan navbar tersebut ada baiknya sobat berfikir-fikir dahulu dan silahkan baca TOS blogger secara seksama, karena resiko yang akan di pikul sangatlah berat yaitu akan di tutupnya account blogger sobat atau dengan kata lain sobat akan kehilangan blog kesayanangannya. Lumayan mengerikan bukan? memang beberapa waktu yang lalu tersiar kabar bahwa pernah ada yang menanyakan ke pihak blogger apakah boleh menghilangkan navbar blogger atau tidak? dan katanya sekarang pihak blogger membolehkan untuk menghapus navbar, tapi entahlah apakah berita tersebut benar atau tidak yang jelas sobat harus selalu membaca TOS secara seksama.

Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.

Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :

/* hilangkan navbar----------------------------- */

#navbar-iframe {height:0px;visibility:hidden;display:none}

Atau bisa juga menaruh kode berikut persis di bawah kode <body> :

<style type='text/css'>#navbar-iframe {display:none;}</style>

Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :

Page 4: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

Untuk template klasik

1. Sign in di blogger

2. Klik menu Template

3. Klik menu Edit HTML

4. Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman

5. Copy kode berikut lalu paste di atas kode </style>

/* hilangkan navbar----------------------------- */

#navbar-iframe {height:0px;visibility:hidden;display:none}

6. Klik tombol Simpan Perubahan Template

7. Selesai.

Untuk template baru

1. Sign in di blogger

2. Klik menu Layout

Page 5: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

3. Klik menu Edit HTML

4. Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data

5. Copy kode berikut lalu paste di atas kode ]]></b:skin>

/* hilangkan navbar----------------------------- */

#navbar-iframe {height:0px;visibility:hidden;display:none}

6. Klik tombol Simpan Template

7. Selesai.

Selamat menikmati blog tanpa navbar !

Page 6: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

Cara Menghilangkan Widget Attribution Blogger

Posted By Anasku On Jul 7, 2010 at 3:31 PM

Pada episode yang lalu saya sudah menerangkan tentang kemunculan widget attribution blogger dan cara memindahkanya, pada episode kali ini pun masih membahas tentang widget attribution blogger namun yang saya bahas kali ini adalah cara menghilangkanya.

Caranya cukup simple dan mudah banget, ikuti Saja langkah dibawah ini.pertama masuk pada "Design" Lalu "Edit HTML"masukkan code css dibawah ini diatas code ]]></b:skin>

#Attribution1 {height:0px; visibility:hidden;display:none}

Tinggal SAVE deh.

Dan jika Anda menggunakan code CSS di postingan ini, tinggal ganti code yang berwarna biru dengan code diatas.

Page 7: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

Cara Membuat Float Image (Gambar Melayang) Pada Blog

Pada kesempatan kali ini kita akan belajar bagaimana membuat float image (gambar melayang) pada blog. Sobat bisa lihat pada pojok kiri atas dan bawah dari blog ini, ada 2 buah gambar yang terus berada pojok browser yang selalu mengikuti kursor dari mouse. Itulah yang dimaksud dengan float image. Cukup mempercantik tampilan blog kita kan?

Kelebihan dari float image ini adalah selain memperindah blog juga dapat kita sisipi link. Sehingga jika ada yang mengklik link tersebut maka akan langsung menuju ke tautan yang telah ditentukan.

Tertarik untuk mencobanya?Langsung saja langkah-langkah pembuatannya adalah sebagai berikut:1. Login blogger dan langsung menuju ke Design > Edit HTML.

2. Cari kode berikut (bisa menamnfaatkan Ctrl+F)]]></b:skin>

3. Taruh kode berikut diatas kode ]]></b:skin>#trik_pojok { position:fixed;_position:absolute;bottom:5px; left:15px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }NB: Kita bebas mengatur letak float image yang akan tampil pada blog kita. Caranya adalah dengan mengganti kata yang dicetak tebal pada kode diatas. Kode diatas adalah untuk meletakkan float image pada pojok kiri bawah. Jika sobat menginginkan letaknya pada pojok kanan atas, maka kata yang dicetak tebal tinggal diganti dengan top dan right.Kita juga bebas untuk mengatur koordinat dari float image yang akan kita tampilkan. Caranya adalah dengan mengganti kode angka yang dicetak miring pada kode diatas. Misalkan kode diatas adalah bottom:5px; left:15px; maka float image yang muncul akan berada 5 pixel dari bawah dan 15 pixel dari sisi kiri. Sobat tinggal mengatur hal tsb sesuka sobat.

4. Kemudian letakkan kode dibawah ini diatas kode </body><div id="trik_pojok"> <a href="http://www.bangjohan.com/"> <img src="http://i54.tinypic.com/svrhip.png" border="0" /></a> </div>NB: Kata yang dicetak tebal adalah link yang akan berfungsi pada float image. Sobat bisa mengganti link tersebut sesuai keinginan sobat. Selanjutnya kata dicetak miring adalah sumber gambar dari float image. Sobat bisa menggantinya dengan logo sobat sendiri, tapi terlebih dahulu harus diupload di situs photo sharing misalnya http://tinypic.com/

5. Terakhir simpan perubahan pada template sobat dan lihat hasilnya.

Page 8: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

Mengenali Fungsi-Fungsi Dalam menu Setting Blog Posted by Herman on Saturday, October 18, 2008 17 comments

Sebagai blogger pemula kadangkala kita akan kebingungan dengan fungsi-fungsi yang tersedia pada blogger. Padahal jika diatur dengan baik kita bisa mengoptimalkan blog kita dengan maksimal.

Pada postingan ini saya akan memberi sedikit penjelasan mengenai fungsi-fungsi dalam menu setting. Supaya teman-teman bisa lebih mudah untuk mengoptimalkan blognya.

1. Menu Settings -> Basic

Blog Tools: untuk restore (import blog), backup (export blog) dan hapus blog secara permanen (delete blog)

Title: untuk mengisi judul blog. Judul ini akan muncul di header blog dan halaman search engine (serp)

Description: untuk mengisi deskripsi blog. Deskripsi ini akan muncul di bagian header blog Add your blog to our listing: untuk mengatur apakah blog anda mau ditampilkan pada menu

blogger seperti blogger play dan next blog atau tidak Let search engines find your blog: Untuk mengatur apakah blog anda mau di index di

halaman mesin pencari Google dan Weblogs.com atau tidak Show quick editing on your blog: untuk menampilkan icon quick edit pada postingan yang

berfungsi untuk mengedit postingan secara langsung dari halaman blog Show email post links: untuk menampilkan icon berbentuk amplop pada postingan yang

berfungsi untuk memperbolehkan pembaca mengirim link artikel kita kepada orang lain via email

Adult Content: untuk menentukan apakah blog kita mengandung konten porno atau tidak Select Post Editor: untuk memilih jenis post editor yang ingin anda gunakan Enable Transliteration: untuk mengaktifkan fungsi terjemahan pada post editor kedalam

bahasa yang dipilih.

2. Menu Setting -> Publishing

Custom domain: Untuk mengganti alamat dari blogspot.com ke domain sendiri seperti .com, .net, .org, dll

Blogspot Address: Kalau custom domain untuk mengganti alamat blogspot ke domain sendiri maka yang ini untuk mengganti alamat blogspot yang satu ke alamat blogspot yang lain. (yang belum terdaftar)

Word Verification: kode verifikasi

3. Menu Setting -> Formatting

Show at most: untuk menentukan jumlah postingan yang mau ditampil pada halaman blog Date Header Format: Untuk menentukan format tanggal yang mau ditampilkan diatas judul

posting Archive Index Date Format: untuk menentukan format tanggal yang mau ditampilkan pada

menu arsip yang terletak di kolom sidebar Timestamp Format: untuk menentukan format waktu yang mau ditampilkan pada postingan

Page 9: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

Time Zone: untuk menentukan zona waktu tempat tinggal kita. Misalnya (GMT+07.00) Jakarta untuk wilayah Indonesia

Language: untuk memilih bahasa yang mau digunakan Convert link breaks: untuk mengatur apakah mau dikonversi kode tag pada post editor

secara otomatis. Biarkan Yes saja. Show Title Field: untuk menampilkan judul postingan. Jika pilih No maka blogger akan

mengambil beberapa kata pada awal paragraf sebagai judul postingan. Pilih Yes saja Show Link Field: untuk menambahkan link yang berhubungan kedalam setiap postingan. Jika

tidak ada, pilih No saja Enable Float Alignment: untuk mengaktifkan fungsi penjajaran pada text dan gambar Post Template: untuk mengisi teks yang mau ditampilkan pada kotak posting

4. Menu Setting -> Comments

Comments: untuk menampilkan kotak komentar Who Can Comment: untuk menentukan siapa yang boleh memberi komentar Comment Form Placement: untuk menentukan dimana letak kotak komentar Comments default for posts: untuk mengatur apakah mau diberi komentar pada postingan

baru atau tidak Backlinks: untuk mengatur apakah mau diberi notifikasi jika ada yang memasang link pada

artikel kita atau tidak Backlinks default for posts: untuk mengatur apakah mau mengaktifkan fungsi backlinks atau

tidak Comments Timestamp Format: untuk memilih format waktu yang mau ditampilkan pada

kotak komentar Comment Form Message: untuk menampilkan pesan singkat diatas kotak komentar Comment Moderation: untuk menyaring komentar yang masuk sebelum diposting Show word verification for comments: untuk menampilkan kode verifikasi jika ada yang

ingin memberi komentar supaya terhindar dari sistem bot yang melakukan spam Show profile images on comment: untuk menampilkan gambar profil dari komentator yang

memiliki blog di blogger Comment Notification Email: untuk mendapatkan pemberitahuan dari blogger melalui email

jika ada yang meninggalkan komentar

5. Menu Settings -> Archiving

Archive Frequently: untuk mengatur frekuensi arsip. Misalnya arsip harian, mingguan atau bulanan

Enable Post Pages: mengaktifkan halaman posting untuk setiap artikel

6. Menu Settings -> Site Feed

Allow Blog Feed: untuk menentukan jumlah karakter artikel yang dikirim via RSS Feed atau Feed email

Post Feed Redirect URL: untuk mengisi alamat URL Feed Anda. Jika belum punya dikosongin aja

Post Feed Footer: untuk mengisi teks tambahan pada feed

Page 10: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

7. Menu Settings -> Email & Mobile

Blogsend Address: untuk mendapat kiriman postingan ke alamat email Anda setiap kali Anda memposting pada blog Anda.

Email posting address: untuk menentukan alamat email blogger yang Anda inginkan. Supaya Anda bisa memposting artikel langsung ke blog Anda via email. Catatan: Jangan memberitahu alamat email ini ke orang lain. Jika tidak, orang lain bisa memposting artikel di blog Anda.

Mobile Devices: Untuk memposting artikel ke blog anda via MMS atau SMS dari hp anda. Cara register dan penggunaanya baca disini

8. Menu Settings -> OpenID

OpenId: Secara ringkas, openId semacam identitas anda di internet. Dengan openid anda bisa masuk ke dalam website yang berbeda-beda yang mendukung openid tanpa memasukkan username dan password anda seperti lazimnya. Keterangan lanjut tentang OpenID baca disini aja ya

9. Menu Setting -> Permissions

Blog Authors: memperbolehkan orang lain untuk ikut menulis di blog Anda. Caranya klik Add Authors lalu masukkan alamat email orang yang mau diundang kemudian klik Invite

Blog Readers: untuk mengatur siapa yang bisa membaca artikel blog Anda

Page 11: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

Tampilan Blogspot Makin Gress

(Suara Merdeka Minggu - Rubrik Konek 24 Agustus 2008)

Sepertinya Google tidak pernah kehabisan inovasi untuk produk-produk yang dihasilkannya. Meskipun gratis, ada saja fitur-fitur baru yang ditambahkan ke dalamnya. Tidak ketinggalan dengan Blogspot atau Blogger.com, layanan Blog gratis yang banyak digunakan di seluruh dunia.

Jika Anda melihat ke dalam layanan yang disediakan oleh Blogspot, tampaknya semua yang telah disediakan di sana sudah mencukupi semua kebutuhan pengguna Blog. Meskipun tidak berbayar, pengguna diberikan kebebasan untuk mengganti kode-kode penyusun tampilan Blog. Sehingga tampilan menjadi lebih bervariasi dan dapat digunakan untuk menggali potensi pendapatan.Pengaturan tata letak asesori-asesori (widget) di dalam tampilan Blog juga dapat diatur dengan menggunakan fasilitas drag and drop. Untuk memindahkan posisi asesori, pemilik Blog hanya perlu menggeser-geser asesori dengan menggunakan mouse. Hal ini sangat memudahkan pengguna, baik pemula maupun mahir, untuk mengatur tata letak.

Mengganti Domain Blogspot

Bahkan kita juga diberikan kebebasan untuk mengganti domain blogspot.com menjadi domain co.cc, com, net, org, atau yang lain tanpa dikenai biaya tambahan. Contoh implementasi penggantian domain blogspot.com tersebut dapat dilihat di situs www.bukutips.co.cc dan blogridwan.sanjaya.org.Dengan banyaknya fasilitas tersebut, apakah Google masih merasa perlu untuk mengembangkan lebih lanjut? Ternyata masih! Pada tanggal 11 Agustus yang lalu, Google merubah sedikit tampilan di pengaturan tata letak.

Jika semula untuk menambahkan asesoris, kita memilih link Add a Page Element atau Tambah Elemen Halaman, maka kini berubah menjadi Add Gadget atau Tambah Gadget. Penggunaan istilah Gadget ketimbang istilah widget yang sudah banyak digunakan oleh layanan blog lainnya, membuatnya menjadi terdengar lebih futuristik.

Page 12: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

Selain perubahan istilah, Anda akan menemukan koleksi asesori-asesori tambahan ketika menekan link Add Gadget. Jika sebelumnya koleksi asesori hanya terbatas pada asesori-asesori dasar yang saat ini digolongkan di dalam kategori Gadget Basic, kini bertambah semakin banyak dan dikelompokkan ke dalam dua belas kategori!

Beberapa asesori yang disarankan masuk ke dalam kelompok Featured. Sedangkan asesori yang banyak digunakan Blogger masuk dalam kelompok Most Popular. Namun bagi mereka yang menginginkan untuk melihat asesori terbaru, dapat memilih kelompok Newest.

Kolaborasi Google

Semua gadget yang ditawarkan bukan produk dari Google semata. Kolaborasi antara Google dan penyedia gadget di seluruh dunia sangat terlihat di sini. Ada gadget untuk web counter, instan messenger, permainan, kata-kata mutiara, seni, saham, valas, emas, olahraga, dan masih banyak lagi.

Apakah hal ini berarti pengguna Blogspot harus belajar lagi? Ternyata tidak! Secara prinsip, operasionalnya masih sama dengan sebelumnya. Jika dulunya Anda menambahkan elemen halaman yang dipilih melalui tombol Add to Blog atau Tambahkan ke Blog, saat ini Anda bisa menambahkan dengan menggunakan tombol plus (+).

Saat ini Google sudah menyediakan tambahan asesoris yang luar biasa banyaknya. Anda hanya perlu memilih kategori asesori yang Anda inginkan dan menambahkan gadget yang diinginkan dengan menggunakan tombol plus (+).

Koleksi asesori yang cukup lengkap ini akan membuat Anda tidak perlu mencari-carinya kemana-mana.

Page 13: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

CARA AGAR BLOGSPOT BISA DIAKSES DENGAN VERSI MOBILE.

Akses internet memakai ponsel makin hari makin meningkat seiring dengan makin canggih nya fitur-fitur online pada ponsel itu sendiri. Begitupun dengan peng-akses blog, pengunjung via genggaman kian deras. Nah mereka biasanya lebih memilih blog yang loading nya cepat+tidak berat ini artinya mereka mengharapkan hematnya pemakaian pulsa.

Bagi pengguna wordpress tentu bukan hal yang sulit untuk mendapatkan tampilan mobile saat di akses dengan ponsel,karena memang wordpress telah menyediakan fitur ini. Nah kalau blogspot bagaimana???

Setelah browsing ciungtips mendapatkan sebuah cara mengubah blogspot ke versi mobile yaitu dengan Blogertouch.

Dibandingkan mippin yang tidak otomatis masuk ke versi mobile maka dengan blogertouch blogspot kita akan otomatis masuk versi mobile ketika di akses dengan ponsel.Prosesnya cepat,gampang dimengerti langkah-lankahnya.

- http://bloggertouch.appspot.com –

1. Masuk ke blogertouch. Dengan id google kamu.

2. Masukan alamat blog kamu.3. masukan id.4. Import code yang diberikan. Selesai.

Bloger touch mendukung 1. google anlytic2. adsense3. pencarian.4. Pagination 5. halaman6. Dan yang penting Gratissss.. Xiii..

Page 15: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

Menghilangkan Navbar

Untuk menghilangkan navbar yang ada di atas halaman blog anda seperti gambar di bawah ini :

lakukan langkah-langkah berikut :

1. Login terlebih dahulu pada blog anda2. Klik Menu Layout3. Klik Edit HTML tab (Note : Untuk menghindari kesalahan, silahkan Backup terlebih

dahulu blog anda dengan memberikan checklist pada Download full template dan klik Download)

4. Temukan code body { pada blog anda (Note : tekan Ctrl + F untuk melakukan pencarian dan ketikkan kata yang ingin dicari).

5. Silahkan Copy dan Paste code dibawah ini dan letakkan dibagian atas code body {

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

6. Klik tombol Save Template7. Dan lihat hasilnya…

Page 16: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

GAMBAR SELALU TAMPIL DI ATAS

Agar gambar selalu berada diatas Blog anda, walaupun halaman blog berganti, atau berpindah-pindah, ikuti langkah-langkah berikut:

1. login ke blog anda2. Klik layout, kemudian klik tab Edit HTML3. Pada kotak CSS anda, cari script ]]></b:skin> kemudian letakkan script berikut ini

diatas script ]]></b:skin>

#trik_pojok {position:fixed;_position:absolute;bottom:0px; left:0px;clip:inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

4. Silahkan diganti posisi gambar tersebut dengan mengganti huruf yang bercetak tebal dengan Left - Right - Bottom - TOP

5. Selanjutnya cari script berikut ini </body> dan letakkan script dibawah ini sebelumnya script </body>

<div id="trik_pojok"><a href="http://modiftampilanblogger.blogspot.com"><img src="http://photobucket/love.gif" border="0" /></a></div>

6. Silahkan diganti alamat yang berwarna biru dengan alamat blog anda kemudian ganti alamat yang berwarna merah dengan alamat gambar anda.

Page 17: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

Merubah Tampilan Gadget Link List

Posted By Anasku On Sep 19, 2008 at 6:22 PM Satu lagi alternatif blogroll (tempat link teman di blog kita) setelah kemaren membahas tentang cara membuat blogroll dengan manual HTML sekarang saya akan mencoba membuat blogroll dengan gadget Blogger default yaitu link list.

Pada standartnya gadget ini tidak begitu sering digunakan oleh para peblogger karena jika Linknya banyak akan memenuhi halaman Blog kita dan jika linkya di klik tidak membuka jendela baru tapi malah akan membuka di jendela lama yang kita gunakan.

tapi saya ada suatu trik untu membuat gadget Link List ini menjadi sederhana dengan efek scroll dan efek pembukaan link di jendela baru.. Lihat contoh di blog saya (disini)

Masih banyak peblogger yang tidak ingin repot membuat tempat link teman dengan gadget bawaan dari blogger yaitu "link list" secara penggunaanya mudah gitu... Oke kita langsung saja ke cara pembuatanya

Lanhkah pertama yaitu sudah Log In ke blogger dan pasti sudah memasang Gadget "Link List"

Setelah langkah pertama terlaksanakan lalu masuk menu Layout kemudian masuk menu Edit HTML dan centang "expand widget templates"

Lalu Cari Code HTML seperti dibawah ini

<ul><b:loop values='data:links' var='link'><li><a expr:href='data:link.target'><data:link.name/></a></li></b:loop></ul>

Page 18: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

Kemudian Ganti code diatas dengan Code dibawah ini..

<div style='width:100%; height:100px; overflow:auto;'><ul><b:loop values='data:links' var='link'><li><a expr:href='data:link.target' target='new'><data:link.name/></a></li></b:loop></ul></div>

Perhatikan code height:100px; itu adalah tinggi dari link list bisa kamu ubah-ubah sesuai selera kamu.. jadi jika linkya melebihi batas tinggi maka akan ada efek scrollnya

Kemudian Simpan dehh.. dan lihat hasilnya..

Page 19: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

Install Widget on Blogger

1. Click Install Widget to open Blogger in a new window, and follow the steps below in that window. Login to your Blogger account if necessary.

2. Select a blog if you have more than one, then click on Add Widget.

3. (Optional) For better performance, Drag and Drop the LinkWithin box under the "Blog Posts" box.

Page 20: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

4. Click on Save.

And you're done! The widget should now appear on your blog.

If there is a technical problem with the widget, visit our support page

Page 21: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

NOTE: The quality of recommended stories will improve once we complete our crawl of your blog. This may take up to several hours, depending on the number of stories in your blog.

Page 22: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

Menampilkan Widget Di Halaman Tertentu

Posted By Anasku On Aug 23, 2010 at 7:10 PM

Hai sobat blogger, bagaimanakah kabar Anda sekalian ? semoga dalam keadaan sehat dan selalu ceria. Pada tulisan kali ini, saya akan membagikan ilmu yang sudah saya pelajari kepada Anda yaitu masih tentang blogger dan topik yang saya bahas kali ini adalah seputar "Menampilkan widget pada halaman tertentu" yang sering digunakan pada template megazine, misalnya anda ingin menampilkan widget dihalaman post saja atau tidak ada hanya dihalaman post.

Nah langsung saja kita pelajari bersama-sama.

Langkah pertama yang harus Anda lakukan adalah masuk menu "Design" kemudian masuk ke bagian "Edit HTML" lalu centang kotak "Expand widget templates"

lalu cari code widgetnya seperti ini

<b:widget id='HTML1' locked='false' title='Pesan' 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>

Page 23: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

<b:include name='quickedit'/>

</b:includable></b:widget>

Untuk mempermudah pencarian silahkan masukkan judul widget seperti "Pesan" kedalam kotak pencarian browser (ctrl + F)

Kemudian tambah code

<b:if cond='data:blog.url == data:blog.homepageUrl'>

dan ditutup dengan code </b:if> untuk menempatkan di hanya halaman depan saja

dan ditempatkan seperti dibawah ini

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'><b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'><!-- 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>

Perhatikan penempatan code yang berwarna hijau !

kemudian save.

Dan dibawah ini adalah code yang bisa digunakan untuk penempatan lainya

Untuk menempatkan di halaman depan/index digunakan code<b:if cond='data:blog.pageType == data:blog.homepageUrl'>

Untuk menempatkan di halaman Archive saja<b:if cond='data:blog.pageType == "archive"'>

Untuk menempatkan dihalaman item/posting saja digunakan code<b:if cond='data:blog.pageType == "item"'>

Page 24: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

Dan untuk pada halaman pages atau static page blogger digunakan<b:if cond='data:blog.pageType == "static_page"'>

Dan untuk tambahan, jika Anda ingin menempatkan di halaman tertentu dengan menggunakan URL gunakan code dibawah ini<b:if cond='data:blog.url == "URL_HERE"'>

Ganti code URL_HERE dengan URL yang ingin anda tampilkan.

Dan untuk pengecualian, misalnya anda tidak menempatkan widget hanya di halaman depan saja dengan cara mengganti tanda = pertama dengan tanda !

Contoh

<b:if cond='data:blog.pageType != data:blog.homepageUrl'>

Nah tidak terlalu sulit kan? semoga bermanfaat bagi Anda.

Page 25: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

Cara Mengubah Tampilan Kursor Blog Posted by Herman on Saturday, September 18, 2010 40 comments

Secara default, tampilan cursor pada blog adalah berbentuk panah namun bagi anda yang merasa bosan dengan tampilan tersebut atau ingin memberi decak kagum bagi pengunjung. Anda bisa menggantinya dengan icon gambar sehingga jika ada pengunjung yang datang ke blog anda, tampilan kursornya akan berubah sesuai dengan icon yang anda gunakan. Agar lebih jelas anda bisa lihat disini.

Untuk mengubah tampilan kursor menjadi icon gambar, caranya sangat mudah. Berikut langkah-langkahnya:

1. Login ke Blogger. Masuk ke menu Design->Edit HTML2. Cari kode </head>3. Letakkan kode css berikut diatasnya

<style type="text/css">HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/cool1.gif"), auto;}</style>

Keterangan:Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url kursor yang ingin anda gunakan.

4. Setelah itu, simpan template anda. Selesai

Jika anda tidak memiliki icon kursor, coba kunjungi http://www.totallyfreecursors.com. Situs tersebut menyediakan ratusan hingga ribuan icon kursor menarik yang bisa anda pilih sesuai selera.

<div align="center" style="z-index:9;visibility:visible;"><a href="http://www.totallyfreecursors.com/" target="_blank" class="tfc"><img src="http://downloads.totallyfreecursors.com/public/CursorsLogo88-31.gif" border="0" width="88" height="31" alt="Free Bulls Eye ani MySpace Cursors at www.totallyfreecursors.com" /></a></div><style>HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/bullseye-ani.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/bullseye-ani.gif"), auto;}</style>

Page 26: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

Floating Box Cocok Untuk Adsense

Posted By Anasku On Apr 6, 2010 at 2:16 AM

*Back To Topic* Membuat Floating Box yang biasanya dipasang di blogger yang biasanya diisi content Ads ini. Coba lihat deh Shoot layar yang aku ambil dari blog Saya yang Saya buat dengan niat iseng-iseng ini.

Coba kita lihat box yang berwarna kuning diatas, itulah element box floating yang akan tetap di pojok kanan atas jika scroll di geser-geser kebawah atau keatas.

Saya menemukan script ini bermula dari browsing-browsing untuk tips yang cocok untuk memasang adsense di blog dan akhirnya Saya menemukan script ini di Dynamicdrive dan saya akan mengulas ulang di blog Saya ini agar Anda dapat menggunakanya dengan mudah. Monggo..

Pertama yang Anda lakukan adalah Log In ke blogger lalu masuk menu "Layout" Kemudian Masuk bagian "Edit HTML"

Pasang code ini dibawah code <head> atau sebelum code </head>

<script src='http://sites.google.com/site/anasprod/adse.js' type='text/javascript'/>

Dan pasang Code CSS dibawah ini diatas code ]]></b:skin>

#topbar{

Page 27: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

position:absolute;border: 1px solid black;padding: 2px;background-color: lightyellow;width: 620px;visibility: hidden;z-index: 100;}

(Edit code CSS diatas untuk menentukan style dari box)

Kemudian di Save dulu ukkay kawan.

Dan masuk pada bagian "Layout -> Page Elements"

Pilih tempat Gadget yang kamu ingini (terserah karena box ini akan melayang) dan klik "Add a gadget" Masukkan code dibawah ini

<div id="topbar">

MASUKKAN CODE SCRIPT ADS / LAINYA DISINI

<a href="" onclick="closebar(); return false"><img src="http://sites.google.com/site/anasprod/close.gif" border="0" /></a>

</div>

Ingat ganti code yang berwarna merah diatas dengan code gadget yang kamu ingini.

Kalau sudah. . . SAVE deh...

Page 28: cara membuat breadcumb di blog - adityawahyuputra.weebly.com  · Web viewcara membuat breadcumb di blog. 00:18 Bang Kewok . Lumayan cukup lama juga saya tidak mengupdate dan membuat

Menghilangkan Tanggal Posting

Posted By Anasku On Aug 29, 2008 at 4:37 PM Tanggal posting berguna untuk memeri informasi kapan postingan Anda terPublish sehingga pengunjung dapat melihatnya...Tapi jika Anda kurang menyukai tanggal posting tampak pada Blog Anda saya akan kasih tau cara untuk menyembunyikanya.. oke langsung saja yaa

Masuk menu Layout kemudian masuk Edit HTML dan cari code yang mirip seperti ini di Blog Anda

h2.date-header {margin:.5em 0 0;padding:0;font-size:75%;color:#777;}

nah jika sudah ketemu tambahkan code Css visibility:hidden; kedalam Css diatas sehingga menjadi seperti

h2.date-header {margin:.5em 0 0;padding:0;font-size:75%;color:#777;visibility:hidden;}

kemudian Simpan pengaturanya..