Membuat Efek Spoiler pada Komentar di Blog

Trik baru buat menghemat tempat di blog sob...,,kali ini tentang cara Membuat Efek Spoiler untuk Komentar di Blog. Sangat bermanfaat untuk sobat yang blognya sering dikunjungi dan punya banyak komentar yang ditinggalkan. 

Kalau sobat tertarik untuk memasang efek spoiler pada komentar di blog sobat, caranya cukup gampang dengan ngikutin langkah-langkah berikut :

1. Login ke Blogger dengan ID sobat

2. Di Dasbor, klik tab Template lalu Edit Template HTML --> centang pada Expand Widget Templates

3. cari kode <dl id='comments-block'> Jika kode tersebut tidak ada , cari kode <dl expr:class='data:post.avatarIndentClass' id='comments-block'>, pusatkan pencarian pada kode id='comments-block'>

4. Copy lalu pastekan kode berikut tepat diatasnya

    &lt;div style=&quot;margin: 5px 20px 20px;&quot;&gt;


    &lt;div class=&quot;smallfont&quot; style=&quot;margin-bottom: 2px;&quot;&gt;&lt;b&gt;Spoiler&lt;/b&gt; Untuk lihat &lt;b&gt;komentar yang masuk&lt;/b&gt;: &lt;input value=&quot;Lihat&quot; style=&quot;margin: 0px; padding: 0px; width: 60px; font-size: 10px;&quot; onclick=&quot;if (this.parentNode.parentNode.getElementsByTagName(&#039;div&#039;)[1].getElementsByTagName(&#039;div&#039;)[0].style.display != &#039;&#039;) { this.parentNode.parentNode.getElementsByTagName(&#039;div&#039;)[1].getElementsByTagName(&#039;div&#039;)[0].style.display = &#039;&#039;; this.innerText = &#039;&#039;; this.value = &#039;Tutup&#039;; } else { this.parentNode.parentNode.getElementsByTagName(&#039;div&#039;)[1].getElementsByTagName(&#039;div&#039;)[0].style.display = &#039;none&#039;; this.innerText = &#039;&#039;; this.value = &#039;Lihat&#039;; }&quot; type=&quot;button&quot;&gt;


    &lt;/div&gt;


    &lt;div class=&quot;alt2&quot; style=&quot;border: 1px inset ; margin: 0px; padding: 6px;&quot;&gt;


    &lt;div style=&quot;display: none;&quot;&gt;

5. Kalau sudah, scroll kebagian bawah sampai temukan kode </dl>  lalu pastekan kode berikut tepat dibwahnya

    &lt;br&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;

Untuk tulisan yang berwarna merah bisa diganti dengan kalimat yang sobat inginkan.!

Selamat Mencoba..... (Sekedar info..,,kodenya udah memang gitu..,,ane coba tes dengan kode asli gak bisa sob, ane juga heran)

Salam,

Cara Pasang Background Barubah-ubah

Halo sobat blogger, ketemu lagi ni ma ane.... heheheh.! Kira-kira ada gk yh sobat blogger yang jadi Pecinta CB???? Hahahaha #ngarep.... Hmm... tutorial kali ini ane pengen share informasi tentang memasang widget yang bisa membuat background template kita berubah-ubah. Tapi kayaknya tidak semua template deh bisa gunain widget ini, soalnya ditemplate ane yang skrang ini udah gak bisa, yang sebelumnya baru bisa. Model template yang bisa tuh kalau gak salah yang background dasarnya gambar. Ntr dicoba aja deh biar lebih jelas...

Terus gimana cara masangnya??? Sabar,,,,ni kan sementara dibahas ^_^. Oyah, widget ini hasil penggabungan dari widget milik DAD and Japarus..... Ane hanya coba satuin untuk sobat blogger semua.....

Untuk cara memasang Widget Background yang bisa berubah-ubah, ikuti langkah-langkah berikut : Tenang aja gampang kok sob.....

1. Login ke blogger dengan ID sobat

2. Di Dasbor, klik tab Layout lalu Add (Tambah) Gadget --&gt; HTML/Javascript

3. Dalam kontent HTML/JavaScript, copy lalu pastekan script berikut :

<div class='sidebar section' id='sidebar2'><div class='widget html' id='html20'>
<h2 class='title'>Background!</h2>
<div class='widget-content'>
<center><blink style="color: rgb(0, 102, 0);"><span style="font-weight: bold; color: rgb(0, 153, 0);">Change Background Of This Blog ==>> <a href='http://chumhienk-mhienk.blogspot.com/2011/08/cara-pasang-background-barubah-ubah.html' target='_blank'>Dapatkan Widget<a/></a></a></span></blink><br/><br/>

<center><select onchange="document.body.style.background = this.value;this.style.background = this.value;" name="DADcbgc" title="Change Background Image" width="185" height="30">
<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZF_GOqPR_I/AAAAAAAAEsY/iGS-uTIVDs8/DADbg.JPG) repeat center center fixed" />Hidden Leaf
<option value="url(http://yahyarezpectors.files.wordpress.com/2011/01/sharingan_wheel_by_neronin2.gif) repeat center center fixed" />Sharingan
<option value="url(http://data0.eklablog.fr/hinata/mod_article214242.gif) repeat center center fixed" />Sharingan 2
<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmMIbzEIanZynAqWt2uS3RDELhYthgJcVgAaeeCuLN9LP6dAfDNupRMJXEJCxn9Bm5H2Zu1JvopZlEdq9Vw0X4Dgtu0gIKnNy_uz76K9QMr4EEl_yvxaNsCEAk7mzCjUtpjeVgJY5W_8an/s1600/death-note%25284%2529.jpg) repeat center center fixed" />Death Note 1
<option value="url(http://i469.photobucket.com/albums/rr57/dragonknight0000039/ae/death20note20L.jpg) repeat center center fixed" />L Lawliet 1
<option value="url(http://lh4.googleusercontent.com/_GaKwmMcf4N4/TZGC4NlmmMI/AAAAAAAAEvk/cma5mtW-beU/DADbg2.JPG) repeat center center fixed" />Rikimaru
<option value="url(http://lh6.googleusercontent.com/_GaKwmMcf4N4/TZGC24bJuCI/AAAAAAAAEvg/O1mDH3LU91w/DADbg0.jpg) repeat center center fixed" />Yu-Gi-Oh!
<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGDGbOqsnI/AAAAAAAAEwI/FWAbOOZu2go/DAD1.jpg) repeat center center fixed" />Deidara
<option value="url(http://lh4.googleusercontent.com/_GaKwmMcf4N4/TZGC7eK9TtI/AAAAAAAAEvw/Ly5L0UA3D4s/DADcloud.gif) repeat center center fixed" />Akatsuki Cloud
<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGC7UA67RI/AAAAAAAAEv0/ehJ-oez_akU/DADbluematrix.gif) repeat center center fixed" />Blue Matrix
<option value="url(http://lh3.googleusercontent.com/_GaKwmMcf4N4/TZGC9O9ZNUI/AAAAAAAAEv8/Idjb8xIrw60/DADgreenmatrix.gif) repeat center center fixed" />Green Matrix
<option value="url(http://top10hackingfacebooksofware.xtgem.com/imgjqurypropil/ok3-1.gif) repeat center center fixed" />BlacK MaTrix
<option value="url(http://japarus.xtgem.com/blogspot/th_MATRIX5.gif) repeat center center fixed" />MaTrix
<option value="url(http://japarus.xtgem.com/blogspot/red-matrix-request-animated.gif) repeat center center fixed" />ReD MaTrix
<option value="url(http://lh5.ggpht.com/_GaKwmMcf4N4/TNeseCBlTLI/AAAAAAAADXE/Ov2R6yjRkio/Blue%20Matrix%20%5Bwww.DarkArd.co.cc%5D.gif) repeat center center fixed" />BluE MaTrix
<option value="url(http://lh4.ggpht.com/_GaKwmMcf4N4/TKGjwDrSA8I/AAAAAAAADA0/EF3C7a-Hok8/DADmatrixbg.gif) repeat center center fixed" />GreEn MaTrix
<option value="url(http://i28.tinypic.com/2u8bgh3.jpg) repeat center center fixed" />BinGKai
<option value="url(http://gi73.photobucket.com/groups/i235/73WT2U2PGJ/pollockno5-tm.jpg) repeat center center fixed" />LuKiSan aBsTraK
<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8pGAKanQBCRiu3uIynRuy3_aqLcZsrRaSm1fFEZS-PyvGozEcV-oQbvkGUvQSE1mXYE5pGWvk_hZfBesmWtvvQkQcNtam503wBiKoRCEb9Dk1VQgzn1CWbyRzkc5eDIo_l8HcisGKNic/s1600/pattern_724.png) repeat center center fixed" />GaRis&#178;
<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUjsid1-qiQG5kRG7xKusB6W_p6iyAUaFiOatpP-HE2pcAWNT7tzXX25QkRB9Eob8zqCheFdKaG2K00UBK8ftPVKLA5fxsXboU-WFNpECX0lkqZbDPL2dh0SQnXV1DMFYvCzick4LN6xkj/s1600/papers.jpg) repeat center center fixed" />KerTaS LeCeK
<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL9UP5l7UCbxSVZcex7K9J66m0f-7LhSLmdcHFqPbYw7uR4cXtjQCmP-fdseXwjK-eQPo59yn3gaExE1898kpEndYmV_lr3xjgN-WZfwOw7Z41Rkzzpyxgi_26mZ-tO9q6TE3exCxUGSM/s0-r/sakura-naruto-sasuke-akatsuki-naruto-shippuuden-452719_1280_1024.jpg) repeat center center fixed" />NaRuTo
<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJDZ01VHq-ABcZckmrJrExb0TzS4rMBTwiO295dLshU2HXYYOkgbUMnt5JDgFHrOmIYipNlAVEbE1c2J5pbTM4P6E9AOV8ZGw5T5em_OFtRb1LZ8EtUK6h3GJ0LGXlUhJo2TyjutF_sFM/s1600/LuKiSan_TeRmaHaL.bmp) repeat center center fixed" />LuKiSan KeRen
<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNptJdWWOcDTilpuHAxT-PbNuDoDKew6V-AQBooLGRJe69VIhJYISPMtzn6hW__n5Te7I4F34uFQO6bL6MmOC2xSWx8ZWV4pZq0HoYsLBZiimGOBS7mdFrIPxCoraX-Kto2T224_5NpdQ/s1600/%2521%2521%2521%2521%2521%2521.png) repeat center center fixed" />DyOsA
<option value="url(http://top10hackingfacebooksofware.xtgem.com/imgjqurypropil/ok3-1.gif) repeat center center fixed" />Localhost
<option value="url(http://i28.tinypic.com/2u8bgh3.jpg) repeat center center fixed" />Balikita
<option value="url(http://japarus.xtgem.com/blogspot/28.gif) repeat center center fixed" />Tengkorak
<option value="url(http://japaruspunya.xtgem.com/image/japarus.png) repeat center center fixed" />Japarus
<option value="url(http://japarus.xtgem.com/blogspot/165294_140853305970418_100001372471981_217760_3787119_n.jpg) repeat center center fixed" />Garuda Didadaku
<option value="url(http://japarus.xtgem.com/blogspot/th_MATRIX5.gif) repeat center center fixed" />Matrix Hijau
<option value="url(http://japarus.xtgem.com/blogspot/red-matrix-request-animated.gif) repeat center center fixed" />Matrix Merah
<option value="url(http://japarus.xtgem.com/blogspot/hitam.png) repeat center center fixed" />hitam
<option value="url(http://japarus.xtgem.com/blogspot/putih.png) repeat center center fixed" />Putih

</select></center></center>
</div>
<div class='clear'></div></div></div>

Sekian tutorial Cara Pasang Background Berubah-ubah di Blog. Judulnya jelek amat yh.... hahahahaha

Salam,

Anti Klik Kanan Dengan Gambar

Melindungi kontent kita dari tangan-tangan jahil yang seenaknya maen copas tanpa nyertain link si sumber emang sudah sepatutnya kita lakuin. Itu juga belum sepenuhnya aman sob, soalnya mereka masih bisa gunain Ctrl+C buat copas kontent yang mereka inginkan atau dengan mendisable javascript pada browser yang mereka gunakan. Tapi gak ada salahnya kalau kita tetap terapkan mode perlindungan buat blog kita, tentu saja dengan script "Anti Klik Kanan". Kok di blog ini gak??? heheh bukannya gak mau pasang sih hanya saja lagi malas, tapi gak nutup kemungkinan kedepannya akan ane terapin.

Nah sebelumnya kan ane sudah pernah posting tuh artikel tentang Disable Fungsi Right Click Mouse, kali ini ada yang lebih menarik lagi yaitu dengan tambahan aksesoris gambar. Wah keren gak tuh sob... Sebenarnya trik ini sudah lama pengen ane posting tapi gak pernah sempat, karena biasanya tutorial akan ane posting setelah ane cobain sendiri. Oyah trik ni original milik sobat DAD.

Kalau sobat tertarik buat masang Anti Klik Kanan dengan Gambar, sobat ikuti saja langkah-langkah berikut :

1. Login ke Blogger dengan ID sobat
2. Di Dasbor, klik tab Template lalu Edit Template HTML --> Centang pada Expand Widget Templates
3. Cari kode ]]></b:skin>, kalau sudah ketemu copy lalu pastekan kode berikut tepat diatasnya:

#DADrc{background-image:url(URL GAMBAR);}

4. Terus cari lagi kode <body> lalu ganti dengan kode berikut:

 <body oncontextmenu='DADantirightclick();return false;'>

5. Save Template

Belum selesai sob, langkah selanjutnya:

6. Klik tab Layout
7. Klik Add Gadget --> HTML/JavaScript. Lalu copy dan pastekan kode berikut dalam kontent HTML:

<script type="text/javascript" src="http://darkard.jw.lt/linker/dickeymarurc"> </script>

8. Lalu Simpan dan lihat hasilnya.

Semoga bermanfaat. dan berhasil. Ane juga belum nyobain.! ^_^

Salam,

Cara Mengganti Cursor Mouse (Pointer ) Part 2

Bermain di Part 2 ni sob... heheheh. Tadi ane baru aja mosting tutorial tentang Cara Mengganti Background Kotak Komentar dengan Gambar sekarang ane akan kembali membahas tentang Cara Mengganti Kursor Mouse (Pointer) Part 2. Kenapa harus Part 2?? Karena sebelumnya ane juga sudah pernah mosting artikel yang sama. Bisa dicek DISINI. 

Seperti yang kita tahu sob, kalau secara default Cursor Blog itu berbentu tanda panah. Tentu saja kita menginginkan nuansa yang berbeda dengan terus mencari tutorial-tutorial tentang design blog dan salah satunya adalah mengenai tampilan kursor ini. Nah, kalau sobat ingin mengganti tampilan Cursor di Blog sobat dengan tampilan yang lebih menarik, ikuti saja langkah-langkah berikut :

1. Login ke Blogger dengan ID sobat

2. Di Dasbor, klik tab Template lalu Edit Template HTML --> Expand Widget Templates

3. Cari kode berikut :

body {
    margin:0;
    background:#cccccc;
    color:#000000;
    text-align: center;
    }

a:link {
    color:$linkcolor;
    text-decoration:none;
    }

a:visited {
    color:$visitedlinkcolor;
    text-decoration:none;
    }

a:hover {
    color:#000;
    text-decoration:underline;
    }

4. Kalau sudah ketemu, tambahkan kode  cursor: url(URL GAMBAR CURSOR), progress; sehingga akan menjadi

body {
    margin:0;
    background:#cccccc;
    color:#000000;
    text-align: center;
    cursor: url(URL GAMBAR CURSOR), progress;}

a:link {
    color:$linkcolor;
    text-decoration:none;
    }

a:visited {
    color:$visitedlinkcolor;
    text-decoration:none;
    }

a:hover {
    color:#000;
    text-decoration:underline;
    cursor: url(URL GAMBAR CURSOR), progress;}

5. Simpan Template dan lihat hasilnya

Keterangan : Cursor pada tag body adalah kursor default di blog kita, Cursor pada tag a:hover adalah kursor yang mengarah pada link. Sobat ganti tulisan yang berwarna biru (URL GAMBAR CURSOR) dengan url kursor yang sobat inginkan. Kalau belum mempunyai referensi buat url kursornya bisa di cari di TotallyFreeCursors, 123cursors dan Cursors-4u

Selamat mencoba sob....

Salam,

Cara Mengubah Background Kotak Komentar Dengan Gambar

Hmm.... Memang gak ada henti-hentinya yah kalau kita berbicara masalah Design Blog atau Memodifikasi Blog agar telihat lebih menarik lagi.. Nah, pada kesempatan kali ini ane mo share tutorial tentang bagaimana Cara Memodifikasi atau Mengubah Backgroun Kotak Komentar (Comment Form) dengan Gambar. Wah keren gak tuh sob.. Untuk jelasnya bisa lihat gambar berikut atau bisa cek langsung di kotak komentar milik Blog ane ini (scroll saja kebawah) :

Kalau sobat tertarik dengan Design yang satu ini, cukup ikuti langkah-langkah berikut, Insya Allah berjalan mulus gak ada bukit-bukit.... heheheh
1. Login ke Blogger dengan ID sobat
2. Di Dasbor, klik tab Template lalu Edit Template HTML --> Centang pada Expand Wiget Templates
3. Cari kode ]]></b:skin> (gunakan Ctrl+F atau F3), kalau sudah dapat pastekan kode berikut tepat diatasnya:

#comment-form iframe{
   background:#ffffff url(URL GAMBAR) ;
   border:5px solid #9999FF;
   padding:5px;
   font:normal 12pt "ms sans serif", Arial;
   color:#7EB2AC;
   width:450px;
   height:230px;
   }

#comment-form iframe:hover{
   background:#000000 url(URL GAMBAR);
   border:7px solid #999FFF;
   }

Ganti URL GAMBAR dengan url gambar yang sobat inginkan

4. Terus, cari lagi kode yang mirip dengan kode <a expr:href='data:post.commentFormIframeSrc' lalu sisipkan kode  <div id='comment-form'> dan </div> diantara kode tadi. Hasilnya kayak gini :

<div id='comment-form'>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display:inline'/>
    <iframe class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='490'/> <data:post.iframeColorizer/>
    </div>

5. Terakhir, klik Save Template.

Gimana??? Gampangkan sob??? Ayo langsung saja dipraktekin di Blog sobat......
Good Luck!!! ^_^

Salam,

Cara Membuat Komentar Admin Berbeda Part 2

Sebelumnya kan ane sudah pernah mostinga artikel tentang Cara Membuat Komentar Admin Berbeda kali ini ane juga akan mosting artikel yang masih dalam kategori yang sama. Hanya saja perbedaannya kalau yang sebelumnya dengan menggunakan warna, nah kalau yang ini dengan menggunakan background gambar. Contohnya kayak gini sob :

Kalau sobat tertarik untuk menerapkannya di blog sobat, caranya cukup mudah. Ikuti saja langkah-langkah berikut :

1. Login ke Blogger dengan Id sobat

2. Setelah di Dasbor, klik tab Template lalu Edit Template HTML--> centang pada Expadn Widget Templates

3. Cari kode ]]></b:skin> (gunakan Ctrl+F atau F3 agar memudahkan)

4. Kalau sudah ketemu, copy lalu pastekan kode berikut tepat diatas kode ]]></b:skin>

.comment-body-admin {
   background: url(URL GAMBAR) no-repeat;
   border:1px solid #FF9966;
   border-left:1px solid #EEEEEE;
   border-right:1px solid #EEEEEE;
   margin-left:0;
   margin-right:0px;
   padding:7px;
   color:#ffffff;
   }

5. Kalau sudah beres, lanjut dengan mencari kode  dd class='comment-body' terus copy dan pastekan kode berikut tepat diatas kode dd class='comment-body'

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-admin'>
<p><data:comment.body/></p>
</dd>
<b:else/>

6. Langkah terakhir, cari kode <dd class='comment-footer'> dan sisipkan kode </b:if>

</b:if>
<dd class='comment-footer'> 

Sekian tutorial tentang Cara Membuat Komentar Admin Berbeda Part 2, semoga sukses..!!!! :)

Salam,

Membuat Fungsi Scroll pada Label/Kategori

Pas lagi nyari-nyari tutorial tentang Cara Memasang Fungsi Scroll pada Arsip eh tidak tahunya malah nyasar dan temuin tutorial baru yang mirip-miriplah sama tutorial yang saat itu ane cari, Cara Membuat Fungis Scroll pada Label/Kategori di blog sob, lumayan buat ngirit template kita. Ane dapat tutorialnya dari Saung Wab terus ane cobat repost dengan sedikit bahasa ane sendiri agar lebih memudahkan buat pemahannya.

Berikut langkah-langkah untuk Membuat Fungsi Scroll pada Label/Kategori di blog :

1. Login ke id Blogger

2. Saat di Dasbor, klik tab Template lalu Edit Template HTML --> Centang pada Expand Widget Templates

3. cari kode <b:widget id='Label1' locked='false' title='Labels' kalau sudah ketemu coba scroll kebawah sedikit sampai temuin kode <div class='widget-content'>, nah sekarang letakkan kode berikut tepat dibawah kode <div class='widget-content'> tadi :

<div style='overflow:auto; width:ancho; height:300px;'>

4. Scroll lagi kebawah samape temuin kode <b:include name='quickedit'/>, kalau sudah dapat copy lalu pastekan kode </div> tepat dibawahnya. (Nantinya akan ada 2 kode </div> dengan yang baru ditambahin)

Untuk lebih jelasnya bisa lihat contoh berikut :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div style='overflow:auto; width:ancho; height:300px;'>
    <ol>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>  <a class='labelfeed-link' expr:href='&quot;http://clwolvi.blogspot.com/feeds/posts/default/-/&quot; + data:label.name' style='margin-left:10px;' title='Subscribe'/></span>
      </li>
    </b:loop>
    </ol>
    <b:include name='quickedit'/>
  </div></div>
</b:includable>
</b:widget>

keterangan :

hegiht:300px adalah tinggi scroll pada label, silahkan sobat sesuaikan dengan keinginan sobat

yang warna biru <ol> dan </ol> adalah hasil perubahan dari <ul> dan </ul>. Untuk yang ini tidak terlalu berpengaruh sob, biar tidak diganti juga tidak kenapa2...

Cara Membuat Read More Otomatis pada Postingan

Setelah ane browsing kesana kemari demi mendapatkan artikel tentang cara membuat read more otomatis pada postingan diblog, akhirnya pencarian ane berhenti saat ane nyasar ke SB.

Seperti kita tahu sob, template masing-masing pasti memiliki perbedaan. Ane sih tidak tahu apa itu merupakan salah satu kendala yang menyebabkan ane selalu gagal dalam penerapannya atau bukan yang jelasnya setelah ane gunain cara yang diposting oleh SB, Alhamdulillah templatenya tidak bermasalah.

Ok langsung saja (kata sambung andalan... hihihihi) ke inti pembahasan :

1. Login ke Blogger

2. Setelah masuk ke Dasbor klik tab Template lalu Edit Template HTML (centang pada expand widget templates)

3. Cari kode </head>  lalu copy dan pastekan kode berikut tepat diatasnya:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>

4. Setelah itu cari lagi kode <data:post.body/> tandai lalu ganti dengan kode dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> <b:else/> <div expr:id='&quot;summary&quot; + data:post.id'> <data:post.body/> </div> <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); </script> <div style='clear: both;'/> <span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span> </b:if> </b:if>

 Tulisan Read more >> bisa sobat ganti dengan tulisan yang sobat inginkan atau bisa juga menggunakan gambar dengan mengganti <b>Read more >></b>  menjadi <a expr:href='data:post.url'><img src='URL GAMBAR'/></a> 

Terakhir, Klik Save template lalu lihat hasilnya pada blog sobat.

Semoga tutorial ini bermanfaat untuk sobat blogger semua.

Salam,

Cara Membuat Table 4 Kolom dengan CSS

Tutorial kali ini ane mo bagi tips cara membuat table 4 kolom dengan CSS, tips ini ane dapat dari Japarus terus ane coba untuk repost tapi tetap dengan mencamtumkan sumbernya karena tutorial ini bukan ane sendiri yang buat.

Ok langsung saja, untuk membuat table 4 kolom ini caranya cukup mudah :
1. Yang pasti loggin dulu ke Blogger sobat
2. Klik tab Template lalu Edit Template HTML
3. Centang pada Expand Widget Templates, lalu cari kode ]]></b:skin>
4. Kalau sudah ketemu, copy lalu pastekan kode berikut tepat diatas kode ]]></b:skin>

.isiboks {
background-color:#ccc;
font-family:comic sans ms;
font-size:12px;
color:#3d010a;
padding:5px;
width:200px;
}
.isiboks:hover{
background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE-Hq8ek8Sr4N5fQgHH9jQo_wH_1AJ1xouNdNn-hMAMpQPNJuWGlOsvEt_XNqzo7SRmBz3Mbx68nsMnHFNEAv4iFX7Ur6uoHoHaWyRF7rk3082sojfzQAgDGG5ym2Y7Pg0u0b4Tk0XAaY/s400/bgsGR_bgTablesilver.jpg);
}
.isiboks a{
font-family:tahoma;
font-weight:bold;
color: #003366;
text-decoration:none;
}
.isiboks a:hover{
color:#FF00FF;
}
td.judulboks{
text-align:center;
font-size:22px;
font-weight:bold;
color:#3d010a;
font-family:Tahoma;
}
td.judulboks:hover{
background:#fff url(http://japarus.xtgem.com/bgrpagar.jpg);
color: #999900;
border-color:#FF0000;
}

5. lalu Klik Save Template

Langkah selanjutnya, dengan cara memasukannya kedalam postingan atau dengan Add Widget. Sobat sudah pada mengertikan maksudnya. Tidak perlu dijelasin lagi... :) Dalam konten HTML/JavaScript, copy lalu pastekan kode berikut :

<table background="#FFF" bordercolor="cdd4cd" border=1 cellspacing="10" width="420">
<tr bordercolor="d8ffde">
<td class="judulboks" colspan=5 bgcolor="#CCCCCC">Judul Tabel 4 Kolom</td></tr>
<td class="isiboks" bordercolor="#d8ffde">
01. <a target="_blank" href="Link Judul-01">Judul-01</a> Tuliskan teks di sini !<br />
02. <a target="_blank" href="Link Judul-02">Judul-02</a> Tuliskan teks di sini !<br />
03. <a target="_blank" href="Link Judul-03">Judul-03</a> Tuliskan teks di sini !<br />
04. <a target="_blank" href="Link Judul-04">Judul-04</a> Tuliskan teks di sini !
</td>
<td class="isiboks" bordercolor="d8ffde">
01. <a target="_blank" href="Link Judul-05">Judul-05</a> Tuliskan teks di sini !<br />
02. <a target="_blank" href="Link Judul-06">Judul-06</a> Tuliskan teks di sini !<br />
03. <a target="_blank" href="Link Judul-07">Judul-07</a> Tuliskan teks di sini !<br />
04. <a target="_blank" href="Link Judul-08">Judul-08</a> Tuliskan teks di sini !
</td>
<td class="isiboks" bordercolor="d8ffde">
01. <a target="_blank" href="Link Judul-09">Judul-09</a> Tuliskan teks di sini !<br />
02. <a target="_blank" href="Link Judul-10">Judul-10</a> Tuliskan teks di sini !<br />
03. <a target="_blank" href="Link Judul-11">Judul-11</a> Tuliskan teks di sini !<br />
04. <a target="_blank" href="Link Judul-12">Judul-12</a> Tuliskan teks di sini !
</td>
<td class="isiboks" bordercolor="d8ffde">
01. <a target="_blank" href="Link Judul-13">Judul-13</a> Tuliskan teks di sini !<br />
02. <a target="_blank" href="Link Judul-14">Judul-14</a> Tuliskan teks di sini !<br />
03. <a target="_blank" href="Link Judul-15">Judul-15</a> Tuliskan teks di sini !<br />
04. <a target="_blank" href="Link Judul-16">Judul-16</a> Tuliskan teks di sini !
</td>

</table>

Ket:
Untuk Widht="420" adalah lebar tabelnya, silahkan sobat sesuaikan dengan lebar widget pada tempalte sobat sendiri.

Sekian untuk tutorial Cara Membuat Table 4 Kolom Dengan CSS.

Salam,

Selamat Hari Raya Idul Fitri 1432 H/2011 M

Wah gak kerasa bentar lagi kita uda memasuki hari kemenang seluruh umat islam seantero dunia. Dengan itu, ane selaku admin dari Chumhienk's Blog punya sedikit ucapan Selamat Hai Raya buat teman-teman blogger yang gak sengaja mampir atau sekedar lewat di Blog ane ini. Berikut ucapannya sobat blogger :

Biar dikata kartu ucapannya gak menarik amat, yang penting nilai keikhlasannya gak berkurang setetes pun sob... ^_^ hehehe. Oyah ane sengaja posting ucapannya lebih cepat, soalnya takut kalau tiba hari H-nya ane malah gak sempat buat blogging..... :)

 Sekian ucapan singkat dari ane sob. Terimakasih!!!

Salam,

Membuat Efek Marquee

Marquee adalah suatu program HTML yang berfungsi untuk membuat teks bisa bergerak atau berjalan. Efek Marquee ini sangat disukai oleh banyak blogger pada umumnya karena sifat program ini yang cukup dinamis serta menarik untuk dilihat. Selain itu juga bisa menghemat tempat (widget) di blog kita. Sedangkan Blink adalah suatu program HTML yang berfungsi untuk membuat teks berkedap-kedip. Kedua efek ini pun bisa dipadukan dan menghasilkan tulisan yang cukup menarik, apalagi bila di tangan yang orang yang punya kemampuan design yang cukup bagus. Disini akan saya jelaskan sedikit tentang elemen-elemn marquee... kalau sobat malas untuk membaca, langsung saja discroll ke bagian bawah.

Efek Marquee itu sendiri ada berbagai macam. Ada yang gerakannya dari samping kiri, samping kanan, atas bahkan bawah... Efek maquee ini menggunakan tag <marquee>.......</marquee>

Atribut yang digunakan antara lain :

• bgcolor : untuk mengatur background teks
• direction : mengatur arah gerakan teks (left/right/up/down)
• behavior : untuk mengatur perilaku gerakan (scroll/slide/alternate)

-. scroll : teks bergerak berputar
-. slide : teks bergerak sekali lalu berhenti
-. alternate : teks bergerak ke kiri dan ke kanan lalu kembali lagi

• Title : pesan akan muncul saat berada di atas teks
• scrollmount : mengatur kecepatan gerakan dalam pixel, semakin besar angka maka semakin besar kecepatannya, begitu juga sebaliknya
• scrolldelay : untuk mengatur waktu tunda gerakan dalam mili detik
• loop : mengatur jumlah loop
• widht : mengatur lebar blok teks dalam pixel atau persen

Ok, sekarang kita masuk ke Contoh Teks Efek Marquee
1. contoh efek marquee dari gerakan

<marquee align="center" direction="left" height="200" scrollamount="2" width="50%">
TEKS SOBAT DISINI
</marquee>

2. contoh efek marquee dari perilaku gerakan

<marquee align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate">
TEKS SOBAT DISINI
</marquee>

3. contoh efek marquee dengan variasi huruf dan latar belakang

<div align="left"><font face="georgia" color="White"><b><marquee bgcolor="red" width="70%" scrollamount="3" behavior="alternate">
TEKS SOBAT DISINI
</marquee></b></font></div>

4. contoh efek marquee yang teksnya berhenti ketika diarahkan pointer

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">
TEKS SOBAT DISINI
</marquee>

5. contoh efek marquee yang didalamnya terdapat link

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href="URL" target="new">TITLE/JUDUL</a><br/>
</marquee>

Untuk contoh efek pada nomor 5, sobat bisa memasukan link lebih dari satu dengan cukup memasukan tag <a href="URL" target="new">TITLE/JUDUL</a><br/> berurut kebawah.

Sekian dulu informasi yang bisa ane sharing untuk kali. Semoga bermanfaat buat sobat blogger semua.

Salam.,
 

 

Cara Memasang Flash di Blog

Memasang Flash di Blog merupakan hal yang cukup menarik karena ini akan membuat tampilan blog menjadi lebih inovatif. Fungsi dari Flash itu sendiri untuk membuat banner dalam bentuk animasi, ekstensi flash (*.swf) jauh lebih ringan dari pada gambar *.gif. Selain untuk Widget, Flash juga bisa digunakan dalam postingan dengan format kode. Hampir lupa, artikel ini ane dapat dari sobat Hitsuke.

Untuk kode flash sebagai berikut :

<embed src="https://sites.google.com/site/hitsukeproject/Green_Cycle.swf" quality="high" bgcolor="white" width="500" height="100" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>

Keterangan :

1. quality="high" merupakan kualitas flash, bisa diganti dengan medium, normal atau low

2. bgcolor="white" merupakan warna background flash, bisa diganti dengan warna yang sobat inginkan. Kalau belum punya kode warna bisa dilihat disini

3. widht="500" merupakan lebar flash

4. hieght="100" merupakan tinggi flash

Itu saja dulu yang bisa ane jelaskan untuk artikel ini, semoga artikelnya bermanfaat buat sobat blogger semua.

Salam,

Daftar Situs Hosting Gratis

Sebenarnya hal ini sangat perlu diketahui oleh sobat blogger semua, karena ini merupakan salah satu sarana yang sangat berpengaruh dalam dunia blogger (kalau pengertian ane sih gitu). Situs-situs ini menyediakan hosting file.js gratis. Salah satu situs yang ane guanakan saat ini untuk mengupload file-file adalah Ripway. Tapi selain situs yang ane gunakan ini masih banyak situs-situs lain yang menyediakan hosting gratis.

Inilah beberapa situs yang sobat blogger dapat gunakan sebagai tempat hosting file gratis :

1. HyperPHP.com
2. PHPNet.us
3. DotEasy.com
4. AgilityHoster.com
5. IfastNet.com
6. IpowerHosts.com
7. FreeServers.com
8. JustFreeHost.com
9. FreeHostingz.com,
10. T35.com
11. FreeWeb7.com
12. GetFreeHosting.co.uk
13. FreeHosty.com
14. FreeHostPage.com
15. MorganHosting.co.cc
16. OxyHost.com
17. Fusedtree.com
18. Bplaced.net
19. Quotaless.com
20. 000space.com
21. 0fees.net
22. bytehost.org
23. xtreemhost.com
24. cilacapfreehosting.com
25. fileqube.com
26. myfreefilehosting.com
27. fileden.com
28. easyshare.com
29. filefactory.com
30. badongo.com

Itulah beberapa situs yang dapat ane informasikan saat ini, tentunya masih banyak sekali situs-situs lain yang bekerja dalam bidang yang sama. Nah, kalau sobat blogger tahu situs lain selain situs-situs yang ane sebutkan diatas, bisa dikonfirmasikan disini kok sob, jadi ane bisa update lagi informasinya. :)

Salam,

Membuat Modif Blackquote Blogger

Mungkin kebanyakan dari kita sudah tahu apa yang dimaksud dengan Blackquote tersebut, namun tidak dengan Blogger pemula yang baru membuat blog.... Nah, ane akan kasih contoh agar sedikit membantu pemahaman sobat tentang Blackquote itu sendiri.

Itulah yang dinamakan dengan Blackquote. Ane anggap sobat sudah mengerti. Sekarang kita masuk ke pembahasan tentang artikel ini. Untuk memodifikasi Blackquote default blogger dengan yang kita inginkan caranya cukup mudah, ikuti langkah-langkah berikut :

1. Login ke Blogger
2. Di Dasbor klik tab Template
3. Lalu Edit Template HTML
4. Centang pada Expand Widget Templates
5. Cari kode ]]></b:skin> (gunakan Ctrl+F atau F3 untuk memudahkan)
6. Copy dan Pastekan kode berikut tepat diatas kode ]]></b:skin>

.post-body blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzoz0zKXDwjPu-8jYKVvsitAz2FYJs4yRlNvpEqOtfyorCGWRMC9Ax5phwYD4zNCImBuwHsZ9As3OyKabA53jOmD-rATQyEvD4rfGKClNR2CGNstWgm2aqRizBbmSsHFG7bCJPJUBGYds/s1600/45.jpg
) no-repeat left top;
border-left: 10px solid #666666;
}

7. Simpan Template.

Keterangan :

Kata yang dicoret adalah url gambar yang digunakan oleh sobat TB silah sobat ganti dengan url gambar yang sobat inginkan. Oyah kalau saat membuat postingan letak Blackquote itu seperti pada tampilan gambar ini :

Cara menggunakannya ada 2 cara :
1. Sobat blok dulu tulisan yang di beri Blackquote, lalu klik tanda Blackquotenya, atau
2. Sebelum menuliskan artikel, sobat klik terlebih dahulu tanda Blackquotenya

Semoga Bermanfaat,

Salam,

Membuat Tombol Home, Bact to Top and Bottom

Assalamu Alaikum Wr. Wb.

Wah bentar lagi lebaran ni sob... uda pada beli perlengkapan lebaran belum??? hehehehe 

Kesempatan kali ini ane mau sharing tutorial tentang bagaimana Cara Membuat Tombol Home, Back To Top and Bottom di blog sobat. Sudah tahu kan maksudnya??? Lebih jelasnya liat gambar berikut :

Nah, kira-kira seperti itulah gambar dari Tombol Home, Top dan Bottomnya. Oyah hampir lupa, tutorial ini ane dapatnya dari sobat TB kalau sobat tertarik silahkan dipraktekin langsung :

1. Login ke Blogger

2. Setelah masuk ke Dasbor, Klik tab Template (ini untuk tampilan blog yang baru)

3. Klik Edit Template HTML

4. Centang pada Expand Widget Templates

5. Temukan kode berikut ]]></b:skin> (gunakan Ctrl+F atau F3)

6. Copy lalu Pastekan kode berikut diatas kode ]]></b:skin>

#mangetsu {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#mangetsu a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#mangetsu img
{
border:0;
}
#mangetsu a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}

7. Setelah itu cari lagi kode </body> lalu copy dan pastekan kode berikut diatas </body>

<a name='ngisor-dhewe'></a>

8. Terakhir masukan kode berikut dibawah kode </body>

<div id='mangetsu'>
<table border='0'>
<tr>
<td><a expr:href='data:blog.homepageUrl' title='Home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6r9IBN4eoKfeDzptlpvgLfbhNc7DeRyeph5cI02068sb_exXZZppLYpK0lK1fH29xBhbxM2n5KMzbWDnCaZAEIvYnfQIVTxhSBUmXZvRFPZdHHx-6gLnlHJ-8uh8rkP643Ufkzpe-eA0/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWKkmHKZiDdpap47rQqFW77abs1Mlc355p11DMCRN2gR1ZcTyJDEsueYOagYnAKZf-c7SazNmdHyAKXbOrGh0kTyk7rH3vq_Rj0BBNeygza8PYUGJ_8Ly1R-zeEQmEoxrHccDFnbInQXs/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUg0EKgAvRp_z56R-g6q4aKMB_fsSM_1nxEApcXIwd1SB3O8rtIR83P9A_7ahhkCJ2OKsFiGGrgUqHDAwzR2HZXZIWiiwUFKEWaMQgL22bbV5RGaZoU-Sv5v02UAUUDElx4XoD8kXFXMk/s320/next-icon2.png'/></a></td>
</tr>
</table>
</div>

9. Simpan.

Itulah sedikit banyak penjelasan bagaimana cara membuat Tombol Home, Top dan Bottom di Blog. Semoga dalam penerapannya tidak terjadi masalah alias mulus-mulus saja...... heheheh

Salam,

Modifikasi Background Buku Tamu dengan Gambar

Kali ini ane akan ngebahas tentang cara mendesign Background buku tamu dengan gambar. Pasti sobat semua ingin tahu tentang yang satu ini karena blog kita akan lebih kelihatan kreatif, yah walaupun bukan widget original kita sendiri... heheheh Sebenarnya widget ini milik sobat Dickeymaru tapi ane uda izin kok (belon dijawab sih tapi udah lancang_semoga empuhnya ijinin deh kan buat temen2 jg heheheh).... Caranya sih cukup panjang sob tapi jangan khawatir, tidak sulit sob..... Hanya saja ane tidak bisa mastiin trik bisa diterapkan dengan mengedit chatbox kita yang lama ato harus buat yang baru. Soalnya kalau ane sendiri langsung buat cbox yang baru sob....

Ok langsung saja.....
1. Login dulu ke Chatbox sobat sendiri
2. Klik Tab menu Look & Feel lalu Style Presets

3. Kemudian pilih Style Gallery yang Transparan

4. Kalau sudah, masuk lagi ke Layout Option

5. Ganti ukuran cbox kamu, contoh :
widht: 180
hight: 275
kosongkan centang pada Auto
form height: 117
No. of  messages to display : 20
klik Save

Setelah tahap diatas selesai, langkah selanjutnya adalah pengeditan kode cbox sobat
pada kode cbox sobat, cari kode <div id="cboxdiv" style="text-align: center; line-height: 0">

Kalau sobat sudah ketemu, ganti kode tersebut dengan kode dibawah ini :

<div id="cboxdiv" style="text-align:center; line-height:0;background-position:center;background:url(URL GAMBAR KAMU);width:180px;height:350px;background-repeat:no-repeat;">

pada tulisan yang berwarna biru, gantikan dengan url gambar sobat yang ingin dijadikan background cbox. Saran saya, cari gambar dengan menyesuaikan warna teks dari cbox sobat agar teks dapat dibaca.

Sekian tutorial dari saya, semoga bermanfaat..!!!

Salam,

Info Terbaru : Mendapatkan Backlink Yang Berkualitas.... Gratis!!!!

Link Gratis Berkualitas

Backlink Gratis dan Berkualitas adalah salah satu cara yang cukup pantas untuk dicoba demi mendapatkan One Way Backlink (Link Satu Arah) dengan cara mudah serta gratis. 

Ini adalah cara dahsyat untuk tukar link. Karena satu link yang kita pasang akan dibantu dipromosikan oleh 1 juta orang lebih hanya dengan mengajak 2 orang saja. Cukup mudah mengajak 2 orang untuk daftar, karena semua butuh promosi, setiap orang ingin linknya tersebar dengan cepat. Apalagi kalau lebih dari 2 orang… berapa link yang akan kita dapat n gratis lagi..


Oke kayak apa dan gimana caranya.. sobat tinggal daftar saja , tak ada ruginya untuk dicoba , gratis ini, disini link kita bisa nempel terus, link yg dimasukan bisa judul postingan dan URL nya agar tiap page punya pagerank juga.. kan biasanya PR kita hanya di halaman depan saja, sementara di halaman posting gak punya PR.


Kalau berminat cukup Mendaftar. Setelah itu silahkan cek password yang dikirim ke email anda, kemudian langsung login dan pasang judul artikel, keterangan dan URL link yang ingin dipromosikan pada Website ini. Oh ya … kita juga akan mendapatkan web replikanya untuk kita promosikan lho.. Sebagai contoh saya persembahkan postingan tentang Info Terbaru : Mendapatkan Backlink Yang Berkualitas.... Gratis!!!!, salah satu Cara mudah meningkatkan Traffic dan Pegerank blog kita.


Selanjutnya tinggal buat sebuah postingan seperti ini atau silahkan copy paste artikel ini (Yang dicetak miring) untuk di blog sobat dan rasakan manfaatnya.


Untuk mendaftar silahkan klik Mendapatkan Backlink Yang Berkualitas disini , kemudian scroll kebawah lalu klik “ Sign Up Now Free “ atau Klik Untuk Mendaftar.


Selamat mencoba tips Mendapatkan Backlink Yang Berkualitas ini .

Ayo sobat... sekaranglah saatnya kita berusaha untuk meningkatkan PR blog kita. Tidak ada salahnya untuk terus mencoba hal baru.....

Salam,

Membuat Link Mengeluarkan Efek Bintang

Temanya hampir sama ni sob...,,masih di mempermak Link blog kita biar kelihatan lebih kreatif. Kalau postingan yang sebelumnya kan tentang Membuat Link Mengeluarkan Warna Pelangi nah postingan kali masih nuansa angkasa sob Membuat Link mengeluarkan Bintang. Wah keren nggak tuh.... heheheh 

Ok, untuk cara membuat Link bisa mengeluarkan efek Bintang cara gini :

1. Login ke Blogger

2. Klik tab Tata Letak/Layout

3. Klik Edit HTML

4. Centang kolom Expand Widget

5. Cari kode a:hover{ yang berdekatan dengan kode a:link{ atau a:visited{

6. Letakkan kode berikut dibawah kode a:hover{

 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY81fCxN2MzWiL_ZPPWnQkvDF7etuRKziCPU_Gf8P0t5e6im-qzYeVW7KURxr2iqPMwAzsbYN3p0Dxje1hqjzi82_OshLueioc14Cpn-u66X5nkUfySXBzSHrXyxr7E1y1TnJ3I9So8Ac/s1600/stars.gif);}

Hasilnya akan seperti ini :

a:hover{  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY81fCxN2MzWiL_ZPPWnQkvDF7etuRKziCPU_Gf8P0t5e6im-qzYeVW7KURxr2iqPMwAzsbYN3p0Dxje1hqjzi82_OshLueioc14Cpn-u66X5nkUfySXBzSHrXyxr7E1y1TnJ3I9So8Ac/s1600/stars.gif);}

7. Klik Save dan silahkan sobat lihat hasilnya di blog sobat..!!! Gimana??? Berhasilkan penerapannya..... ^_^

Membuat Link Warna-Warni

Tambahan baru buat perlengkapan blog kita.. Sangat sesuai buat sobat yang senang mendesign blognya dengan berbagai macam aksesoris... Nah kali ini, ane mau bagi informasi tentang bagaimana cara membuat Link-link diblog kita bisa mengeluarkan warna pelangi ketika disorot pointer....

Tertarik apa nggak ini??? Bagi yang tidak tertarik yah monggo disimak saja kan tidak rugi..... hehehe !!! Bagi yang tertarik, nih ane kasih tutor nya... Gampang kok sob.....

1. Login ke Blogger
2. Klik tab Tata Letak/Layout
3. Klik Edit HTML
4. Cari kode ini </head> gunakan Ctrl + F biar lebih memudahkan
5. Copy dan Paste kode berikut dibawah kode </head> 

<script src='http://h1.ripway.com/Chumhienk/rainbow.js'/>

6. Terakhir klik Save.... Beres deh... Gampang kan???? ^_^


Oyah... kalau sobat pengen punya script sendiri biar nggak pake punya orang lain. Sobat download dulu filenya disini

Kalau sudah sobat Extract filenya agar menjadi file java (.js). Setelah itu upload filenya di wab hosting sobat kemudian ambil urlnya. Contohnya seperti punya ane http://h1.ripway.com/Chumhienk/rainbow.js nah kode itulah yang harus sobat ganti dengan url java sobat sendiri... Ngerti kan maksudnya???

<script src='http://h1.ripway.com/Chumhienk/rainbow.js'/>

Yang berwarna hijau itu gantikan dengan url java sobat.....

Color Codes

Hexadecimal HTML color codes

#FFFFFF	#FFFFCC	#FFFF99	#FFFF66	#FFFF33	#FFFF00
#FFCCFF	#FFCCCC	#FFCC99	#FFCC66	#FFCC33	#FFCC00
#FF99FF	#FF99CC	#FF9999	#FF9966	#FF9933	#FF9900
#FF66FF	#FF66CC	#FF6699	#FF6666	#FF6633	#FF6600
#FF33FF	#FF33CC	#FF3399	#FF3366	#FF3333	#FF3300
#FF00FF	#FF00CC	#FF0099	#FF0066	#FF0033	#FF0000
#CCFFFF	#CCFFCC	#CCFF99	#CCFF66	#CCFF33	#CCFF00
#CCCCFF	#CCCCCC	#CCCC99	#CCCC66	#CCCC33	#CCCC00
#CC99FF	#CC99CC	#CC9999	#CC9966	#CC9933	#CC9900
#CC66FF	#CC66CC	#CC6699	#CC6666	#CC6633	#CC6600
#CC33FF	#CC33CC	#CC3399	#CC3366	#CC3333	#CC3300
#CC00FF	#CC00CC	#CC0099	#CC0066	#CC0033	#CC0000
#99FFFF	#99FFCC	#99FF99	#99FF66	#99FF33	#99FF00
#99CCFF	#99CCCC	#99CC99	#99CC66	#99CC33	#99CC00
#9999FF	#9999CC	#999999	#999966	#999933	#999900
#9966FF	#9966CC	#996699	#996666	#996633	#996600
#9933FF	#9933CC	#993399	#993366	#993333	#993300
#9900FF	#9900CC	#990099	#990066	#990033	#990000
#66FFFF	#66FFCC	#66FF99	#66FF66	#66FF33	#66FF00
#66CCFF	#66CCCC	#66CC99	#66CC66	#66CC33	#66CC00
#6699FF	#6699CC	#669999	#669966	#669933	#669900
#6666FF	#6666CC	#666699	#666666	#666633	#666600
#6633FF	#6633CC	#663399	#663366	#663333	#663300
#6600FF	#6600CC	#660099	#660066	#660033	#660000
#33FFFF	#33FFCC	#33FF99	#33FF66	#33FF33	#33FF00
#33CCFF	#33CCCC	#33CC99	#33CC66	#33CC33	#33CC00
#3399FF	#3399CC	#339999	#339966	#339933	#339900
#3366FF	#3366CC	#336699	#336666	#336633	#336600
#3333FF	#3333CC	#333399	#333366	#333333	#333300
#3300FF	#3300CC	#330099	#330066	#330033	#330000
#00FFFF	#00FFCC	#00FF99	#00FF66	#00FF33	#00FF00
#00CCFF	#00CCCC	#00CC99	#00CC66	#00CC33	#00CC00
#0099FF	#0099CC	#009999	#009966	#009933	#009900
#0066FF	#0066CC	#006699	#006666	#006633	#006600
#0033FF	#0033CC	#003399	#003366	#003333	#003300
#0000FF	#0000CC	#000099	#000066	#000033	#000000
#465584	#EEF2F7	#3A4F6C	#00D	#434951	#555
#777	#DFE6EF	#345487	#F5F9FD	#3860BB	#BCD0ED
#C2CFDF	#F0F5FA	#D1DCEB	#003	#900	#CCE9FD
#E4EAF2	#4C77B6	#DFE6EF	#EEF2F7