Browse »
Home » Posts filed under Blogger
Table of Content ( ToC ). Mungkin bagi beberapa blogger istilah ini sudah dipahami dan dimengerti, namun bagi yang belum familiar dengan TOC bisa dibaca-baca lagi. TOC atau bisa disebut daftar content kalo di wordpress bisa di artikan sitemap blog. Karena di blogger tidak terdapat fasilitas untuk menyuguhkan semua konten yang tertata rapi, maka diperlukan modifikasi yang bisa digunakan untuk menampilkan semua artikel menurut label atau categorinya. Kita bisa memanfaatkan Static Page pada blogger untuk membuat halaman static untuk menampilkan content dari blog.
Tidak jauh-jauh kita mencari orang yang membuat scripts Auto TOC dengan menggunakan Javascripts, salah satu teman blogger kita Abu Farhan sudah membuat beberapa versi sitemap khusus untuk blogger dengan berbagai kelebihannya.
Versi 1
Versi ini adalah versi standard dan pertama yang dikeluarkan oleh Abu untuk menampilkan daftar isi dari blog yang ditata berdasarkan Label, dengan menggunakan javascripts dan pemanggilan feeds menggunakan json maka jadilah sebuah sitemap untuk blog blogger. Penggunaannya cukup mudah, hanya dengan memasukan 1 buah scripts dan 1 buah script lagi untuk memanggil feeds. Kita bisa menggunakannya dalam postingan atau pada static pages, lebih disarankan menggunakan halaman static karena tidak akan mempengaruhi feeds reader.
Code untuk Versi 1
<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://www.abufarhan.co.cc/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Ganti www.abufarhan.co.cc dengan alamat blog anda.
DEMO Table of Content Versi 1
Versi 2
Pada versi 2 ada perbedaan mencolok pada TOCnya yang tidak lagi diurutkan berdasarkan label, namun digunakan untuk archive blog. Sehingga artikel yang tampil diurutkan berdasarkan tanggal posting. Cara hampir sama dengan versi 1 cukup menambahkan code pada postingan atau dengan menggunakan static pages.
Code untuk Versi 2
<script style="text/javascript" src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js"></script>
<script src="http://audio.assunnah.web.id/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>
Ganti audio.assunnah.web.id dengan alamat blog anda
DEMO Table of Content Versi 2
Versi 3
Untuk versi 3 tidak ada perubahan mendasar, masih menggunakan feeds dan scripts yang sudah disempurnakan. Kali ini menggunakan style dari google feeds, dengan tampilan yang lebih segar.
Code untuk Versi 3
<link rel="stylesheet" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" type="text/css" media="screen" />
<script style="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js"></script>
<script src="http://deconstructioncode.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Ganti deconstructioncode.blogspot.com dengan alamat blog anda
DEMO Table of Content Versi 3
Versi 4 ( Accordion )
Penyempurnaan dari Table of Content sebelumnya, kali ini ditambahkan scripts accordion untuk mempermudah mencari suatu artikel didasarkan pada label atau category. Penambahan Accordion scripts sendiri dirasa perlu pada blog dengan artikel yang banyak, sehingga halaman tidak berubah menjadi terlalu panjang.
Code untuk Versi 4 ( Accordion )
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.oblo.web.id/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>
Ganti www.oblo.web.id dengan alamat blog anda
DEMO Table of Content Versi 4 ( Accordion )
Demikian 4 buah versi dari TOC atau biasa kita kenal dengan sitemap untuk blogger yang telah dikembangkan oleh Abu-farhan. Keempat-empatnya tentu dapat digunakan dengan baik, namun kita harus bisa menyesuaikan kebutuhan sitemap untuk blog kita.
Read More »
Ngeblog itu Pilihan dan Kebebasan. Mungkin sedikit mewah ya titlenya, tapi ya sudahlah bingung mau memberi judul apa. Di beberapa artikel sebelumnya ada membahas tentang Etika dalam Berkomentar, namun beberapa waktu ini sekedar berblogwalking ria ke beberapa blog teman menemukan beberapa komentar yang sungguh sangat tidak mengenakkan. Kotak komentar yang sesungguhnya berguna untuk memberikan masukan, kritik dan sanggahan atau setidaknya ucapan terima kasih dan pujuan berubah menjadi ajang hujatan.
Kebebasan seorang Blogger untuk menuliskan atau menuangkan ide-idenya tidak bisa dibatasi, selama itu bisa di pertanggung jawabkan. Mengenai pendapat pribadi anda atau setidaknya opini lain yang bertentangan itu semua tetap sah-sah saja dan jangan di jadikan suatu paksaan. Bilang saja saya ini masih cinta dengan Blogger Blogspot, karena masih mengandalkan fasilitas gratis yang di berikan oleh blogger walaupun mesin ini mempunyai banyak sekali kekurangan. Tapi disisi lain saya tidak menyalahkan beberapa blogger yang sangat membenci Blogspot dengan karena segala kekurangannya, bagaimana pilihan anda?
Sekarang ini orang awam banyak melihat blog sebagai ajang Bisnis Online, dengan berbagai mimpi meraih uang dengan cara mudah dan singkat. Tapi kita tidak boleh lupa bahwa inti dari blogging adalah aktivitas sharring pengetahuan, berbagi ilmu dan cerita. Ada yang suka ngeblog karena bisa mempunyai teman banyak dan berbagi pengalaman, ada juga yang menggantungkan hidupnya pada blog. Semua itu kembali lagi ke pilihan kemana anda harus memilih sebelum mengawali membuat blog.
Ada juga yang masih ribut dengan masalah design, ada yang suka design dengan simple minimalis sehingga tidak berat dan ada juga yang menggunakan bejibun gambar untuk membuat tampilan blognya terkesan indah dan enak di pandang mata. Ada yang menggunakan beribu-ribu efek scripts yang kurang berguna dan tidak tepat sasaran, disisi lain ada yang meletakkan bagian-bagian widget yang lebih fungsional sehingga memudahkan pengunjung. Sebetulnya ada beberapa tips yang bisa di lakukan oleh pengunjung sehingga dapat mengakses blog dengan cepat dan tidak terganggu oleh image loading yang lama, karena koneksi anda yang berat itu memang sudah nasib ( becanda ).
Sekali lagi Blogging itu Pilihan dan Kebebasan, sehingga apapun artikel yang anda baca jika tidak sesuai dengan opini anda tinggalkan saja. Tapi bila anda rasa itu salah dan patut untuk diluruskan, silakan anda berkomentar dengan mengajukan opini-opini anda.
Read More »
Blogger Angkat Bicara. Akhir-akhir ini banyak di bicarakan masalah kelemahan blogger dan kebijaksanaan baru blogger blogspot yang sedikit lebih mengikat. Walaupun begitu blogger juga meningkatkan kwalitasnya sebagai penyedia layanan gratis blog dengan menambahkan sejumlah fitur seperti Blogger Template Designer. Diluar itu banyak pula yang telah menggunakan mesin blogger sedemikian rupa pada blognya sehingga dapat di gunakan secara maksimal dengan design template yang jauh dari template default blogger.
Beberapa blog tersebut di edit sedemikian rupa bahkan dengan melakukan custom domain, sehingga jauh dari kesan template monoton blogger. Beberapa diantara blog-blog yang saya rasa patut untuk di contoh dalam template maupun konten.
Indonesia.
Cebong-ipiet
Blogger wanita asli jawa ini menghadirkan design-design ringan dengan gaya khas wanita dengan target pasar ibu-ibu muda dan beberapa kalangan lain. Cukup aktiv di lingkungan blogger dan juga melirik beberapa target bisnis online, di beberapa blognya cebong panggilan akrabnya ini juga memberikan jasa design dan tutorial-tutorial ringan seputar blogger.
Deconstruction Code
Seorang web designer yang masih misterius karena tidak mau menunjukan identitasnya. Walaupun sekarang dia sudah menyatakan lepas dari blogger, namun tidak ada salahnya anda mengunjungi blog ini. Disini dia membahas perubahan yang cukup besar pada blogger, salah satu yang paling hebat adalah penggunaan template clasic dengan HTML 5 dan CSS 3 serta penggunaan template Valid XHTML. Selain itu beberapa tutorial hack serta penerapan jQuery serta Mootools ada didalam blog dengan nickname Choen ini.
Modification Blogs
Sebetulnya saya sudah lama mengetahui blogger satu ini, namun karena kurang mengikuti jadi ketinggalan banyak. Blog yang tampil dengan mengaplikasikan template dari kreasi.at yang sudah di convert ke blogger tampak sangat canggih dengan beberapa sentuhan jQuery. Artikel-artikel yang disuguhkan cukup berbeda, dari design template premium yang di convert ke blogger ada juga beberapa artikel jQuery serta penerapannya pada blogger.
Kang Rohman
Siapa yang tidak mengenal blogger yang satu ini, dengan menampilkan artikel-artikel ringan seputar modifikasi blog beliau mendapatkan banyak penggemar setia yang menunggu untuk adanya update artikel. Kang Rohman sendiri memang mendedikasikan hidupnya untuk menjadi blogger dan juga berbisnis online melalui blog. Selain tutorial beliau juga membuat beberapa template yang banyak diminati oleh para blogger.
OOM
Seperti Kang Rohman, oom yang bernama asli Agus R ini mempunyai popularitas yang tinggi. Itu tidak lepas dari blognya yang berisi artikel ringan seputar modifikasi blog serta beberapa template yang di ciptakannya. Blog OBLO dulu juga menggunakan frameworks dari template elegant yang di buat oleh oom.
Abu Farhan
Siapa abu farhan? walaupun dia tidak menggunakan blogger untuk blognya namun dia memberikan beberapa kontribusi bukan hanya di Indonesia, bahkan namanya sudah terkenal di kalangan blogger dunia. Dia membuat widget-widget dengan menggunakan keahliannya di bidang javascripts sehingga memberikan sentuhan-sentuhan baru pada widget blogger.
Internasional
Bloggerbuster
Bloggerbuster besutan Amanda ini banyak menjadi sumber dari blogger-blogger dunia dalam membuat artikel. Amanda adalah seorang yang sangat aktiv di dunia blogger blogspot dengan memberikan beberapa kontribusi pada blogger team.
Bloggerplugins
Blogger yang bernama anneesh ini adalah blogger yang cukup banyak membuat widget-widget baru untuk memberi variasi pada template blogger. Walau tampilan blognya cukup sederhana, namun banyak keistimewaan yang telah diberikan oleh anneesh untuk template blogger.
Bloggertuts
Bloggertuts adalah blog yang memberikan artikel-artikel tutorial menarik seputar blogger yang ditulis oleh beberapa orang dalam satu team dan salah satunya dari indonesia. Karena di isi oleh beberapa master blogger, tentunya artikel yang disuguhkan cukup lengkap dan variatif.
Dante Araujo
Salah satu kontributor dari Bloggertuts, dante sangat ahli dalam memodifikasi template blogs. Beberapa template hasil ciptaannya dijadikan frameworks untuk beberapa template lain.
Be-insight
Bagi blogger indonesia sepertinya membutuhkan translator kalo membaca artikel di blog ini, karena bahasa yang digunakan bukan bahasa inggris. Namun artikel-artikelnya cukup menarik dan juga menyediakan beberapa design template blogger yang lain daripada yang lain. Salah satunya adalah Antagonist Blogger Template.
Itu beberapa blog blogger yang cukup istimewa bagi saya yang bisa saya referensikan, mungkin ada beberapa yang mau menambahkan. Mungkin ada beberapa blog lain yang belum tertulis disini, karena keterbatasan ingatan jadi harap menjadi maklum adanya.
Bonus: template baru saya di Apriliyanto dot Com
Read More »
Blogger Template Designer. Kali ini Blogger benar-benar serius memanjakan para penggunanya. Setelah santer terdengar Google mulai merazia beberapa blog dan menghapus accountnya, kini blogger mengeluarkan fasilitas baru berupa Blogger Template Designer yang di khususkan bagi para blogger yang menginginkan perberdaan tampilan pada blognya. Bagi yang ingin mencobanya dapat mengunjungi Draft Blogger, karena ini masih dalam tahap uji coba.
Bagi yang berprofesi sebagai Blogger Template Maker, ini berita baik atau berita buruk? tapi yang jelas ini adalah fasilitas yang paling ditunggu-tunggu oleh para pengguna blogger. Dengan adanya Blogger Template Designer merubah tampilan Blog jadi lebih mudah dan flexibel sehingga kita tidak perlu melakukan perubahan secara manual pada HTML dan CSS.
Mengenai beberapa fasilitas yang disediakan antaralain
- 15 Design Templates yang mudah di custom
- Pengaturan Jumlah Kolom dan Tata Letak yang lebih Flexibel dan mudah di mengerti
- Banyak Pilihan background yang disediakan oleh iStockPhoto
dan yang paling menarik adalah adanya live preview dan advance option dimana kita bisa mengedit font, color sesuai dengan keinginan kita. Blogger sepertinya sedang melakukan pembenahan besar-besaran untuk memuaskan para penggunanya dan juga untuk bersaing dengan beberapa penyedia fasilitas blog lainnya.
Sekarang tinggal anda memilih, menggunakan Blogger Template Designer atau masih tertantang untuk mengedit secara manual template anda menggunakan HTML dan CSS.
Source: Blogger Template Designer | Blogger Buzz
Read More »
Mencoba mengisi blog, kali ini kita akan membahas sedikit kekeliruan yang sering dilakukan oleh Blogger Pemula. Disini saya tidak menyudutkan beberapa pihak tapi hanya mencoba meluruskan atau setidaknya mengarahkan. Ketika mulai ramai bermunculan artikel tentang cara cepat meraih dollar di internet, bahkan ada yang mengatakan bisa meraih ratusan dollar tanpa usaha. Apakah anda percaya?
Tunggu dulu, balik ke awal pertama anda memulai jalan hidup sebagai seorang blogger. Tujuan anda? Hidup untuk ngeblog atau ngeblog untuk hidup, bisa jadi keduanya. Tentukan tujuan tersebut dan pilih tema atau niche terbaik, yang saya maksudkan adalah tema yang sudah anda kuasai. Kesalahan terbesar dalam blog ini adalah saya tidak mempunyai tujuan yang jelas saat awal memulai menulis untuk blog ini. Namun kesalahan itu menjadi pengalaman yang sangat berarti yang bisa saya share disini sehingga teman-teman yang ingin mulai hidup sebagai blogger tidak mengalami kesalahan yang sama.
Setelah kita menentukan niche ( Tema ) blog yang tepat mulailah menulis artikel-artikel yang bermutu, bisa dari pendapat anda pribadi tapi tidak ada salahnya jika anda menggunakan sumber-sumber lain untuk referensi. Buatlah suatu artikel yang menarik untuk dikunjungi ulang, seperti anda melakukan diskusi tanya jawab dengan para pembaca anda. Tentunya hal-hal tersebut membuat para pengunjung betah dan datang berulang-ulang ke blog anda. Usahakan artikel anda unik setidaknya masih jarang yang menulis tentang hal yang sama dengan artikel tersebut.
Ketika kita memilih jalan untuk mengais rejeki di dunia Bisnis Online dengan blog, jangan berharap berhasil dalam waktu singkat. Semua butuh usaha bung, tidak ada yang instan butuh usaha keras dan keuletan. Bagi yang terjun ingin menggunakan blog untuk mendapatkan uang, anda harus konsentrasi pada visitor tidak asal main tubruk untuk meraih dollar. Lambat laun ketika blog anda sudah mempunyai visitor tetap dan artikel terindex pada Search Engine dengan posisi yang bagus blog anda akan menjadi berharga. Ketika anda bayi anda akan mulai belajar duduk, merangkak, merambat, berjalan dan akhirnya berlari. Saya rasa anda mengerti akan maksud saya, tidak perlu saya jabarkan.
Artikel ini bukan untuk mematahkan semangat, tapi untuk memotivasi karena kegagalan dalam berbisnis online pada tahap awal adalah wajar. Jangan menyerah walau belum bisa maksimal memperoleh hasil, teruslah berusaha dan belajar sampai dimana target anda terpenuhi.
Read More »
Blogger Data Tags. Beberapa waktu yang lalu blogger mengeluarkan fasilitas baru yaitu Static Pages, dimana kita bisa membuat halaman atau pages yang berdiri sendiri tanpa masuk ke feeds ataupun archive. Namun ada beberapa hal yang harus di benahi pada template yang telah di modifikasi antara lain template yang menggunakan auto read more.
Salah satu kunci dari template blogger sendiri adalah penggunaan <b:if> dimana kita bisa menata tampilan dan content dari blog blogger dengan menggunakan code tersebut. Ketika kita menggunakan code tersebut kita harus paham tentang beberapa tags yang digunakan oleh blogger, berikut beberapa contoh tags yang digunakan blogger.
Contoh
<b:if cond='data:blog.pageType == "index"'>
Data Global untuk mengidentifikasi data, biasa digunakan dengan <data:blog.title/>
title - identitas dari title blog
pageType - identitas dari jenis page / halaman
url - identitas url pada suatu halaman
homepageUrl - identitas untuk halaman index / halaman utama
pageTitle - identitas title dari halaman url bukan title dari blog
pageType atau biasa di gunakan untuk mengenali suatu halaman
index - untuk halaman index / homepages dari blogger
archive - untuk halaman archive dari blogger
item - untuk halaman posting / content artikel
static_page - untuk halaman static pada blogger
Untuk mempelajari lebih lengkap mengenai Blogger Data Tags dapat mempelajarinya di halaman berikut:
Layouts Data Tags - Blogger Help
Read More »
Optimasi Images Pada Blogger. Sudah kita ketahui bersama bahwa images dapat membantu dalam mendatangkan visitor dari google images, dengan pemberian tag "ALT" pada setiap images. Penggunaan tags tersebut dikarenakan google robots tidak bisa menterjemahkan images tersebut sehingga perlu diskripsi tentang images tersebut. Disini kita akan mencoba bermain images untuk Search Engine Optimization dengan melalui penempatan.
Pada blogger sendiri pengkhususan meta discription harus dilakukan secara manual pada tiap url melalui penambahan code pada edit html. Dengan adanya images yang di letakan pada awal paragraph yang menggunakan tag alt dapat menggantikan meta tag description sehingga dapat dibaca robots sebagai deskripsi dari artikel tersebut.
Contoh kasus:
Pada keyword "Download Gratis Album Dream Theater" pada url blog punya sobat Ardi33.web.id terindex di halaman pertama, perhatikan text dari description yang tertangkap oleh google.
Karena menggunakan images di awal paragraph dan menggunakan alt "Download Lengkap Album Lagu Dream Theater dengan Gratis Free" maka google menangkap kalimat tersebut sebagai deskripsi blog. Dengan menggunakan cara ini kita bisa membuat diskripsi terselubung tanpa menambahkan code pada HTML pada edit template.
Itu adalah salah satu cara optimasi images pada blogger, masih ada cara-cara lain yang datang dari ide kreatif para blogger tentunya didasarkan pada ujicoba.
Read More »
Highlight Current Page Blogger. Bagi yang suka bermain dengan Blogger Template tentu ingin menambahkan sesuatu yang berbeda dari template lainnya. Mungkin pemberian Highlight navigasi ketika kita menuju pada salah satu halaman static bisa menjadi pilihan. Beberapa cara bisa dilakukan, tapi kebanyakan menggunakan jQuery atau juga javascripts. Tapi ada cara yang lebih mudah yang saya temukan di Bloggertuts yang menggunakan modifikasi pada tag <ul> dengan permainan <b:if>.
Mungkin tambahan code yang digunakan agak panjang dan diulang-ulang, tergantung dari jumlah link pada navigasi yang digunakan. Bila anda sudah mempunyai Linklist maka tinggal melakukan modifikasi pada bagian link. Untuk memulainya segera login Account Blogger dan menuju pada edit template, jangan lupa untuk save template.
Contoh:
<ul id='nav'>
<li><a class='current' href='URL HOME' title='Homepages'>Home</a></li>
<li><a class='current' href='URL ABOUT' title='About Writer'>About</a></li>
<li><a class='current' href='URL CONTACT' title='Contact Person'>Contact</a></li>
<li><a class='current' href='URL SITEMAP' title='Sitemap'>Sitemap</a></li>
</ul>
dirubah menjadi:
<ul id='nav'>
<b:if cond='data:blog.url != "URL HOME"'>
<li><a href='URL HOME' title='Homepages'>Home</a></li>
<b:else/>
<li><a class='current' href='URL HOME' title='Homepages'>Home</a></li>
</b:if>
<b:if cond='data:blog.url != "URL ABOUT"'>
<li><a href='URL ABOUT' title='About Writer'>About</a></li>
<b:else/>
<li><a class='current' href='URL ABOUT' title='About Writer'>About</a></li>
</b:if>
<b:if cond='data:blog.url != "URL CONTACT"'>
<li><a href='URL CONTACT' title='Contact Person'>Contact</a></li>
<b:else/>
<li><a class='current' href='URL CONTACT' title='Contact Person'>Contact</a></li>
</b:if>
<b:if cond='data:blog.url != "URL SITEMAP"'>
<li><a href='URL SITEMAP' title='Sitemap'>Sitemap</a></li>
<b:else/>
<li><a class='current' href='URL SITEMAP' title='Sitemap'>Sitemap</a></li>
</b:if>
</ul>
Ganti yang diBold dengan URL yang digunakan.
Lalu pada CSSnya ditambahkan class baru:
#nav ul li a.current {color:#000; background:#fff; text-decoration:none;}
Untuk trik ini tidak berlaku pada external link, karena secara otomatis pages akan berpindah. Bagi yang membuat navigasi dari awal dapat menggunakan cara yang digunakan oleh Dante pada artikel Navigation with Automatic Highlight Current Pages
Read More »
Static Pages Blogger. Setelah beberapa kali mengeluarkan fitur baru seperti Default Read More, kini blogger hadir dengan sentuhan baru yaitu Static Pages. Sebelumnya sempat ada info colongan dari gambar screenshoot di read more blogger dan akhirnya terealisasi walaupun masih dalam bentuk draft. Untuk mengaksesnya kita perlu masuk kehalaman draft blogger.
Untuk tahap pengaplikasian saya tidak akan menjelaskannya disini, bagi yang belum menggunakannya silahkan menuju blog si cebong yang membahas tentang Static Pages. Sebetulnya untuk template biasa belum ada masalah yang mengganggu, tapi pada template modifikasi yang menggunakan auto readmore dengan thumbnail akan mengalami kendala karena static pages akan muncul dalam posisi readmore. Untuk menggunakan static pages pada template yang menggunakan auto readmore harus melakukan perubahan kecil pada code auto readmore.
Login ke blogger dan menuju kehalaman Edit HTML, jangan lupa untuk menyimpan template dan expand widget. Perhatikan code ini pada auto readmore blogger
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Ganti dengan code dibawah ini
<b:if cond='data:blog.pageType == "index"'>
<div expr:id='"summary" data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink'><a expr:href='data:post.url'>Read More »</a></span>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div expr:id='"summary" data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink'><a expr:href='data:post.url'>Read More</a></span>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<data:post.body/>
</b:if></b:if></b:if>
Sampai disini tergantung dari besarnya modifikasi template yang anda gunakan, karena karakteristik tiap template berbeda. Setelah selesai jangan lupa untuk melihat preview dari Static Pages, index dan halaman archive. Selamat bereksperimen.
Read More »
Page Navigation Alternatif Validation untuk Blogger. Pada artikel Step by Step Validasi Blogger saya sudah menjabarkan beberapa trik supaya platform blogger anda menjadi valid. Namun sedikit kekurangan dalam artikel tersebut adalah penghapusan Navigasi NextPrev pada default template. Setelah berkonsultasi dengan salah satu teman di Deconstructioncode dia memberikan solusi untuk menggunakan Javascripts yang telah disempurnakan oleh Abu-farhan dalam beberapa tutorialnya.
Setelah beberapa kali melihat, memilih dan mencoba beberapa tutorial yang diberikan oleh para master Blogger Tutorial, akhirnya terpilihlah tutorial yang cukup sederhana dari salah satu blogger Indonesia yang sudah mendunia Abu-farhan. Dalam coding yang dibuat olehnya dengan beberapa penyempurnaan dari beberapa artikel sebelumnya, termasuk dari Annesh Bloggerplugins kita dapat memperoleh hasil valid dalam test Validasi HTML W3C. Mari kita tilik beberapa contoh blog blogger yang sudah menggunakan Page Navigation Blogger buatan Abu-farhan.
Pada template Classic kita bisa melihat pada web Deconstructioncode.
Pada template XML anda tentu sudah melihatnya pada halaman index blog ini.
Untuk penerapannya saya tidak akan membahasnya pada blog ini, yang jelas yang pertama kali anda lakukan adalah login ke account blogger anda dan menuju halaman Edit HTML. Bagi anda yang ingin menerapkan code ini, anda bisa langsung menuju ke halaman Numbered Page Navigation yang di buat Abu-farhan. Bagaimana cukup mudah dan menarik kan? Setelah berhasil menerapkannya pada blog anda kini tugas anda sendiri untuk menyesuaikan CSSnya sehingga terlihat cocok dengan blog anda.
Sekian dari saya tentang cara membuat Numbering Page Navigation pada Blogger.
Read More »
Step by Step Validasi Blogger. Mungkin salah satu kelemahan terbesar blogger sebagai media weblog adalah format HTML dan CSS yang tidak bisa valid menurut W3C Validator. Padahal validasi itu sendiri diperlukan untuk mendapatkan design weblog yang mendekati sempurna selain beberapa aspek lain yang tidak kalah penting. Setelah beberapa lama menyimpan artikel ini kini akan saya ulas dibagian Blogger Tutorial, di bantu seorang sahabat dari Deconstructioncode om Choen.
Satu hal yang perlu diperhatikan sebelum melakukan Validasi pada template Blogger yaitu karakteristik tiap template yang berbeda, jadi jangan kaget jika ada beberapa code yang tidak anda temukan dalam template anda. Selain hal tersebut ada juga bagian yang sering dilupakan yaitu pemakaian widget yang tidak valid, tentunya hal tersebut menambah daftar error dalam validasi weblog anda. Terlalu banyak kalimat pembuka, mari kita lanjut ke Step by Step Validasi Blogger. Jangan lupa save template sebelum edit lebih lanjut, jaga-jaga kalau terjadi error pada template anda. Pada tab lain buka halaman HTML Validation W3C untuk melihat seberapa banyak error yang tersisa dan letak kesalahannya.
1. Pada Edit HTML "doctype" default blogger mempunyai tingkat kesulitan untuk menjadi valid, Solusinya ganti
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
dengan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. Pada Edit HTML contreng expand template widget lalu cari code
<b:include data='post' name='postQuickEdit'/>
dan
<b:include name='quickedit'/>
selanjutnya hapus semuanya. Fungsi code tersebut adalah icon Quick edit pada masing-masing widget, beberapa blogger hack bisa mendisable atau menghilangkan icon tersebut namun link edit widget itu sendiri adalah error karena mengandung code & yang tidak di tutup oleh ; sehingga menghasilkan error.
3. Jangan lupa tambahkan tag ALT pada setiap image yang terdapat pada weblog, sekecil apapun image tersebut. Hal ini dimaksudkan agar Image tersebut tidak hanya berfungsi secara visual, namun dapat di baca oleh robots. Selain itu jangan lupa untuk menggunakan penutup tag tersebut dengan attribut /> sehingga bisa mengurangi error pada html validation.
4. Jangan gunakan widget Archive menggunakan tampilan Hierarchy, karena itu akan menampilkan banyak error. Lebih baik gunakan Model List sehingga mengurangi error, selain itu tampilannya akan lebih simple dan elegant.
5. Berhati-hati dalam menggunakan langkah berikut ini, pastikan anda tidak salah dalam melakukan copy paste karena sedikit perubahan dapat mengakibatkan error.
Cari code
<b:include data='blog' name='all-head-content'/>
Ganti code tersebut dengan code berikut ini
<!-- Blogger Default Meta -->
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='http://www.blogger.com/profile/IDBLOGGERANDA' rel='me'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://www.blogger.com/rsd.g?blogID=IDBLOGANDA' rel='EditURI' title='RSD' type='application/rsd xml'/>
<link href='http://www.blogger.com/feeds/IDBLOGANDA/posts/default' rel='service.post' title='OBLO - Atom' type='application/atom+xml'/>
<link href='http://www.URLANDA.blogspot.com/feeds/posts/default' rel='alternate' title='OBLO - Atom' type='application/atom+xml'/>
<!-- End Blogger Default Meta -->
Perhatikan!
IDBLOGGERANDA = dapat anda jumpai pada alamat URL Profile Blogger anda.
IDBLOGANDA = dapat anda jumpai pada alamat URL edit Html Blog anda.
URLANDA = isi dengan url blog anda.
6. Jangan terlalu banyak menggunakan dash ( - ) pada HTML blog anda, memang akan terlihat indah jika kita menambahkan beberapa code ASCII disana, namun sadarkah anda itu hanya akan menambah jumlah error pada HTML / CSS anda.
Gunakanlah sesederhana mungkin.
HTML
<!------------------- Blogger Default Meta ----------------------> SALAH
<!-- Blogger Default Meta --> Benar ( terlihat simple dan rapi )
CSS
/*----------- Header ------------*/ SALAH
/* Header */ Benar
7. Banyak yang mengeluarkan trick untuk mendisable Default NAVBAR Blogger, tapi bagaimana kalo kita hapus saja Navbar tersebut. Karena walaupun di hidden / disable, link yang terdapat didalamnya akan tetap terbaca. Letakkan code berikut diantara </head> dan <body>
<!-- <body>
<div></div> -->
setelah itu save template, maka akan keluar notifikasi untuk menghapus Widget Navbar. Done you lost the Navbar. :)
8. Sebetulnya masih banyak yang perlu di benahi dalam blogger terutama penggunaan & ( & ) dalam setiap URLnya, karena code tersebut tidak bisa berdiri sendiri dan harus di akhiri dengan ( ; ) pada HTML, solusinya gunakan code &amp;.
Dengan melakukan beberapa step diatas anda tidak akan memperoleh hasil yang valid dari blogger karena beberapa bagian penting dari blogger sendiri itu mengandung ERROR. Kita bisa mengakalinya dengan menghapusnya, namun fungsi dari widget yang kita hapus tersebut tidak bisa berjalan dengan sempurna. Beberapa bagian blogger yang cukup mengandung banyak error adalah Comment box dan link Comments yang lagi lagi menggunakan code ( & ). Selain itu pada halaman index terdapat juga error pada navigation page ( New and older post ).
Untuk menghilangkan Navigasi newer dan older post pada halam index, dapat menggunakan trik berikut ini. Cari code dibawah ini
<b:include name='nextprev'/>
ganti dengan
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
Catatan: Jangan lupa cek error blog anda pada W3C HTML Validator untuk mengetahui sisa kesalahan anda tiap kali melewati Step by Step Validasi Blogger.
Thanks to: Deconstructioncode, TheYoBoo.
Read More »
Blogger Pemalas. Kiranya itu yang lebih tepat di gunakan untuk saya dari pada mengaku sebagai owner blog yang berisi tentang Blogger Tutorial, tapi jarang Update. Bukan karena disengaja, tapi aktivitas di tempat kerja yang mulai menyita waktu dan banyak tenaga membuat saya jarang menyentuh komputer. Kalaupun menyentuh itupun tidak terkoneksi dengan internet, saya minta maaf karena konten di blog ini tidak kunjung update.
Selain hal tersebut saya juga mempunyai hobi sampingan baru memelihara reptil, tapi tidak semua reptil hanya Kura-kura. Karena terlalu irit menabung untuk membeli kura-kura akhirnya aktivitas ke warnet jadi berkurang, sehingga jarang update konten di Blog Blogger Tutorial ini. Berhubung kurangnya waktu untuk mencari artikel dan memahaminya lebih lanjut, saya berkan sedikit video dari seorang teman yang berisi Cara Memodifikasi Template Minima. Anda dapat mempelajarinya disini:
Edit Template Minima Blogger 1
Edit Template Minima Blogger 2
Video tersebut di persembahkan oleh mas Choen dari DeconstructionCode.
Read More »
Title dan URL Blogger yang SEO Friendly. Sebagai salah satu platform blog sejuta umat, blogger memiliki kekurangan dimana kita tidak bisa merubah url sesuai yang kita inginkan. Semua tergantung pada title yang kita gunakan, permasalahan muncul ketika title yang kita gunakan terlalu panjang maka blogger akan secara otomatis memotongnya. Berbeda dengan Wordpress sebagai saingan blogger yang mempunyai fasilitas memotong link sehingga lebih pendek dan SEO Friendly.
Didalam blog Blogger Tutorial ini kita akan membuat beberapa alternatif supaya dapat merubah title dan url sesuai yang kita inginkan. Disini ada 2 cara yang bisa kita gunakan, cara sederhana dan dengan menambahkan tambahan code secara manual per URL.
Cara pertama untuk mempersingkat URL adalah dengan permainan input Judul Artikel pada Post Editor Blogger. Saat pertama menulis suatu artikel anda gunakan judul yang singkat yang tidak terpotong oleh blogger secara langsung.
Contoh:
Ketika anda menggunakan judul artikel "Default Blogger Comments Avatars" maka anda harus menggunakan kata-kata pokok yang tidak biasa di gunakan, maka title yang harus anda gunakan untuk mempersingkat URL adalah "Blogger Comment Avatar".
Setelah selesai mengetik artikel tersebut segera publish, namun sebelum melakukan edit ulang pada titlenya maka Title artikel tersebut masih tetap sama seperti URL. Untuk itu kembali kebagian Edit Post untuk merubah title kembali menjadi "Default Blogger Comments Avatars" dan di publish ulang.
Kelemahan dari cara pertama adalah kita harus melakukan Ping ulang secara manual melalui artikel lain sehingga perubahan yang dilakukan bisa terbaca oleh robots.
Note: Blogger hanya melakukan Ping otomatis sekali pada saat artikel itu terpublish pertama kalinya.
Cara kedua untuk merubah title sesuai dengan keinginan anda. Bagi yang paham bahasa HTML anda dapat melakukan perubahan manual pada tag title untuk setiap url. Namun proses ini akan memakan waktu yang cukup lama, karena harus melakukannya satu per satu. Cara ini hanya saya anjurkan bagi anda yang sedang mengikuti Kontes SEO atau sedang mengkhususkan untuk mengejar keyword tertentu.
Untuk melakukannya segera menuju pada halaman Edit HTML pada setting template. disana anda cari tag <title> biasanya terdapat setelah code <head>
<title>title blog anda</title>
tambahkan code yang di bold sehingga akan menjadi seperti dibawah ini
<b:if cond='data:blog.url == "ALAMAT URL YANG AKAN ANDA RUBAH TITLENYA"'>
<title>TITLE BARU</title>
<b:else/>
<title>title blog anda</title>
<b:if>
Sekian tips dari Blogger Tutorial, semoga berguna untuk merubah Title dan URL Blogger menjadi SEO Friendly.
Read More »
GoogleCode Alternatif Free Hosting Scripts. Mendekati 26 Oktober, saat dimana Yahoo Inc. akan menutup Geocities sebagai layanan free hostingnya menambah kekhawatiran para Blogger Mania yang menggunakan Geocities sebagai alternatif hosting untuk beberapa eksternal scripts. Memang menjadi salah satu kelemahan platform Blogger yang tidak mempunyai hosting untuk scripts dan image, namun google menutupnya dengan image hosting picasa.
Untuk yang suka bermain dengan eksternal scripts bisa menggunakan layanan yang di sediakan oleh google untuk hosting scripts di GoogleCode. Mungkin beberapa sudah mengetahui dan menggunakan produk google ini, untuk kenyamanan dan kecepatan loadingnya silahkan test di Blog Blogger Tutorial ini. Mungkin yang belum pernah mencoba agak bingung karena ada banyak pilihan dalam menggunakan GoogleCode ini.
Sebetulnya GoogleCode sendiri diperuntukkan untuk Library Scripts, tapi kita juga bisa menggunakan fasilitas itu untuk menyimpan file scripts. Artikel yang di tulis oleh Choen tentang Googlecode dalam blognya mengatakan bahwa GoogleCode lebih baik dari pada Geocities dan beberapa free hosting lainnya yang sering Down.
Tertarik untuk mengaplikasikannya silahkan menuju ke halaman Project Hosting GoogleCode dan login menggunakan account Google ( Gmail ) anda.
Isi semua form sesuai dengan petunjuk yang di berikan, setelah itu menuju halaman selanjutnya untuk Option File manager.
Pada Tab Download klik option New Download untuk memulai upload pada GoogleCode, setelah itu akan keluar tampilan upload seperti pada gambar di bawah ini.
Pada pilihan Label di isi dengan Type-Source karena yang akan kita upload adalah source code. Jika upload berhasil maka kita akan kembali pada halaman index file download yang bisa kita copy urlnya.
Selamat mencoba Googlecode untuk alternatif free hosting anda.
Read More »
Default Blogger Comments Avatars. Masih dalam suasana yang indah di tengah hari jadi Blogger yang ke-10, kini blogger menambahkan inovasi baru pada Blogger Comments dengan menambahkan default Avatar. Jadi kita tidak perlu lagi menggunakan external scripts untuk menampilkan foto seperti pada penggunaan avatar mybloglog. Jika anda menggunakan template default blogger atau template yang belum mengalami perubahan pada bagian comments, anda tinggal mengaktivkan Show Image pada Settings - Comments.
Perhatikan screenshot yang saya ambil dari Blogger Buzz tersebut, jadi kita tidak perlu susah-susah menanamkan external scripts untuk menambahkan Blogger Comments Avatar. Mungkin yang perlu kita lakukan hanya penyesuaian CSS karena sekali lagi template memiliki karakter yang berbeda satu sama lain.
Untuk mengupload foto dapat dilakukan ketika kita meninggalkan komentar pada blog, pada mode preview akan muncul option upload Blogger Avatar. Foto itu akan otomatis muncul ketika anda meninggalkan komentar di blog berikutnya, jadi kita hanya perlu mengupload foto satu kali. Blogger Avatar ini dikembangkan oleh seorang team blogger lu-chen.net dalam rangka menyambut peringatan 10 Tahun Blogger.
Walau perubahannya kurang begitu signifikan, namun penambahan Blogger Avatar ini sedikit menambah variasi dalam platform Blogger. Sedikit tebakan, kedepan Blogger Team akan menambahkan halaman statis pada Platform Blogger. Semoga dengan adanya perbaikan besar-besaran pada blogger, para blogger tidak memandang sebelah mata pada blogger blogspot.
Semangat!
Read More »
Blogger Default Read More. Masih dalam perayaan 10 Tahun kemunculan platform Blogger ( Blogspot ) keranah blogosphere, kali ini blogger menambahkan fasilitas baru yang tentunya sudah dinanti-nanti oleh para pecinta blogger. Setelah beberapa waktu lalu saya bahas tentang kehadiran Blogger New Post Editor, kini masih dalam fitur tersebut ditambahkan fasilitas Read More.
Kita tidak perlu menambahkan apapun dalam HTML editor, karena ini merupakan fasilitas default bagi blogger yang menggunakan Post Editor yang baru. Mungkin sebelumnya para blogger hack telah membuat cara agar bisa membuat Read More pada blogger dan kali ini pihak pengembang blogger memenuhi keinginan sebagian besar blogger.
Bagi yang sudah mengganti Post Editornya dengan versi baru, anda tinggal melihat pada sudut paling kanan disana terdapat icon "Insert Jump Break" maka konten yang anda tulis setelah itu akan disembunyikan pada halaman index.
Bagi yang belum menggunakan fasilitas Editor yang baru kita bisa menggunakan tambahan HTML script pada edit HTML dengan menambahkan code ini di saat pemenggalan artikel.
<!-- more -->
Untuk tulisan "Read More »" sendiri dapat kita setting ulang atau diganti dengan tulisan yang kita inginkan. Untuk merubahnya kita menuju pada halaman Layout - Edit Blog Post widget. Disitu akan ada option untuk setting tulisan read more yang akan digunakan.
Bila anda menggunakan template modifikasi ataupun pernah menggunakan blogger hack untuk menampilkan Read More, maka anda perlu menghapus code html itu. Bila read more tidak dapat muncul pada halaman index lakukan pembenahan pada edit HTML. Jangan lupa centang expand widget agar code yang tersembunyi dapat di tampilkan, lalu cari code dibawah ini atau paling tidak mirip karena karakter tiap template berbeda.
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/>
</div>
lalu taruh code dibawah ini tepat di bawah </div> tersebut
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
Sepertinya Blogger semakin mencoba memenuhi keinginan dari para penggunanya dan membuat platform ini lebih fleksibel dan mudah di gunakan. Kita tunggu saja hal baru apa lagi yang di tambahkan pada platform blogger.
Maju terus Blogger!
Read More »
Blogger Post Editor. Lagi-lagi di usianya yang menginjak 10 Tahun, blogger.com memberikan sentuhan baru dalam meningkatkan performanya sebagai platform penyedia faslitas hosting gratis untuk blogs. Beberapa waktu yang lalu ada fasilitas baru yaitu Blogger Label Clouds dan juga Share link pada navbar blogger.
Kali ini fasilitas baru itu adalah Blogger Post Editor yang menggunakan sistem WYSIWYG dimana post editor yang lama di sempurnakan sehingga semakin memanjakan pengguna blogger. Namun Blogger Post Editor yang baru ini tidak secara langsung akan muncul pada editor anda. Untuk memunculkannya dapat menuju pada halaman Setting - Basic dan cari tulisan Global Setting. Dibagian Select Post Editor pilih pada Update Editor dan save.
Banyak sekali fitur yang ditambahkan dan disempurnakan pada Post Editor Blogger yang baru. Hampir semua fitur tambahan itu mendukung blogger untuk lebih fleksibel dalam membantu kita menulis sebuah artikel. Beberapa fitur tambahan dan yang disempurnakan:
1. Pada bagian editor artikel bisa di tarik kebawah sehingga memanjang dan sesuai kebutuhan.
2. Pada editor gambar kita bisa dengan mudah upload gambar tanpa harus membuka Popup seperti pada Post editor yang lama, selain itu gambar yang telah terupload dapat dengan mudah kita atur posisi dan ukurannya seperti pada MS Word. Namun sayang pada editor HTML option upload image tidak ditampilkan dan juga pada fasilitas baru ini tidak disertakan penambahan tag "alt" yang sangat penting dalam susunan suatu web.
3. Kebanyakan blogger suka berpindah-pindah dari mode HTML ke mode Compose, hal itu menyebapkan kerusakan code html yang kita tulis secara manual. Namun pada Editor yang baru hal itu telah diperbaiki dan disempurnakan.
4. Pada saat kita menambahkan link pada mode compose kita bisa merubahnya sesuka hati dengan hanya mengklik pada link tersebut. Selain itu ada juga fasilitas link checker dimana kita bisa melihat url yang kita masukan valid atau broken link.
5. Bila pada upload image tidak menggunakan popup, lain halnya dengan mode preview untuk menampilkan posting yang akan kita publish.
6. Penambahan fasilitas baru yang lebih fleksibel dan berguna pada toolbar Post Editor. ( Undo, Redo, Rata kanan, Rata kiri).
Mungkin hanya 6 perubahan yang bisa saya ulas disini, namun masih ada beberapa penyempurnaan yang bisa anda lihat dengan mengaktivkan Blogger Post Editor yang baru ini. Beberapa penyempurnaan lain perubahan pada jam yang mengacu pada waktu publish artikel, penambahan geotagging, dll. Dari semua penambahan tersebut dapat mempermudah kita ketika melakukan copy paste suatu artikel yang mengandung gambar dan itu semua di buat untuk kepuasan para pengguna blogger.
Bravo Bloggers!
Read More »
Cara Membuat Tag Clouds Label Blogger. Setelah merayakan hari jadi Blogger ( Blogspot ) sekarang memberi fitur baru yang informasinya saya dapat dari Amanda ( Bloggerbuster ). Fitur baru ini berhubungan dengan Label yang semakin fleksibel dengan banyak option yang bisa kita pilih-pilih. Salah satu yang paling menyolok adalah penambahan Label Clouds yang mirip tag coulds pada platform Wordpress.
Untuk Mengaplikasikannya pada template blogger kita kita tidak perlu memasukan javascripts lagi seperti pada beberapa blogger hack. Disini semua option sudah disediakan oleh pihak blogger. Pertama-tama kita menuju ke halaman edit template blogger. Seperti jika kita menambahkan gadget dengan memilih option label kita akan di hadapkan pada option seperti dibawah ini.
Pada option diatas pilihlah pada menu Could maka secara otomatis menu label akan ditampilkan dengan model Label Clouds. Selain fasilitas itu Option Label ini memiliki fitur baru yaitu mengatur jumlah label yang akan di perlihatkan. Pada gambar diatas ada Option "Semua Label" dan "Label yang dipilih", pilih Option yang kedua maka akan muncul jumlah label blogger anda. Setelah itu klik pada "Edit" maka akan keluar popup baru seperti dibawah ini.
Anda bisa memilih category mana yang akan ditampilkan dalam Label Clouds maupun Label berjenis daftar standard. Setelah itu klik selesai dan simpan configurasi label baru anda, maka secara otomatis sebuah label clouds akan terpasang.
Cara mengedit tampilan Label Clouds Blogger
Untuk mengedit tampilan Label Clouds tersebut kita perlu menambahkan beberapa CSS kedalam edit html. Untuk itu kita segera menuju ke halaman edit html. Pertama-tama yang harus dipahami Label Clouds tersebut terdiri dari 5 tingkatan huruf yang bisa kita rubah baik besar kecil maupun warnanya.
.label-size-1 a « adalah ukuran label paling kecil dari Label Clouds Blogger
.label-size-5 a « Sedangkan ini adalah ukurannya yang terbesar
Penambahan CSS dapat kita lakukan sesuai keinginan kita dengan menambahkan jenis font, warna maupun efek text CSS3. Contoh penambahan CSS pada Label Clouds Blogger.
.label-size-5 a {
color: #000000;
font-size: 12px;
text-decoration: none;
}
.label-size-5 a:hover {
text-decoration: underline;
}
Di usianya yang sudah 10 tahun blogger mulai berbenah dan semakin menambahkan fitur yang lebih fleksibel sehingga bisa memenuhi keinginan para penggunanya.
Bravo Bloggers!
Read More »
Meta Tag - Belajar Dari Kesalahan. Sebagai seorang blogger yang suka bereksperimen tentunya sering melakukan kesalahan-kesalahan yang mungkin merugikan. Tak dapat di elakkan juga kesalahan fatal yang saya perbuat beberapa waktu lalu karena bermain dengan meta tag untuk SEO. Alhasil bukan hanya posisi drop dalam keyword yang di kejar, namun lebih parah dengan hilangnya posting saya dari peredaran di search engine.
Sebetulnya ada 2 hal yang menyebapkan halaman tersebut hilang dari peredaran dan keduanya merupakan kesalahan yang saya perbuat karena terlalu bernafsu dalam mengejar keyword ( Rusli Zainal Sang Visioner ). Namun jika tidak pernah salah tentunya kita tidak akan pernah mendapatkan pelajaran yang berarti. Optimasi on page dan off page yang saya lakukan semua terlalu terburu-buru tanpa memikirkan keterbatasan pengetahuan.
Kesalahan pertama saya yang biasa dilakukan oleh kebanyakan blogger yang mengikuti kontes adalah terburu-buru dalam link building. Banyaknya backlink yang muncul pada waktu bersamaan dengan anchor text yang sama tentunya akan membuat curiga robots. Benar saja, tidak tanggung-tanggung keesokan harinya posting tentang Rusli Zainal Sang Visioner hilang dari peredaran. Padahal sebelumnya sudah berada di halaman 2 di search engine google.co.id. Mungkin hal ini bisa menjadi pelajaran bagi beberapa teman yang memang mengejar SEO sehingga berhati-hati dalam membentuk link yang kuat.
Kesalahan kedua adalah ketika saya bermain dengan Meta Tag, karena asik melakukan aktivitas mencuri dari teman-teman blogger ternyata berdampak buruk pada blog saya. Beberapa meta yang saya mainkan adalah meta language dan meta geo, namun setelah saya banding-bandingkan hasilnya ternyata berpengaruh.
Bila kita mengejar posisi di google.co.id
<meta content='id' http-equiv='Content-Language'/>
dan bila mengejar di halaman google.com anda bisa setting langsung pada google webmasters atau dengan mengganti meta language diatas dengan en-US. Ada sedikit kejadian lucu ketika saya salah mengganti code lang menjadi in karena visitor ternyata datang dari India ( in ) setelah saya cari ternyata code in di ganti ke id.
Bila ingin muncul di halaman pencarian pada option Halaman Indonesia
<meta content='ID' name='geo.country'/>
Ada juga beberapa blog yang menggunakan geo.placename, untuk fungsinya secara langsung saya kurang paham tapi anda bisa menggunakannya dengan format
<meta content='Indonesia' name='geo.placename'/>
Sebetulnya masih banyak meta-tag yang bisa kita gunakan untuk optimasi blogger, namun beberapa orang tidak menggunakan meta tag. Meta tag disini hanya bersifat membantu namun sebenarnya kunci dari SEO on page adalah sematic html sehingga robots bisa dengan nyaman mendapatkan keyword-keyword yang sudah anda bubuhkan dalam pembuatan content. Mau memeriksa kondisi SEO yang sesuai dengan standard silahkan cek di W3C Validation atau bisa menggunakan Raven SEO Analyzer.
Salam Blogger.
Read More »
CSS3 More Effects. Sebagai seorang blogger kita tentu banyak bermain di code-code untuk memperindah blog atau web kita. Namun terkadang kita melupakan tentang kegunaan CSS karena terlalu asik dengan widget dan javascripts. Beberapa blogger sudah bermain dengan CSS untuk memberikan efek dalam blognya, namun hanya sebagian saja yang mengerti secara penuh tentang penggunaan CSS. Saya termasuk yang masih belajar tentang bagaimana menggunakan CSS2 sesuai dengan standard yang sudah di tentukan oleh W3C, namun tidak ada salahnya kita sedikit menengok ke CSS3 dengan segala kelebihan dan kekurangannya.
Efek bayangan pada text
Jika dulu kita perlu menambahkan javascript sejenis cufon untuk memberi shadow pada text, di CSS3 kita hanya perlu menambahkan sedikit style.
text-shadow: 2px 2px 2px #000;
#000 merupakan warna shaddow yang akan di gunakan dan 2px adalah radius untuk bayangan.
Contoh Text Shadow
Untuk efek bayangan ini juga bisa mengesankan text menjadi timbul dengan sedikit permainan radius dan pemilihan warna yang sesuai. Bagaimana tertarik menggunakan CSS3, kelebihannya adalah pada beban html/css yang tentunya berkurang jika kita tidak memakai .javascripts. Namun ada kekurangan pada efek shadow ini dan pada CSS3 pada umumnya, karena dia tidak bisa terbaca di beberapa browser lama. Bagi pengguna Firefox silakan anda berbangga hati karena dengan update yang baru efek ini bisa berjalan dengan lancar.
Efek Lengkung pada Box
Terkadang kita menjumpai template yang menggunakan box dengan sudut lengkung, itu adalah salah satu fungsi yang bisa di gunakan pada CSS3. Namun seperti pada sebelumnya, tidak semua browser bisa membacanya.
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
Untuk mendapatkan hasil yang maksimal, kita bisa mengeditnya sehingga box kita terkesan seperti gambar.
Contoh penerapan efek lengkung pada box dengan CSS3
Bagaimana? tertarik untuk menggunakan CSS3 yang lebih bervariasi, sehingga anda lebih bisa mengoptimalkan tampilan blog atau web anda. Sebelum membuat template sebaiknya diperhatikan bahwa template yang kita buat berjalan di semua web browser, karena tidak semua orang menggunakan browser yang sama dengan kita. Bagi yang tertarik memepelajari lebih lanjut tentang CSS3 silakan mencari everything you need in CSS3
Info tambahan: blogger team membuat sedikit perbahan pada comments box, permasalahan muncul ketika kita mau menggunakan Name/Url. Code verifikasi yang ditampilkan terpotong setengah dan tidak ada tombol submitnya karena tertutup oleh box commentar.
Tips: pada edit html centang expand widget lalu search pada tab dibawah ini
<iframe allowtransparency='true'
ganti srolling menjadi 'auto' atau kalo tidak kita bisa bermain pada height, rubah tingginya menjadi > 400px sehingga posisis kata kunci tidak terpotong ataupun tertutup.
happy blogging
Read More »
