Secara default kebanyakan engine blog seperti Wordpress maupun Blogger tidak memiliki fasilitas Related Post yang berfungsi menampilkan beberapa postingan blog yang terkait/mirip dengan postingan yang sedang diakses. Untuk pengguna Wordpress bisa memanfaatkan plugins related post macam kayak di sini. Sedangkan bagi pengguna platform Blogger yang paling gampang adalah dengan memanfaatkan situs penyedia related post seperti di Linkwithin.com.
Image from http://www.edb.gov.hk
Nah bagi pengguna blog Blogsome yang sebenarnya berplatform Wordpress juga tapi akses untuk menambahkan pluginsnya tidak diperbolehkan, kita bisa menggunakan trik berikut ini untuk menampilkanrelated post di blog.
Konsepnya sebenarnya begini, kita ingin menampilkan beberapa postingan yang ada di kategori yang sama dengan postingan yang sedang diakses karena biasanya postingan dalam kategori yang sama juga mengandung topik isi postingan yang sama pula. Nah beruntungnya, secara default di semua kategori yang ada di blog berplatform Wordpress kayak Blogsome ini mempunyai RSS Feed. Misal jika kita punya kategori bernama Web Development maka RSS Feednya adalahhttp://zawa.blogsome.com/category/web-development/feed/ dan jika di dalam kategori tersebut mempunyai child kategori lagi misal bernama CSS maka RSS Feednya menjadihttp://zawa.blogsome.com/category/web-development/css/feed/.
Dari contoh struktur RSS Feed kategori tersebut kita bisa membuat related post berdasarkan isi dari tiap-tiap RSS Feed kategori yang sedang diakses.
Langkah-langkahnya sebagai berikut :
Pertama masuk ke halaman admin terus ke menu Manage » Files » Index.html. Pada templates tersebut masukkan kode berikut sebelum tag html </head>
{capture name='post'}{single_post_title}{/capture}{if $smarty.capture.post}{literal}
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0"></script>
<script type="text/javascript">google.load("feeds", "1");</script>{/literal}{/if}
Selanjutnya pada tag html sebelum </html> masukkan kode berikut ini :
{capture name='post'}{single_post_title}{/capture}{if $smarty.capture.post}
{literal}<script type="text/javascript">
var feedcontainer=document.getElementById("relatedpost"){/literal}
{capture name='kategorinya'}{the_category_head}{/capture}
var feedurl="{$siteurl}/category/{$smarty.capture.kategorinya|strip_tags:false|lower|replace:' ':'-'|replace:',':''}{literal}/feed/"
var feedlimit=5
var rssoutput="<div style='color:#000000;text-decoration:none;font-family:arial;font-size:14px;font-weight:bold;'>Related Posts</div><ul style='margin:0;padding:0;margin-top:3px;margin-bottom:14px;'>"
function rssfeedsetup(){
var feedpointer=new google.feeds.Feed(feedurl)
feedpointer.setNumEntries(feedlimit)
feedpointer.load(displayfeed)
}
function displayfeed(result){
if (!result.error && result.feed.entries.length!=0){
var thefeeds=result.feed.entries
for (var i=0; i<thefeeds.length; i++)
rssoutput+="<li style='margin:4px 0px 0px 0px;padding:0;'><a href='" + thefeeds[i].link + "' title='"+ thefeeds[i].title +"'>" + thefeeds[i].title + "</a></li>"
rssoutput+="</ul>"
feedcontainer.innerHTML=rssoutput
}
else
feedcontainer.innerHTML=rssoutput+="{/literal}<li>Tidak ada posting terkait</li>{literal}</ul>"
}
window.onload=function(){
rssfeedsetup()
}
</script>{/literal}
{/if}
Dan yang terakhir masuk ke menu Manage » Files » Post.html kemudian masukkan kode berikut <div id="relatedpost"></div> di bawah kode smarty {the_content more_link_text="(Read more)"} atau {the_content}
Yup, semoga bermanfaat :)
NB : Jika terjadi error, mohon kodenya diganti manual dulu di Notepad untuk karakter tanda petik dua (") dan tanda petik satu (') karena biasanya karakter tersebut akan otomatis terganti menjadi kode ASCII pada saat dipostingkan di blog ini sehingga berpengaruh di jalannya script tersebut :(
Search terms : related post wordpress, related post di blogspot, edit template blogsome.
Menambahkan Canonical Pada Blog Blogsome
Bagi kawan-kawan pengguna blog berbasis Wordpress MU + Smarty dari Blogsome tidak usah kecewa jika ternyata di Blogsome tidak memperbolehkan kita untuk menambahkan plugin wordpress lagi, khususnya plugin untuk meningkatkan kualitas seo macam plugin "all in one seo pack".
Setahu saya hasil dari plugin all in one seo pack adalah berupa meta description, meta keyword dan canonical url dimana meta description dan meta keyword bisa kita setting sesuai keinginan. Tentunya meta description dan meta keyword yang saling relevant memungkinkan hasil seo yang lebih baik.
Image from : http://compendiumblog.com
Nah karena di Blogsome akses kita terbatas hanya bisa memanfaatkan programming via Smarty Code dan gak bisa sebebas menggunakan wordpress dengan hosting sendiri, maka untuk mengoptimalkan seo-nya cukup mengakali meta description dan meta keywordnya seperti di postingan saya sebelumnya ini. Terus untuk canonical url-nya bisa menggunakan script berikut :
Letakkan sebelum tag
<link rel="canonical" href="{bloginfo show='url'}{$smarty.server.REQUEST_URI}" />
</head>NB : sebelum kode di atas dicopypaste sebaiknya tanda petik dua (") dan tanda petik satu (') diganti manual lagi karena ketika posting di blog ini otomatis diganti menjadi karakter ascii.
Yup, semoga bermanfaat :)
Menjadikan Judul Blog, Meta Description, dan Meta Keyword, Saling Relevant untuk Meningkatkan SEO
Seharian main-main dengan smarty code di Blogsome dan menemukan teknik berikut ini. Seperti yang kita tahu, judul blog dan meta description serta meta keyword merupakan salah satu faktor untuk meningkatkan performa SEO dari blog. Selain backlink dan beberapa teknik penulisan artikel tentunya :D
Nah berikut ini saya mencoba sedikit utak-atik smarty code di template blogsome untuk mendapatkan hasil yang relevant nantinya antara judul posting, meta description dan meta keyword. Ini nih code smartynya :
Untuk blog title-nya ganti dengan ini :
<title>{capture name=kategori}{single_cat_title prefix=''}{/capture}{if $smarty.request.s != ""}{$smarty.request.s|upper|cat:' : '}{/if}{single_post_title prefix=''}{if $smarty.server.REQUEST_URI|truncate:10:'':true == '/category/'}{$smarty.capture.kategori|upper|cat:' : '}{/if}{capture name='post'}{single_post_title}{/capture}{if $smarty.capture.post}{else}{if $smarty.server.REQUEST_URI|count_characters == '9′}{capture name='arsipbulan'}{single_month_title prefix=' '}{/capture}{$smarty.capture.arsipbulan|cat:' '}{/if}{bloginfo show='name'}{/if}</title>
Ini untuk meta descriptionnya :
<meta name="description" content="{capture name=kategori}{single_cat_title prefix=''}{/capture}{if $smarty.request.s != ""}{$smarty.request.s|upper|cat:' : '}{/if}{single_post_title prefix=''}{if $smarty.server.REQUEST_URI|truncate:10:'':true == '/category/'}{$smarty.capture.kategori|upper|cat:' : '}{/if}{capture name='post'}{single_post_title}{/capture}{if $smarty.capture.post}{else}{if $smarty.server.REQUEST_URI|count_characters == '9′}{capture name='arsipbulan'}{single_month_title prefix=' '}{/capture}{$smarty.capture.arsipbulan|cat:' '}{/if}{bloginfo show='name'}{/if}" />
Dan yang terakhir ini untuk auto generate keyword berdasarkan dari judul postingan kita :
<meta name="keywords" content="{capture name=kategori}{single_cat_title prefix=''}{/capture}{if $smarty.server.REQUEST_URI|truncate:10:'':true == '/category/'}{$smarty.capture.kategori|lower|replace:' ':', '}{/if}{capture name='keyword'}{single_post_title prefix=''}{/capture}{$smarty.capture.keyword|lower|replace:' ':', '|cat:', '}{if $smarty.request.s != ""}{$smarty.request.s|lower|replace:' ':', '|cat:', '}{/if}yourkeyword1, yourkeyword2, yourkeyword3″ />
Nah pada smarty code meta keyword di atas, pada baris terakhir ada tulisan yourkeyword1, yourkeyword2, yourkeyword3, ini silakan diganti/ditambahin sendiri dengan keyword default dari blog milikmu. Misal blog milikmu seputar hewan maka keyword-keyword tersebut bisa diganti dengan anjing, kucing, anak kucing dll :p
Hasil dari smarty code di atas kayak gini, misal kita posting blog judulnya "Halo Selamat Malam" maka di html kode nya akan kayak gini :
<title>Halo Selamat Malam</title>
dan meta description nya kayak gini :
<meta name="description" content="Halo Selamat Malam" />
meta keywordnya jadi gini :
<meta name="keyword" content="halo, selamat, malam, yourkeyword1, yourkeyword2, yourkeyword3″ />
Yup semoga bermanfaat, kalo masih bingung silakan ditanyakan di komentar, insyaallah nanti saya jawab hehehe… :D
Eh iya lupa, trik ini cuman untuk blog di blogsome lho yah… atau blog-blog lain yang ditanamkan enginesmarty code untuk fasilitas templatenya… (hmmm blog provider lain ada gak yah???)
Backup Data Postingan di Blogsome
Wuehehehe… senang banget. Mungkin itulah ungkapan yang pas ketika beberapa waktu yang lalu melihat dashboard admin di Blogsome. Yup saat ini di Blogsome sudah ditambahkan fasilitas baru yakni untuk backup seluruh data postingan kita di Blogsome baik data teks maupun file-file penunjang seperti template blog yang kita pakai serta file-file gambar yang telah kita upload di Blogsome.
Untuk data postingan bisa dibackup dalam bentuk structure file SQL. Namun sayangnya di Blogsome sendiri tidak ada fasilitas untuk import file SQL tersebut. Katanya si admin Blogsome sih memang sengaja tidak dikasih fasilitas tersebut karena takut untuk disalahgunakan. Tapi gak masalah karena dengan adanya fasilitas backup sendiri bagi saya sudah sangat cukup untuk membackup seluruh data postingan saya yang sebelumnya harus memanfaatkan software thirdy party macam bikinan kungfoo untuk tool backup di Blogsome.
Nah semoga hal ini jadi kabar gembira bagi kawan-kawan yang pengin hijrah dari Blogsome ke Blog Provider lain macam Wordpress ataupun CMS (Content Management System) yang support untuk import data berupa file SQL.
Yup, DATA adalah EMAS. Maka jagalah baik-baik harta online Anda tersebut jangan sampe hilang ;)
Random Gambar Menggunakan Smarty di Blogsome
Setelah sebelumnya kita bereksperimen menampilkan emoticon yahoo messenger di blogsomememanfaatkan template engine smarty yang tertanam di blogsome, kali ini kita akan mencoba plugin math (operasi matematika) dimana bisa kita gunakan untuk membuat random image atau untuk membuat sesuatu yang lain yang berbau random/acak. :P
Berikut contoh script smarty yang saya buat :
{math equation="rand(1,3)" assign=acak}
{if $acak==1}
<img src="/images/gambar1.jpg" />
{elseif $acak==2}
<img src="/images/gambar2.jpg" />
{elseif $acak==3}
<img src="/images/gambar3.jpg" />
{else}
<img src="/images/gambar4.jpg" />
{/if}
Penjelasan :
Pada script diatas, {math equation="rand(1,3)" assign=acak} akan menghasilkan nilai random antara 1-3 kemudian nilai tersebut akan dimasukkan ke variabel acak. Nah jika ingin random angka banyak tinggal ditambahkan aja nilainya menjadi lebih besar. Misal {math equation="rand(1,25)" assign=acak} akan menghasilkan angka random antara 1-25.
Kemudian nilai variabel "acak" di cek jika nilainya 1 maka akan menampilkan file gambar "gambar1.jpg" dan seterusnya. Yup, selanjutnya tinggal berkreasi lagi sendiri memanfaatkan plugin math pada smarty di template blogsome milik kalian :)
Semoga bermanfaat…
Memasang JavaScript Pada Blogsome
Akhirnya setelah sekian lama bosan dengan ngeblog hari ini moodnya datang lagi… ngeblog lagi… sekalian nunggu pemilihan umum Indonesia 2009 hehehehe… yup kali ini kita akan membahas tentang pemanfaatan JavaScript di Blogsome. :) Sebenarnya di Blogsome kita diperbolehkan untuk langsung memasang JavaScript di template blog. Namun karena di sistem Blogsome menggunakan engine Smarty Code dimana menggunakan karakter kurung kurawal "{ }" untuk codingnya maka jika kita memasukkan JavaScript yang mengandung tanda kurung kurawal juga maka oleh Smarty Code akan dieksekusi. Dan akibatnya akan terjadi error.
Agar tidak terjadi salah penafsiran antara tanda kurung kurawal pada JavaScript dan Smarty Code maka harus digunakan kode Smarty {literal} untuk menandakan bahwa karakter kurung kurawal yang dimasukkan adalah untuk JavaScript bukan untuk Code Smarty.
Penggunaan {literal} adalah sbb :
{literal}
<script type="text/javascript">
function makan(){
document.write("Makan Soto Ayam");
}
</script>
{/literal}
Jangan lupa penutup batas akhirnya dikasih {/literal}
Yup, semoga bermanfaat :)
Search terms : tutorial javascript, download smarty bahasa indonesia, blogsome indonesia, ngeblog dapat duit, berkampanye dengan damai di pemilihan umum indonesia 2009, pemilu damai tahun 2009 indonesia.
Menampilkan Umur Memanfaatkan Smarty Code Pada Blogsome
Kemarin iseng utak-utik smarty code dan berhasil buat script mungil yang memanfaatkan plugin math (operasi matematika) di smarty code untuk menampilkan umur kamu pada "About Me" di sidebar. Caranya cukup mudah, masuk ke menu manage >> files.
Terus buat profil about me kamu di sidebar dan tambahkan smarty code berikut :
{capture name=tahunskrg}{$smarty.now|date_format:"%Y"}{/capture}
{math equation=$smarty.capture.tahunskrg-1984 assign=umur}
<h2>About Me</h2>
<ul><li>
<img src="fotokamu.jpg" align="left" border="0"> Nama kamu. Female, {$umur} tahun. Penyuka kelinci. Suka makan sate ayam. Bla bla bla… isi about me nya diganti sendiri yah hehehehe…
</li></ul>
Cara kerja script diatas adalah pertama kita capture informasi tahun saat ini yang diambil dari server blogsome dan hasilnya dimasukkan ke variable "tahunskrg". Kemudian variable "tahunskrg" dikurangkan dengan tahun lahir kamu dan hasilnya dimasukkan ke variable "umur". Pada contoh diatas digunakan tahun 1984, untuk selanjutnya ganti dengan tahun lahir kamu yah hehehehe…
Untuk menampilkan hasilnya tinggal meletakkan {$umur} di teks about me yang telah kamu buat… :)
Yup semoga bermanfaat… kapan-kapan kalo ada waktu luang akan saya bahas lagi pemanfaatan plugin math pada smarty code lebih lanjut… :D tentunya dengan bahasa Indonesia hihihihi… btw pemilihan umum a.k.a pemilu 2009 kapan ya diadakan di Indonesia? Penasaran nih dengan pemenangnya nanti… :D
Search terms : smarty code tutorial, templates blogsome gratis, menampilkan umur pada blog, cara kerja smarty code, download smarty code terbaru, resep sate ayam, pemilu damai 2009, kampanye damai pemilihan umum 2009 di indonesia, pemilu indonesia 2009 berlangsung damai.
Free Blogsome Themes
Bagi kawan-kawan pengguna free blog dari Blogsome dan pengin ganti themes/template-nya dengan themes yang lebih bagus, berikut ada salahsatu user Blogsome yang menyediakan Free Blogsome Themes yang dengan senang hati meluangkan waktunya untuk porting kode themes Wordpress menjadi kode themes Blogsome. Disana terdapat banyak pilihan desain themes Blogsome yang bisa kamu aplikasikan ke blog milikmu. Dan yang pasti lebih bagus dari themes-themes default dari Blogsome :)
Yup, bagi yang penasaran silakan main ke : http://citizenonmars.blogsome.com/category/blogsome-themes/
Hmmm… pengin desain themes Blogsome yang lebih bagus lagi??? hihihihi… cari desain free themes Wordpress yang kamu anggap desainnya bagus. Terus porting/ubah kodenya ke Blogsome. :)
Salahsatu kelebihan Blogsome adalah kita bisa bermain-main dengan Smarty Code dimana hal ini tidak dipunyai oleh penyedia free blog lainnya :D
Search terms : free blogsome themes, blogsome templates, template blog gratis untuk blogsome, smarty code for blogsome, free blog accessories.
Tags Link on Blogsome Template to Get a Better SEO (Search Engine Optimization)
Sometimes to get a better SEO (search engine optimization), i usually put tags link manually on my post to maximalize keyword. But, i'm happy now because i was try to make smarty code on my post.html template and work like charm :D. When i write post like this : () ((cats)), ((dogs)), ((rabbit)). it is automatically replace to be : Tags : cats, dogs, rabbit.
- On your dashboard, go to manage >> files. And then choose post.html template.
- Find {the_content} or {the_content more_link_text="(Read more)"} then replace with smarty code like this :
{capture name=tags}{the_content more_link_text="(Read more)"}{/capture}
{capture name=tags_link}{permalink_link}{/capture}
{capture name=tags_title}{the_title}{/capture}
{assign var=tagslink value=$smarty.capture.tags_link}
{assign var=tagstitle value=$smarty.capture.tags_title}
{assign var=tagslink_tagstitle value='<a href="'|cat:$tagslink|cat:'" title="'|cat:$tagstitle|cat:'">'}
{assign var=the_content_tags1 value=$smarty.capture.tags|replace:'()':'Tags :'}
{assign var=the_content_tags2 value=$the_content_tags1|replace:'((':$tagslink_tagstitle}
{assign var=the_content_tags3 value=$the_content_tags2|replace:'))':'</a>'}
{$the_content_tags3}- After you create your post, don't forget before you publish you can make automatically tags link by add some keywords on your post like this : () ((some keyword1)), ((some keyword2)), ((some keyword3)) etc.
Enjoy it :)
Search terms : SEO tutorial, best wordpress SEO, search engine optimization, free blogsome templates,smarty blogsome tutorial.
Merubah Tampilan Tanggal Posting Menjadi Versi Bahasa Indonesia Pada Template Blogsome
Secara default pada tampilan tanggal posting di template blogsome akan berupa
tanggal versi bahasa inggris. Untuk itu agar bisa diubah menjadi tanggal posting
versi bahasa indonesia kita bisa memanfaatkan Smarty :)
Caranya sbb :
- Masuk ke menu Manage >> Files kemudian lihat pada menu di bawah (disitu ada Main Page, Site Style Sheet, Posts, Comments)
- Pilih menu Posts. Maka akan muncul editing template untuk posting.
- Pada template tersebut cari kode ini {the_date d="d F Y"} dan ganti dengan kode Smarty berikut :
{capture name=tanggal}{the_date d="d F Y"}{/capture}
{assign var=tanggal_indonesia value=$smarty.capture.tanggal|replace:"January":"Januari"|replace:"February":"Pebruari"|replace:"March":"Maret"|replace:"April":"April"|replace:"May":"Mei"|replace:"June":"Juni"|replace:"July":"Juli"|replace:"August":"Agustus"|replace:"September":"September"|replace:"October":"Oktober"|replace:"November":"November"|replace:"December":"Desember"}
{$tanggal_indonesia}
Yup, selamat mencoba semoga bermanfaat :)
No comments:
Post a Comment