Archive for the ‘Blog Trick and Wiget’ Category

Kali ini saya berkongsi sesuatu yang agak best iaitu menampilkan Chatbox anda dibahagian luar dan apabila Mouse anda digerakkan dan di klik ke gambar questbox dan Chatbox Shoutmix anda akan keluar . Sila lihat live demo contoh di sini. dan caranya tidaklah sebegitu rumit.



Ok, anda semua telah melihat live demo bukan? dan sekarang kita akan cuba buat sendiri dan sila ikuti langkah – langkah dibawah:

Langkah Pertama:

Pergi ke bahagian Dashboard – > Layout – > Page Element – > Add a Gadget

Click Add a Gadget dan pilih Html / Javascripts.


Langkah Kedua:

Copy dan edit kan code yang berwarna KUNING sahaja dengan memasukkan code – code Shoutmix anda.

<style type=”text/css”> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:125px; width:40px; float:left; cursor:pointer; background:url(‘http://i683.photobucket.com/albums/vv193/vebyo/Guest3.gif&#8217;) no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #d9e3ff; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#ffffff; padding:10px; } </style> <script type=”text/javascript”> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById(“hitsukeFX”); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById(“hitsukeFX”); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + “px”; if(x0!=xf){setTimeout(“movehitsukeFX(“+x+”, “+xf+”)”, 10);} } </script> <div id=”hitsukeFX”> <div class=”hitsukeFXtab” onclick=”showHidehitsukeFX()”> </div> <div class=”hitsukeFXcontent”> <!– letak kod shoutmix Disini –> KOD KOD KOD KOD SHOUTMIX DISINI!<div style=”text-align: right;”> <a href=”http://www.pengerindu.com/2009/11/menampilkan-chatbox-di-depan-in-out.html”>Grab it</a> <a href=”javascript:showHidehitsukeFX()”> [close] </a> </div> </div> </div> <script type=”text/javascript”> var hitsukeFX = document.getElementById(“hitsukeFX”); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + “px”; </script>


Selepas memasukkan code shoutmix anda kemudia tekan SAVE.

Langkah Ketiga:

Dan anda telah siap membuat , dan click View Blog anda .

Javascript disumbangkan oleh hitsuke dan diadaptasikan oleh Mr J. Sila tinggalkan komen anda sekiranya bermasalah.

Salam ceria ,
Mr. J
http://www.pengeRindu.com
Subscribe untuk mendapatkan 10 ebook Percuma.
Get Top Commenter Awards?

Ingin artikel anda disiarkan sini? senang sahaja Emailkan” sahaja kepada kami.

Translate This Blog : English * Chinese * German * Japan * Korea * Arabic * Filipino * Thai * Hindi *

Bookmark and Share

Dapatkan Artikel terbaru dan 10 ebook Percuma daripada www.pengeRindu.com serta artikel terbaru terus ke email anda. Sila masukkan email anda dibawah:

Penghantaran ditaja oleh FeedBurner

Program SMS Prepaid Terunggul Dari MYeCASH

Advertisements
Mr J minta tolong pengunjung http://www.pengeRindu.com sila layari mana – mana Iklan Yang keluar daripada Nuffnang ok. Thank dan anda cukup Sporting~

Senarai Kategori yang ada dalam http://www.pengeRindu.com ini.
Sila klik pada kategori yang dicari:

Last Update November 2009.

Salam ceria ,
Mr. J
http://www.pengeRindu.com
Subscribe untuk mendapatkan 10 ebook Percuma.

Translate This Blog : English * Chinese * German * Japan * Korea * Arabic * Filipino * Thai * Hindi *

Bookmark and Share Jom! Tonton Tv Online: [Tv1] [Tv2] [Tv3] @ Belajar Bahasa Iban?

Dapatkan Artikel terbaru dan 10 ebook Percuma daripada www.pengeRindu.com serta artikel terbaru terus ke email anda. Sila masukkan email anda dibawah:

Penghantaran ditaja oleh FeedBurner

Jom kita main – main dengan Html pernah tak tengok kod untuk ayat bergerak ? . So kali ini Mr J bagitau untuk Gambar dan juga ayat pula bergerak , dengan Html ini kita mampu memeriahkan malah mencantikkan Myspace , Friendster dan tentu sekali para pengguna blogspot.com ,

This are the codes to make your contents move:

Of course, you can modify the direction…
And to modify the speed you can add the scrollamount after the direction, like this:

1 is the slower version, and 20 is the maximum.

  • How to adding Image ?

*Untuk meletakkan Gambar anda perlu gantikan TEXT kepada kod ini : <img src=”http://img197.imageshack.us/img197/3923/pengerindukecik.gif” />

To ADD an Image u Have to add this Code between the TEXT</marquee>

<img src=”http://img197.imageshack.us/img197/3923/pengerindukecik.gif” />

Host your picture at free hosting like Photobucket.com
Change the Yellow Url to your own Picture .

Example below:

<marquee behavior=”scroll” direction=”left”><img src=”http://img197.imageshack.us/img197/3923/pengerindukecik.gif&#8221; /></marquee>

#############################################################

  • Continuous scrolling, from the left:

TEXT or IMAGE

<marquee behavior=”scroll” direction=”left”>TEXT</marquee>

  • Text bouncing:

TEXT or IMAGE

<marquee behavior=”alternate”>TEXT</marquee>

  • Scrolling upwards:

TEXT or IMAGE

<marquee behavior=”scroll” direction=”up”>TEXT</marquee>

  • Stop the mouvement whit the mouse (click and hold the mouse down!):

TEXT or IMAGE

<marquee behavior=”scroll” direction=”left” onmousedown=”this.stop();” onmouseup=”this.start();”>TEXT</marquee>

  • Stop the mouvement with the mouse (but without clicking!):

TEXT or IMAGE

<marquee behavior=”scroll” direction=”left” onmouseover=”this.stop();” onmouseout=”this.start();”>TEXT</marquee>

So, Selamat mencuba semoga trick kali ini sedikit sebanyak dapat membantu anda mencantikkan Blog atau Profile anda..

Salam ceria ,
Mr. J
http://www.pengeRindu.com
Subscribe untuk mendapatkan 10 ebook Percuma.
Get Top Commenter Awards?

Ingin artikel anda disiarkan sini? senang sahaja Emailkan” sahaja kepada kami.

Translate This Blog : English * Chinese * German * Japan * Korea * Arabic * Filipino * Thai * Hindi *

Bookmark and Share

Dapatkan Artikel terbaru dan 10 ebook Percuma daripada www.pengeRindu.com serta artikel terbaru terus ke email anda. Sila masukkan email anda dibawah:

Penghantaran ditaja oleh FeedBurner

Program SMS Prepaid Terunggul Dari MYeCASH

Mengalami masalah bagaimana nak persaizkan gambar mengikut saiz kehendak sendiri?

  • Apa yang anda perlu tukar adalah Nombor yang diwarnakan kuning. “width” bermaksud lebar dan “height” adalah ketinggian .
  • Ayat yang berwarna biru adalah dimana gambar tersebut dihostkan.
  • Yang berwarna putih pula anda taipkan apa2 .

Top Commenter @ www.pengerindu.com

<a href=”http://www.pengerindu.com/&#8221; target=”_blank”><img style=”width: 234px; height: 170px;” src=”http://img39.imageshack.us/img39/6696/topcommenter.gif” alt=”Top Commenter @ http://www.pengerindu.com” border=”0″ /></a>

Top Commenter @ www.pengerindu.com

<a href=”http://www.pengerindu.com/&#8221; target=”_blank”><img style=”width: 356px; height: 258px;” src=”http://img39.imageshack.us/img39/6696/topcommenter.gif&#8221; alt=”Top Commenter @ http://www.pengerindu.com&#8221; border=”0″ /></a>

Jika ingin membuat gambar berada di tengah sila tambahkan code <center> dan diakhiri dengan </center>

Seperti contoh:

<center><a href=”http://www.pengerindu.com/&#8221; target=”_blank”><img style=”width: 234px; height: 170px;” src=”http://img39.imageshack.us/img39/6696/topcommenter.gif&#8221; alt=”Top Commenter @ http://www.pengerindu.com&#8221; border=”0″ /></a></center>

Top Commenter @ www.pengerindu.com

Mudah bukan ? nak dapatkan award Top Commenter daripada Mr J ? seperti gambar anda diletakkan dalam gambar beranimasi ? caranya? tingalkan komen anda di mana – mana posting yang ada di pengeRindu.com .

Salam ceria ,
Mr. J
http://www.pengeRindu.com
Subscribe untuk mendapatkan 10 ebook Percuma.
Get Top Commenter Awards?

Ingin artikel anda disiarkan sini? senang sahaja Emailkan” sahaja kepada kami.

Bookmark and Share

Dapatkan Artikel terbaru dan 10 ebook Percuma daripada www.pengeRindu.com serta artikel terbaru terus ke email anda. Sila masukkan email anda dibawah:

Penghantaran ditaja oleh FeedBurner

Program SMS Prepaid Terunggul Dari MYeCASH

For Non Malaysian Please click on Translation to English. Thank you.

1st , i nak u all tengok kat blogspot i satu lagi , siap separuh sahaja. lihat di sini.

Mungkin ramai yang pernah mendengar wix.com di mana satu platform free yang dapat menbuat site atau badget secara online dan senang tetapi malangnya ramai Tidak Tahu bahawa ia dapat diembebkan ke dalam Theme Blogspot TETAPI anda tidak akan dapat membuat posting , kerana site tersebut adalah sesuatu “image kaku” dan ia bukan BLOG , tapi cantik kan . Sesuai untuk anda membuat site “intro” anda.

Di Forum communiti Wix.com mereka menemui jalan buntu bagaimana dan macamana hendak meletakkan di dalam HTML untuk blogspot.com .

Hi, I just made my wix page but I cannot get it embedded to my blogger page. When I opt to have WIX post it, it just makes a new blog post, it doesn’t change anything about the appearance of my blog. So my next thought was, ok, I will just edit the html for my blog…..but well I have limited knowledge in that department. I’m a copier and paster! Can someone tell me where on earth do I paste the WIX code into my blogger html? I’ve tried pasting it in multiple places but have no luck. Either blogger tells me something like this…
Your template could not be parsed as it is not well-formed.
Please make sure all XML elements are closed properly.
XML error message: The markup in the document following the root element must be well-formed.
or there is no change in appearance at all.
Please, any help will be greatly appreciated! I worked really hard on my WIX page, if I can’t use it with my blogger, it’s kind of a waste of time to me!

Ok Lets Break The CODE!!! . makesure your flash player is up to date.

1st. Open http://www.wix.com/ and register – Login

2. After Login find “create” tab.

3. Choose a Template : example i choose “ART” – Website . a


4. Click Edit .


5. A new window will Appear , what you have to do is wait until the loading finish.


6. After finish Loading it will show like below:

What you waiting for? go a edit , add or manage , Show off your creative! hehe

I not so good in editing… hehehheeh.

7. After Finish Edit Click Save and Publish!

Save


Click WiX site

Click Best Fit – Next

Click Publish . Remember your Wix URL
and my WiX url is http://www.wix.com/jackyjuing/Pengerinducom

Ok Ur WiX Flash Theme is DONE!
now we will go to the

setting at Blogspot.com
or register / log in at Blogspot.com

Create a new Blog – click Layout – Edit HTML

1. you have to ” Revert to Classic Template ” .

Delete any code in inside and makesure is EMPTY.
2. Copy This Code below and edit.

<html>
<title>PengeRindu Introduction</title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
<meta name=”description” content=”all about rindu pengerindu”>
<meta name=”keywords” content=”pengerindu”>
<meta name=”distribution” content=”global”>
<meta name=”revisit” content=”10 days”>
<meta name=”revisit-after” content=”10 days”>
<meta name=”resource-type” content=”document”>
<meta name=”audience” content=”all”>
<meta NAME=”rating” content=”General”>
<meta name=”robots” content=”all”>
<meta name=”robots” content=”index,follow”>
<link rel=”shortcut icon” href=”http://i106.photobucket.com/albums/m242/Minister_wo_Portfolio/crest.gif” >
<script language=javascript>if (top.frames.length > 0) top.location.replace(self.location);</script>

<frameset rows=”100%” frameborder=0 framespacing=0>
<frame src=http://www.wix.com/jackyjuing/Pengerinducom frameborder=0 marginwidth=0 marginheight=0>
</frameset>

<noframes>

<body>

all about

The World

<a href=http://www.pengerindu.com>http://www.pengerindu.com</a>

</body>

</noframes>
</html>

“Change the Yellow url with ur Own” and Change the Pink Colour Url with you own Favicon Pic”

3. Copy and Paste Into your Blogspot HTML.

The Most Important is replace to your Own Wix URL .

CLICK SAVE
done.

Last: View Your Theme at Blogspot.com and here is Mine. http://pengerindu1.blogspot.com/

Try yourself and don’t forget give some comment and Follow or sucribe my blog. Thank.

Iklhas ,
Mr. J @ Bungai Pengrindu
www.pengerindu.com
“EmailkanArtikel anda ke pengeRindu.com

Bookmark and Share

pengeRindu Fan Club

Dapatkan Artikel terbaru dan 10 ebook Percuma daripada www.pengeRindu.com serta artikel terbaru terus ke email anda. Sila masukkan email anda dibawah:

Penghantaran ditaja oleh FeedBurner

Program SMS Prepaid Terunggul Dari MYeCASH

Add to Google Reader or HomepageSubscribe in NewsGator OnlineAdd to My AOLAdd to netvibesSubscribe in BloglinesAdd to The Free DictionaryAdd to PlusmoSubscribe in NewsAlloyAdd to Excite MIXAdd to netomat HubAdd to fwickiAdd to WebwagAdd to Pageflakes

Ok hari ini i nak kongsi serba sedikit ilmu dalam blogspot ini , iaitu macamana nak buat Scroll box dalam blogspot , kekadang posting atau pun gambar yang panjang seperti gambar dibawah dimana saya memuatkan scroll box untuk kelihatan kemas sedikit.

https://i2.wp.com/img27.imageshack.us/img27/8142/oool.jpg

Sila copy kan code dibawah sepeti contoh:

<div style=”width:426px;height:100px;overflow:auto;
border-width:2px;border-color:000000;border-style:solid;”>
Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.
</div>

dan ia akan menjadi seperti ini:

Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.Your content in here.
Sila ubah no yang berwarna kuning untuk saiz yang dikehendaki.

Bagaimana? adakah anda telah mencuba untuk text yang bergerak ke atas dah kebawah? kalau belum sila baca disini.


Iklhas ,
Mr. J @ Bungai Pengrindu
www.pengerindu.com
“EmailkanArtikel anda ke pengeRindu.com

did’t understand my blog in Malay Language? just switch it on your language here.

Bookmark and Share

pengeRindu Fan Club

Dapatkan Artikel terbaru dan 10 ebook Percuma daripada www.pengeRindu.com serta artikel terbaru terus ke email anda. Sila masukkan email anda dibawah:

Penghantaran ditaja oleh FeedBurner

Program SMS Prepaid Terunggul Dari MYeCASH

Add to Google Reader or HomepageSubscribe in NewsGator OnlineAdd to My AOLAdd to netvibesSubscribe in BloglinesAdd to The Free DictionaryAdd to PlusmoSubscribe in NewsAlloyAdd to Excite MIXAdd to netomat HubAdd to fwickiAdd to WebwagAdd to Pageflakes


Salam Sejartera semua,

wah, blogspot ni makin lama makin best , sekarang sempena birthday Blogspot @ Blogger ini telah dilancarkan satu function latest editor , tak macam dahulu . Dulu ingat tak , blogspot ni tak ada undo / redo sekarang dah ada , dan ada automatik Read more hanya dengan 1 klik sahaja dan tak payah ler susah – susah nak add Html untuk buat Read More macam kat posting saya dulu dan macam  – macam yang terbaru . ok, Mr J ingat nak posting sedikit screen shot dan lain – lain tapi belum install pix editor plak . jadi.
untuk update setting anda kepada terbaru sila layari http://bloggerindraft.blogspot.com/2009/09/you-might-as-well-jump.html#comments

Iklhas ,
Mr. J @ Bungai Pengrindu
www.pengerindu.com

Bookmark and Share

Dapatkan Artikel terbaru dan 10 ebook Percuma daripada www.pengeRindu.com serta artikel terbaru terus ke email anda. Sila masukkan email anda dibawah:

Penghantaran ditaja oleh FeedBurner
Program SMS Prepaid Terunggul Dari MYeCASH
Add to Google Reader or HomepageSubscribe in NewsGator OnlineAdd to My AOLAdd to netvibesSubscribe in BloglinesAdd to The Free DictionaryAdd to PlusmoSubscribe in NewsAlloyAdd to Excite MIXAdd to netomat HubAdd to fwickiAdd to WebwagAdd to Pageflakes