Blog Teman*

Silahkan Juga Datang di Blog Temen Saya=>Click Here, atau yang lain,??=>Click Here,***Blog Pertama Saya=>Click Here,Blog Kedua Saya=>Click Here,Blog Ketiga Saya=>Click Here,Blog Elektronika=>Click Here

Februari 11, 2011

Buat Gambar Melayang Pada Blog

Diposting oleh The Rizky Anymouse
1. Login ke blogger trus klik "Layout -->> Edit HTML
2. Cari kode ini ]]></b:skin> kalo dah ketemu taru kode berikut ini di atasnya.

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }




3. Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".
4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>

<div id="trik_pojok"><a href="http://linkblogkamu.com">
<img src="http://linkgambarkamu " border="0" /></a></div>



5. Jika kamu pingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.
6. Simpan hasil kerja kamu dan lihat hasilnya.
Di Jumat, Februari 11, 2011 0 komentar

Februari 09, 2011

Kode Ku

Diposting oleh The Rizky Anymouse
http://www.addthis.com/bookmark.php?v=250&amp;username=moshux
Di Rabu, Februari 09, 2011 0 komentar

Buat blog ciluk ba......

Diposting oleh The Rizky Anymouse
 Wis bene, jenenge ciluk ba.....(Buat blog ciluk ba......)
Langsung Saja layout => Edit HTML masukan kode berikut sebelum/diatas kode </head> :

&lt;script&gt;
//&lt;![CDATA[
function expand() {
for(x = 0; x &lt; 50; x++) {
window.moveTo(screen.availWidth * -(x - 50) / 100, screen.availHeight * -(x - 50) / 100);
window.resizeTo(screen.availWidth * x / 50, screen.availHeight * x / 50);
}
window.moveTo(0,0);
window.resizeTo(screen.availWidth, screen.availHeight);
}
expand();
//]]&gt;
&lt;/script&gt;

Selamat Mencoba ......
Di Rabu, Februari 09, 2011 0 komentar

Menempatkan Text Area Di Blog

Diposting oleh The Rizky Anymouse
 Pernah melihat text atau kode-kode HTML yang di simpan dalam kotak, jika tulisannya panjang , sedangkan kotak itu kecil, maka kotak itu akan ada scrollnya Kotak itu disebut Text Area.Apa itu Text Area ?
Text Area adalah tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya digunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh pengunjung.
Untuk membuat text area, silahkan lihat contoh dibawah ini :

Buat Kotak HTML langsung saja:
Layout=>HTML/javasript trus masukna kode berikut:

<textarea cols="20" name="code" rows="4">Ini adalah contoh text area,  tulisan  atau kode html tinggal anda tulis diantara kode ini, silahkan anda copy  paste kan ke blog anda</textarea>

Hasilnya Seperti Berikut:




cols adalah panjang ke samping, anda tinggal merubah nilainya untuk merubah ukuran text area.
rows adalah panjang ke bawah, anda juga tinggal merubah nilainya untuk merubah ukuran text area.
Ganti teks warna merah dengan HTML kamu....

Cara HTML tampil di Blog langsung saja ke : http://centricle.com/tools/html-entities/

Selamat Mencoba.....
Di Rabu, Februari 09, 2011 0 komentar

Februari 06, 2011

Membuat Efek Refresh Pada Blog

Diposting oleh The Rizky Anymouse
Begini , kadangkala saat meloading halaman web, ada sebagian dari isi halaman web yang belum kebuka atau kadangkala tampilannya kurang sempurna alias tidak seutuhnya tampil. nah dengan menggunakan efek refresh biasanya halaman-halaman yang tadinya kurang utuh tampilnya bisa seutuhnya tampil. Atau sebagai contoh jika kita sudah membuka banyak aplikasi di komputer, kita suka me refresh tampilan didekstop supaya kelihatan lebih segar lagi. ya intinya untuk menyegarkan halaman web kita. Pusiing ya membaca keterangan di atas, jika pusing mending langsung saja deh membuat kode untuk efek refresh.

Nah ini dia kodenya, silahkan di copy:




<meta http-equiv="refresh" content="15"/>

Paste diantara tag <head> ...dan... </head>

Sedikit keterangan, angka 15 merupakan waktu untuk merefresh secara otomatis. Dihitung dalam detik. Silahkan ganti sesuai keinginan anda, yang perlu di catat adalah asal jangan terlalu cepat memasukan waktu refresh nya, supaya pengunjung yang sedang membaca tidak kesal dengan adanya efek refresh.


Jika anda punya dua Blog ,Misal blog A dan Blog B, dengan efek refresh ini, anda bisa mengalihkan pengunjung yang datang ke blog A untuk datang ke blog B. Atau istilahnya ReDirect.

Caranya adalah masukan kode ini di Blog A :


<meta http-equiv="refresh" content="0;URL=Isikan URL Blog B anda"/>

Penempatannya sama dengan yang di atas.

Usahakan waktunya di set pada 0 detik, supaya langsung menuju Blog B anda.




%% Semoga Bermanfaat %%
Di Minggu, Februari 06, 2011 0 komentar

Menu Dropdown dengan JavaScript

Diposting oleh The Rizky Anymouse
tentang membuat menu dropdown dengan JavaScript. Pada postingan yang lalu telah di bahas tentang membuat menu dropdown pada template baru, maka pada postingan kali ini akan di bahas mengenai cara pembuatan pada template klasik.

Agar tidak terlalu monoton, pada pembuatan dropdown kali ini akan saya beri sentuhan baru, yaitu pemakaian background yang berbeda. Jika pada postingan yang lalu saya memberikan contoh background banner seperti di bawah ini :







Maka kali ini saya akan memberi contoh banner seperti ini :









Dan contoh menu dropdown yang akan di bahas adalah seperti demo di bawah ini :





Agar tidak terlalu menyita space halaman karena penuh dengan kata-kata yang membingungkan, kita langsung saja pada topik pembahasan. Untuk membuat menu dropdown pada template klasik, silahkan ikuti langkah-langkah berikut ini :

  • Langkah pertama adalah membuat tiga banner untuk background tulisan, banner ini bisa dibuat dengan program design & grafik semisal Adobe photoshop atau Corel Draw ataupun program-program lainya yang sejenis.




  • Langkah kedua adalah mengupload banner-banner yang telah sobat buat, salah satu contoh adalah dengan menggunakan jasa situs www.photobucket.com. Untuk cara menguploadnya saya sudah terangkan, jika belum faham silahkan klik di sini. Saya ambil contoh, banner yang telah saya upload mempunyai URL address sebagai berikut :

    http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif

    http://i162.photobucket.com/albums/t253/rohman24/bannerjava5.gif

    http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif




  • Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog, silahkan ikuti langkah-langkahnya :




    1. Sign in di blogger.com dengan id sobat
    2. Klik menu Template
    3. Klik menu Edit HTML
    4. Copy seluruh kode template lalu paste pada program notepad, ini untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting kode template
    5. Tambahkan kode berikut di bawah kode <head> dan sebelum kode </head>, atau jika ingin lebih mudah simpan di bawah kode <title><$BlogPageTitle$></title> :
      6. <script> var last_expanded = ''; function showHide(id) { var obj = document.getElementById(id); var status = obj.className; if (status == 'hide') { if (last_expanded != '') { var last_obj = document.getElementById(last_expanded); last_obj.className = 'hide'; } obj.className = 'show'; last_expanded = id; } else { obj.className = 'hide'; } } </script>
    6. Masukan kode berikut diatas kode ]]></b:skin>
      7. .raden{ background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif'); text-align:center; width:175px; font-family: georgia, Helvetica, sans-serif; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom: 5px; display:block; text-decoration: none; color: #F6E151; } .ogah{ background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif'); text-align:center; width:175px; font-family: georgia, Helvetica, sans-serif; padding-left:5px; padding-right:5px; padding-top:8px; padding-bottom: 5px; display:block; text-decoration: none; color: ##FAF705; height: 18px; } .ogahniye{ background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif'); text-align:center; width:175px; font-family: georgia, Helvetica, sans-serif; padding-left:5px; padding-right:5px; padding-top:8px; padding-bottom: 5px; display:block; text-decoration: none; color: #0572FA; height: 18px; } .hide{ display: none; } .show{ display: block; } a{cursor: hand}
    7. Masukan kode berikut di sidebar blog sobat, dimana saja sesuai dengan keinginan sobat :
      8. <a class="raden"><font size="5"><b>Navigasi</b></font></a> <a class="ogah" onclick="showHide('ogahku1')">Blog Tutorial</a> <div id="ogahku1" class="hide"> <a href="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html" class="ogahniye">Membuat blog</a> <a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-1.html" class="ogahniye">Membuat link</a> <a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-marquee.html" class="ogahniye">Membuar marquee</a> <a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-icon-yahoo-messenger.html" class="ogahniye">Icon YM</a> </div> <a class="ogah" onclick="showHide('ogahku2')">Aksesori blog</a> <div id="ogahku2" class="hide"> <a href="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html" class="ogahniye">Yahoo ! Emoticons</a> <a href="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html" class="ogahniye">Blogger Emoticons</a> <a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-jam-blog-di-sidebar.html" class="ogahniye">Pasang jam</a> <a href="http://kolom-tutorial.blogspot.com/2007/05/ada-video-di-artikel.html" class="ogahniye">Pasang Video</a> </div> <a class="ogah" onclick="showHide('ogahku3')">My Other Blog</a> <div id="ogahku3" class="hide"> <a href="http://rubrik-elektronik.blogspot.com/" class="ogahniye">Rubrik Elektronik</a> <a href="http://rohman-freeblogtemplate.blogspot.com/" class="ogahniye">Free Blog Template</a> <a href="http://contoh-blog.blogspot.com/" class="ogahniye">Blog Menu D'tree</a> <a href="http://kolom-authorized.blogspot.com/" class="ogahniye">Authorize service</a> </div> <a class="ogah" onclick="showHide('ogahku4')">Links Temanku</a> <div id="ogahku4" class="hide"> <a href="http://free-7.blogspot.com/" target="_blank" class="ogahniye">Free 7</a> <a href="http://jaloee.blogspot.com/" target="_blank" class="ogahniye">Jaloee</a> <a href="http://sundajava.blogspot.com/" target="_blank" class="ogahniye">Liezmaya</a> <a href="http://anangku.blogspot.com/" target="_blank" class="ogahniye">Anang</a> </div>
    8. Klik tombol Preview untuk melihat perubahan yang baru di buat
    9. Jika sudah OK, klik tombol Save Changes Template
    10. Selesai.


    Keterangan kode-kode diatas :

    • kode di bawah ini adalah kode untuk mengaktifkan tombol yg di klik, jadi jangan di rubah! kecuali jika obat sudah familier dengan Javascript dan bisa membuat variasi baru dari kode ini :
      • <script> var last_expanded = ''; function showHide(id) { var obj = document.getElementById(id); var status = obj.className; if (status == 'hide') { if (last_expanded != '') { var last_obj = document.getElementById(last_expanded); last_obj.className = 'hide'; } obj.className = 'show'; last_expanded = id; } else { obj.className = 'hide'; } } </script>
    • Kode-kode di bawah ini, nilainya harus di sesuaikan dengan kondisi blog sobat :



    • .raden
       --> .raden hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk enyertakan dot ( . ) diepan kata yang di buat.

      background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
       --> ini adalah gambar background untuk tulisan yang saya buat yaitu sebuah ombol.

      text-align:center;
       --> kode untuk membuat tulisan berada di tengah, bisa diganti dengan kata Left untuk sebelah kiri, dan right untuk sebelah kanan.

      width:90%;
       --> lebar dari tombol adalah sebesar 90% dari besarnya space sidebar dimana tombol ini di tempatkan, silahkan ganti nilainya dan sesuaikan dengan ukuran blog sobat.

      font-family: georgia, Helvetica, sans-serif;
       --> Font (jenis hurup) yang dipilih adalah jenis georgia, ini bisa diganti dengan jenis huruf lainnya semisal verdana dan lain-lain.

      padding-left:5px;
       --> batas (jarak) tulisan sebesar 5px dari tepi kiri tombol,nilai ini bisa di rubah sesuai keinginan sobat.

      padding-right:5px;
       --> batas (jarak) tulisan sebesar 5px dari tepi kanan tombol,nilai ini bisa di rubah sesuai keinginan sobat.

      padding-top:5px;
       --> batas (jarak) tulisan sebesar 5px dari tepi atas tombol,nilai ini bisa di rubah sesuai keinginan sobat.

      padding-bottom: 5px;
       --> batas (jarak) tulisan sebesar 5px dari tepi bawah tombol,nilai ini bisa di rubah sesuai keinginan sobat.

      display:block;
       --> block berarti ditampilkan,jadi jangan dirubah.

      text-decoration: none;
       --> Tidak ada tek dekorasi. Sebaiknya jangan di rubah.

      color: #F6E151;
       --> Pemilihan warna, bisa dirubah kode warnanya sesuai dengan keinginan sobat.



      .ogah
       --> .ogah hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.



      .ogahniye
       --> .ogahniye lagi-lagi hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.



      .hide
      display: none;
       --> Pendifinisian untuk .hide disembunyikan (tidak tampil).



      .show
      display: block;
       --> Pendifinisian untuk .show ditampilkan.



      a{cursor: hand}
      Agar gambar mouse berubah jadi gambar tangan ketika berada di atas tombol.


    • Kode yang saya berikan diatas memuat links yang saya miliki, jadi links tersebuat harus di rubah dengan links milik sobat.



    Mudah-mudahan keterangan di atas sudah jelas. Selamat mencoba !
    Di Minggu, Februari 06, 2011 1 komentar

    Cara Buat Read More di Blogger Blogspot

    Diposting oleh The Rizky Anymouse
    Cara Buat Read More di Blogger Blogspot dengan Editor Lama. Bagi yang belum memakai Read More Editor Lama direkomendasikan untuk  memakai Read More Editor Baru yang jauh lebih mudah dan simple. Editor Baru lihat tutorialnya di sini.
    Oleh fatihsyuhud.com
    Tips: Cara mencari kode di template blogger.com / blogspot lihat di sini!
    [Update: tutorial ini sudah dilengkapi gambar / screenshot untuk lebih memudahkan) Sudah banyak yg tanya cara buat READ MORE atau Baca Selengkapnya atau Baca Selanjutnya di blogger beta / baru (untuk tutorial buat read more di blogspot / blogger template lama atau classic lihat di sini) dan sudah saya beritahu alamatnya. Tapi tampaknya sebagian agak kesulitan dg tutorial bahasa Inggris. Untuk Anda yg termasuk golongan ini, saya persilahkan mengikuti panduan berikut.
    Ada dua cara untuk membuat read more di blogger / blogspot baru (tanda Blogger Baru adalah di admin memakai layout / tata letak dan page element / elemen halaman).
    Cara Pertama:

    1. Buka template -> Edit HTML -> Kasih tanda tik pada menu "expand widget tempate"
    2. Letakkan kode berikut persis di atasnya kode </head> 

    <style>
<b:if cond='data:blog.pageType == "item"'>
  span.fullpost {display:inline;}
<b:else/>
 span.fullpost {display:none;}
</b:if>
</style>
     
    3. Letakkan kode berikut di bawah kode
     <p><data:post.body/></p> 

    <b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>
     
    4. Klik Simpan. Selesai.
    5. Klik SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Isi kotak kosong tsb dg kode berikut:
    <span class="fullpost">

</span>
     
    Jangan lupa klik simpan pengaturan.
    Di Minggu, Februari 06, 2011 0 komentar

    Cara Mengganti Link Read More Dengan Gambar

    Diposting oleh The Rizky Anymouse
    Berikut ini langkah-langkah Cara mengganti link read more dengan gambar

    Langkah 1
    Login ke akun Blogger milik anda > Tata Letak > Edit HTML. Klik Download Full Template untuk membackup template blog Anda.

    Beri tanda centang pada “Expand widget template” kemudian cari kode berikut ini



    <b:if cond='data:blog.pageType != &quot;item&quot;'&gt;
    <div expr:id='"summary" + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
    <span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE</a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

    Ganti kode yang berwarna merah dengan kode ini
    <a expr:href='data:post.url'><img src=' URL gambar Read More blog Anda '/></a>

    Langkah 2
    Klik Pratinjau. Bagaimana hasilnya? Jika berhasil, klik tombol Simpan.
    Di Minggu, Februari 06, 2011 0 komentar

    Ada Laron di Blogmu!

    Diposting oleh The Rizky Anymouse
    Kamu tahukan apa itu laron? Itu, binatang yang sering mengerumuni lampu itu lho! Sudah tahu kan? Lalu, apa hubungannya dengan blog? Eits, begini kawan, asal kau tahu, dikau bisa memelihara binatang laron tersebut di blogmu. Tapi, berhubung di blog tidak ada lampu yang bisa dikerumuni, maka cursorlah yang menjadi incaran si laron-laron tersebut.

    Ah, daripada saya repot-repot menjelaskan, coba sendiri aja deh, biar tahu gimana jadinya. O ya, sayangnya efek laron ini cuma bisa dilihat bila kamu menggunakan browser Internet Explorer. Tapi tak apalah, sekarang kan masih banyak yang internetan menggunakan IE.
    Caranya sama saja dengan cara memasang efek salju yang telah saya jelaskan sebelumnya, kodenya saja yang agak beda dikit. Ni kodenya:

    -Laron Hijau Cerah


    -Laron Putih
    Di Minggu, Februari 06, 2011 0 komentar
    Langganan: Postingan (Atom)

    ShoutMix chat widget