Blog Tip dan Trik

Thursday, August 6, 2009

Membuat Artikel Terkait (Versi 2.0)

Posted by dav on 2:00 AM with

Blogger, a.k.a. Blogger.com, Blogspot, atau Blog*Spot, telah bertahun-tahun beroperasi, tetapi masih banyak pemilik blog merasa kesulitan dalam teknik pemasangan Widget Artikel Terkait ini. Berbagai teknik telah diperkenalkan oleh para master blog, begitupun Blogger TuneUp pada artikel sebelumnya pernah membahas blogger hack artikel terkait. Berbagai komentar, email bahkan SMS melaporkan kegagalan pemasangan teknik artikel terkait ini. Entah kesalahan dalam hal apa, tapi teknik sebelumnya memang rumit, wajarlah beberapa blogger mengalami kegagalan pemasangan teknik pemasangan Artikel Terkait ini.

Dalam artikel tips trik blog kali ini Blogger TuneUp akan mencoba memperkenalkan pemasangan Artikel Terkait yang termasuk sangat sederhana baik dari jumlah script maupun dari teknik pemasangannya. Script yang digunakan sangatlah sedikit, sehingga bagi para pemula mudah-mudahan hal ini tidak menyulitkan. Fasilitas Artikel Terkait kali ini di buat oleh Yu-Jie Lin dengan bantuan Blogger Data API sebagai teknik pemanggilan database-nya. Hal inilah yang membuat fasilitas Artikel Terkait menjadi lebih sederhana, ringan, mudah, dan cepat dalam proses loading datanya.

Tetapi sebelum memasang tips trik blog artikel terkait, perhatikan hal-hal berikut ini :

Fasilitas ini hanya untuk blog umum dan terbuka.
Pemilik fasilitas ini akan memblok blog kita jika melanggar hal-hal berikut :
Melanggar hak cipta (Jika blog kita mengandung link yang mengarahkan ke download data illegal, langsung atau tidak langsung, diupload sendiri atau tidak, JANGAN menggunakan fasilitas ini. Yang fatal, blog kita akan di BLOK),
Gambar-gambar kategori dewasa dan mengandung unsur pornografi,
Artikel berisi provokasi atau bentuk kebencian terhadap suatu kelompok yang dilindungi,
Mempromosikan hal-hal berbahaya dan aktifitas illegal,
Blog mengandung fasilitas fishing atau account hijacking,
Menyimpan identitas pengunjung atau
Penyalahgunaan fasilitas ini.

Ingin tahu lebih jauh silahkan kunjungi website Blogger Related Posts Service.

Langsung ke TKP (Teknik Kejadian Pemasangan)
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Expand Template Widget
Langkah 4
Cari kode dibawah ini:

<data:post.body/>

Langkah 5
Masukan (copy paste) kode dibawah ini dibawah kode langkah 4:

<div id='related_posts'/>

Langkah 6
Scroll template sampai akhir dan cari kode dibawah ini:

</body>
</html>

Langkah 7
Masukan (copy paste) kode dibawah ini tepat diatas kode pada langkah 6:

<script src='http://www.google.com/jsapi'/>
<script type='text/javascript'>
window.brps_options = {
"title": "<h3>Artikel lain yang terkait:</h3>",
"max_results": 5
}
</script>
<script src='http://brps.appspot.com/brps.js' type='text/javascript'/>

Langkah 8
Simpan template dan preview blog anda

Perhatikan langkah 7!

"title": "<h3>Artikel lain yang terkait:</h3>" : kode ini digunakan untuk memberikan nama widget.
"max_results": 5 : nilai 5 (lima) digunakan untuk menentukan jumlah artikel yang akan ditampilkan

Tips trik artikel terkait diatas sebenarnya sudah bisa berjalan dengan baik tetapi dengan tampilan yang sangat sederhana, jika kita mau memodifikasi dari segi tampilan, maka kita perlu menambahkan kode CSS untuk mempengaruhi/mempercantik tampilan artikel terkait pada blog kita.

Perhatikan penambahan CSS (Cascading Style Sheet) dibawah ini:
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

#related_posts{float:left;width:580px;margin-top:20px;margin-left:5px;font:11px verdana;margin-bottom:10px}
#related_posts h2{color:#940f04;font-size:20px;font-weight:400;margin:5px 7px 0;padding:0 0 5px}
#related_posts a{color:#054474;font-size:11px;text-decoration:none}
#related_posts a:hover{color:#054474;text-decoration:none}
#related_posts ul{list-style-type: none; border:medium none;margin:10px;padding:0}
#related_posts ul li{display:block; background:url(http://dedehendriono.googlepages.com/weed-bullet.gif) no-repeat 0 0;line-height:2em; border-bottom:1px dotted #ccc; margin:0 0 5px; padding:0 0 1px 15px}

Langkah 5
Simpan template dan preview blog anda

Artikel Terkait (Blogger Related Posts Service) ini sebenarnya dapat diterapkan pada widget tanpa harus mengikuti teknik diatas, cukup klik tombol dibawah ini:

Semoga berhasil... Jika mengalami kegagalan tinggalkan komentar. Happy Blogging :)
Update! Artikel Terkait Versi 2.0

Monday, July 27, 2009

Blogger Hack Navigasi Halaman

Posted by dav on 10:18 PM with

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... :)

Bloghack Tips Trik Widget

Sunday, July 26, 2009

Konfigurasi SyntaxHighlighter pada Blogger

Posted by dav on 12:42 AM with

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 :

Nama	Nilai	Keterangan
bloggerMode	true	Integrasi dengan Blogger. Jika kita pengguna blogger.com, maka ini harus diaktifkan dengan nilai "true". Nilai "false" tidak diaktifkan.
clipboardSwf	null	Fungsi 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.
stripBrs	false	Jika secara otomatis blogger.com menambahkan tag <br/> di setiap akhir baris kode, option ini harus diaktifkan untuk menghapusnya secara otomatis.
toolbarItemWidth	16	Lebar dari icon didalam toolbar. Jika kita ingin mengubah ukuran toolbar maka harus merubah lebar icon melalui nilai dari konfigurasi toolbarItemWidth.
toolbarItemHeight	16	Tinggi 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 :

Nama	Nilai	Keterangan
auto-links	true	Untuk 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.
collapse	false	Untuk memaksa penanda (highlight) element pada halaman untuk disembunyikan dalam lipatan (collapse) sebagai default. Klik disini untuk demo.
first-line	1	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.
gutter	true	Untuk mengatur gutter (penanda pinggir) dengan penomoran baris on dan off. Klik disini untuk demo.
highlight	null	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-script	false	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.
light	false	Untuk menon-aktifkan toolbar dan gutter dengan properti tunggal. Klik disini untuk demo.
ruler	false	Untuk menampilkan kolom penggaris pada bagian atas. Klik disini untuk demo.
smart-tabs	true	Untuk mengatur fasilitas tabulasi pintar. Klik disini untuk demo.
tab-size	4	Untuk mengatur ukuran tabulasi. Klik disini untuk demo.
toolbar	true	Tombol toolbar on/off. Klik disini untuk demo.
wrap-lines	true	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... ;-)

Bloghack Tips Trik

Thursday, July 23, 2009

Integrasi SyntaxHighlighter pada Blogger

Posted by dav on 6:32 AM with

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

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... :-)

Bloghack Tips Trik

Wednesday, July 22, 2009

Peperangan Framework JavaScript - Prototype v.s. jQuery

Posted by dav on 2:53 AM with

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... :-)

Bloghack Tips Trik

Tuesday, July 21, 2009

Solusi JavaScript untuk Pengguna Blogger

Posted by dav on 2:50 AM with

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).

Bloghack Tips Trik

Konsep Sederhana Bisnis Penerbit Iklan

Posted by dav on 2:18 AM with

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 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... :-)

Bisnis Blogging

Blog Tip dan Trik

Thursday, August 6, 2009

Membuat Artikel Terkait (Versi 2.0)

Monday, July 27, 2009

Blogger Hack Navigasi Halaman

Sunday, July 26, 2009

Konfigurasi SyntaxHighlighter pada Blogger

Thursday, July 23, 2009

Integrasi SyntaxHighlighter pada Blogger

Integrasi SyntaxHighlighter pada Blogger:

Memasukan kode SyntaxHighlighter pada artikel:

Wednesday, July 22, 2009

Peperangan Framework JavaScript - Prototype v.s. jQuery

Tuesday, July 21, 2009

Solusi JavaScript untuk Pengguna Blogger

Konsep Sederhana Bisnis Penerbit Iklan

Categories

Popular Posts

Blog Archive