SELAMAT DATANG DI BLOG SEDERHANA: November 2010

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

Membuat Efek Salju Pada Blog

Membuat Efek Salju pada blog

Feb

09.59 | Author: Tips Triks

hiasilah blog anda dengan Memberikan efek salju pada blog, wah cold(dingin)
Dengan membuat salju pada blog anda, mungkin juga orang senang melihat blog
anda dan anda pun mempunyai banyak pengunjung
penasaran bagaimana cara membuatnya:
pertamlogin terlebih dahulu
kedua masuk ke tata letak (layout) >> Element Halamant
ketiga tambah gedget >> html/java Script
keempat copy code berikut:

<script language="JavaScript"
src="http://www.geocities.com/yono_pati/salju01.js">
/***********************************************
* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/
* Please keep this notice intact
***********************************************/
</script>

letakkan codenya di dalam html/javascript
simpan perubahan dan lihat hasilnya

Membuat Blog Lebih Lebar

Feb

08.49 | Author: Tips Triks

Setiap template memiliki ukuran-ukuran tersendiri,jika secara kebetulan blog anda mempunyai ukuran yang sangat lebar atau malah kekecilan,nah saya punya solusinya untuk memperperbesar atau memperkecil suatu blog.
Tapi sebelum melakukan pengediatan saya sarankan untuk membackup template anda.
langsung saja pada tahap pengeditannya
1. login ke blogger
2. masuk ke tata letak (layout) >> Edit html
3. jangan lupa memberi tanda centang pada Expand Widget Template
sebelum melakukan pengeditan perhatikan kode-kode berikut:

Header blog

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

header blog adalah tempat judul blog anda diletakkan

Halaman blog

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

halaman blog adalah lebar dari blog anda

Halaman posting

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */
}

ini adalah tempat posting anda diletakkan

Sidebar blog

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

sidebar ini adalah tempat anda meletakkan gedget

Footer blog

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

4. jika anda ingin mengubah lebar blog anda untuk menjadi kecil atau besar anda dapat mengubah pada text yang berwarna merah sesuai keinginan anda.
5. jika sudah simpan template
6.lihat hasilnya

Blog Keren

Membuat Menu Blog Keren

Mar

10.56 | Author: Tips Triks

Anda pasti bertanya menu blog seperti apa ? bentuknya seperti pada blog saya di sebelah kanan yang berwarna coklat kalau mousenya di dekatkan maka menu blognya akan keluar, mau tau bagaiman cara membuatnya , langsung aja :
1. pastinya login terlebih dahulu
masuk ke tata letak (layout) >> elemen halaman

2. tambah gedget >> html/java script
3. masukkan code berikut:

<script src='http://dhedyfaste.xp3.biz/script/menukeren.js' type='text/javascript'></script>
<script>
YOffset=150;
XOffset=0;
staticYOffset=30;
slideSpeed=20
waitTime=100;
menuBGColor="green";
menuIsStatic="yes";
menuWidth=150;
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="black";
hdrBGColor="#ffffff";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="black";
linkOverBGColor="#000000 ";
linkTarget="_top";
linkAlign="Left";
barBGColor="green";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="red";
barVAlign="center";
barWidth=20; // no quotes!!
barText="CATEGORIES";


// ----- Mulai Edit Menu
ssmItems[0]=["Daftar Menu"] //Header Menu
ssmItems[1]=["Home", "http://dhedie-tips-triks.blogspot.com",""]
ssmItems[2]=["About me", "http://www.blogger.com/profile/16222178000193634246",""]
ssmItems[3]=["My Facebook", "http://facebook.com/siiguembel.elite",""]
ssmItems[4]=["My Twitter", "http://twitter/guembel",""]
ssmItems[5]=["Balikita", "http://balikita.net",""]
ssmItems[6]=["Tips N Triks", "http://dhedie-tips-triks.blogspot.com/first blog",""]

buildMenu();
//----- Selesai Edit Menu
</script>

4. ubahlah text yang berwarna merah dengan link yang akan anda tuju . .
5. simpan perubahan . lihat hasilnya . . .