Monday, July 27, 2009

Blogger Hack Navigasi Halaman

Kita sering menemukan tombol kecil-kecil dibawah artikel berisi angka-angka sebagai navigasi halaman yang banyak kita jumpai pada forum-forum dan untuk blogger dengan basis WordPress. Tombol-tombol navigasi halaman ini cukup membantu para pengunjung untuk berpindah dari satu halaman ke halaman lain. Secara default Blogger tidak memberikan fasilitas ini, maka dari itu kita mesti menggunakan teknik blogger hack untuk menambahkan tombol navigasi halaman tersebut.
Teknik integrasi pada blogger sebenarnya bisa dengan menambahkannya melalui sebuah widget. Tetapi kali ini Blogger Tune-Up hanya akan mengulas teknik blogger hack navigasi halaman dengan menambahkan script code-nya melalui template. Dalam artikel kali ini Blogger Tune-Up hanya penyambung artikel dari aslinya disini.
Langkah integrasi blogger hack navigasi halaman
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Lebih baik backup dulu template untuk mencegah terjadinya error
Langkah 4
Cari kode dibawah ini:
]]></b:skin>
Langkah 5
Masukan (copy paste) kode CSS dibawah ini tepat diatas kode pada langkah 4:
.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;}
.showpageArea a {border: 1px solid #505050;color: #000000;font-weight:normal;padding: 3px 6px !important;padding: 1px 4px ;margin:0px 4px;text-decoration: none;}
.showpageArea a:hover {font-size:11px;border: 1px solid #333;color: #000000;background-color: #FFFFFF;}
.showpageNum a {border: 1px solid #505050;color: #000000;font-weight:normal;padding: 3px 6px !important;padding: 1px 4px ;margin:0px 4px;text-decoration: none;}
.showpageNum a:hover {font-size:11px;border: 1px solid #333;color: #000000;background-color: #FFFFFF;}
.showpagePoint {font-size:11px;padding: 2px 4px 2px 4px;margin: 2px;font-weight: bold;border: 1px solid #333;color: #fff;background-color: #000000;}
.showpage a:hover {font-size:11px;border: 1px solid #333;color: #000000;background-color: #FFFFFF;}
.showpageNum a:link,.showpage a:link {font-size:11px;padding: 2px 4px 2px 4px;margin: 2px;text-decoration: none;border: 1px solid #0066cc;color: #0066cc;background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px;border: 1px solid #333;color: #000000;background-color: #FFFFFF;}
Langkah 6
Cari kode dibawah ini (tanpa "Expand Template Widget"):
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
Langkah 7
Masukan (copy paste) kode dibawah ini dibawah kode pada langkah 6:
&lt;script type=&quot;text/javascript&quot;&gt;
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;.blogspot.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;
var pageCount=5;
var displayPageNum=3;
var firstPageWord = &#39;First&#39;;
var endPageWord = &#39;Last&#39;;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=&#39;&#39;){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=&#39;&#39;){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
fFlag++;
}
if(p==(thisNum-1)){
html += &#39;&amp;nbsp;&lt;span class=&quot;showpagePoint&quot;&gt;&lt;u&gt;&#39;+thisNum+&#39;&lt;/u&gt;&lt;/span&gt;&#39;;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39; &lt;/a&gt;&lt;/span&gt;&#39;;
}
}
if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){
if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+labelHtml + firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}
html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;&quot; class=&quot;showpage&quot;&gt;Page &#39;+thisNum+&#39; of &#39;+(postNum-1)+&#39;: &lt;/span&gt;&#39;+html;
if(thisNum&lt;(postNum-1)){
html += downPageHtml;
html += &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[htmlMap.length-1]+&#39;&quot;&gt; &#39;+endPageWord+&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);
if(postNum &lt;= 2){
html =&#39;&#39;;
}
for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
&lt;/script&gt;
&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
Langkah 8
Simpan template dan preview blog anda

Keterangan:
  • var pageCount = 5; = Ubah angka 5 sesuai dengan seberapa banyak halaman artikel yang akan ditampilkan dalam navigasi halaman dalam setiap halaman artikel
  • var displayPageNum = 3; = Ubah angka 3 sesuai dengan seberapa banyak halaman artikel yang akan ditampilkan
Selamat mencoba dan mudah-mudahan berhasil. Jika ada kesulitan silahkan tinggalkan pesan pada komentar dibawah. Happy blogging walaupun lapar... :)

Sunday, July 26, 2009

Konfigurasi SyntaxHighlighter pada Blogger

Bagaimana persetubuhan [ops... integrasi maksudnya] SyntaxHighlighter dengan Blogger pada artikel sebelumnya? Pasti sexy dan sangat menggairahkan...? [tembak keyword jelek nih... :)]. Setelah proses integrasi SyntaxHighlighter pada blogger berjalan sempurna, artikel kali ini akan menyuguhkan konfigurasi SyntaxHighlighter yang sesuai dengan kebutuhan. Disinilah letak perbedaan SyntaxHighlighter versi 2.0.230 dengan versi sebelumnya. Lebih banyak parameter tetapi semakin bagus untuk menampilkan sourcecode, lebih lengkap, lebih enak dipandang dengan warna yang sejuk.
Ada 3 jalan untuk meng-konfigurasi SyntaxHighlighter, yaitu :

1. SyntaxHighlighter.config
SyntaxHighlighter.config memiliki nilai konfigurasi yang berlaku umum untuk semua elemen halaman dan tidak digunakan untuk elemen tunggal. Konfigurasi ini berlaku global yang berpengaruh pada semua elemen halaman. Dibawah ini nilai konfigurasi config :
NamaNilaiKeterangan
bloggerModetrueIntegrasi dengan Blogger. Jika kita pengguna blogger.com, maka ini harus diaktifkan dengan nilai "true". Nilai "false" tidak diaktifkan.
clipboardSwfnullFungsi fasilitas clipboard. Jika hal ini perlu untuk diaktifkan maka tentukan lokasi URL penempatan file "clipboard.swf" melalui nilai konfigurasi clipboardSwf. Jika nilai ini tidak ditentukan maka icon clipboard tidak akan tampil.
stripBrsfalseJika secara otomatis blogger.com menambahkan tag <br/> di setiap akhir baris kode, option ini harus diaktifkan untuk menghapusnya secara otomatis.
toolbarItemWidth16Lebar dari icon didalam toolbar. Jika kita ingin mengubah ukuran toolbar maka harus merubah lebar icon melalui nilai dari konfigurasi toolbarItemWidth.
toolbarItemHeight16Tinggi dari icon didalam toolbar.
Tabel diatas menunjukan konfigurasi SyntaxHighlighter.config, hal ini pernah dicontohkan pada artikel sebelumnya (baca kembali "Integrasi SyntaxHighlighter pada Blogger" pada pada Langkah 9).
Dibawah ini contoh jika kita gunakan secara keseluruhan dari SyntaxHighlighter.config:
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'URL/clipboard.swf';
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.config.toolbarItemWidth = 16;
SyntaxHighlighter.config.toolbarItemHeight = 16;
SyntaxHighlighter.all();
</script>
2. SyntaxHighlighter.default
SyntaxHighlighter.default memiliki nilai konfigurasi yang berlaku terbatas hanya untuk elemen halaman tertentu saja. Dibawah ini nilai konfigurasi default :
NamaNilaiKeterangan
auto-linkstrueUntuk mengarahkan pendeteksian terhadap kaitan (link) dengan penanda (highlight) elemen on atau off. Jika option ini di matikan (off), URL tidak akan bisa di-klik. Klik disini untuk demo.
class-name'' Untuk menambahkan sebuah penyesuaian class (atau beberapa class) pada setiap penanda (highlight) elemen yang akan dibuat pada halaman. Klik disini untuk demo.
collapsefalse Untuk memaksa penanda (highlight) element pada halaman untuk disembunyikan dalam lipatan (collapse) sebagai default. Klik disini untuk demo.
first-line1 Untuk mengubah awal penomoran baris. Klik disini untuk demo.
font-size'100%' Untuk mengubah ukuran huruf dengan mudah didalam penanda elemen halaman tanpa mempengaruhi sekitarnya dengan menambahkan CSS. Klik disini untuk demo.
guttertrue Untuk mengatur gutter (penanda pinggir) dengan penomoran baris on dan off. Klik disini untuk demo.
highlightnull Untuk menyoroti (highlight) satu atau lebih baris untuk memfokuskan perhatian pengguna. Ketika menetapkan sesuatu parameter, kita dapat melewati secara acak dengan mengatur nilai, seperti [1,4,6] atau hanya sebuah nomor untuk satu baris. Klik disini untuk demo.
html-scriptfalse Untuk menyoroti percampuran code HTML/XML dan script yang biasanya sering digunakan pengembang web. Setingan nilai ini sangat membutuhkan (requires) pemanggilan shBrushXml.js dan brush untuk mendukung fasilitas ini. Klik disini untuk demo.
lightfalse Untuk menon-aktifkan toolbar dan gutter dengan properti tunggal. Klik disini untuk demo.
rulerfalse Untuk menampilkan kolom penggaris pada bagian atas. Klik disini untuk demo.
smart-tabstrue Untuk mengatur fasilitas tabulasi pintar. Klik disini untuk demo.
tab-size4 Untuk mengatur ukuran tabulasi. Klik disini untuk demo.
toolbartrue Tombol toolbar on/off. Klik disini untuk demo.
wrap-linestrue Untuk mengatur fasilitas perpindahan baris (wrapping). Klik disini untuk demo.
Contoh konfigurasi SyntaxHighlighter.default:
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
...
SyntaxHighlighter.default.wrap-lines = false;
SyntaxHighlighter.default.collapse= true;
SyntaxHighlighter.default.auto-links= true;
SyntaxHighlighter.default.ruler= true;
</script>
3. Parameter
Teknik parameter mengijinkan penyesuaian terhadap penanda elemen (highlight) tunggal sesuai keinginan kita. Kunci/nilai tertentu diatur hampir sama dengan format untuk CSS, tetapi hanya berpengaruh pada style atribut tertuju, hal ini bisa digunakan bersama-sama dengan deklarasi brush melalui atribut class. Teknik ini adalah teknik yang paling disukai sebagian pengguna SyntaxHighlighter termasuk Blogger TuneUp.
Contoh setting teknik parameter :
<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]; wrap-lines: false; collapse: true">...</pre>
Lebih jauh mengenai cara konfigurasi SyntaxHighlighter praktis silahkan lihat dan pelajari melalaui demo disini. Mudah-mudahan artikel kali ini memberikan gambaran penggunaan SyntaxHighlighter yang lebih mendalam. Selamat mencoba dan Happy Blogging... ;-)

Thursday, July 23, 2009

Integrasi SyntaxHighlighter pada Blogger

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 menggunakan software sekelas 7-Zip.
Langkah 3
Login ke webhosting anda dan upload file-file SyntaxHighlighter tadi. Jangan lupa copy shortcut URL file tersebut.
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://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shLegacy.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushBash.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDelphi.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDiff.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushGroovy.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPlain.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushScala.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js'/>
<script type='text/javascript' src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js'/>
<link type='text/css' rel='stylesheet' href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css'/>
<link type='text/css' rel='Stylesheet' href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.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.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.stripBrs = true;
...
SyntaxHighlighter.all();
</script>
Langkah 10
Simpan Template, sampai disini proses integrasi SyntaxHighlighter pada blogger sudah selesai.

Keterangan:
Perhatikan Langkah 7 diatas, pilihlah JavaScript Library yang sesuai dengan kebutuhan sourcecode yang akan ditampilkan pada artikel anda, tidak perlu semua dimasukan.
  • shCore.js; ini adalah inti dari JavaScript Library SyntaxHighlighter, file ini wajib disertakan.
  • shLegacy.js; ini adalah tambahan dari JavaScript Library SyntaxHighlighter
  • shBrushBash.js; ini untuk menampilkan sourcecode bahasa pemrograman Bash
  • shBrushCpp.js; ini untuk menampilkan sourcecode bahasa pemrograman C-PP
  • shBrushCSharp.js; ini untuk menampilkan sourcecode bahasa pemrograman C-Sharp
  • shBrushCss.js; ini untuk menampilkan sourcecode Cascading Style Sheet (CSS)
  • shBrushDelphi.js; ini untuk menampilkan sourcecode bahasa pemrograman Delphi
  • shBrushDiff.js; ini untuk menampilkan sourcecode Diff
  • shBrushGroovy.js; ini untuk menampilkan sourcecode Groovy
  • shBrushJava.js; ini untuk menampilkan sourcecode bahasa pemrograman Java
  • shBrushJScript.js; ini untuk menampilkan sourcecode JavaScript
  • shBrushPerl.js; ini untuk menampilkan sourcecode bahasa pemrograman Perl
  • shBrushPhp.js; ini untuk menampilkan sourcecode bahasa web sideserver PHP
  • shBrushPlain.js; ini untuk menampilkan sourcecode Plain Text
  • shBrushPython.js; ini untuk menampilkan sourcecode bahasa pemrograman Python
  • shBrushRuby.js; ini untuk menampilkan sourcecode Ruby
  • shBrushScala.js; ini untuk menampilkan sourcecode Scala
  • shBrushSql.js; ini untuk menampilkan sourcecode database SQL
  • shBrushVb.js; ini untuk menampilkan sourcecode bahasa pemrograman Visual Basic
  • shBrushXml.js; ini untuk menampilkan sourcecode XML
  • shBrushJavaFX.js; ini untuk menampilkan sourcecode JavaFX
  • shBrushPowerShell.js; ini untuk menampilkan sourcecode PowerShell
Perhatikan Langkah 9 diatas, bagian ini digunakan untuk mengkonfigurasi SyntaxHighlighter, baca artikel "Konfigurasi SyntaxHighlighter pada Blogger".

Memasukan kode SyntaxHighlighter pada artikel:

Langkah 1
Buat sebuah artikel pada mode "Edit HTML"
Langkah 2
Contoh penggunaan SyntaxHighlighter didalam artikel
<pre class="brush: js;">
function onThemeChange(sender)
{
var parts = sender.value.split('|');
document.getElementById("theme").href = "Styles/" + parts[1];
document.body.style.backgroundColor = parts[0];
}
</pre>
Keterangan:
  • Untuk memasukan kode SyntaxHighlighter harus dalam mode "Edit HTML"
  • Sourcecode yang akan dimasukan kedalam kontainer SyntaxHighlighter ditempatkan diantara tag <pre>
  • Lebih lanjut baca "Konfigurasi SyntaxHighlighter pada Blogger"
Mudah-mudahan berhasil... Tinggalkan pesan jika mengalami kegagalan, dan baca artikle selanjutnya mengenai "Konfigurasi SyntaxHighlighter pada Blogger". Happy Blogging... :-)

Wednesday, July 22, 2009

Suatu hari aku menemukan perpustakaan (baca:library) yang didalamnya begitu banyak buku (baca:code) yang menarik, kemudian aku baca dan aku terapkan didalam kehidupanku (baca:blogku). Perpustakaan tersebut diberi nama jQuery dan aku sangat suka dengan bacan-bacaan didalamnya. Petulanganpun aku lanjutkan, dalam petualangan tersebut aku menemukan kembali sebuah perpustakaan yang didalamnya juga ternyata banyak bacaan menarik, tidak kalah dengan perpustakaan jQuery. Perpustakaan tersebut diberi nama Prototype yang didalamnya penuh bacaan yang akan membawa pembacanya ke hal-hal baru.
Petualangan demi petualangan dilakukan dan satu persatu perpustakaan-perpustakaan ditemukan dibelantara dunia maya, berbagai kelebihan dan kekurangan dari setiap perpustakaan tersebut ditemukan. Maksud hati ingin menggabungkan kelebihan-kelebihan tersebut, tetapi ternyata tidak semudah itu. Library JavaScript tersebut ternyata tidak bersahabat satu dengan lainnya, peperangan pun terjadi, mereka saling menjatuhkan satu sama lain. Jika salah satu framework berjalan dengan baik maka framework yang lain dapat dipastikan tidak berjalan, satu kode mematikan kode yang lain.
Dalam kasus kali ini, kita akan mencoba mendamaikan dua framework yang saling menjatuhkan, yaitu jQuery Library dan Prototype Library. Kasus ini ditemukan pada saat Blogger TuneUp mencoba menggabungkan efek Pagepeel dan efek LightBox pada blog Electronic Project. Disaat mencoba mengaktifkan efek Pageflip dengan framework jQuery maka efek LightBox dengan framework Prototype tidak dapat bekerja, begitupun sebaliknya. Setelah ditelaah ternyata masalahnya terletak pada penggunaan shortcut yang sama, jQuery dengan Prototype bahkan beberapa framework lainnya menggunakan shortcut $. Hal ini entah kesengajaan atau memang masih satu developer?
Ada beberapa cara untuk mengatasi konflik jQuery dan Prototype, dibawah ini hanya kasus yang sudah ditemukan:

Dibawah ini script efek PageFlip dengan framework jQuery sebelum dimodifikasi:
<script src='jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);}, function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>
Dibawah ini script efek LightBox dengan framework Prototype sebelum dimodifikasi:
<script src='prototype.js' type='text/javascript'/>
<script src='scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='lightbox.js' type='text/javascript'/>
Dengan cara diatas, dapat dipastikan ada efek yang tidak berjalan. Jika posisi penempatan jQuery di atas maka Prototype dapat berjalan dengan baik, tetapi jika posisi penempatan Prototype diatas maka jQuery yang berjalan dengan baik.

Pemecahannya dengan mengubah shortcut "$" menjadi "jQuery" dan menambahkan kode jQuery.noConflict(); sebagai berikut:
Modifikasi jQuery Library;
<script src='prototype.js' type='text/javascript'/>
<script src='jquery.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#pageflip").hover(function() {
jQuery("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);}, function() {
jQuery("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
jQuery(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>
Modifikasi Prototype Library;
<script src='scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='lightbox.js' type='text/javascript'/>
Perhatikan:
  • Prototype Library ditempatkan diatas jQuery Library.
  • Tambahkan kode "jQuery.noConflict();" pada script jQuery.
  • Ubah shortcut "$" menjadi "jQuery" pada script jQuery.
Sampai disini konflik yang terjadi sudah bisa diatasi dan kedua efek bisa berjalan bersamaan. Silahkan dibaca disini untuk mengetahui lebih lanjut tentang pemecahan konflik antar framework terutama jQuery.

Dibawah ini link yang menuju berbagai framework JavaScript Librarypopuler:
Mudah-mudahan cara diatas dapat membantu teman-teman yang punya permasalahan sama, bahkan ada beberapa komentar yang menyampaikan bahwa efek-efek yang dibuat Blogger TuneUp tidak berjalan baik, maka silahkan coba trips trik ini dan semoga berhasil. Happy Blogging... :-)

Tuesday, July 21, 2009

Solusi JavaScript untuk Pengguna Blogger

Blogger hanya memperbolehkan penggunanya meng-upload file berupa gambar dan video saja, tetapi tidak untuk file tipe lain. JavaScript adalah salah satu type file yang tidak diijinkan untuk diupload pada Blogger, hal ini membuat banyak pengguna blogger mencari cara alternatif untuk tetap bisa menggunakan file JavaScript ini. Berbagai tips dan trik blog pun bermunculan hanya untuk mencari alternatif penyimpanan file yang sesungguhnya ukuran file itu tidak begitu besar.
Pada awalnya para blogger cukup tenang dengan space yang di berikan GooglePages, tetapi sejak Google memutuskan untuk menutup fasilitas ini banyak pengguna blogger mengalihkan file-nya ke hosting lain. Hosting gratis menjadi alternatif penyimpanan yang banyak disukai para pengguna blogger, tetapi ketentuan yang berlaku, bandwidth dan space (ruang) membuat hal ini menjadi tidak nyaman dan mudah bagi para pengguna Blogger. Kebanyakan dari mereka hanya memperbolehkan untuk berbagi file, kita tidak diberikan cara untuk mengambil file tersebut dengan mudah, tidak diberikan URL langsung untuk mengambil file pada hosting kita.
Karena hal tersebutlah Blogger TuneUp mencoba menyajikan solusi alternatif untuk dapat tetap menggunakan script-script yang kita butuhkan. Dibawah ini beberapa alternatif tersebut:

1. Mengubah ekstensi .js menjadi ekstensi .txt
Para pemilik hosting gratis biasanya tidak mau mengambil resiko dengan memperbolehkan penggunanya menyimpan file berupa script, hal ini untuk menjaga agar jangan sampai penggunanya menyimpan dan menggunakan script tersebut untuk hal-hal yang merugikan orang lain, merugikan pemilik hosting.
Untuk menyiasati ketentuan tersebut kita bisa mengubah ektensi file JavaScript (.js) menjadi file berekstensi Plain Text (.txt), dengan cara ini file tersebut dapat diterima untuk diupload pada hosting gratisan. Hal ini tidak akan mempengaruhi blog kita, karena blogger akan tetap bisa membaca script yang ada dalam file tersebut dan tetap dapat di-load dengan lancar.
Untuk memanggil file yang telah kita upload, cukup dengan menggunakan script dibawah ini :
<script type="text/javascript" src="script_url.txt"/>
Dibawah ini alternatif free hosting yang bisa kita gunakan untuk menyimpan script yang dibutuhkan blogger, tetapi Blogger TuneUp tidak merekomendasikannya, karena hal ini hanya sekedar alternatif dan tidak ada jaminan dari penyedia free hosting sejauh mana mereka bisa tetap tersedia dengan gratis dan tidak menutup fasilitasnya.
2. Menggunakan Google AJAX Libraries API
Banyak script yang kita gunakan untuk blog dapat berjalan dengan baik hanya dengan library tertentu, misal Prototype atau jQuery. Library ini dapat kita load kedalam blog kita dengan Google AJAX Libraries API, tambahkan kode sebelum kode </head> di dalam template kita seperti dibawah ini:
<script src='http://www.google.com/jsapi'/>
<script>
google.load("library yang tersedia", "versi");
</script>
Contoh penggunaan library jQuery:
<script src='http://www.google.com/jsapi'/>
<script>
google.load("jquery", "1.3.2");
</script>
Lebih lengkap tentang library yang tersedia silahkan kunjungi Google AJAX Libraries API.

3. Menambahkan langsung kedalam template blogger
Pada umumnya kita menempatkan dan memanggil script itu seperti dibawah ini:
<script type="text/javascript" src="script_url"/>
Ganti kode diatas dengan cara dibawah ini:
<script type='text/javascript'>
//<![CDATA[
ISI_SCRIPT
//]]>
</script>
Dengan cara seperti ini kadang membuat beberapa pengguna blogger merasakan rumit dan bingung. Dan tidak bisa dipastikan dengan metode ini selalu berjalan dengan baik bahkan tidak jarang yang mengalami kegagalan.

4. Menggunakan blogger gadget jenis "HTML/JavaScript"
Teknik ini cukup mudah kita terapkan dalam blog kita, dengan beberapa modifikasi dibawah ini:
Langkah 1
Tambahkan section gadget baru kedalam template kita melalui "Tata Letak - Edit HTML", dan tambahkan kode dibawah ini sesudah kode :
<b:section class='scripts-container' id='scripts-container'/>
Langkah 2
Jika Langkah 1 telah ditambahkan maka section gadget baru bertambah, dan kita bisa menambahkan berbagai gadget baru dengan berbagai type. Lakukan penambahan kode CSS dibawah agar gadget apapun yang kita tambahkan tidak muncul pada tampilan blog kita, karena kita hanya bermaksud menambahkan kode JavaScript tanpa bermaksud menampilkannya pada blog. Tambahkan kode CSS dibawah ini sebelum kode :
.scripts-container .widget h2 {display: none; visibility: hidden;}
Langkah 3
Simpan Template
Langkah 4
Masuk ke tab "Tata Letak - Elemen Halaman" dan tambahkan "Gadget Baru" dengan tipe "HTML/JavaScript" kemudian masukan script yang akan kita tambahkan kedalam blog kita, dengan ketentuan dibawah ini:
<script type='text/javascript'>
ISI_SCRIPT
</script>
Perhatian!
Khusus metode 4, jika ternyata scripts tidak mampu di-load biasanya ada beberapa script yang dianggap tidak sesuai dengan karakter blogger. Script yang tidak mampu di-load dengan sempurna biasanya karena kode "<" dan ">" pada JavaScript. Kita harus menambahkan spasi sebelum dan sesudah kode tadi. Perhatikan contoh dibawah ini:
Sebelum :
for(var i=0;i<a_rc;i++) {
Sesudah :
for(var i=0;i < a_rc;i++) {
Demikian solusi JavaScript yang merupakan masalah biasa namun kadang menjengkelkan. Sebenarnya Google Pages adalah solusi sempurna untuk mendukung blogger, tapi karena merupakan versi beta yang akan segera berakhir para blogger tidak bisa menggunakannya dikemudian hari dan file yang sudah upload didalam Google Pages akan segera dibuang. Google memberitakan bahwa Google Pages akan di-merger dengan Google Site yang memberikan kemudahan para penggunanya untuk membuat website dalam beberapa detik yang jelas tidak mendukung file JavaScript. Ini hanya lamunan saja, kenapa Google tidak me-merge Google Pages dengan Blogger seperti halnya Google Adsense dan Google Friend Connect???? Entahlah, kita hanya bisa berharap saja, semua sudah menjadi keputusan Google dan kita sekedar pengguna (GRATISAN).

Konsep Sederhana Bisnis Penerbit Iklan

Perkembangan internet telah mampu mengubah pola bekerja yang tadinya hanya bisa dikerjakan secara offline dengan berangkat ke suatu kantor, sekarang perlahan hal ini mulai ditinggalkan. Kecepatan akses internet yang semakin cepat membuat proses transfer data semakin singkat, pekerjaan lebih cepat dan dengan hasil lebih baik pula.
Internet membuat pekerjaan semakin efektif dan efisien baik dilihat dari segi waktu maupun dari segi finansial. Hal inilah yang membuat pola berfikir manusia lebih sederhana dalam melakukan bisnis. Jika dalam beberapa dekade kebelakang para pekerja berangkat ke dan pulang dari kantor harus tepat waktu, memakai seragam, dan lain sebagainya peraturan terbentuk hal ini mulai ditinggalkan. Seorang jurnalis tidak harus mondar-mandir dari tempat kejadian ke kantornya hanya untuk menyerahkan hasil pekerjaannya, berapa waktu dan biaya yang diperlukan?
Blog sebagai hasil perkembangan teknologi informasi pun mengalami pergeseran fungsi yang tadinya hanya sekedar untuk menampung artikel pribadi kini mampu menjadi suatu kantor pengganti (virtual office) yang bisa menghasilkan ribuan bahkan jutaan uang, dan bagi sebagian orang sudah menjadi mata pencaharian. Silahkan baca kembali artikel "Memulai Bisnis Internet dengan Blog" untuk bisa memahami langkah awal untuk memulai blog. Pemahaman tentang berbagai jenis bisnis diinternet pun sangat membantu langkah yang harus diambil bagi para pemula dalam memulai bisnis di internet.
Konsep Sederhana Bisnis Penerbit Iklan
Konsep sederhana bisnis ads publisher (penerbitan iklan) seperti dijelaskan dibawah ini dan perhatikan ilustrasi gambar diatas.
Ada tiga bagian dari bisnis ads publisher :

1. Pengiklan (Advertiser)
Pengiklan merupakan salah satu bagian dari rangkaian sistem bisnis ads publisher, yang terdiri dari perusahaan-perusahaan yang membutuhkan jasa periklanan agar produk mereka dikenal konsumen.

2. Ads Publisher (penerbit iklan)
Penerbit iklan bertugas menyampaikan informasi kepada konsumen tentang suatu produk. Bagian ini terdiri dari tiga komponen, yaitu :
  • Agen Iklan (Ads Agency) : ini merupakan perusahaan yang mengumpulkan informasi tentang produk perusahaan-perusahaan yang membutuhkan jasa periklanan.
  • Internet : adalah media yang merupakan sarana dalam proses periklanan untuk bisa menghubungkan antara perusahaan dengan perantara agen iklan ke konsumen.
  • Blog : disinilah posisi para blogger yang bertugas sebagai trigger (pemicu) dalam memberikan gambaran suatu produk, tapi bukan sebagai penyedia informasi produk. Blog berada dalam lingkup internet yang tugasnya memberikan informasi-informasi tertentu sesuai karakter blogger-nya yang diharapkan informasi yang dibuat oleh para blogger dapat memancing informasi suatu produk ditampilkan. Agen iklan adalah pemilik informasi perusahaan-perusahan yang memasang iklan dan blogger adalah penyedia tempat untuk para agen untuk dapat memberikan informasi tentang suatu produk kepada konsumen. Blogger akan menerima bayaran sebagai pengganti sewa tempat di blognya dan sesuai kesepakatan antara pemilik blog dan agen iklan.

3. Konsumen
Inilah target pasar yang menjadi sasaran perusahaan pengiklan, diharapkan antara konsumen dan pihak perusahaan pengiklan akan terjadi transaksi sebagai akibat dari informasi yang dicitrakan oleh agen yang diperoleh pada suatu blog di internet.
Demikian gambaran sederhana mengenai bisnis di internet dengan blog, dengan harapan dapat membuka wawasan untuk lebih memahami teknik-teknik berbisnis di internet. Happy blogging... :-)

Sunday, July 19, 2009

Memulai Bisnis di Internet dengan Blog

Blog semula berfungsi sebagai diary (buku catatan harian) seseorang, tapi kini telah mengalami paradigma baru kearah yang lebih dari sekedar catatan. Kepopuleran blog menggeser dominasi website konvensional, hal ini karena blog merupakan platform website yang dinamis, yang selalu up-to-date sesuai dengan apa yang ada dalam pemikiran sang pemilik blog.
Memulai Bisnis di Internet dengan Blog
Beberapa tahun kebelakang blog tidak lebih dari hanya tempat untuk mencurahkan isi pikiran sang pemiliknya tapi sekarang berubah menjadi raksasa penguasa internet dengan berbagai informasi, imajinasi, kreatifitas, ide dan hal lain yang sangat menarik untuk dikaji. Pengaruh dan kepopuleran blog membuat platform ini mampu dijadikan sebagai wahana untuk memperoleh lembar demi lembar uang yang bergulir hingga trilliunan dollar di internet. Para pelaku bisnis mulai membidik blog sebagai sarana untuk mempromosikan suatu produk kepada calon konsumennya dan hal ini ternyata lebih efektif dan efisien dari pada menggunakan metode promosi konvensional yang sudah bisa dipastikan lebih banyak menguras resource (waktu dan finansial). Berbagai jenis bisnis internet pun muncul di dunia maya, para pelaku bisnis dan konsumen sudah tidak ragu lagi melakukan proses transaksi secara online. Hal inilah yang membuat internet berkembang cepat dan pesat, bisnis melalui internet sudah bukan lagi sekedar lamunan belaka tetapi sudah benar-benar menjelma menjadi suatu kenyataan yang tidak bisa dipungkiri. Orang dengan optimis memulai bisnis di internet dan perlahan tapi pasti semua yang tadinya hanya bisa dilakukan didunia nyata kini benar-benar menjadi kenyataan di dunia maya. Blog berubah menjadi kantor pengganti (virtual office) untuk menciptakan dan mengatur suatu bisnis yang mampu menghasilkan lembaran uang bahkan menjadikan seseorang kaya secara materi dengan hanya bermodal blog.

Perhatian!
Artikel ini hanya untuk konsumsi pemula, untuk para blogger senior mungkin artikel ini tidak bermanfaat dan silahkan berpindah ke artikel lain.

Bagi pemula ada banyak pertanyaan yang dikemukakan ketika akan mencoba berbisnis di internet. Pertanyaan-pertanyaan berikut mungkin bisa mewakili kebingungan untuk memulai bisnis di internet. Telah dijelaskan pada artikel sebelumnya (Berkenalan dengan Bisnis di Internet) bahwa seorang blogger pun bisa membuat blog-nya sebagai sarana penghasil uang dengan mengikuti berbagai teknik bisnis di internet. Simak pertanyaan berikut untuk mengubah hutan belantara dunia maya menjadi sebuah kota maya yang indah (Terima kasih untuk Identy dan Mahdalena yang telah mengajukan beberapa pertanyaan mengenai bisnis di internet).
Pertanyaan.: Apa yang dibutuhkan untuk memulai bisnis di internet?
Jawaban.....: Blog dan ilmu.
Pertanyaan.: Berapa biaya yang diperlukan untuk membuat blog?
Jawaban.....: Mulai dari gratis sampai tidak terhingga.
Pertanyaan.: Yang gratis dimana? Dan yang berbayar dimana?
Jawaban.....: Rekomendasi gratis blogspot.com dan wordpress.com, janganlah dulu melangkah ke yang berbayar sebelum kita menguasai teknik manajemen blog.
Pertanyaan.: Setelah punya blog, apa yang kita lakukan selanjutnya terhadap blog kita?
Jawaban.....: Menulis artikel.
Pertanyaan.: Artikel mengenai apa? Fiksi atau non fiksi?
Jawaban.....: Artikel mengenai suatu ilmu yang kita kuasai, rekomendasi non fiksi tetapi bisa juga fiksi.
Pertanyaan.: Dari mana kita menghasilkan uang?
Jawaban.....: Dari pemasang iklan atau dari artikel itu sendiri, coba baca lagi artikel sebelumnya.
Pertanyaan.: Kenapa mereka mau membayar kita?
Jawaban.....: Karena kita ikut mempromosikan produk mereka.
Pertanyaan.: Bagaimana perhitungan mereka (advertiser) untuk membayar kita?
Jawaban.....: Tergantung peraturan advertiser atau tergantung kesepakatan bersama antara pemilik blog dengan pemasang iklan (advertiser).
Pertanyaan.: Bagaimana teknik pembayarannya?
Jawaban.....: Secara online melalui virtual bank, virtual credit card atau yang sejenis dan atau secara offline melalui check atau transfer ke rekening bank pribadi secara langsung.
Pertanyaan.: Apakah mereka (advertiser) jujur?
Jawaban.....: Bisa ya bisa tidak, dalam hal ini banyaklah belajar dan ikutilah program periklanan yang sudah di rekomendasikan para blogger senior dan terbukti jujur dalam perhitungan dan pembayaran. Rekomendasi Google Adsense.
Pertanyaan.: Apalagi ya?
Jawaban.....: Tidak tahu... :-)
Pertanyaan.: Oh ya... Artikelnya menggunakan bahasa Indonesia?
Jawaban.....: Bisa ya bisa juga tidak, rekomendasi menggunakan bahasa Inggris.
Pertanyaan.: Kenapa harus menggunakan bahasa Inggris?
Jawaban.....: Karena bahasa Inggris adalah bahasa yang banyak digunakan dan menyeluruh sehingga siapapun dapat membaca dan mengerti tentang artikel yang kita buat. Dan program periklanan yang sudah terbukti menghasilkan uang banyak mengharuskan kita membuat artikel berbahasa Inggris.
Pertanyaan.: Kenapa dengan artikel berbahasa Indonesia?
Jawaban.....: Tidak tahu... :-)
Pertanyaan.: Lho katanya bisa ya bisa tidak, kalau ya bagaimana?
Jawaban.....: Sebab jika kita membuat artikel dengan bahasa Indonesia targetnya hanya mereka yang mengerti bahasa Indonesia dan ini kurang universal, sehingga para pemasang iklan tidak bersedia jika artikel yang dibuat menggunakan bahasa Indonesia, target pasarnya terlalu sempit.
Pertanyaan.: Kenapa artikel berbahasa Indonesia target pasarnya sempit?
Jawaban.....: Asumsinya begini, jumlah pengguna internet yang mengerti bahasa Indonesia ada 1000 orang, para pengunjung (pembaca) blog kita 1000 orang per hari dan dari 1000 pengunjung tersebut 10 diantaranya tertarik dengan iklan yang ada di blog kita hingga melakukan transaksi dengan pihak perusahaan yang memasang iklan di blog kita, harga kesepakatan iklan misalnya, jika terjadi 1 kali transaksi maka kita dibayar Rp. 1000,- sedangkan dalam hari tersebut terjadi 10 transaksi maka penghasilan kita hari itu adalah Rp. 1000,- x 10 = Rp. 10.000,-. Seandainya blog kita menggunakan bahasa Inggris tentunya jumlah pengunjung bisa lebih dari 1000 per hari dan kita bisa menghitung sendirikan???
Pertanyaan.: Ya... Kalau begitu kita juga harus mempromosikan blog kita agar pengunjungnya banyak?
Jawaban.....: Ya... Berarti sudah mulai mengerti?
Pertanyaan.: Ya... Bagaimana kita mempromosikan blog kita?
Jawaban.....: Ada banyak cara dan faktor-faktor yang harus dikuasai untuk mempromosikan blog kita. Masalah ini akan kita bahas lain waktu.
Pertanyaan.: Mau kemana?
Jawaban.....: Sudah dulu ya...? Aku ngantuk mau tidur dulu... Selamat menunggu...
Pertanyaan.: Ya...
Jawaban.....: Hah...
Pertanyaan.: (censored...)
Ma'af tanya jawab tidak bisa dilanjutkan...
Mudah-mudahan artikel diatas dapat membantu untuk memahami tentang bisnis internet melalui blog. Jika ada hal yang perlu ditanyakan silahkan tinggalkan pertanyaan dalam kotak komentar dibawah. Happy Blogging... :-)

Penggunaan Tag iframe pada Artikel

IFrame atau Internal Frame adalah salah satu fasilitas didalam coding pemrograman HTML yang berfungsi untuk memasukan halaman web lain ke dalam halaman web kita. Jika kita membuat suatu kode pemrograman tertentu tetapi ternyata kode pemrograman tersebut tidak didukung oleh blog kita atau jika pun di dukung, ternyata memberatkan loading page halaman blog maka lebih baik menggunakan fasilitas iframe.
Halaman yang ada didalam iframe hanya akan di-load dan ditampilkan jika kita membuka halaman yang bersangkutan. Tetapi jika kita memasukan kode pemrograman tersebut secara langsung didalam blog kita ini berarti kode-kode pemrograman itu bisa saja akan di-load walaupun halaman yang berkaitan tidak ditampilkan. Hal inilah yang memberatkan loading main page halaman blog kita. Pemasangan kode iframe sangatlah sederhana seperti dijelaskan dibawah ini...
Penggunaan iframe

Pemasangan iframe

Langkah 1
Buatlah suatu artikel yang akan kita sisipi halaman lain
Langkah 2
Masuklah ke mode "Edit HTML"
Langkah 3
Masukan kode dibawah ini kedalam artikel
<iframe align="center" src="http://blogku.com/halaman_lain.html" style="width: 100%; height: 280px;" frameborder="0">
</iframe>
Keterangan:
  • Untuk memasukan halaman lain maka gunakan tag <iframe ...> dan tutup dengan tag </iframe>
  • align berfungsi untuk menempatkan halaman lain dalam posisi tertentu, ada tiga posisi, yaitu; align="center"; posisi halaman lain ditempatkan di tengah-tengah frame, align="left"; posisi halaman lain ditempatkan di sebelah kiri frame, align="right"; posisi halaman lain ditempatkan di sebelah kanan frame.
  • src="http://halaman-tujuan.html" berfungsi untuk mengarahkan frame agar menampilkan halaman yang dituju. Halaman yang dituju ditempatkan didalam tanda kutip.
  • width dan height berfungsi untuk menentukan lebar dan tinggi frame, hal ini harus disesuaikan dengan lebar dan tinggi halaman artikel. Tetapi bukan mengatur lebar dan tinggi halaman lain yang dituju. Satuan yang digunakan bisa menggunakan persen (%) atau pixel (px). Jika menggunakan satuan persen maka lebar atau tinggi frame akan mengikuti lebar atau tinggi halaman artikel dan atau browser, jika menggunakan satuan pixel maka lebar atau tinggi frame tidak akan berubah mengikuti halaman artikel dan atau browser.
  • frameborder digunakan untuk memberikan ketebalan garis pinggir frame, jika diberi nilai "0" (nol) maka garis pinggir tidak ditampilkan.
  • Parameter lain yang bisa ditambahkan adalah scrolling yang berfungsi untuk menambahkan baris scroll vertikal dan horisontal, parameter ini hanya tambahan saja. Parameter scroll memiliki tiga settingan yaitu: no; scroll tidak ditampilkan, yes; scroll ditampilkan, auto;scroll akan ditampilkan jika halaman yang dituju lebih besar dari frame, jika tidak lebih besar maka scroll tidak ditampilkan.
Mudah-mudahan bermanfaat... Happy blogging... :-)

Friday, July 17, 2009

Tampilkan Gambar dengan Efek Membesar

Beberapa saat yang lalu Blogger TuneUp pernah membahas Blogger Hack dengan judul artikel "Tampilkan Gambar dengan Efek LightBox", kali ini masih berhubungan dengan efek gambar yaitu efek membesar atau sering dikenal dengan nama "Zoom Effect". Biasanya jika kita ingin melihat suatu gambar yang terdapat pada artikel maka kita harus meng-klik gambar tersebut sehingga gambar akan ditampilkan pada link baru dengan ukuran sebenarnya pada browser.
Dengan menggunakan efek membesar ini kita cukup mengarahkan mouse kearah gambar (tanpa klik) dan dengan sendirinya gambar akan tampil seketika pada halaman yang sama dengan ukuran sebenarnya. Efek ini tidak menggunakan kode JavaScript yang rumit, cukup menambahkan beberapa baris kode CSS (cascading style sheet), dan sedikit modifikasi kode pada gambar artikel. Contoh penggunaan Zoom Effect Image silahkan arahkan mouse pada gambar dibawah ini...
Untuk menerapkan efek ini pada blog silahkan ikuti langkah dibawah ini:Langkah 1
Login ke Blogger
Langkah 2
Masuk ke tab "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan kode dibawah ini tepat diatas kode pada Langkah 3:
.perbesar{position: relative; z-index: 0;}
.perbesar:hover{background-color: transparent; z-index: 50;}
.perbesar span{position: absolute; background-color: #80ffff; padding: 5px; left: -1000px; border: 2px solid rgb(192, 192, 192); -moz-border-radius:10px; visibility: hidden; color: black; text-decoration: none;}
.perbesar span img{border-width: 0; padding: 2px;}
.perbesar:hover span{visibility: visible; top: 0; left: 60px;}
Langkah 5
Simpanlah template...

Modifikasi kode pada gambar artikel:
Langkah 1
Masukan sebuah gambar pada artikel
Langkah 2
Masuk ke tab "Edit Html" pada halaman pembuatan artikel
Hal yang harus diperhatikan:
  • Kode class="perbesar" harus selalu ditambahkan pada gambar yang disertakan pada artikel, sehingga pada saat pengunjung mengarahkan mouse pada gambar, maka gambar akan ditampilkan dengan efek membesar (lihat contoh dibawah ini, kode class="perbesar" dengan warna biru).
  • Tambahkan kode pengulangan yang diapit <span>kode gambar</span> pada akhir kode gambar (lihat contoh dibawah warna biru).
  • Buang kode "-h" (tanpa tanda kutip) pada gambar yang disertakan pada artikel, karena jika kode "-h" ini tidak dibuang maka gambar tidak akan mampu diload/ditampilkan. Cukup satu kode "-h" pada kode yang dibuang diantara <span>kode gambar</span>.
Contoh modifikasi kode:
Lakukan modifikasi pada kode gambar seperti contoh dibawah ini dengan memperhatikan Langkah 2
<a onblur="try {parent.deselectBloggerImageGracefully();}catch(e) {}" href="http://2.bp.blogspot.com/AAAAB9g/s1600-h/image.jpg" class="perbesar"><img style="cursor:pointer;" src="http://2.bp.blogspot.com/AAAAB9g/s400/image.jpg" alt="" id="BLOGGER_PHOTO_ID_XXXXX" border="0"><span><img src="http://2.bp.blogspot.com/AAAAB9g/s1600/image.jpg"></span></a>
Langkah 3
Terbitkan artikel...!

Mudah bukan? Selamat mencoba, mudah-mudahan berhasil dan tinggalkan komentar jika mengalami kegagalan. Happy Blogging :)

Monday, July 13, 2009

Tampilkan Gambar dengan Efek LightBox

Efek LightBox sangat menarik dan indah untuk menampilkan gambar-gambar pada Blogger. Ketika pengunjung meng-klik gambar yang disertakan pada artikel, maka gambar akan muncul dengan ukuran sebenarnya pada halaman yang sama dengan warna latar hitam transparan. Jika pernah menggunakan software semacam Picasa, maka seperti itulah efek LightBox yang akan kita terapkan pada Blog*Spot kali ini. Efek LightBox dibuat dan dikembangkan oleh Lokesh Dhakar, versi terbaru adalah Lightbox JS v2.04.
Blogger TuneUp menerapkan efek LightBox ini pada gambar-gambar artikel Electronic Project, silahkan dilihat terlebih dahulu untuk meyakinkan bahwa anda menyukai efek LightBox ini. Pada awalnya Blogger TuneUp mengalami kegagalan pada saat mencoba menerapkannya pada Blog*Spot, gambar tidak mampu diload (ditampilkan). Ternyata setelah tanpa lelah mencoba kesalahan ditemukan, dan kesalahan itu bukan pada proses pemasangan berbagai kode LightBox tapi terdapat pada karakter kode gambar Blog*Spot itu sendiri.
Screenshot diambil dari Electronic Project

Pemasangan Efek LightBox pada Blog*Spot:

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan kode CSS dibawah ini diatas kode pada Langkah 3:
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://www.lokeshdhakar.com/projects/lightbox2/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://www.lokeshdhakar.com/projects/lightbox2/images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
Langkah 5
Cari kode dibawah ini:
</head>
Langkah 6
Masukan kode dibawah ini diatas kode pada Langkah 5:
<script src='http://www.lokeshdhakar.com/projects/lightbox2/js/prototype.js' type='text/javascript'/>
<script src='http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://www.lokeshdhakar.com/projects/lightbox2/js/lightbox.js' type='text/javascript'/>
Langkah 7
Simpanlah Template, sampai Langkah 7 ini proses pemasangan efek LightBox pada Blog*Spot sudah selesai, tetapi efek LightBox ini tidak akan berjalan jika tidak ditambahkan beberapa kode pada gambar yang disertakan pada artikel. Lanjutkan membaca langkah berikutnya...

Proses Modifikasi Kode Gambar:

Langkah 1
Pada saat memasukan gambar pada artikel, biasanya menggunakan metode seperti gambar dibawah ini:
Langkah 2
Setelah gambar berhasil di-upload lakukan penambahan kode pada mode "Edit Html" posting seperti gambar dibawah ini:
Hal yang harus diperhatikan:
  1. Kode rel="lightbox" harus selalu ditambahkan pada gambar yang disertakan pada artikel, sehingga pada saat pengunjung meng-klik gambar, maka gambar akan ditampilkan dengan efek LightBox (lihat contoh dibawah ini, kode rel="lightbox" dengan warna biru).
  2. Jika gambar pada artikel lebih dari satu, tambahkan kode rel="lightbox[roadtrip]" pada setiap kode gambar. Dengan penambahan kode ini maka gambar akan ditampilkan dengan efek LightBox dan efek Slide. Semua gambar akan dikumpulkan dalam satu frame dan akan ditampilkan seperti slideshow.
  3. Buang kode "-h" (tanpa tanda kutip) pada gambar yang disertakan pada artikel, karena jika kode "-h" ini tidak dibuang maka gambar tidak akan mampu diload/ditampilkan (lihat contoh dibawah ini, kode "-h" dengan warna merah).
Perhatikan contoh dibawah ini :
Kode LightBox jika hanya satu gambar!
<a onblur="try {parent.deselectBloggerImageGracefully();}catch(e) {}"href="http://2.bp.blogspot.com/AAAAB9g/s1600-h/image.jpg" rel="lightbox"><img style="cursor:pointer;" src="http://2.bp.blogspot.com/AAAAB9g/s400/image.jpg" alt="" id="BLOGGER_PHOTO_ID_XXXXX" border="0"></a>
Kode LightBox jika lebih dari satu gambar!
<a onblur="try {parent.deselectBloggerImageGracefully();}catch(e) {}"href="http://2.bp.blogspot.com/AAAAB9g/s1600-h/image.jpg" rel="lightbox[roadtrip]"><img style="cursor:pointer;" src="http://2.bp.blogspot.com/AAAAB9g/s400/image.jpg" alt="" id="BLOGGER_PHOTO_ID_XXXXX" border="0"></a>
Langkah 3
Artikel telah siap lepas landas dengan efek gambar LightBox plus Slide dan KLIK Terbitkan!

Keterangan:
  • Blogger TuneUp tidak menjamin semua source yang berupa Gambar, dan JavaScript akan selalu tersedia, dari itu silahkan anda upload sendiri pada hosting pribadi anda.
  • Efek LightBox ini menggunakan source disini (klik kanan save as)
  • Ubahlah arah URL source diatas ke arah URL source hosting anda (perhatikan "Pemasangan Efek LightBox pada Blog*Spot" berwarna biru yang ada pada langkah 4 dan langkah 6).
Mudah-mudahan berhasil. Tinggalkan komentar jika mengalami kegagalan dan Happy Blogging :)

Cegah Translator Artikel Blog Ilegal

Hal ini berawal dari kekesalan dan kekecewaan terhadap blogger lain. Suatu hari Blogger TuneUp mencoba kembali Chat di YM! karena permintaan salah satu pembaca setia Blogger TuneUp untuk membantu melakukan beberapa tips trik blogger hack dari artikel Blogger TuneUp. Ketika terjadi tanya jawab muncul seseorang bergabung dan minta untuk ditambahkan. Tanpa pikir panjang saya menambahkan dia menjadi teman dalam daftar teman (Friend List).
Seorang blogger tersebut ternyata berasal dari negara tetangga yang baru-baru ini gencar diberitakan media televisi sedang membasmi para militan dinegara tersebut. Kemudian percakapan berlanjut dengan tukar informasi yang sebagian besar tidak nyambung karena memang blogger tersebut kurang fasih berbahasa Inggris (sama dengan penulis), tukar alamat blog dan saling menjadi follower.
Cegah Translator Artikel Blog Ilegal
Seminggu kemudian Blogger TuneUp mengunjungi sang blogger tersebut, sungguh diluar dugaan, kaget plus kecewa ternyata sudah hampir seperempat artikel Blogger TuneUp sudah diterjemahkan kedalam Bahasa Inggris. Kemudian saya melakukan konfirmasi mengenai maksud dan tujuannya melakukan penterjemahan artikel tanpa memberitahu atau ijin terlebih dahulu, jawabannya sederhana "Dia ingin bergabung dengan program Google Adsense". Setelah kejadian tersebut Blogger TuneUp segera melakukan tindakan preventif untuk mencegah proses terjemahan lebih lanjut dan bisa mematikan ide sang blogger. Berikut ini tindakan Blogger TuneUp untuk mencegah proses terjemahan secara ilegal.

1. Dengan menggunakan Meta Tag
Metode ini cukup efektif untuk mencegah translate dengan Google Translator, teknik ini akan mencegah penterjemahan semua konten yang ada pada blog kita. Tambahkan kode Meta Tag dibawah kode <head>:
<meta name="google" value ="notranslate">

2. Dengan menggunakan Class
Metode ini akan mencegah proses translator pada beberapa bagian blog saja, bagian yang akan diblok untuk proses translator harus ditambahkan kode seperti dibawah ini:
Kirim email ke <span class="notranslate">penjualan at gmail dot com</span>
Kata penjualan at gmail dot com tidak akan diterjemahkan oleh Google Translator.

Informasi ini berasal dari Google sendiri, silahkan baca disini.

Hal ini Blogger TuneUp lakukan karena merasa perlu untuk melindungi artikel berbahasa Indonesia, dan kita sebagai para Blogger Indonesia harus bangga dengan bahasa kita. Mari lindungi artikel kita! Untuk perlindungan artikel blog lebih lanjut silahkan baca disini (cegah copy paste artikel). Happy Blogging :)

Membuat Widget Blogger Login

Pada artikel sebelumnya Blogger TuneUp pernah membuat Widget Blogger Login layaknya WordPress yang terdiri dari Dashboard, Pengaturan, Tata Letak, Artikel Baru, Edit Artikel. Fasilitas ini sama dengan pembuatan Float Navigation Bar (Baris Navigasi Terapung), tetapi karena setiap blogger memiliki karakter masing-masing maka sekarang Blogger TuneUp akan menyuguhkan bentuk lain dari Blogger Login berupa widget yang biasanya kita lihat pada saat login ke halaman muka Blog*Spot.
Widget ini mudah untuk diterapkan pada Blogger dengan mengikuti langkah dibawah ini. Seperti biasa sebelum artikel ini di buat, Blogger TuneUp telah meng-integrasi-kannya pada blog Electronic Project.
Screenshot diambil dari Electronic Project
Dibawah ini langkah pemasangan Widget Blogger Login
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Tata Letak - Elemen Halaman"
Langkah 3
Tambahkan Gadget Baru dengan tipe HTML/JavaScript dengan Judul "Blogger Login"
Langkah 4
Masukan kode dibawah ini:
<form id="start-login" action="https://www.google.com/accounts/ServiceLoginBoxAuth" name="login" onsubmit="onlogin()" method="post">
<input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/>
<input value="blogger" name="service" type="hidden"/>
<input value="8" name="nui" type="hidden"/>
<input value="8" name="naui" type="hidden"/>
<input value="2" name="fpui" type="hidden"/>
<input value="3" name="uilel" type="hidden"/>
<input value="true" name="skipvpage" type="hidden"/>
<input value="false" name="rm" type="hidden"/>
<input value="true" name="alwf" type="hidden"/>
<input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/>
<input value="0" name="alinsu" type="hidden"/>
<input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/>
<div>
<label for="Email"> Username: <br/>
<input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/>
</label>
</div>
<div>
<label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br/>
</label>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/>
</div><br/>
<input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"/>
</form>
<span><a style="font-size: 10px; text-decoration:none; color: #cccccc;" href="http://modification-blog.blogspot.com/" target="_blank">Gadget by Blogger Tune-Up</a></span>
Langkah 5
Simpan Gadget tersebut dan Preview Blog...

Bagi yang tidak mau ribet atau kurang paham dengan langkah diatas, silahkan klik tombol "Tambahkan Blogger Login Widget" dibawah ini:

Mudah-mudahan berhasil... Happy Blogging :)

Thursday, July 9, 2009

Memahami Tag Anchor

Anchor kalau diterjemahkan kedalam bahasa Indonesia (Prof. Drs. S. Wojowasito, Kamus Lengkap Inggris - Indonesia 1980:6) berarti jangkar; sauh. Entah apa hubungannya antara Tag Anchor pada bahasa HTML dengan Anchor dalam arti sebenarnya? Tetapi kalau ditelaah mengandung tujuan yang sama. Anchor dalam arti sebenarnya adalah jangkar, suatu alat yang digunakan untuk mengkaitkan kapal dipelabuhan atau sebagai alat pengait.
Begitupun anchor dalam bahasa HTML, digunakan untuk mengaitkan/link suatu dokumen/halaman terhadap dokumen/halaman lainnya[1]. Jika suatu kata atau kalimat dalam sebuah halaman web memiliki keterkaitan/link dengan dokumen/halaman lain, maka browser akan menampilkan kata atau kalimat tersebut dengan format berbeda. Secara standar kata atau kalimat anchor (terkait dengan halaman lain) akan berwarna biru dengan garis bawah, hal ini sering pula disebut hyperteks link, hyperlink atau link saja.
Memahami Tag Anchor HTML

Tag Anchor

Sesuai dengan standar bahasa HTML, anchor menggunakan tag <a> untuk membuat suatu link terhadap dokumen lain dalam web. Tag <a> digunakan untuk mendefinisikan suatu kata atau kalimat yang akan dikaitkan dengan halaman lain dalam web. Perhatikan contoh dibawah ini :
Hari minggu aku bertemu <a href="http://dedehendriono.blogspot.com">Hendriono</a>.
Kata Hendriono terletak diantara tag anchor, ini berarti kata Hendriono adalah kata yang dikaitkan dengan halaman lain atau dibuat sebagai anchor. Sedangkan href adalah atribut anchor yang digunakan sebagai referensi halaman yang dituju, halaman yang dituju terletak diantara tanda kutip "http://dedehendriono.blogspot.com".

Atribut href

Atribut href selalu digunakan bersama anchor, karena tag anchor tidak akan lengkap tanpa href. href atau hyperlink refference (ma'af ini tanpa sumber) mempunyai tiga jenis, yaitu :

1. Link Relatif
Jenis link relatif digunakan untuk membuat suatu link halaman yang akan dikaitkan dengan halaman lain dan halaman terkait masih dalam satu komputer. Jika dua halaman terdapat pada direktori yang sama maka tidak perlu menggunakan alamat internet yang lengkap. Cukup dengan menuliskan nama file html tersebut, seperti dibawah ini :
<a href="halaman_2.html">Halaman 2</a>

2. Link Absolute
Jenis Link Absolut digunakan untuk membuat link ke halaman lain yang berada di website lain di Internet. Maka alamat halaman tersebut harus ditulis lengkap, seperti dibawah ini :
<a href="http://dedehendriono.blogspot.com/wulan_guritno_xxx.html">Wulan Guritno tidak berpakaian</a> ketika sedang mandi.

3. Link dalam dokumen yang sama
Link ini digunakan jika halaman tersebut panjang dan ada kalimat yang akan dijelaskan kemudian pada paragraf berikutnya, maka penggunaan link internal page sangat membantu para pembaca. Pembaca tidak perlu mencari artikel mana yang terhubung dengan artikel yang sedang dibaca pada halaman yang sama. Pembaca cukup mengklik kata yang sedang dibaca untuk mengetahui maksud dan penjelasannya pada paragraf berikutnya.
Contoh penggunaan link dalam dokumen yang sama :

Paragraf 1
<a href="#johntitor">John Titor</a> menyebutkan bahwa paradoks itu SALAH. Sebab jika si A balik ke masa lalu ataupun maju ke masa depan, dia akan mendarat di DUNIA LAIN serupa tapi tak sama.
...
...
Paragraf 10
<a name="johntitor">John Titor</a> mengaku sebagai tentara Amrik dari tahun 2036. Dia menge-post foto mesin waktunya dan buku manualnya. John diperintahkan balik ke tahun 1970an untuk mengambil komputer kuno milik kakeknya (IBM 5100).

Perhatikan contoh diatas :
Yang diberikan tag anchor href adalah John Titor paragraf 1 dan ketika pembaca meng-klik John Titor pada paragraf 1, maka artikel akan bergeser ke paragraf 10 yang menjelaskan tentang siapa John Titor.

Target href

Secara default (standar) setiap kita membuat tag anchor href maka ketika pembaca meng-klik link tersebut halaman yang di tuju akan dibuka dan menutup halaman yang sedang dibaca. Kita bisa mengarahkan pembaca ketika mereka meng-klik link tersebut, halaman baru akan terbuka tanpa menutup halaman yang sedang dibaca. Hal seperti ini sering disebut Target Anchor Link, yang terdiri dari;
  • target="_top"; dengan penambahan target="_top" pembaca akan diarahkan pada artikel yang dituju dengan membuka halaman baru dan posisinya diatas halaman yang sedang dibaca tanpa menutup halaman yang sedang dibaca.
  • target="_blank"; dengan penambahan target="_blank" pembaca akan diarahkan pada artikel yang dituju dengan membuka halaman baru dan posisinya dibelakang halaman yang sedang dibaca tanpa menutup halaman yang sedang dibaca.
Mudah-mudahan artikel ini bermanfaat... Happy Blogging :)

Catatan Kaki:
[1] Wikipedia : HTML a tag

Membuat Tampilan Gambar Slide (jQuery s3Slider)

Image Slide Show akan membuat tampilan blog menjadi indah dan lebih terlihat profesional, karena gambar akan tampil bergantian dengan efek fade yang sangat halus dan keterangan gambar akan tampil bergantian pula seiring perubahan gambar dengan efek slide. Tampilan seperti ini sangat cocok sebagai suatu gambaran informasi sederhana mengenai blog lain, atau bahkan bisa digunakan untuk ruang iklan bagi blogger yang memiliki ruangan (space) iklan terbatas.
Image slide show atau tampilan gambar slide sangatlah mudah kita terapkan pada blogger, hanya perlu beberapa langkah dalam pemasangan script code image slide show pada Blog*Spot. Sebelum artikel ini dibuat, Blogger TuneUp telah menerapkannya pada blog Hendriono Online, jadi silahkan diperhatikan dulu apakah memang perlu atau tidak kita memasangnya di blog kita, karena script code ini cukup lumayan menambah beban loading blog.
Membuat Tampilan Gambar Slide

Memasang jQuery Image Slide Show

CARA 1
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan kode dibawah ini tepat diatas langkah 3:
#slider {width: 380px; height: 250px; position: relative; overflow: hidden;}
#sliderContent {width: 380px; position: absolute; top: 0; margin-left: 0;}
.sliderImage {float: left; position: relative; display: none;}
.sliderImage span { position: absolute; font: 12px/15px Arial, Helvetica, sans-serif; text-align:justify; color: #fff; padding: 10px 10px; width: 360px; background-color: #000; filter: alpha(opacity=60); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; display: none;}
.clear {clear: both;}
.sliderImage span strong {font-size: 12px;}
.slide_atas {top: 0; left: 0;}
.slide_bawah {bottom: 0; left: 0;}
#sliderContent ul {list-style-type: none; float: left; margin: 0px; padding: 0px;}
#sliderContent li {list-style: none; margin: 0px;padding: 0px;}
Langkah 5
Cari kode dibawah ini:
</head>
Langkah 6
Masukan kode dibawah ini tepat diatas langkah 5 (baca keterangan):
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://s3slider-original.googlecode.com/svn/trunk/s3SliderPacked.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#slider')
.s3Slider({timeOut: 4000});
});
</script>
Langkah 7
Simpan Template
Langkah 8
Masuk ke bagian "Tata Letak - Elemen Halaman"
Langkah 9
Tambahkan Gadget Baru dengan tipe "HTML/JavaScript"
Langkah 10
Masukan kode dibawah ini pada gadget baru tersebut (Langkah 9):
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href="URL-TUJUAN"><img src="URL-GAMBAR" alt="JUDUL-GAMBAR" /></a>
<span class="slide_bawah"><strong>JUDUL-KETERANGAN</strong><br/>ISI-KETERANGAN</span>
</li>
<li class="sliderImage">
<img src="URL-GAMBAR" alt="JUDUL-GAMBAR" />
<span class="slide_bawah"><strong>JUDUL-KETERANGAN</strong><br/>ISI-KETERANGAN</span>
</li>
<!--Disini untuk menambahkan-->
<div class="clear sliderImage"></div>
</ul>
</div>
Langkah 11
Simpan Gadget dan Preview Blog (Baca keterangan)

CARA 2
Cara ini paling sederhana dan cepat, ikuti langkahnya:
Lihat cara 1 dan mulai dari langkah 8...
Langkah 1
Masuk ke bagian "Tata Letak - Elemen Halaman"
Langkah 2
Tambahkan Gadget Baru dengan tipe "HTML/JavaScript"
Langkah 3
Masukan kode dari cara 1 langkah 4, langkah 6 langkah 10 menjadi satu sehingga akan menjadi seperti dibawah ini:
<style type="text/css" media="screen">
#slider {width: 380px; height: 250px; position: relative; overflow: hidden;}
#sliderContent {width: 380px; position: absolute; top: 0; margin-left: 0;}
.sliderImage {float: left; position: relative; display: none;}
.sliderImage span { position: absolute; font: 12px/15px Arial, Helvetica, sans-serif; text-align:justify; color: #fff; padding: 10px 10px; width: 360px; background-color: #000; filter: alpha(opacity=60); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; display: none;}
.clear {clear: both;}
.sliderImage span strong {font-size: 12px;}
.slide_atas {top: 0; left: 0;}
.slide_bawah {bottom: 0; left: 0;}
#sliderContent ul {list-style-type: none; float: left; margin: 0px; padding: 0px;}
#sliderContent li {list-style: none; margin: 0px;padding: 0px;}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://s3slider-original.googlecode.com/svn/trunk/s3SliderPacked.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#slider')
.s3Slider({timeOut: 4000});
});
</script>
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href="URL-TUJUAN"><img src="URL-GAMBAR" alt="JUDUL-GAMBAR" /></a>
<span class="slide_bawah"><strong>JUDUL-KETERANGAN</strong><br />ISI-KETERANGAN</span>
</li>
<li class="sliderImage">
<img src="URL-GAMBAR" alt="JUDUL-GAMBAR" />
<span class="slide_bawah"><strong>JUDUL-KETERANGAN</strong><br />ISI-KETERANGAN</span>
</li>
<!--Disini untuk menambahkan-->
<div class="clear sliderImage"></div>
</ul>
</div>
Langkah 4
Simpan Gadget dan preview blog...


Keterangan:
  • Bagi blogger yang sudah memasangan efek Page Peel, maka tidak perlu memasang lagi jquery.js pada tips kali ini.
  • Simpan file JavaScript ini; jquery.js, s3Slider.js (klik kanan save as) pada hosting anda dan ubah URL-nya.
  • Lihat Cara 1 Langkah 4; width: 380px; height: 250px; (baris 1), width: 380px; (baris 2), dan width: 360px; (pada baris berikutnya), angka-angka tersebut diubah untuk menyesuaikan dengan lebar dan tinggi gambar, maka harus diperhatikan juga ukuran gambar yang akan kita gunakan.
  • Lihat Cara 1 Langkah 6; ubahlah LINK-URL sesuai dengan alamat file tersebut yang telah anda tempatkan.
  • Lihat Cara 1 Langkah 6; timeOut: 4000 adalah waktu yang diperlukan untuk pergantian antar gambar, ubahlah nilai 4000 sesuai keinginan anda, satuan waktunya milidetik.
  • Lihat Cara 1 Langkah 10; URL-GAMBAR; ganti dengan url gambar anda; JUDUL-GAMBAR; ganti dengan judul gambar; JUDUL-KETERANGAN; ganti dengan judul keterangan tentang gambar; ISI-KETERANGAN; ganti dengan keterangan atau informasi sesuatu yang ingin anda sampaikan kepada pengunjung; URL-TUJUAN; diisi dengan link tujuan jika gambar di klik.
  • Jika kita menggunakan Cara 2 maka perubahan yang harus dilakukan sama dengan perubahan yang dilakukan pada Cara 1.
  • Jika kita menggunakan Cara 2 maka perhatikan penambahan kode yang berwarna biru bergaris bawah.
  • Kode diatas hanya terdiri dari dua gambar, jika kita ingin menambahkan kode dari <li class="sliderImage"> sampai dengan kode </li> dibawah kode </li> dan sebelum kode <div class="clear sliderImage"></div> (Perhatikan kode <!--Disini untuk menambahkan--> disinilah kita menambahkan gambar baru).
  • Slider ini dibuat oleh serie3.info
Mudah-mudahan berhasil, tinggalkan pesan jika terjadi gagal pemasangan... Happy blogging :)