Roby RpL | Tutorial Lengkap | Template | Facebook | Software | cheat | DLL |

Selasa, 06 Maret 2012

Widget Burung Twitter dll terbang Di blog

» Blog Code , Tutorial , Widget » Blog Widget Burung Terbang Twitter

Siapa sich... yang ga kenal sama "twitter" ??? Pada kesempatan kali saya mencoba untuk membuat postingan artikel tentang animasi burung terbang twitter. Buat temen - temen yang lagi suka nge-blog widget ini wajib untuk di pasang di blog-nya. Sedikit me-review tentang twitter supaya bagi - bagi ilmunya ga tanggung - tanggung. Itulah nilai plusnya blog ini ga cuma copy - paste doank....hehehe :) jadi promosi dech....maksud saya dari sekian banyak blog yang ngasih informasi tentang widget rata - rata hampir 90% artikelnya copy - paste doank yang fungsinya cuma buat nyari dollar ama popularitas blognya termasuk saya ...hehehe... setidaknya saya masih punya nilai plus-lah. Ok back to topic.

Seperti yang sudah saya singgung "twitter" kalo dalam bahasa burung berarti berkicau dan apabila burung berkicau biasanya kalo dalam spesies yang sama saling bersahutan. Nah twitter.com mengambil konsep yang sama seperti burung dengan membuat sistem jaringan sosial yang bisa saling berkicauan atau sahut - menyahut secara global melalui internet. Hebat kan... kalo twitter mania sudah mempunyai high rank di dunia jagat maya, sekali twitt bisa dapet jutaan follower dan itu berarti uang...uang...uang koq bisa ??? ya bisa lah itulah mengapa saya bilang mengapa blog ini bernilai plus ++ Lebih lengkapnya silakan follow link ini [klik disini].

Twitter merupakan salah satu situs jejaring sosial yang terkenal diantara para blogger dan netter. Widget untuk twitter ada banyak jenisnya dan kebanyakan dalam bentuk icon dan tombol yang bentuknya statis artinya hanya terpaku pada satu lokasi. Sekarang pada kesempatan kali ini saya mencoba memberikan informasi tentang salah satu widget twitter yang dinamis. Kalo widget ini di pasang di blog nya sobat pasti akan menambah daya tarik pengunjung yang sedang blog surfing di blognya sobat.

Widget ini berbasis plugin javascript yang akan menampilkan animasi burung twitter yang sedang terbang dan hinggap di area yang terlihat di monitor. Ketika cursor pengunjung mengenai burung twitter ini maka akan memunculkan teks "Follow Me" dan menampilkan link ke twitter sobat.

Pada postingan ini saya akan memberikan 2 Opsi penempatan animasi burung twitter yaitu sobat boleh menempatkan pada halaman utama saja atau pada semua halaman. Untuk mengetahui lebih lanjut kode xml tentang penempatan halaman pada blogspot silakan sobat baca artikelnya [klik disini]. Seandainya sobat tertarik dengan widget ini tapi belum mempunyai blog dan sobat belum mengerti tentang cara membuat blog silakan sobat baca artikel cara membuat blog di blogspot [klik disini]. Tuh... lengkap kan ulasannya. Kalo sobat suka dengan postingan artikel di MonozCore silakan sobat bookmark blog ini ataupun mem-follow blog ini biar ga lupa alamatnya dan selalu uptodate bila ada postingan terbaru. Oke sekarang kita langsung aja ke TKP (Tempat Kejadian Postingan)

Menampilkan Widget ini Hanya Pada Halaman Utama Saja

Login ke blog anda.
Klik dashboard > design > edit HTML.
Cari potongan kode xml pada template blog sobat (tekan CTRL + F pada keyboard anda untuk menampilkan kotak pencarian di browser sobat untuk mempercepat pencarian).
```
</body>
```
Copy - Paste kode berikut ini tepat di bawah / di atas kode "</body>".

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<!-- Twitter Bird Widget for Blogger edited by MonozCore -->

<script type='text/javascript' src='http://monozcore-project.googlecode.com/files/tripleflap.js'>

</script>

<script type='text/javascript'>

var birdSprite='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHKSrPexkZwQpabCGuG_W61TTWVjP9OWriMTx1oiUvedl3LWVk0hG5H5Xt3TX_MOEgqfic-z0Or14S14es9DADxRL1p4YLoWEhYFNCuqYA1yhUMkQEwNP20HBWOh3vzAa56GEZQ6qlnO0/s1600/birdsprite.png'; var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');

var twitterAccount = &quot;http://twitter.com/TwitterKamu&quot;;

var tweetThisText = &quot; <data:blog.pageTitle/>: <data:blog.url/> &quot;;

tripleflapInit();

</script>

<!-- Twitter Bird Widget for Blogger edited by MonozCore -->

</b:if>

Kode yang berwarna biru berguna untuk pilihan animasi. Apabila sobat ingin mengganti animasi dengan Stickman sobat tinggal mengganti kode yang berwarna biru dengan kode untuk animasi Stickman.
Kode yang berwarna hijau merupakan kode untuk alamat akun twitter sobat. Silakan sobat isi sesuai dengan alamat akun twitter sobat. Caranya : ganti kode yang berwarna hijau dengan twitter.com/sobat yang mana sobat adalah alamat username twitter sobat.
Simpan kemudian lihat hasilnya.

Menampilkan Widget ini Pada Semua Halaman

Login ke blog anda.
Klik dashboard > design > edit HTML.
Cari potongan kode xml pada template blog sobat (tekan CTRL + F pada keyboard anda untuk menampilkan kotak pencarian di browser sobat untuk mempercepat pencarian).
```
</body>
```
Copy - Paste kode berikut ini tepat di bawah / di atas kode "</body>".

<!-- Twitter Bird Widget for Blogger edited by MonozCore -->

<script type='text/javascript' src='http://monozcore-project.googlecode.com/files/tripleflap.js'></script>

<script type='text/javascript'>

var birdSprite='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHKSrPexkZwQpabCGuG_W61TTWVjP9OWriMTx1oiUvedl3LWVk0hG5H5Xt3TX_MOEgqfic-z0Or14S14es9DADxRL1p4YLoWEhYFNCuqYA1yhUMkQEwNP20HBWOh3vzAa56GEZQ6qlnO0/s1600/birdsprite.png';

var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');

var twitterAccount = 'http://twitter.com/TwitterKamu';

var tweetThisText = 'Twitter - Twitter kamu https://twitter.com/TwitterKamu/';

tripleflapInit();</script>

<!-- Twitter Bird Widget for Blogger edited by MonozCore -->

Kode yang berwarna biru berguna untuk pilihan animasi. Apabila sobat ingin mengganti animasi dengan Stickman sobat tinggal mengganti kode yang berwarna biru dengan kode untuk animasi Stickman.
Kode yang berwarna hijau merupakan kode untuk alamat akun twitter sobat. Silakan sobat isi sesuai dengan alamat akun twitter sobat. Caranya : ganti kode yang berwarna hijau dengan twitter.com/sobat yang mana sobat adalah alamat username twitter sobat.
Simpan kemudian lihat hasilnya.

Pilihan Animasi

Burung Twitter

Gunakan Kode :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHKSrPexkZwQpabCGuG_W61TTWVjP9OWriMTx1oiUvedl3LWVk0hG5H5Xt3TX_MOEgqfic-z0Or14S14es9DADxRL1p4YLoWEhYFNCuqYA1yhUMkQEwNP20HBWOh3vzAa56GEZQ6qlnO0/s1600/birdsprite.png
Stickman Twitter

Gunakan Kode :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4oM1NjRm8F8RfmL-2vAM99D80Lp_W1fUceOMVVq0u7bB0aNAtlUQD18W8vT85joYI5b1JyOgzlI_iKLHBJYYG2sjkocVuWmzKDos4uel7gN3f5Bz2yGLClosrh4FUTflgLaU0UvD00rA/s1600/birdsprite_MonozCore_Stickman.png
Star Scream Twitter

Gunakan Kode :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS7QMaxX_KHi8niLYFRw4Ah_sVlUtvxyCMZJTrMMsnh_XpcvM3Y4VS0Ct3GqGK6jmwbIOgxswuLNDOujWXqcb0Yy5OKDwuNIekOPypPISLKCeNwRZarNPAsH9aTnl6y-SadMXKBZJ3YOY/s1600/StarScream.png
Bat Twitter

Gunakan Kode :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMjMJjQe8rssEiMjLFt4PsH76EbC6C1gqhRd4vjcv-l4SZ0Z_fu8WyEgMbN0bnWVE6llpOJKjly21XICBGdn0MmcIZv1EMSAeEVDU15aQlzfMkr-u_2uiWtTNrXzthw0KOnsBl7dCTUHo/s800/MonozCore.blogspot.com_BatTwitter.png
SantaBird Twitter

Gunakan Kode :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfVVh55hY3l3oKiul3apUPnLpQFCgf90aOXzf8fJgX7pJidNswJGUbR_9ljK1IzhgSZzCSnLhMRSr9V9FZnDDsb6ENg-yG5cm4vOW8IIeHW7G1a3deVXM1hywhQLCHeSqIoPfPNDThaAY/s800/MonozCore.blogspot.com_SantaBirdTwitter.png
Dragon Twitter

Gunakan Kode :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfo5Ztl8C7boBZau6ZCdWIIF-XB0I6gp_6pS-WL2sSiF9cAV2FiOnrs50xVpvRdjhQqf22SVZp3JxnRk9k18UXty5kViP6tQOYGllypHugTO4R9smqozCuKzIRJ5aV6PSObKSFp3EGjUY/s800/MonozCore.blogspot.com_Dragon_Twitter.png
DBZ Twitter

Gunakan Kode :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh36z4ECHimH4Ryz2wZgUSdSOhlnlPuyOTWHS6Be4joygnSbW9DJxJ11XBX7rOzmeDQHJl1ok1GWrr78jm9BKbyphNXKNRzL3Rw8vC-Cpln1STcEwUtfTiBTZSXWrx1kr_kQxFR27XuYtk/s800/MonozCore.blogspot.com_DBZ_Twitter.png
Dracula Twitter

Gunakan Kode :
https://lh6.googleusercontent.com/-FPaxJ9tqw5s/Tv8FNwjXEoI/AAAAAAAAAsM/Dl163KLaang/s800/Drakula.png

Kamis, 01 Maret 2012

Cara Mengganti Cursor Blog

Cara Pertama :

Log ini ke akun blogger sobat;
Pilih menu Rancangan » Edit HTML;
Beri tanda centang pada tulisan Expand Template Widget;
Carilah kode yang kurang lebih seperti berikut ini;

body {
    margin:0;
    background:#cccccc;
    color:#000000;
    text-align: center;
    }

a:link {
    color:$linkcolor;
    text-decoration:none;
    }

a:visited {
    color:$visitedlinkcolor;
    text-decoration:none;
    }

a:hover {
    color:#000;
    text-decoration:underline;
    }

Kemudian tambahkan kode cursor: url(http://i54.tinypic.com/97s4z7.png), progress sehingga menjadi seperti ini;

body {
    margin:0;
    background:#cccccc;
    color:#000000;
    text-align: center;
    cursor: url(http://i54.tinypic.com/97s4z7.png), progress;
    }

a:link {
    color:$linkcolor;
    text-decoration:none;
    }

a:visited {
    color:$visitedlinkcolor;
    text-decoration:none;
    }

a:hover {
    color:#000;
    text-decoration:underline;
    cursor: url(http://i52.tinypic.com/2ugifqc.png), progress;
    }

body {

a:hover {

kode warna biru

http://www.totallyfreecursors.com/

http://www.123cursors.com/

http://www.cursors-4u.com/

Kemudian simpan template sobat dan lihat hasilnya.

Cara Kedua :

Log ini ke akun blogger sobat;
Pilih menu Rancangan » Elemen Laman;
Kemudian pilih Tambah Gadget, terserah mau sobat letak dimana;
Pilih HTML/JavaScript;
Tambahkan kode berikut ini;

<style type="text/css">
body {
    cursor: url(http://i54.tinypic.com/97s4z7.png), progress;
    }

a:hover {
    cursor: url(http://i52.tinypic.com/2ugifqc.png), progress;
    }
<style>

Kemudian simpan template sobat dan lihat hasilnya.

Selamat mencoba, semoga berhasil.

Source » http://www.kemang-xp.blogspot.com

Truk mengangkat benda raksaksa

Dibawah ini merupakan gambar - gambar truk yang sedang mengangkut benda - benda raksasa, LuarrrRRR biasa gan...

http://1.bp.blogspot.com/_oQGx3yTv_Ss/THx9-LQiQLI/AAAAAAAAD1g/AwMoQ5g_PTs/s1600/how_they_transport_640_02.jpg

http://4.bp.blogspot.com/_oQGx3yTv_Ss/THx99PQFFXI/AAAAAAAAD1Y/URpbyozo1lo/s1600/how_they_transport_640_03.jpg

http://1.bp.blogspot.com/_oQGx3yTv_Ss/THx976B7B9I/AAAAAAAAD1Q/1C4rUQ8cPx8/s1600/how_they_transport_640_06.jpg

http://4.bp.blogspot.com/_oQGx3yTv_Ss/THx97A1FEkI/AAAAAAAAD1I/7jf-ZWdah7w/s1600/how_they_transport_640_07.jpg

http://2.bp.blogspot.com/_oQGx3yTv_Ss/THx9b3fcpyI/AAAAAAAAD0g/d7Vd5_jB3nY/s1600/how_they_transport_640_21.jpg

Rumah siapa tuh??

http://4.bp.blogspot.com/_oQGx3yTv_Ss/THx9hg0r89I/AAAAAAAAD1A/ogZCJ7ipLJQ/s1600/how_they_transport_640_15.jpg

http://3.bp.blogspot.com/_oQGx3yTv_Ss/THx9ftVWeRI/AAAAAAAAD04/DpvWC7oLKkE/s1600/how_they_transport_640_17.jpg

http://1.bp.blogspot.com/_oQGx3yTv_Ss/THx9e6j7CDI/AAAAAAAAD0w/7i9w_H2HdNE/s1600/how_they_transport_640_18.jpg

http://4.bp.blogspot.com/_oQGx3yTv_Ss/THx9c0aeHkI/AAAAAAAAD0o/1RAUrmpnnPI/s1600/how_they_transport_640_19.jpg

Cara Membuat Tulisan Judul Blog Berjalan

Adapul Cara Membuat Judul Blog Berjalan adalah sebagai berikut:

Login blogger
Masuk pada halaman Edit HTML
Cari kode </head> dan letakkan kode berikut di atas kode </head> tersebut

<script type='text/javascript'>
//<![CDATA[

msg = " ---kemang-xp.blogspot.com ";
msg = " | sekilas facebook | Tutorial Blogger | Software | Komputer --- " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",100);
}
scrollMSG();
//]]>
</script>

Simpan dan liat hasil nya...

NB

Ganti tulisan yang berwarna merah pada kode tersebut dengan titel blog kamu atau tulisan apa saja yang kamu suka.

Cara Membuat Buku Tamu Di Blog

Cara yang paling banyak digunakan adalah membuat buku tamu melayang di blog, tutorialnya baca dibawah ini!

Login pada blogger atau blogspot kamu.
Klik rancangan.
Add gadget atau tambahkan widget dan pilih html/javascript.
Copy dan paste kode berikut:


<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://b.imagehost.org/0611/buku-tamu.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">
masukan kode shoutbox/buku tamu sobat di sini
<br />
<div class="hc-credit">
<span style="float:left">

</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>
Klik simpan.
Selesei.

sumber : http://kemang-xp.blogspot.com/2012/02/cara-membuat-buku-tamu-di-blog.html

Cara Membuat Scroll Pada Arsip Blog

Saya Pernah juga melihat blog temen,, dan saya pengen banget arsipan saya ada scrool nya kayak punya tmen saya.. lalu saya buat dechh,,,,,,,,,,,,
gini cara nya Gan !!

1. Sign In di Bloggermu

2. Klik Menu Rancangan

3. Klik Menu Edit HTML

4. Beri Tanda Centang Pada Kotak "Expand Widget Template"

5. Cari Kode <div id='ArchiveList'> dengan Control F

6. Lalu Tambahkan Kode Berikut di Atasnya:

<div style='overflow:auto; width:ancho; height: 150px;'>

7. Ganti 150px dengan ukuran kesukaanmu

8. Kemudian cari kode dibawah ini:

<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>

9. Lalu ganti dengan kode berikut (anda juga bisa hanya menambahkan kode yang bercetak merah) :

<b:if cond='data:style == "FLAT"'>

<b:include data='data' name='flat'/>

</b:if>

<b:if cond='data:style == "MENU"'>

<b:include data='data' name='menu'/>

</b:if>

</div>

</div></div>

10. Setelah selesai kodenya jadi seperti di bawah ini, lalu save.

<div style='overflow:auto; width:ancho; height:150px;'>

<div id='ArchiveList'>

<div expr:id='data:widget.instanceId + "_ArchiveList"'>

<b:if cond='data:style == "HIERARCHY"'>

<b:include data='data' name='interval'/>

</b:if>

<b:if cond='data:style == "FLAT"'>

<b:include data='data' name='flat'/>

</b:if>

<b:if cond='data:style == "MENU"'>

<b:include data='data' name='menu'/>

</b:if>

</div>

</div></div>

<b:include name='quickedit'/>

Kemudian Anda Simpan Dech... .dan Lihat Hasil Nya. . .Taraaaaa