0

SyntaxHighlighter pada Blogger

Kamis, 15 Juli 2010 01.49

Diposting oleh My Blog

Label:


SyntaxHighlighter buatan Alex Ghorbatchev ini sangat cantik dan manis seperti artis yang berpakaian minimalis, sexy dan menggairahkan (halah... nembak keyword doang). Pada versi 2.0.320 ini banyak mengalami perbaikan dari pada versi sebelumnya. Saat pertama kali menggunakan SyntaxHighlighter versi (lupa lagi), Blogger TuneUp banyak mengalami kegagalan. Bukannya bagus malah jadi kacau, tag-tag yang seharusnya tidak tampil justru tampil, bahkan tag-tag yang tadinya tidak ada menjadi ada dan ikut tampil.
Pada awalnya SyntaxHighlighter menggunakan tag <textarea> tetapi sekarang menggunakan tag <pre> sebagai kontainer kode. Tag <pre> itu lebih baik karena kode yang ada diantara tag <pre> akan ditampilkan apa adanya tanpa terpengaruh tag lain. Setting parameter pada versi ini lebih banyak dari pada versi sebelumnya sehingga SyntaxHighlighter semakin fleksibel, lengkap, cepat proses loadingnya dan lebih bagus tampilannya. SyntaxHighlighter cocok bagi mereka para blogger hack, programmer, webdesigner, yang ingin menampilkan source code-nya didalam artikel.
Dibawah ini langkah demi langkah integrasi dan konfigurasi SyntaxHighlighter untuk pengguna Blogger.

Integrasi SyntaxHighlighter pada Blogger:
Langkah 1
Dowload css, script dan komponen SyntaxHighlighter lainnya disini.
Langkah 2
Ekstrak file nya.
Langkah 3
Login ke webhosting anda dan upload file-file SyntaxHighlighter tadi. Jangan lupa copy shortcut URL file tersebut.
atau upload di http://sites.google.com/
Langkah 4
Login ke Blogger dengan Account anda, jangan account saya.
Langkah 5
Masuk ke tab "Tata Letak - Edit HTML" dan "Expand Template Widget"
Langkah 6
Cari kode dibawah ini:

</head>

Langkah 7
Masukan kode dibawah ini diatas kode pada Langkah 6, dan ganti URL sesuai dengan shortcut URL file SyntaxHighlighter yang sudah anda upload pada webhosting anda:

<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shCore.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shAutoloader.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushAppleScript.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushAS3.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushBash.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushColdFusion.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushCpp.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushCSharp.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushCss.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushDelphi.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushDiff.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushErlang.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushGroovy.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushJavaFX.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushJava.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushJScript.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushPerl.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushPhp.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushPlain.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushPowerShell.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushPython.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushRuby.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushSass.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushScala.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushSql.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushVb.js'/>
<link type='text/css' rel='stylesheet' href='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-2/shCore.css'/>
<link type='text/css' rel='Stylesheet' href='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-2/shThemeEmacs.css'/>

Langkah 8
Cari kode dibawah ini:

</body>

Langkah 9
Masukan kode dibawah ini diatas kode pada Langkah 8:

<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;URL/clipboard.swf&#39;;
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.config.toolbarItemWidth = 16;
SyntaxHighlighter.config.toolbarItemHeight = 16;
SyntaxHighlighter.all();

Langkah 10
Simpan Template, sampai disini proses integrasi SyntaxHighlighter pada blogger sudah selesai.
Share |
0

Javascript untuk menampikan tanggal

Selasa, 13 Juli 2010 09.27

Diposting oleh My Blog

Label:


di bawah ini adalah javascript untuk membuat tanggal dalam web.. Tingal copy dan paste di elemen halaman,. Berikut contoh dan yang berwarna merah script nya.

Script untuk buat tnggal pada title posting contohnya pada judul post ini.


<font color="blue"><script language="JavaScript" src="http://arieino.wen.ru/script/js/tanggal1.js"></script></font><br/>

Script tngal bahasa inggris contohnya dibawah ini

July 13, 2010

<font color="blue"><script language="JavaScript" src="http://arieino.wen.ru/script/js/tanggal2.js"></script></font><br/>

Script tangalan bahasa jawa contohnya dibawah ini

Dinten Salasa, Kaping : 13 Juli 2010

<font color="blue"><script language="JavaScript" src="http://arieino.wen.ru/script/js/tanggal.js"></script></font><br/>

Script tnggalan hijryah contohnya dibawah ini

Tue 13 July 2010
1 Sya'ban 1431

<font color="blue"><script language="JavaScript" src="http://arieino.wen.ru/js/tgl_hijriyah.js"></script></font><br/>

Script tanggalan jawa contohnya dibawah ini

Seloso, 13 Juli 2010

<font color="orange"><script language="JavaScript" src="http://arieino.wen.ru/js/tgl_jawa.js"></script></font>
Share |
0

10 POHON PALING MENAKJUBKAN DI DUNIA

05.40

Diposting oleh My Blog

Label:





10.Lone Cypress in Monterey


Terletak di Monterey Peninsula, California.
Karena dihimpit batu dan terletak pas diatas tebing,
dengan pemandangan indah langsung menghadap Samudera Pasifik,
membuat Pohon ini semakin indah untuk di pandang.

9. Circus Trees

sebenenarnya ini merupakann pohon biasa dari jenis apa saja,
namun sedari kecil di rangkai dan di bentuk sehinga menjadi bentuk seperti yang diinginkan.
Di butuhkan keuletan dan kasih sayang ekstra sehingga terjadi pohon luar biasa seperti ini.

8. Giant Sequoias: General Sherman


Pohon ini hanya tumbuh di Sierra Nevada, California.

Jenis ini merupakan pohon terbesar di dunia (dalam hal volumenya/luas lebar).
Dimana pohon yang paling besar dinamakan “General Sherman” terletak di Sequoia National Park.

Ukurannya mencapai 275 Kaki (83.8 m) dengan volume 52.500 (1.485 m3),
dengan berat lebih dari 6000 ton, dan berumur kurang lebih 2.200 tahun.

7. Coast Redwood: Hyperion and Drive-Thru Trees



Pohon ini termasuk jenis lain dari Sequoias.
Namun berbeda dengan GIant Sequoias yang merupakan pohon terbesar, Coast Redwood merupakan pohon tertinggi.

Salah satu pohon tertinggi berada di Leggett, California.
Tinggi 315 kaki (95.5 m) , dengan pintu selebar 6 kaki (1.8 m), dan tinggi 9 kaki (2.8 m).Dan digunakan untuk penyebrangan.


6. Chapel-Oak of Allouville-Bellefosse

he Chêne-Chapelle (Chapel-Oak) of Allouville-Bellefosse merupakan pohon paling terkenal di Perancis.
Yang membuatnya unik, selain pohon ini bagus, karena di pohon ini ada bangunan dan monumen religius.

Pada tahun 1669, l’Abbe du Detroit and du Cerceau memutuskan untuk membangun chapel
di pohon yg pada saat itu berumur 500 tahun. Sang pendeta kemudian membangun Virgin Mary.

Kemudian setelahnya ia mulai membangun tangga.

Sayang sekarang ini pohon tersebut sudah hampir setengah mati. Batangnya sudah mati, dan daunnya sudah tidak tumbuh lagi.

5. Quaking Aspen: Pando (The Trembling Giant)



Pando [wiki] or the Trembling Giant di UTAH sebenarnya merupakan single colony.
Secara genetik semua pohon ini sama yang artinya mereka merupakan Kloning dari yang satu.
Pando, yang adalah bahasa Latin nya berarti “saya menjalar,” biasanya terdiri dari
47.000 helai tangkai menjalar dan sepanjang 107 acres di tanah.

4. Montezuma Cypress: The Tule Tree


El Árbol del Tule [wiki] (”The Tule Tree) adalah pohon cemara Montezuma yang teramat besar (Taxodium mucronatum) dekat kota Oaxaca, Meksiko.
Pohon ini mempunyai unkuran lingkar yang paling besar yaitu 190 kaki (58 m) dan berdiameter 37 kaki (11,3 m).
Pohon Tule begitu kental/rada lengket, sampai ada yg bilang bahwa “anda bukan yang memeluk pohon ini, malahan anda yg dipeluk).

3. Banyan Tree: Sri Maha Bodhi Tree

Pohon Beringin dinamakan sesudah “banians” atau pedagang Hindu yang melakukan bisnis mereka di bawah pohon.
Sekalipun anda belum pernah mengetahui pohon Beringin (adalah pohon yang dipakai oleh Robinson Crusoe
untuk dijadikan rumah pohon), kamu dapat dengan mudah mengenalinya.
Bentuk pohon raksasa ini mudah untuk dikenali:
mempunyai rerimbunan penuh keagungan dengan akar yang tergurai ke tanah.

2. Bristlecone Pine: Methuselah and Prometheus, Pohon Tertua di Dunia.


Pohon hidup yang paling tua di dunia adalah White Mountains di California,
bristlecone cemara (Pinus longaeva) yang dimakanan Methuselah.
Pohon Methuselah, yang ditemukan di 11.000 kaki di atas permukaan laut, berumur 4.838 tahun -
adalah bukan hanya pohon yang paling tua tetapi juga merupkaan satu-satunya oraganisme non-colonial yg paling tua di dunia.

1. Baobab

Baobab (Adansonia) atau pohon roti kera bisa bertambah besar sampai hampir 100 kaki (30 m) tinggi dan 35 kaki (11 m) lebar.
Ciri khas mereka:
Batang bengkak mereka sebenernya tempat penyimpanan air – pohon tanaman baobab bisa menyimpan sampai 31.700 galon (120.000 l)
air untuk bertahan di kondisi kering.

Pohon tanaman baobab asli dari Madagaskar (it’s country’s nasional tree!), Afrika daratan, dan Australia.

Sekelompok yang paling “megah di antara semua” pohon tanaman baobab (Adansonia grandidieri) bisa ditemukan di Jalan Raya Baobab, dekat Morondava, di Madagaskar.
Share |
0

Memahami dan Mengatasi Konflik Script jQuery

Senin, 12 Juli 2010 06.50

Diposting oleh My Blog

Label:


script-script yang dibuat menggunakan perintah dasar JavaScript memang rentan terjadi bentrok antar script baik karena kesamaan script, kesamaan fungsi ataupun kesamaan perintah sehingga script-script yang dibuat saling mengalahkan atau bahkan saling meniadakan satu sama lain dan itu juga terjadi pada turunan-turunan JavaScript seperti halnya jQuery. Hal ini bisa saja berakibat fatal, beberapa kasus yang Blogger Tune-Up pernah temukan bahkan membuat error halaman "Tata Letak - Elemen Laman" dengan keterangan "Error Page 404 Not Found" (dibahas menyusul).

Memahami dan Mengatasi Konflik Script jQuery
jQuery sebagai salah satu framework turunan JavaScript yang paling banyak digunakan juga rentan terhadap bentrok antar script baik script dengan script pada framework yang sama atau dengan script dengan framework berbeda. Sebenarnya website resmi jQuery sudah memberikan solusi yang sangat mudah untuk mengatasi bentrok antar script ini tetapi tidak ada salahnya Blogger Tune-Up kembali membantu membahasnya, terutama bagi mereka yang menemukan fungsi-fungsi jQuery yang tidak bekerja dengan baik.
Perintah dasar jQuery selalu diawali dengan simbol "$" (tanpa tanda kutip) atau kita mengenal simbol ini dengan nama "Dollar". Ini sebagai identitas perintah-perintah jQuery, jadi jika teman-teman blogger menemukan script yang selalu diawali dengan tanda "$" maka ini adalah script jQuery. Dan sudah menjadi kewajiban bahwa script jQuery ini harus didampingi framework jQuery-nya sebagai sistem dasar. Framework jQuery haruslah terlebih dahulu dipanggil (load) agar deklarasi-deklarasi script yang kita buat mampu berjalan normal. Ibaratnya jQuery itu adalah rumah dan script-script yang kita buat adalah isi dari rumah itu.

Pemasangan Framework jQuery pada Blogger
Beruntunglah para webdesigner yang suka dengan framework jQuery karena framework ini didukung penuh oleh raksasa IT yaitu Google. Google menyediakan resource jQuery baik untuk digunakan maupun untuk dikembangkan, sehingga kita sebagai blogger yang lebih suka menggunakan tidaklah mengalami kesulitan untuk memasang framework jQuery pada blog kita. Untuk memasang framework jQuery pada blog kita, Google telah menyediakan beberapa cara yang mudah, diantaranya:

1. jQuery Google API
Cara kesatu ini adalah cara yang paling mudah dan paling aman dengan tingkat resiko error handle script paling kecil

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>


2. jQuery Google API Load
Cara kedua ini adalah cara yang Google jelaskan sebagai teknik yang paling aman, cepat dan ringan untuk memanggil framework jQuery

<script src='http://www.google.com/jsapi'/>
<script>
google.load("jquery", "1.3.2");
</script>


3. jQuery Google API Autoload
Cara ketiga ini memiliki tingkat error handle script sangat tinggi tetapi merupakan teknik yang paling cepat dalam memanggil framework jQuery

<script src='http://www.google.com/jsapi?autoload={"modules" : [{"name" : "jquery","version" : "1.3.2"}]}' type='text/javascript'/>

Cara kedua dan ketiga pernah dibahas pada artikel "Mempercepat Pemuatan Perpustakaan JavaScript". Pilihlah salah satu dari ketiga cara diatas dan harus diperhatikan bahwa pemanggilan Framework jQuery hanya perlu satu kali, karena jika di panggil (load) berulang maka ini akan memberatkan proses Pageload (pemanggilan halaman). Periksalah template dan widget blog anda dari kemungkinan pemasangan script framework jQuery yang berulang, jika ditemukan maka hapuslah dan sisakan satu saja serta prioritaskan pemanggilan framework jQuery pada template saja.

Mengatasi Konflik Script jQuery
Seperti sudah dijelaskan diatas bahwa script jQuery selalu diawali dengan simbol "$", simbol inilah yang harus diperhatikan karena simbol ini merupakan sebuah deklarasi fungsi-fungsi jQuery. Maka ini pula yang menjadi solusi untuk mengatasi konflik script-script jQuery. Bagaimana mengatasi konfliknya? Contoh dibawah ini merupakan cara yang sering Blogger Tune-Up gunakan untuk mengatasi konflik jQuery.
Perhatikan contoh script yang belum ditambahkan deklarasi untuk mengatasi konflik dibawah ini:
view source
print?
1 $(document).ready(function(){
2 $("a.slick").click(function () {
3 $(".active").removeClass("active");
4 $(this).addClass("active");
5 $(".content-slick").slideUp();
6 var content_show = $(this).attr("title");
7 $("#"+content_show).slideDown();
8 });
9 });
Script diatas sebenarnya sudah berjalan dengan baik akan tetapi kemungkinan bentrok sangat mudah terjadi.
Perhatikan contoh script yang sudah ditambahkan deklarasi untuk mengatasi konflik dibawah ini:
view source
print?
01 var $jnoc = jQuery.noConflict();
02 $jnoc(document).ready(function(){
03 $jnoc("a.slick").click(function () {
04 $jnoc(".active").removeClass("active");
05 $jnoc(this).addClass("active");
06 $jnoc(".content-slick").slideUp();
07 var content_show = $jnoc(this).attr("title");
08 $jnoc("#"+content_show).slideDown();
09 });
10 });
Bandingkan contoh script diatas maka kita akan menemukan perbedaan yang sebenarnya sangat sederhana.
Penjelasan:

1. var $jnoc = jQuery.noConflict(); adalah script untuk mendeklarasikan fungsi jQuery.noConflict yang berfungsi untuk mengatasi konflik-konflik JavaScript
2. $jnoc pada script berikutnya merupakan script untuk menggantikan fungsi dasar simbol "$" sehingga jika kita perhatikan maka sebenarnya semua simbol "$" tergantikan oleh script jQuery.noConflict hanya diwakilkan kepada script $jnoc yang sudah dideklarasikan sebelumnya pada baris 1.
3. $jnoc bisa saja diganti dengan kata apapun sesuai dengan keinginan anda, asalkan sesuai dengan kata yang dideklarasikan sebelumnya sebagai wakil dari script jQuery.noConflict pada baris 1.

http://modification-blog.blogspot.com/2010/05/memahami-dan-mengatasi-konflik-script.html
Share |
0

Cara Buat Read More di Blogger Blogspot

Minggu, 11 Juli 2010 00.34

Diposting oleh My Blog

Label:

1. Buka template -> Edit HTML -> Kasih tanda tik pada menu "expand widget tempate"
2. Letakkan kode berikut persis di atasnya kode </head>
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

3. Cari kode dibawah ini:
<p><data:post.body/></p>

Letakkan kode berikut di bawah kode diatas
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>

4. Klik Simpan. Selesai.
5. Klik SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Isi kotak kosong tsb dg kode berikut:

<span class="fullpost">

</span>

Jangan lupa klik SIMPAN PENGATURAN.
Share |
1

Sholat everywhere, anytime…

Kamis, 08 Juli 2010 09.50

Diposting oleh My Blog

Label:



Siang itu aku melongok dari jendela kamarku
Ada pemandangan tak biasa terlihat disana
Seorang laki-laki, menghampar sajadah
Lalu ia pun shalat dengan sempurna
Menghadap kepada Penciptanya

Ya, shalat bisa dimana saja,
Seperti yang dilakukan oleh laki-laki itu,
Tinggal menghampar sajadah, jadilah sudah.

Hanya dua tempat, yang tak dibolehkan kita shalat disana.
Kuburan dan kamar mandi, berdasarkan keterangan dari lisan Nabi kita.
Selainnya? sungguh Allah telah menjadikan hamparan bumi ini sebagai tempat untuk memujaNya,
Ya, seluruh bagian bumi ini adalah masjid untuk beribadah kepadaNya.

Akan tetapi, cobalah berhitung, berapa banyak manusia yang ALPA?
Sekian ratus ribu, atau berjuta?
Padahal, jika tak mampu berdiri, ia bisa duduk, atau berbaring.
Hatta, dengan isyarat matapun bisa.
Namun, mengapa sebagian manusia enggan mengerjakannya?

Bertanyalah, kepada hati-hati kita semua....
Share |
0

Menambahkan Tombol Google Buzz pada Blogger

09.23

Diposting oleh My Blog

Label:



Integrasi Tombol Google Buzz pada Artikel Blog [Versi 1]
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Jangan lupa klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

<div class="post-header-line-1">

Atau kode ini:

<data:post.body>

Langkah 5
Masukan (copy paste) kode dibawah ini dan tempatkan diantara kode pada Langkah 4:

<div style="padding: 4px; float: right;">
<a href="http://www.blogger.com/%22http://www.google.com/reader/link?url=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title%20+%20%22&amp;srcTitle=%22%20+%20data:blog.title+%20%22&amp;srcURL=%22%20+%20data:blog.homepageUrl%20" rel="nofolloW" style="text-decoration: none;" target="_blank">
<img alt="Buzz It" src="http://i48.tinypic.com/idyc04.png" style="border: 0px none ;" /></a>
</div>

Langkah 6
Simpan Template dan Preview blog...

Integrasi Tombol Google Buzz pada Artikel Blog [Versi 2]
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Jangan lupa klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

<div class="post-header-line-1">

Atau kode ini:

<data:post.body>

Langkah 5
Masukan (copy paste) kode dibawah ini dan tempatkan diantara kode pada Langkah 4:
Tombol Kecil:

<a href="http://www.blogger.com/%27javascript:var%20b=" 20gr________bookmarklet_domain="" z="document.createElement(" src="http://www.google.com/reader/ui/link-bookmarklet.js"><img alt="Buzz this" src="http://img2.pict.com/9c/09/57/2854010/0/buzzthis.gif" /></a>

Tombol Besar:

<a href="http://www.blogger.com/%27javascript:var%20b=" 20gr________bookmarklet_domain="" z="document.createElement(" src="http://www.google.com/reader/ui/link-bookmarklet.js"><img alt="Buzz this" src="http://img2.pict.com/15/da/3e/2809374/0/googlebuzz.png" /></a>

Langkah 6
Simpan Template dan Preview blog...

</data:post.body></div></data:post.body></div>

http://modification-blog.blogspot.com/2010/03/menambahkan-tombol-google-buzz-pada.html
Share |
Langganan: Postingan (Atom)