Cara Membuat / Memasang Burung Twitter Terbang di Blog

Cara Membuat Burung Twitter Terbang di Blog - Lebih suka mana?? ngetweet apa ngeblog?? kalo ane sih kedua - duanya.. Kali ini ane akan kasih tahu bagaimana cara memasang burung twitter terbang atau melayang - layang atau mondar - mandir di blog sobat. Bagi sobat yang tertarik untuk memasang burung twitter terbang atau melayang - layang ini, silahkan ikut tutorial berikut .

1. Log in ke akun blog sobat.

2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> Pilih HTML/Javascript

Masukkan Script berikut ke dalam kotak yang telah di sediakan.

<!-- floating twitter Bird -->

<script type="text/javascript" src="http://tateluproject.googlecode.com/files/tripleflap.js"></script>

<script type="text/javascript">

var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Mh18Pg9YnDtjQQP-76ODa0aLj4v9fDsLPIQB_ERTXc0D_0yPRrSgVr6aH2bDxeyoiV_ps8NUFy4GeZP98QqxBR2gKehKq4raT7UST8EEAEviQtWCU02ZkfDFB8-u9TWw-lNsSfLTD_E/s1600/burung+twitter+terbang.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/deactivatednumi";

var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";

tripleflapInit();

</script>

3. Klik save / simpan.

Tambahan:

Ganti tulisan yang berwarna merah dengan warna icon twitter kesukaan sobat. 

Warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwypfOJJzpgfChoeeYKqI9jbjjZIaAOL4M__oUcZZnsmo9AUBZDzFqGxNC3cvcgeY3lCDCtEotJRURRnyuCgHKhYxRCXkmHdfJHKHHWbDbmoltBnriJXfDfuv6bvoWq7ihy5qYPSqXTlE/s1600/yellow+bird.png

Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-ry-tAJStGoulfSwmJIRG64jDd1xz_cblLBVFCrbGaYVRZHSFiWhp2db0cVhdA4r2FeU2opyI6CXsrfq47upYXINQSYLOx3WRZ7fUkmcGF2ZOh9FqW5emuTkRtzzNrpgujsYioVSKgh8/s1600/black+bird.png

Warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9XKPfSMg4W77aILxnQq-R_bExYEqaa_ZhDhCKRKPuxYpkJ7w2ttZdJWJLyXNcYvk0TOqqkKkjLVKkQlviOTdZEgXhRMs4CXbTn07YTkNdf_5z1R0yh-OpzzljQna6tp6m0EOiBEarNTg/s1600/Blue+bird.png

Warna Coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheVL5f9ulYwSy5aSkJn07Ub4uK9qy56TknR2qZzVDnkplzLMHKAJXBtJxJGiszJ4Slad9ZvcOntvKhGLWmySp3phKxrssEJlt_3NiBeNTaPW2Qe2nsjwHF81tSeDlHO7OSauY8XMZbe80/s1600/brown+bird.png

Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_KC2e7As18HX4Sr41DY8A98sPwYc9VZ1hgWS6ei9ZMjMucBQ2so8Bn4m5eBl0oVcUOUCDkx-LMjHsRQ3_UmLIsbduBRKj4-dg9HZUhxDChyvqgEnmY1wtsvT-8SBc8vai-Tv2cuztr40/s1600/Green+bird.png

Warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0bB05lxE7ZoUhBLO1UBeJ-WDVzCRS1DrdROYWVpXK3UWtgsnlzeuwG-h2whuR-UwWFiADbddNlNm5F6KZ9hO3wfV_ji-CvCkYoufyGPhB1w3puF_dT6EithDAN_NNAdtoM21yQnhIg0s/s1600/purple+bird.png

Warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivGt3tnWq5go9pT13qYLz3rn6unmTEBvFT-UCNk2KGGs27ls9JFi50i-T5u6RLnLyicDfbHLD2ehVMGR-t4rBTYgKfT5fHN_BXuVmjg8ZRVyD112241nbWoAuSy3nVIgGzr3AQZdx1Xs0/s1600/white+bird.png

Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpJZLo5hZSTz9ocA_NNAUEjPXHC5-esAA-YaaH8pjCCKq6GnAeol1wYV2UpRG-gWbPCJhwfhlfkzrnKkjISEyFkHNG4sqmGcyD-CfQM-aN_v9A-rU5qGnz7Huhuat_GpglSg9GP9NPf_Q/s1600/red+bird.png

Ganti Tulisan yang berwarna biru dengan username twitter sobat. 

Semoga membantu!!

Read More..

Read More

Cara Memasang Slideshows Postingan di Blog

Cara Memasang Slideshows Postingan di Blog 

Sebenarnya saya sebelumnya sudah memposting mengenai cara memasang slideshow ini di permathic blog. namun belakangan script slideshownya tidak berfungsi lagi yang mungkin dikarenakan url pada google code ada yang tidak bisa di akses lagi. hal ini membuat saya tertantang untuk mencoba memperbaikinya. saya utak  atik sampai cenat cenut scriptnya, akhirnya saya mendapat script kode slideshow yang lebih simple. dengan tampilan yang tidak jauh berbeda dengan sebelumnya. Nah,, biar ada tidak penasaran , berikut langkah2nya.

1. Login Ke Blog Anda

2. Pilih Rancangan (untuk tampilan blogger klasik) atau Pilih Tata Letak (untuk tampilan blogger terbaru)

3. Kemudian  Klik Tambah Gadget

4. Pilih HTML/javascript

5. Kemudian Copy Kode di bawah ini, kemudian pastekan di HTML/javascript tadi. kemudian simpan/save.

<style type="text/css">

#rp_plus_img{height:385px;overflow:hidden;border:0;padding:6px 10px 14px 5px;background: transparant;}

#rp_plus_img ul{list-style-type:none;margin:0;padding:0}

#rp_plus_img li{border:solid 1px #585858; margin:0; padding:0; list-style:none;}

#rp_plus_img li{height:85px;padding:5px;list-style:none;}

#rp_plus_img a{color:#000;}

#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:12px;}

#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:65px;height:65px;}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://permathicblog.googlecode.com/files/Slideshow%20Postingan.js"></script>

<script type="text/javascript">

var speed = 1500;

var pause = 3500;

$(document).ready(function(){

rpnewsticker();

interval = setInterval(rpnewsticker, pause);

});

</script>

<ul id="rp_plus_img">

<script style="text/javascript">

var numposts = 5;

var numchars = 20;

</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>

</ul>

Bagi anda yang ingin melihat contoh slideshownya, bisa anda lihat di sidebar sebelah kiri Permathic Blog. Semoga bisa sukses slidenya dengan script yang baru ini. terimakasih.

Read More..

Read More

Cara Membuat Animasi Bergerak

Cara Membuat Animasi Bergerak

Ini aku beri tahu cara membuat animasi di judul blogcaranya:

a.  Login ke blogger anda

b. Masuk ke tata letak

c. Tambahkan widget > Html/Java Script

d. kemudian copy paste ni code !!<!--more--><script language="JavaScript">

<!--

//

//Scrolling Status Bar

putmsg="==welcome==";

letchar2="+==o0o==+";

letchar1="+==o0o==+";ultimo1=letchar1.length-1;

ultimo2=letchar2.length-1;

ultimo2=letchar2.length-1;

tiempo=setTimeout("stat_scroll()",.1);

function stat_scroll()

{

aux1=letchar1.charAt(ultimo1-1);

letchar1=aux1+letchar1.substring(0,ultimo1-1);

aux2=letchar2.charAt(0);

letchar2=letchar2.substring(1,ultimo2+1)+aux2;

window.status="(" + letchar2 + putmsg + letchar1 + ")";

tiempo=setTimeout("stat_scroll()",.1);

return true;

}

// -->

</script>

<script language="JavaScript">

<!--

//

putmsg="[nelson]";

letchar2="+==o0o==+";

letchar1="+==o0o==+";

ultimo2=letchar2.length-4;

ultimo2=letchar2.length-4;

tiempo=setTimeout("tit_scroll()",.1);

function tit_scroll()

{

aux1=letchar1.charAt(ultimo1-1);

letchar1=aux1+letchar1.substring(0,ultimo1-1);

aux2=letchar2.charAt(0);

letchar2=letchar2.substring(1,ultimo2+1)+aux2;

document.title="" + letchar2 + putmsg + letchar1 + "";

tiempo=setTimeout("tit_scroll()",.1);

return true;

}

// -->

</script>

Jangan lupa Teman nelson tulisan yang warna ORANGE diganti ama judul blog nya atau apa  saja terserah Teman aja, munggkin ini sedikit membantu ....

terima kasih sudah datang.... 

Read More..

Read More

cara membuat awan akatsuki

Jika ada yang belum mengerti bisa tanyakan pada saya :)

untuk memasang pada blog kamu,pertama buka blogger=>template=>edit HTML

lalu letakan CSS di atas kode ]]></b:skin>

Sedangkan Untuk HTMLnya kamu letakan kodenya di bawah code <body>

CSS

#akatsuki{position: absolute;

z-index: 0;

width:100%;

margin-top: 0px;

height: 0px;}

.akatsuki {

width: 200px; height: 138px;

background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjowozjJnXpjv3XJOyklOE9Qibl07z2-RgMyafcBL2KfriYAhUXkY0d-ajKcQzbdBB63pc_iakdObvO4VsKiOyRSL2kOfpRRIJYh1CtBm0OIDimIIzBxCIJdy3Vpx2_5Qm0qvdzww9Pm_Q/s1600/Untitled-1.png") no-repeat top center;

position: relative;

}

.awanmerah1 {

-webkit-animation: moveclouds2 15s linear infinite;

-moz-animation: moveclouds2 15s linear infinite;

-o-animation: moveclouds2 15s linear infinite;

}

.awanmerah2 {

left: 200px;

-webkit-transform: scale(0.6);

-moz-transform: scale(0.6);

transform: scale(0.6);

opacity: 0.6;

-webkit-animation: moveclouds2 25s linear infinite;

-moz-animation: moveclouds2 25s linear infinite;

-o-animation: moveclouds2 25s linear infinite;

}

.awanmerah3 {

left: -250px; top: -200px;

-webkit-transform: scale(0.8);

-moz-transform: scale(0.8);

transform: scale(0.8);

opacity: 0.8;

-webkit-animation: moveclouds2 20s linear infinite;

-moz-animation: moveclouds2 20s linear infinite;

-o-animation: moveclouds2 20s linear infinite;

}

.awanmerah4 {

left: 470px; top: -250px;

-webkit-transform: scale(0.75);

-moz-transform: scale(0.75);

transform: scale(0.75);

opacity: 0.75;

-webkit-animation: moveclouds2 18s linear infinite;

-moz-animation: moveclouds2 18s linear infinite;

-o-animation: moveclouds2 18s linear infinite;

}

.awanmerah5 {

left: -150px; top: -150px;

-webkit-transform: scale(0.8);

-moz-transform: scale(0.8);

transform: scale(0.8);

opacity: 0.8;

-webkit-animation: moveclouds2 20s linear infinite;

-moz-animation: moveclouds2 20s linear infinite;

-o-animation: moveclouds2 20s linear infinite;

}

@-webkit-keyframes moveclouds2 {

0% {margin-left: 1000px;}

100% {margin-left: -1000px;}

}

@-moz-keyframes moveclouds2 {

0% {margin-left: 1000px;}

100% {margin-left: -1000px;}

}

@-o-keyframes moveclouds2 {

0% {margin-left: 1000px;}

100% {margin-left: -1000px;}

}

HTML

<div id='akatsuki'>

<div class='akatsuki awanmerah1'/><div class='akatsuki awanmerah2'/><div class='akatsuki awanmerah3'/><div class='akatsuki awanmerah4'/><div class='akatsuki awanmerah5'/></div>

Semoga artikel Cara Membuat Awan Akatsuki Di Blog ini berguna .. terima kasih

Read More..

Read More