Archive for August 2008

Home » Archive for August 2008

Menampilkan kode HTML/Javascript yang unik di postingan (2)

Sesuai dengan judul titlenya (Menampilkan kode HTML/Javascript yang unik di postingan (2)), kali ini saya akan membuat blogger trick bagaimana menampilkan kode HTML/Javascript berbeda dengan versi sebelumnya, jika belum pernah baca versi sebelumnya silahkan klik di sini. Kalau mau lihat perbedaannya perhatikan contoh di bawah ini:

Versi 1 :

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Versi 2 :



/* Label Cloud Styles

----------------------------------------------- */

#labelCloud {text-align:center;font-family:arial,sans-serif;}

#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}

#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}

#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}

#labelCloud a{text-decoration:none}

#labelCloud a:hover{text-decoration:underline}

#labelCloud li a{}

#labelCloud .label-cloud {}

#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}

#labelCloud .label-cloud li:before{content:"" !important}

Perhatikan perbedaanya ketika mouse di arahkan ke text area versi 2 warna backgroundnya berubah!!!

Blogger trick ini sangat simple sekali untuk kita aplikasikan di blog kita,mau tahu cara buatnya?

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Setelah itu cari kode ini ]]></b:skin> kemudian masukkan kode di bawah ini sebelum kode tersebut :



.post code {

font-family: 1.2em 'Courier New', Courier, Monospace;

display:block;

overflow: auto;

text-align: left;

padding: 10px;

color: #444E1F;

background-color: #F7BE81;

border-top: 2px solid #D0EC98;

border-right: 1px solid #D0EC98;

border-bottom: 1px solid #D0EC98;

border-left: 1px solid #D0EC98;

}

.post code:hover {

background-color:#F6E3CE;

}

Kemudian simpan hasil pekerjaan sobat.
3. Untuk mengaplikasikannya ke dalam postingan, sobat tinggal menaruh kode HTML/Javascript di antara <code> Kode HTML/Javascript </code> di mode edit HTML.
Contohnya :
<code> Kode HTML/Javascript </code>

Kalau berhasil berarti sobat orang yang beruntung, kalau gagal kasihan deeh loooh....!!!! Ok, sobat blogger nanti kita sambung lagi dengan blogger trick lainnya, happy blogging and have anice weekend :D

Welcome Ramadhan

"Set the intention.....
Upgrade the faith....
Download the patience...
Delete the sins.....
Approve the forgiveness...
Hunt the mercy and The Greatest Night..."

Bulan yang suci telah datang,bulan yang di tunggu-tunggu oleh umat muslim, sebagai umat Muslim kita menyambut dengan penuh sukacita, bulan yang penuh dengan pahala dari Allah SWT. Semoga di bulan Ramadhan amal ibadah kita dapat di terima Allah SWT. Sebagai manusia kadang ada khilafnya baik yang sengaja maupun tidak sengaja, nah sebagai blogger mungkin ada yang tersinggung baik lewat Shout Box, blogwalking, serta komentar dari saya mohon di bukakan pintu maaf yang sebesar-besarnya. Selamat Menunaikan ibadah puasa.

Integrasi Ajax Label dengan Label Cloud

Ketika saya berkunjung ke blog sobat Sawa , saya menemukan kalimat yang mengena buat saya “Blog ini kan sebenarnya ini hanyalah catatan elektronik saya, hanya bermaksud untuk mengingatkan saya.“ , kutipan di tersebut membuat saya semangat lagi untuk mengeblog lagi di saat saya sedang bimbang, jadi saya menulis ulang blogger hack ini untuk sekadar mengingatkan saya. Ok deh to the point ajah, sebenarnya blogger hack ini sudah pernah di bahas di blog kang Jaloee, mengenai Ajax label.

Blogger hack ini menurut saya sangat bermanfaat sekali. Karena memanggil summary dari postingan kita tanpa merefresh halaman blog sobat, kalau mau lihat yang punya blogger hack silahkan klik disini, nah di sini saya akan coba mensadur kembali blogger hack tersebut dengan mengintegrasikannya ke dalam label cloud punya si Phydeaux3 dan di integrasikan oleh Deepak dengan Ajax labelnya. Hasil dari blogger hack tersebut dapat di test di bog ini, silahkan sobat pilih label yang di kehendaki dan lihat hasilnya. Kalau tertarik silahkan sobat melanjutkan membacanya.

Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

Pertama kita install terlebih dahulu Label cloudnya, caranya adalah cari kode di ]]></b:skin> kemudian masukkan kode dibawah ini sebelum kode tersebut :

Setelah selesai masukan kode di bawah ini sesudah kode ]]></b:skin> :

Simpan hasil pekerjaan sobat terlebih dahulu

Nah di langkah ini saya sudah memasukkan kode dari ajak label supaya memudahkan instalasi ajax labelnya, yang perlu sobat lakukan adalah cari kode ini, tanpa mencentangkan expand widget

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Setelah ketemu ganti kode tersebut dengan kode di bawah ini :

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>

<b:includable id='main'>

  <b:if cond='data:title'>

    <h2><data:title/></h2>

  </b:if>



  <div class='widget-content'>

  <div id='labelCloud'/>

<script type='text/javascript'>



// Don&#39;t change anything past this point -----------------

// Cloud function s() ripped from del.icio.us

function s(a,b,i,x){

      if(a&gt;b){

          var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)

             }

      else{

          var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)

          }

      return v

   }





var c=[];

var labelCount = new Array();  

var ts = new Object;

<b:loop values='data:labels' var='label'>

var theName = &quot;<data:label.name/>&quot;;

ts[theName] = <data:label.count/>;

</b:loop>



for (t in ts){

     if (!labelCount[ts[t]]){

           labelCount[ts[t]] = new Array(ts[t])

           }

        }

var ta=cloudMin-1;

tz = labelCount.length - cloudMin;

lc2 = document.getElementById(&#39;labelCloud&#39;);

ul = document.createElement(&#39;ul&#39;);

ul.className = &#39;label-cloud&#39;;

for(var t in ts){

    if(ts[t] &lt; cloudMin){

       continue;

       }

    for (var i=0;3 &gt; i;i++) {

             c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)

              }      

         var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);

         li = document.createElement(&#39;li&#39;);

         li.style.fontSize = fs+&#39;px&#39;;

         li.style.lineHeight = &#39;1&#39;;

         a = document.createElement(&#39;a&#39;);

         a.title = ts[t]+&#39; Postingan dalam label &#39;+t;

         a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;

         a.href = &#39;javascript:getCat(&quot;&#39; + encodeURIComponent(t) + &#39;&quot;,null)&#39;

         if (lcShowCount){

             span = document.createElement(&#39;span&#39;);

             span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;

             span.className = &#39;label-count&#39;;

             a.appendChild(document.createTextNode(t));

             li.appendChild(a);

             li.appendChild(span);

             }

          else {

             a.appendChild(document.createTextNode(t));

             li.appendChild(a);

             }

         ul.appendChild(li);

         abnk = document.createTextNode(&#39; &#39;);

         ul.appendChild(abnk);

    }

  lc2.appendChild(ul);    

</script>



<noscript>

    <ul>

    <b:loop values='data:labels' var='label'>

      <li>

        <b:if cond='data:blog.url == data:label.url'>

          <data:label.name/>

        <b:else/>

          <a expr:href='data:label.url'><data:label.name/></a>

        </b:if>

        (<data:label.count/>)

      </li>

    </b:loop>

    </ul>

</noscript>

    <b:include name='quickedit'/>

  </div>



</b:includable>

</b:widget>

Simpan kembali hasil pekerjaan sobat, jika berhasil di simpan, berarti sobat telah mengikuti langkahnya dengan benar

Kemudian cari kode </head>, (sekarang baru di centang expand widgetnya-red) paste kode di bawah ini di atas </head> :

//<![CDATA[

// User customisable parameters

// ----------------------------

// maxresults - Number of results to show per page

// navFlag - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF.

// feedLabel - Text to show for the label feed link.

// catLabel - Label for categories.

// closeLabel - Label for Close button. You can use hypertext also.

var maxresults = 3;

var navFlag = 1; //ON by default

var feedLabel = "Subscribe to";

var catLabel = "Di Simpan di:";

var closeLabel = "Tutup";

//]]>

</script>

NB : Script di atas sudah di modifikasi sedikit oleh saya, kalau mau aslinya silakan klik disini

Langkah selanjutnya cari kode ini di bawah ini :

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

Setelah itu ganti dengan kode ini :

<b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>

Simpan hasil pekerjaan sobat, jika berhasi pasti tidak ada masalah, jika tidak silahkan ulangi prosedurnya dari no 5

Setelah itu masuk ke Tata Letak > add page elements pilih yang di atas post, kalau belum ada pilihan add page elemet di atas post silahkan baca di sini ( biasanya blogger hack ini di simpan di atas post-red). Pilih insert HTML/Javascript kemudian masukkan kode ini di bawah :

<div id="indicator" style="display:none"><img alt="Indicator" src="http://subagya.googlepages.com/loading-trans.gif"/>Sedang Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div></div>

Kemudian simpan, dan silahkan lihat hasil pekerjaan sobat di blog sobat. Jika berhasil berarti ”selamat anda sukses”, jika tidak silahkan ikuti langkah-langkahnya dengan teliti.

Atau silahkan kunjungi ke blog sobat ini untuk, penjelasan dalam bahasa inggrisnya, atau ke sini blog sobat ini juga.

Membuat dropcap

Blogger trick kali ini bagaimana cara membuat sebuah dropcap, yaitu hurup di awal kalimat menjadi besar, seperti contoh di blog ini, sangat simple sekali membuat dropcap ini, sobat mau tahu caranya?Yang perlu sobat lakukan adalah memasukkan kode css di bawah ini di atas tag ini ]]</b:skin> :

.dropcap { width: 1em; height: .5em; float: left; text-align: center; font-size: 35pt; color:red; font-style:italic }

Jangan lupa simpan hasil pekerjaan sobat

Kemudian ketika sobat akan memposting masukkan tag span ini ke dalam postingan sobat, sebagai contoh :

<span class="dropcap>H</span>anya sebagai test!!! Kalau berhasil berarti sukses, tapi kalau gagal kasihan deh loooo... sob heheheheheheh

Maka hasilnya akan seperti ini :

Hanya sebagai test!!! Kalau berhasil berarti sukses, tapi kalau gagal kasihan deh loooo... sob heheheheheheh

Sangat simple bukan? tidak perlu mengutak-atik kode HTML template sobat, tinggal copy paste kode css di atas dan langsung praktek di postingan sobat Cukup untuk blogger tricknya, Happy Blogging and have a nice day

Bila ingin sering menggunakan trick ini di setiap postingan sobat, caranya adalah ke Dasboard > Pengaturan > Format lalu ke Template Posting copy paste kode diatas kemudian save.

Expandable/Collapse inside the post

Seperti permintaan sobat blog saya Mikey , saya akan memposting bagaimana menampilkan expandable/collapse di dalam postingan blogger mania, sebenarnya ini merupakan bogger trick yang lama yang bisa blogger mania lihat di sini. Saya hanya mensadurnya ke dalam bahasa saya sendiri (yang jelas bukan bahasa binatang hehehehe-red>.

Ok seperti yang saya sudah posting sebelumnya di sini, expandable/collapse di dalam postingan hanyalah merupakan pengembangan dari expandable/collapse for navigation, bagi yang belum membaca dan mempraktekkannya silahkan baca di sini. Kalau sudah baca dan menerapkan di dalam blog sobat baru blogger trick ini bisa dijalankan yang perlu sobat lakukan hanyalah menaruh kode ini di dalam postingan.

<a aiotitle="click to expand" href="javascript:togglecomments('UNIQUE NAME')">please click here +/-</a><div class="commenthidden" id="UNIQUE NAME">
<p>
HERE IS WHERE YOU PLACE THE HIDDEN TEXT<div>

Ganti text yang berwarna merah dengan text yang sobat inginkan.

Yang perlu menjadi catatan adalah UNIQUENAME nya harus berbeda setiap sobat memakai blogger trick ini.

Contoh pemakaian expandable/collapse dalam postingan :
please click here +/-

Ini adalah sebuah contoh pemakaian dari expandable/collapse kalau berhasil berarti sukses hehehehehehe

Bila ingin sering menggunakan trick ini di setiap postingan sobat, caranya adalah ke Dasboard > Pengaturan > Format lalu ke Template Posting copy paste kode diatas kemudian save.

Ingat! setiap ingin posting yang baru selalu ganti UNIQUENAME dengan nama yang lain mis : post1,post2,post3.... etc

Ok, cukup untuk blogger tricknya. Semoga berhasil dipakai di blog sobat. Happy blogging and have a nice day.

Tambahan: text bisa di ganti dengan gambar atau links , bagi yang sudah advance pasti sudah tahu caranya :p

Mencari Jati Diri

Hanya sekadar curhatan, saya menulis di blog ini karena blog dapat mengekspresikan kegundahan, kesedihan, keraguan, kemarahan, kekecewaan atau apalah yang berhubungan dengar emosi si penulisnya. Saat ini saya sedang bimbang. Bimbang dalam arti sebenarnya, saya sebenarnya sangat menyukai dunia komputer tetapi kehidupan nyatanya saya tidak ada hubungannya dengan dunia ini (pekerjaan -red) , hmmm andaikan waktu bisa berputar ingin sekali saya bisa kembali dimana masa penentuan kehidupan saya di mulai. Bebas dan tidak terbelenggu seperti saat ini. Rasa menyesal memang di rasakan di akhir, hmmm apakah saat ini saya sedang merasakannya?

Menampilkan text di dalam area yang unik di postingan

Bagaimana cara menampilkan text yang berada dalam area tersendiri yang berbeda dengan isi postingannya? Hal ini di tanyakan oleh sobat saya Riasmaja dan saya akan mempostingnya untuk blogger mania lainnya, prinsipnya hampir sama dengan postingan saya sebelumnya silakan baca disini atau ke yang punya code aslinya di Mohamed Rias. Seperti contoh di bawah ini

Contoh (note) :