Janu Prioka: Juni 2009

Jumat, 12 Juni 2009

Memberi Emoticons yahoo Di Kotak Komen

Bagi sobat yang ingin kotak komentar nya dipenuhi oleh Emoticons sekarang aku akan kasih tahu cara memberi emoticons di kotak komentar blogger. oya... trik kali ini juga bisa sobat lihat di blognya Mas Kendhin dan aku akan berikan emoticans yahoo. untuk caranya perhatikan berikut ini:
1. Contoh emoticons yahoo

:)):)];));;):):(=((:|~x(:-tx(
:D;):p:((:X:-o:-/:-*8-}b-(:-L=))
2. login ke blogger, pilih "Layout (Tataletak) --> Edit HTML "
2. Beri tanda centang pada kotak "expand widget template"
3. Kemudian taruh kode beriktu sebelu </body>

Membuat Menu Slide Show Tab View

Apakah anda pernah mengunjungi situs http://kompas.com? salah satu situs surat kabar di indonesia yang cukup terkenal. Coba anda perhatikan ke seblah kiri atas situs tersebut, di sana terdapat menu tab yang biasa di sebut dengan “Tab View” karena jika tabnya di klik akan berpindah ke isi menu tersebut (coba buktikan, klik saja tab nya), namun sedikit berbeda dari biasanya karena menu tersebut bisa menampilkan isi dari menu tersebut secara bergantian atau bahasa yang biasa di gunakan adalah “Slide Show”. Dapat di ambil kesimpulan bahwa menu tersebut mempunyai dua fungi yaitu sebagai “Tab View” serta “Slide Show”.

Sedikit tertarik terhadap menu tersebut agar bisa di implementasikan pada template blogger, dan akhirnya ternyata bisa juga. Untuk melihat contoh, silahkan anda kunjungi http://magazine-1.blogspot.com, silahkan perhatikan ke pojok kiri atas, di sana ada menu yang mirip dengan yang di situs kompas bukan (sengaja tidak di buat sama persis).

Bagi anda yang tertarik membuat Menu Slide Show Tab View,

silahkan ikuti langkah-langkah berikut :

Langkah #1

1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4.

Copy kode di bawah ini, lalu paste persis di atas kode ]]></b:skin>

.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/

}

.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}

.indentmenu ul li a:hover{
background:#ddd;
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
}

.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}
5. Download dulu script ini, copy lalu paste persis di atas kode </head>
6. Klik tombol SIMPAN TEMPLATE.
7. Langkah pertama selesai. Silahkan istirahat dulu, minum Coffee khe, minum teh khe atau apa gitu biar tenang dulu Big Grin

Jika sudah santai, ayo kita lanjut ke langkah berikutnya.

Langkah #2

1. Klik tab Elemen Halaman.
2. Klik Tambah Gadget

Klik tombol plus (+) Untuk HTML/JavaScript.
Copy lalu paste kode berikut pada kolom yang tersedia :
```
     
```

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">

<div id="pettabs" class="indentmenu">

<ul>
<li><a href="#" class="selected" rel="tab1">1</a></li>
<li><a href="#" rel="tab2">2</a></li>
<li><a href="#" rel="tab3">3</a></li>
<li><a href="#" rel="tab4">4</a></li>

</ul>
<br style="clear: left"/>
</div>

<div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em">

<div id="tab1" class="tabcontent">
<a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="obamabush" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx07LPfWEW1jaOWQfGJjxtKzW8DZJbcYF0741rSY3XrO_DJsEAtjtxfGZG8MzXbFQWZIuRycQ1Ude8ivY7xsnvWKdq3vQ7_YaPETAOmMUgCZ8TMG4nbsjF5Fgd3WbkZZ9nIbtfEUPT9Fo/?imgmax=800" height="152" title="obamabush"/></a>

<p><h3><a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">Obama Will Change Busf Policy</a></h3></p>
U.S. President Barack Obama will change several numbers of controversial policies by President George W. Bush, including the restriction of the parent embryo cell research [...]
</div>

<div id="tab2" class="tabcontent">
<a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQtxUueJz5cZElUo2ehBmWg6o2yp8B-jbJT6eHWxgQ5mNpSCpRolkw8_000-1uTtKgzKHOgoKkUO3uKS272CJ_VsyVg9HPFk4XNkY__wJGDzq0p_OexpLuYn74ohndIgwqQUs8vbafVkE/?imgmax=800" height="152" title="beyone"/></a>
<p><h3><a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">Beyone Will Never Sell Her Wedding Photo</a></h3></p>

Beyonce said, she will never consider to sells her wedding photo with Jay-Z to a celebrity magazine that offering a large amount of money as rewards, even she wonder with the amount of money that offered to her [...]
</div>

<div id="tab3" class="tabcontent">
<a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr1e8nCMRf_kZXyXQZ16JLm9n9MDYunYYZ-uKXIhmg8XLxjpY7nayGL30z_8semmOOFd7OdAgcTgxsG0KLiqI0MHjpf9Wdkt1v-jnIT6hARogryoTdHHaoRF9sPL_Q17hY81yUdI57Eb8/?imgmax=800" height="152" title="Guns N 'Roses"/></a>
<p><h3><a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">Guns N 'Roses Will Back</a></h3></p>

After 15 years not releasing album, the group rock Guns N ' Roses will launch a new album in the United States on 23 November. The band's latest album is "The Spaghetti Incident", released in 1993 [...]
</div>

<div id="tab4" class="tabcontent">
<a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXfVpRvYdDZ_RinGQo7zVXTtOfFtpvC9P_9IzZfkhxtt9Al4j7ba-1quFNxzuLr6TuIZCEWDDk4h_tv0y70_82bbmhpMTlV9Nmq5A57YQHicPKkNm02iTg2hWERDVgKsjxIGt5adDljPU/?imgmax=800" height="152" title="ipod"/></a>
<p><h3><a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">Ipod Can Make Your ear Buzz</a></h3></p>

Music is one way to wake the spirit, to create happy life, but what happens if the music makes the ears buzz? of course, not the music that makes the ear 'buzzy',[...]
</div> </div>

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)

</script>
5. Klik tombol SIMPAN TEMPLATE.
6. Selesai. Silahkan lihat hasilnya.

Kode-kode di atas tentunya tidak mutlak harus seperti yang Kang Rohman tulis, namun anda bisa memodifikasinya agar sesuai dengan keinginan atau[un sesuai dengan template yang anda pakai.

Sedikit keterangan agar lebih memudahkan anda dalam memodifikasi kode ini.

Pada langkah pertama, ada deretan kode CSS, kode tersebut bisa anda kreasikan sendiri agar menghasilkan bentuk deretan tab yang cantik.

Selamat mencoba

Membuat Menu Slide Show Tab View

Klik tombol plus (+) Untuk HTML/JavaScript.
Copy lalu paste kode berikut pada kolom yang tersedia :
```
      
```

Rabu, 10 Juni 2009

Membuat Efek Pelangi pada Link

nah triks kali ini cukup keren buat mempercantik blog anda penasaran gi mana sih efek linknya nah loe bisa mendekatkan mause pada judul posting saya, lihat kan judulnya jadi warna-warni.
membuatnya cukup mudah ya, langkah pertama

1. login terlebih dahulu
2. masuk ke tata letak(layout)>> edit HTML
3. beri tanda centang pada Expand Template Widget
4. cari code <body>
5. copy code berikut dan letakkan setelah code <body>

Membuat Emotion Cat di Kotak Komentar

Contoh Emotion :

:f :D:) ;;) :x :$
:?x( :@ :~:|:))
:o :(:s:((

gini cara membuatnya... -pertama login dahulu, trus ke "Layout (Tataletak) --> Edit HTML " -Beri tanda centang pada kotak "expand widget template" -Lalu letakkan script berikut diatas kode </body>

Jumat, 12 Juni 2009

Memberi Emoticons yahoo Di Kotak Komen

Membuat Menu Slide Show Tab View

Membuat Menu Slide Show Tab View

Rabu, 10 Juni 2009

Membuat Efek Pelangi pada Link

Membuat Emotion Cat di Kotak Komentar

Latest Grunge

My Kumpulbloger.com

My Album

Ngobrol yuks

tab 1 - Click >> Edit

tab 3 - Click >> Edit

tab 2 - Click >> Edit

Tab 5 - Click >> Edit

sdfsd