SELAMAT DATANG DI BLOG SEDERHANA

Selasa, 23 November 2010

Membuat Tag Cloud Comulus pada Blog

Jun

11.18 | Author: Tips Triks

Tag Cloud Comulus ? Pasti anda bertanya apa itu . . .
terus terang saya juga tidak tahu betul apa arti dari tag Cloud tapi bila diartikan satu persatu tag artinya label cloud artinya awan jadi bila di gabungkan artinya adalah label awan,kalau betul syukur, kalau salah jangan di protes, kira-kira bentuknya Seperti gambar di samping dan dapat bergerak-gerak jika mouse anda dekatkan:
lebih detailnya coba anda lihat pada kanan bawah blog saya

Untuk membuatnya cukup gampang,langsung saja

1 Login Blogger
2 Masuk ke Rancangan >> Element Halaman3 Tambah Widget >> HTML/Java Script
4 Masukkan code berikut :

<div class='widget-content'>
<script src='http://dhedyfaste.xp3.biz/blog/swfobject.js' type='text/javascript'></script>
<div id='flashcontent'>Blogumulus by <a href='http://dhedyfaste.xp3.biz/'>Guembel ELite</a>

<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "160", "200", "7", "#000000");
// uncomment next line to enable transparency
//so.addParam("tcolor", "0x800000");
so.addVariable("tcolor", "0x800000");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "250");
so.addVariable("tagcloud", "<tags><a href='http://dhedie-tips-triks.blogspot.com/search/label/All Efek' style='12'>All Efek</a><a href='http://dhedie-tips-triks.blogspot.com/search/label/First Blog' style='12'>Trik Blog</a><a href='http://dhedie-tips-triks.blogspot.com/search/label/Computer' style='12'>Computer</a><a href='http://dhedie-tips-triks.blogspot.com/search/label/Copy Paste' style='12'>Copy Paste</a><a href='http://dhedie-tips-triks.blogspot.com/search/label/Disable' style='12'>Disable</a><a href='http://dhedie-tips-triks.blogspot.com/search/label/HTML' style='12'>HTML</a><a href='http://dhedie-tips-triks.blogspot.com/search/label/Icon calender' style='12'>Icon calender</a><a href='http://dhedie-tips-triks.blogspot.com/search/label/Link' style='12'>Link</a><a href='http://dhedie-tips-triks.blogspot.com/search/label/judul address' style='12'>judul address</a></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script></div></div>

Ket : Teks yang Berwarna merah gantilah sesuai dengan link yang akan anda gunakan
:D

Membuat Code HTML Tampil di Posting

Feb

10.50 | Author: Tips Triks

nah triks kali ini cukup penting ya. .
saat anda bikin posting dan menaruh script untuk ditampilin ke posting, tapi g' nampil
nah saya da caranya ne biar code nya nampil di posting loe .

cara nya gampang bgt loh
Yang pertama yaitu anda harus mengganti karakter perintah dari program HTML dengan notasi tertentu. Karakter-karakter yang sering di gunakan yaitu seperti yang tertera pada tabel di bawah ini :

Karakter	Notasi	Keterangan
<	<	Kurung runcing terbuka
>	>	Kurung runcing tutup
&	&	Tanda Dan
"	"	Tanda petik ganda
±	±	Tanda plus minus
Spasi		Tanda Spasi
©	©	Tanda hak cipta (copyright)
®	®	Tanda terdaftar (Registered)

nah tapi kalo di ganti saru-satu pasti lama bgt kerja nya . .
nah gue dah cara yang cepat ne. ..
lo tinggla encode semua script nya jadi deh ..
caranya :
-masuk ke situs ini www.centricle.com/tools/html-entities/
-kan ada kotak tu, trus anda masukin script yang akan anda encode itu
-trus tinggal encode tekan tombol encode
-copy script nya , tinggal anda paste aja di posting anda
langkah yang paling penting adalah

Selesai

Membuat Gambar Melayang pada Blog

Feb

08.56 | Author: Tips Triks

loe pasti bertanya maksudnya melayang g mn ..!!
begini.. loe lihat kan disebelah kiri atas blog gue !!
nah tu kan ada gambar melayang , nah sekarang kita sekarang lagi membahas itu.
langsung aja ya..

- Login ke blogger trus klik "Layout -->> Edit HTML -Cari kode ini ]]></b:skin>
nah kalo udah ketemu copy code berikut dan taruh diatasnya

#dhedie_triks {
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); }

-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". - Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>

<div id="dhedie_triks">
<a href="http://dhedie-tips-triks.blogspot.com">
<img src="http://kendhin.890m.com/soniclari.gif" border="0" /></a>
</div>

"http://trik-tips.blogspot.com" adalah link. ganti dengan link kamu. "http://kendhin.890m.com/soniclari.gif" adalh lokasi gambarmu. ganti dengan lokasi gambar kamu. -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. -Simpan hasil kerja kamu dan lihat hasilnya.

Membuat Emotion di Kotak Komentar

Feb

14.21 | Author: Tips Triks

Emotion

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>

<script src='http://kendhin.890m.com/emoticon/smile2.js' type='text/javascript'/>

-kemudian cari code berikut

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

-Kalo sudah ketemu letakkan kode2 berikut setelah kode

<b><img border='0' src='http://kendhin.890m.com/emoticon/capek.gif'/>
:f
<img border='0' src='http://kendhin.890m.com/emoticon/bigsmile.gif'/>
:D
<img border='0' src='http://kendhin.890m.com/emoticon/hi.gif'/>
:)
<img border='0' src='http://kendhin.890m.com/emoticon/kagum.gif'/>
;;)
<img border='0' src='http://kendhin.890m.com/emoticon/love.gif'/>
:x
<img border='0' src='http://kendhin.890m.com/emoticon/malu.gif'/>
:$
<img border='0' src='http://kendhin.890m.com/emoticon/marah.gif'/>
x(
<img border='0' src='http://kendhin.890m.com/emoticon/bingung.gif'/>
:?
</b>
<br/>
<b>
<img border='0' src='http://kendhin.890m.com/emoticon/mumet.gif'/>
:@
<img border='0' src='http://kendhin.890m.com/emoticon/muntah.gif'/>
:~
<img border='0' src='http://kendhin.890m.com/emoticon/mentok.gif'/>
:|
<img border='0' src='http://kendhin.890m.com/emoticon/ngakak.gif'/>
:))
<img border='0' src='http://kendhin.890m.com/emoticon/sedih.gif'/>
:(
<img border='0' src='http://kendhin.890m.com/emoticon/senang.gif'/>
:s
<img border='0' src='http://kendhin.890m.com/emoticon/tolong.gif'/>
:((
<img border='0' src='http://kendhin.890m.com/emoticon/wow.gif'/>
:o </b>

-nah kalo udah coba save, dan lihat hasilnya..

Membuat Menu Horizontal

Feb

14.13 | Author: Tips Triks

percantik donkz blog anda dengan membuat Menu seperti ini:

mari kita mulai .....

-login terlebih dahulu Layout --> Edit HTML, trus beri tanda centang pada Expand
Widget Templates
-cari script seperti ini ]]></b:skin>, nah kalo udah ketemu copy code berikut dan letak diatasnya...

/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

-text yang berwarna merah itu adalah warna menu nya... anda bisa mengganti nya..dengan warna yang lain, kalau anda ingin ganti dengan warna merah script nya jadi seprti ini :

background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;

background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;

-nah kalau sudah, anda cari script seperti ini

<div id="content-wrapper">

-kalau sudah ketemu copy script ini dan letakkan di atasnya

<div id="tabshori">
<ul>
<li><a href="http://dhedie-tips-triks.blogspot.com"><span>Home</span></a></li>
<li><a href="http://dhedie-tips-triks.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://dhedie-tips-triks.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://dhedie-tips-triks.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://dhedie-tips-triks.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

-ganti http://dhedie-tips-triks.blogspot.com dengan link akan anda tuju
link tersebut bisa berupa alamat blog anda
-simpan dan lihat hasilny

Membuat read more (baca selengkapnya)

Feb

10.57 | Author: Tips Triks

Sebagaimana kita ketahui bahwa Blogspot tidak menyediakan fasilitas read more atau page break dalam penulisan post. Namun, bukan berarti kita tidak bisa membuatnya sendiri, bahkan kita bisa menggantnya dengan tulisan Baca Selengapnya, Detail, Read More, dsb. Inilah uniknya blogspot (blogger), kita bisa edit template bawaan, yang penting kita mau sedikit bersusah-susah mengedit code HTML.

-sigup terlebih dahulu..
-masuk ke tatletak
-pilih edit html pastinya,
-beri tanda centang pada Expand Template Widget
-cari code berikut <data:post.body/> biar mudah
klo loe pake firefox tekan aja ctrl+f trus masukin code nya..
-trus loe copy kode berikut !! dan letak diatasnya

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More......</a>
</b:if>

-kata yang berwarna merah " read more.."bisa loe ganti dengan kata terserah loe..misalnya Baca selengkapnya....
-trus simpan template,
-kemudian loe masuk pada "pengaturan" or "setting"
-trus pilih tabmenu format
-copy code berikut !!

<span class="fullpost">

</span>

-letak codenya di dalam Template Posting
-simpan setelan
-Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :

<span class="fullpost">

</span>

-Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalaman utama (sebelum tulisan "Redmore") diatas kode ini : sementara sisanya yaitu keseluruhan posting letakkan di antara kode dan 
-finish....

Membuat Efek Api Pada Blog

Membuat Efek Kembang Api pada Blog

Feb

10.44 | Author: Tips Triks

seperti kebiasaan pada tahun baru yang meletuskan kembang api
nah sekarang kembang api bisa ada pada blog anda gimana cara
membuatnya , langsung aja :
1. login dulu
2. masuk ke tata letak >> element halaman
3. tambah gedget >> html/java script
4. masukkan code berikut :

<script src="http://www.geocities.com/yono_pati/kembangapi.js" type="text/javascript">

/***********************************************
* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/
* Please keep this notice intact
***********************************************/
</script>

5. simpan
6. lihat hasilnya, wah sekarang blog anda dihiasi dengan kembang api