Browse »
Home » Posts filed under Tutorial
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 »
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 »
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 »
Webmaster dan SEO Tool. Sebagai seorang webmaster ataupun seorang blogger tentunya kita memerlukan tools yang bisa di gunakan untuk memeriksa keadaan blog kita. Kita tentunya tidak hanya menulis dan menulis sedangkan tampilan blog kita tampak berantakan, ingat kenyamanan pembaca adalah prioritas penting dalam blogging sehingga betah di dalam menyimak tiap-tiap artikel yang kita tulis.
Selain itu kita juga memerlukan Search Engine Optimization baik onpage maupun offpage, selain berguna untuk meningkatkan pagerank ( monetize ) SEO juga berguna untuk menempatkan artikel kita pada posisi atas search engine. Sematik HTML juga menjadi sangat penting ketika kita di hadapkan pada browser yang berbeda, sehingga yang merasa bermain dengan design template harus mempunyai tool yang bisa digunakan mengetahui screenshot dalam berbagai browser.
Beberapa SEO Analyzer dan Webmaster tools:
SEO centro Meta Analyzer
Dalam tool ini kita bisa mengetahui singkronisasi antara meta / title dan isi artikel yang dituankan dalam bentuk persentase. Selain itu SEOcentro juga memberikan keyword destination yang bisa menentukan keakuratan isi posting dalam mengejar salah satu keyword. Dari segi penggunaan tools ini sangat mudah sehingga para blogger ataupun webmaster bisa menggunakannya.
Raven SEO Analyzer
Untuk tools yang satu ini tampil lebih sederhana dengan hanya menyebutkan kesalahan dan memberikan sedikit clue untuk kesalahan yang kita buat. Contoh mudah adalah kesalahan sematik letak heading pada template blogger dimana h2 terletak terbalika dengan h3. Untuk penilaian Raven SEO memberikan penilaian antara 0 - 100 dengan cara kerja hampir mirip dengan W3C validator namun dengan bubuhan SEO.
W3C Validator
Jika anda penganut standard web tentunya perlu markup yang biasa digunakan untuk mengetahui apakah web atau blog yang dibuat valid HTML. Validatioon checker yang satu ini cukup lengkap memberikan letak kesalahan dan petunjuk untuk memperbaikinya. Cara penggunaannya pun cukup mudah dan standard validasinya tidak terlalu tinggi, namun jika anda ingin standard yang lebih tinggi anda bisa mencari validator lainnya.
CSS Validator
Selain untuk HTML ada juga validator untuk CSS namun sayang vasilitas yang di berikan oleh W3.org ini masih berputar pada CSS2 sehingga bagi anda pengguna CSS3 jangan harap bisa valid untuk validasi dari w3.org ini.
Browser Shots Checker
Walau terkesan sederhana namun ini sering dilupakan oleh beberapa webmaster, yaitu tampilan di beberapa browser lain. Salah satu yang paling bermasalah adalah IE6 dimana 1px saja perbedaan maka akan menyebapkan template rusak. Pastinya kejadian seperti itu tidak anda inginkan di template blog anda.
Backlink Checker
Bagi anda yang ingin memperkuat SEO dengan link Building anda memerlukan tool yang satu ini untuk mengetahui seberapa banyak link yang menuju ke web atau blog anda. Ini adalah salah satu situs favorit saya waktu mengikuti kontes Rusli Zainal Sang Visioner karena saya dapat mengetahui link yang menuju ke teman-teman blogger yang lain.
Mypagerank.net
Situs ini cukup lengkap dalam memberikan tool bagi webmaster maupun blogger. Fasilitas Pagerank Check, Alexa rank Check sampai pada fasilitas ping semua di berikan secara gratis walaupun ada beberapa yang harus di wajibkan mendaftar.
Pingler.com
Sesuai dengan namanya, tool ini digunakan untuk ping website atau blog untuk memberi kabar bahwa blog telah update. Pingler sendiri menyediakan instan ping yang bisa dilakukan 1 kali dalam sehari untuk 1 alamat url.
Mungkin beberapa dari anda sudah mengetahui tools online tersebut, namun saya hanya mencoba berbagi kepada yang belum tahu agar kita bisa bersama-sama menggunakannya. Selain tool online kita juga bisa menggunakan plugin yang sudah di sediakan oleh mozilla firefox. Beberapa plugin yang saya gunakan antaralain SEOQuake, FireBug dan Nodofollow mengenai fungsi masing-masing plugin mungkin saya bisa jelaskan di artikel selanjutnya.
Fiva 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 »
Slide Featured Post. Platform blogger tidak bisa dilengkapi dengan model featured post seperti pada wordpress. Banyak master blogger yang memberikan cara menambahkan featured secara manual dengan berbagai efek, salah satunya dengan menggunakan javascripts. Salah satu contohnya adalah yang di gunakan oleh detik.com dan kompas.com, mungkin ada beberapa blogger yang sudah mengerti cara pengaplikasiannya tapi tidak ada salahnya kita ulas kembali.
Disini kita akan menggunakan aplikasi Javascript, pertama-tama login blogger dashboard dan menuju ke Edit/Html lalu masukan code berikut di atas code </head> anda bisa memasukkannya langsung ke blogger atau upload ke hostingan anda.
function ddtabcontent(tabinterfaceid){
this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
this.enabletabpersistence=true
this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
}
ddtabcontent.getCookie=function(Name){
var re=new RegExp(Name "=[^;] ", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}
ddtabcontent.setCookie=function(name, value){
document.cookie = name "=" value ";path=/" //cookie value is domain wide (path=/)
}
ddtabcontent.prototype={
expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
this.cancelautorun() //stop auto cycling of tabs (if running)
var tabref=""
try{
if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
tabref=document.getElementById(tabid_or_position)
else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
tabref=this.tabs[tabid_or_position]
}
catch(err){alert("Invalid Tab ID or position entered!")}
if (tabref!="") //if a valid tab is found based on function parameter
this.expandtab(tabref) //expand this tab
},
cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )
if (dir=="next"){
var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex 1 : 0
}
else if (dir=="prev"){
var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1
}
if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function
this.cancelautorun() //stop auto cycling of tabs (if running)
this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])
},
setpersist:function(bool){ //PUBLIC function to toggle persistence feature
this.enabletabpersistence=bool
},
setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
this.selectedClassTarget=objstr || "link"
},
getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
},
urlparamselect:function(tabinterfaceid){
var result=window.location.search.match(new RegExp(tabinterfaceid "=(\\d )", "i")) //check for "?tabinterfaceid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},
expandtab:function(tabref){
var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
//Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
var associatedrevids=(tabref.getAttribute("rev"))? "," tabref.getAttribute("rev").replace(/\s /, "") "," : ""
this.expandsubcontent(subcontentid)
this.expandrevcontent(associatedrevids)
for (var i=0; i<this.tabs.length; i ){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
}
if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
},
expandsubcontent:function(subcontentid){
for (var i=0; i<this.subcontentids.length; i ){
var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
}
},
expandrevcontent:function(associatedrevids){
var allrevids=this.revcontentids
for (var i=0; i<allrevids.length; i ){ //Loop through rev attributes for all tabs in this tab interface
//if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf("," allrevids[i] ",")!=-1)? "block" : "none"
}
},
setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)
for (var i=0; i<this.hottabspositions.length; i ){
if (tabposition==this.hottabspositions[i]){
this.currentTabIndex=i
break
}
}
},
autorun:function(){ //function to auto cycle through and select tabs based on a set interval
this.cycleit('next', true)
},
cancelautorun:function(){
if (typeof this.autoruntimer!="undefined")
clearInterval(this.autoruntimer)
},
init:function(automodeperiod){
var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
var selectedtab=-1 //Currently selected tab index (-1 meaning none)
var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index
this.automodeperiod=automodeperiod || 0
for (var i=0; i<this.tabs.length; i ){
this.tabs[i].tabposition=i //remember position of tab relative to its peers
if (this.tabs[i].getAttribute("rel")){
var tabinstance=this
this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
this.tabs[i].onclick=function(){
tabinstance.expandtab(this)
tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
return false
}
if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/))
}
if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
selectedtab=i //Selected tab index, if found
}
}
} //END for loop
if (selectedtab!=-1) //if a valid default selected tab index is found
this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)
else //if no valid default selected index found
this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
}
} //END int() function
}
Setelah itu menuju ke CSS letakkan code berikut ini sebelum code </b:skin>
/* Tab Slide */
.slidemenu{font: bold 10px Verdana; width: 80%}
.slidemenu ul{margin: 2px; padding: 0; float: left; /* width: 80%; width of menu*/ background: transparent}
.slidemenu ul li{display: inline;}
.slidemenu ul li a{float: left; margin: 2px 5px; color: #933; /*text color*/ padding: 5px 11px; text-decoration: none; border: 1px solid #933}
.slidemenu ul li a:hover{background:#933; color:#e0d5c2}
.slidemenu ul li a:visited{color:#e0d5c2}
.slidemenu ul li a.selected{color:#e0d5c2 !important; padding-top: 6px; /*shift text down 1px*/ padding-bottom: 4px; border: 1px solid #933; background:#933}
.tabcontentstyle{ /*style of tab content container*/ border: 0px solid gray; width: 450px; margin-bottom: 1em; padding: 10px}
.tabcontent{display:none}
@media print {.tabcontent {display:block !important;} }
Lalu simpan template. Selanjutnya yang harus anda lakukan adalah add element pada editor page. Masukkan source dibawah ini dan edit yang ditebalkan sesuai dengan kebutuhan anda.
<div style='float:left;margin:2px 5px 0px 5px; padding:0px;height:300px;'>
<div id='slidetabs' class='slidemenu'>
<ul>
<li><a href='#' class='selected' rel='tab1'>»</a></li>
<li><a href='#' rel='tab2'>»</a></li>
<li><a href='#' rel='tab3'>»</a></li>
<li><a href='#' rel='tab4'>»</a></li>
</ul>
<br style='clear: left'/>
</div>
<div style='width:400px;text-align:justify;padding: 5px; margin-bottom:1em'>
<div id='tab1' class='tabcontent'>
<a href='http://www.urltab1.com'>
<img width='300px' alt='' src='http://urlimagetab1.jpg' height='200px'/></a>
<h3 style='font-weight:bold; font-size:14px'><a href='http://www.urltab1.com'>Judul Tab 1</a></h3>
Content Tab 1
</div>
<div id='tab2' class='tabcontent'>
<a href='http://www.urltab2.com'>
<img width='300px' alt='' src='http://urlimagetab2.jpg' height='200px'/></a>
<h3 style='font-weight:bold; font-size:14px'><a href='http://www.urltab2.com'>Judul Tab 2</a></h3>
Content Tab 2
</div>
<div id='tab3' class='tabcontent'>
<a href='http://www.urltab3.com'>
<img width='300px' alt='' src='http://urlimagetab3.jpg' height='200px'/></a>
<h3 style='font-weight:bold; font-size:14px'><a href='http://www.urltab3.com'>Judul Tab 3</a></h3>
Content Tab 3
</div>
<div id='tab4' class='tabcontent'>
<a href='http://www.urltab4.com'>
<img width='300px' alt='' src='http://urlimagetab4.jpg' height='200px'/></a>
<h3 style='font-weight:bold; font-size:14px'><a href='http://www.urltab4.com'>Judul Tab 4</a></h3>
Content Tab 4
</div> </div>
<script type="text/javascript">
var mypets=new ddtabcontent("slidetabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(4000)
</script>
</div>
Silahkan mengexplorernya lebih lanjut. mypets.init(4000) adalah kecepatan gerak dari slide tersebut, anda bisa merubahnya.
Happy blogging
Credit: Blogger Tutorial
Read More »
Read More Blogger AIO. Untuk memperindah halaman depan atau index page pada blog, orang cenderung menggunakan fasilitas readmore. Untuk platform sekelas wordpress fasilitas ini sudah tertanam otomatis di dashboard pada saat kita posting artikel, namun untuk platform blogger perlu memasukannya secara manual. Beberapa webmaster blogger bereksperimen untuk menemukan temuan baru dalam menggunakan fasilitas read more ini.
Fasilitas readmore dari berbagai sumber.
1. Readmore untuk clasic template
2. Readmore untuk template blogger baru
3. Readmore dengan menggunakan javascript
4. Readmore secara automatis + thumbnail
Readmore untuk clasic template
Saya menemukan ini di web mas isnaini.
Pertama-tama menuju pada edit template, setelah itu tambahkan code dibawah ini diantara <style> dan </style>
<MainOrArchivePage>
span.readmore {display:none;}
</MainOrArchivePage>
<ItemPage>
span.readmore {display:inline;}
</ItemPage>
Code diatas di gunakan untuk menambahkan span readmore pada CSS. Selanjutnya untuk mengeluarkan link baca selengkapnya yang sudah akan kita buat cari code < $BlogItemBody$> dan letakkan code ini dibawah code tersebut.
<mainorarchivepage><br />
<a href="<$BlogItemPermalinkURL$>">Read More..</a>
</mainorarchivepage>
Setelah menyimpan template langkah terakhir adalah ketika kita menulis artikel, biasakan menggunakan edit html. Saat menulis letakkan code <span class="readmore">
di didepan tulisan yang akan kita sembunyikan ditutup dengan </span>
Contoh:
Cara membuat read more pada blogger template clasic. <span class="readmore"> Postingan yang ingin disembunyikan. </span>
Readmore untuk template blogger baru
Dahulu saya menggunakan readmore jenis ini, karena saya menggunakan template blogger jenis baru.
Seperti membuat readmore pada template clasic, kita harus menuju ke edit html dan centang expand widget. Letakkan code ini di bawah ]]></b:skin>
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
Selanjutnya cari code <p><data:post.body/></p> dan letakkan code berikut ini tepat dibawahnya dan save template.
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>
Bila langkah diatas tidak bisa bekerja anda bisa coba cara yang ini ( hal ini disebapkan karakteristik tiap template berbeda ). Cari code <div class='post-header-line-1'/> <div class='post-body'> dan letakkan code berikut ini dibawahnya
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
Dibawahnya kita akan menemukan code <p><data:post.body/></p> dan tambahkan code ini dibawahnya
<a expr:href='data:post.url'>Readmore..</a>
</b:if>
Untuk langkah pemotongan artikel dilakukan secara manual seperti pada readmore classic bedanya untuk pemotongannya span code yang digunakan adalah <span class="fullpost">. dan ditutup dengan </span>
Readmore dengan menggunakan javascript
Kali ini akan sedikit melibatkan Javascripts, banyak blogger kurang memahami tentang penggunaan javascripts tapi bisa menggunakannya. Langsung saja ini adalah file javascripts yang bisa anda masukkan langsung ke blogger atau meloadnya ke hosting anda.
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i ) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i ) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i ) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i ) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
Letakkan code ditersebut di atas code </head>, bila anda menggunakan file hosting maka code akan seperti ini
<script type='text/javascript' src='http://alamathostinganda.com/Readmore.js' />
Cara ini cukup susah, dalam artian anda harus teliti dalam merubah template. Kalau anda salah template akan menjadi kacau, untuk amannya save template sebelum mengeditnya.
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body' expr:id='"post-" data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" data:post.id "\");"' href='javascript:void(0);'>[ /-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" data:post.id "\");"' href='javascript:void(0);'>[ /-] Ringkasan saja...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" "<data:post.id/>")</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
Code yang ditebalkan adalah code tambahan yang harus anda masukkan untuk mengaktivkan readmore dengan menggunakan javascripts dan save template. Selanjutnya langkah pemotongan sama dengan readmore sebelumnya yang harus dilakukan secara manual. Letakkan code <span id="fullpost"> di depan artikel yang akan di sembunyikan dan diakhiri dengan </span>.
Readmore secara automatis + thumbnail
Cara ini berbeda dari yang sebelumnya karena menggunakan sistem otomatis dengan menghitung jumlah character dari artikel yang akan di tampilkan. Selain bisa di gunakan secara otomatis readmore dengan jenis ini juga bisa menampilkan thumb dari image pertama.
Tertarik? langsung saja menuju edit html dan letakkan code berikut sebelum tag </head> dan save template
<!-- Read more 2 -->
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i ){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">") 1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop ;
strx = strx.substring(0,chop-1);
return strx '...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; margin:0px 10px 5px 0px; padding:0; border-right:2px solid #ccc; border-bottom:2px solid #ccc;"><img src="' img[0].src '" width="' img_thumb_width 'px" height="' img_thumb_height 'px"/></span>';
summ = summary_img;
}
var summary = imgtag '<span>' removeHtmlTag(div.innerHTML,summ) '</span>';
div.innerHTML = summary;
}
//]]>
</script>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 125;
img_thumb_width = 120;
</script>
<!-- Read more 2 end -->
Jangan beranjak dari edit html tapi centang pada expand widget, cari code <data:post.body/> ganti code tersebut dengan code berikut ini
<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>
Save template. Untuk penyesuaian anda dapat menggunakan panduan berikut ini.
var thumbnail_mode = "float"; ( menentukan posisi thumnail )
summary_noimg = 250; ( Jumlah character bila tidak menggunakan thumbnail )
summary_img = 250; ( Jumlah character bila tidak menggunakan thumbnail )
img_thumb_height = 120; ( Tinggi thumbnail )
img_thumb_width = 120; ( Lebar thumbnail )
Demikian sedikit ulasan tentang beberapa jenis readmore.
Read More »
Memilih Widget Untuk Blogger. Sering kali kita temukan blogger yang mempunyai blog di penuhi dengan ornamen-ornamen tambahan atau widget. Dari pihak blogger sendiri pun membebaskan penggunanya untuk memberikan tambahan sesuai keinginan pemilik blog. Tidak semua widget yang kita pasangkan di blogger sesuai dengan standard web, walau tidak bisa dipungkiri bahwa platform blogspot memang tidak well format dengan standard web.
Di beberapa web tutorial banyak terdapat trik-trik untuk mempercantik blogger dengan memanfaatkan external script atau yang biasa di sebut blogger hack. Namun terkadang kita terlalu canggih dalam mengaplikasikannya kedalam suatu blog, sehingga melupakan etika dalam membuat suatu tampilan web atau blog. Saya sendiri termasuk seorang yang suka sekali bermain dengan widget, pengaplikasiannya dan fungsinya. Tapi disini kita dihadapkan pada permasalahan kecocokan antara widget yang kita pakai dengan template. Banyak kita lihat para blogger dengan mengejar fungsi yang kurang mengena tapi mengejar agar blognya terlihat canggih.
Sebetulnya apa guna widget dan bagaimana supanya pengaplikasiannya bisa tepat sasaran tanpa membuang bandwidth atau loading page yang terlalu lama. Anda tidak harus melakukan apa-apa untuk mendapatkan loading page yang cepat dan memperoleh fungsi dari widget itu sendiri. Tapi yang anda perlukan hanya berfikir tepatkah widget tersebut diaplikasikan pada web atau blog anda dan sudah sesuaikah dengan tema web kita. Terlalu banyak ornamen terkadang membuat orang menjadi malas berkunjung ke web kita, hal itu tentunya menganggu untuk blog yang berisi artikel-artikel.
Untuk penggunaan javascript dalam blogger bisa menggunakan external hosting atau dengan memaksanya masuk kedalam html code blogger itu sendiri. Tentunya anda tidak mau ketika pengunjung web anda menunggu loading suatu widget karena terlalu banyak widget yang harus di load. Dari pihak blogger sendiri sudah memberikan beberapa fasilitas standard yang di perlukan untuk suatu blog, dari navigasi sampai kepada feeds situs. Dengan menggunakan fasilitas yang sudah diberikan tersebut, tentunya anda akan dihindarkan dari permasalahan loading page yang terlalu lama.
Bukan berarti kita harus melupakan blogger hack, banyak dari fasilitas yang di berikan oleh blogger yang memang kalah dari beberapa saingan terdekat seperti Wordpress dan Joomla. Jangan tanyakan kepada saya platform apa yang harus anda gunakan jika ingin membuat web, saya tidak akan menyarankan penggunaan blogger jika anda memang berniat membuat profesional web. Namun jika anda bisa atau mengerti tentang bahasa-bahasa web tentunya anda bisa mengaplikasikannya ke platform blogger.
Jadi saran saya jadikanlah blog blogger anda menjadi semakin indah tanpa melupakan etika dalam pembuatan suatu halaman blog atau web.
Read More »
