Join The Community

Facebook Page
Premium WordPress Themes

Sabtu, 27 Agustus 2011

Membuat Efek Spoiler pada Komentar di Blog

Posted by tangerang on 23.31. - No comments

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

Posted by tangerang on 19.16. - No comments

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

Posted by tangerang on 07.18. - No comments

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

Posted by tangerang on 00.36. - No comments

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,


Jumat, 26 Agustus 2011

Cara Mengubah Background Kotak Komentar Dengan Gambar

Posted by tangerang on 22.54. - No comments

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

Posted by tangerang on 21.45. - No comments

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

Posted by tangerang on 08.17. - No comments

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