Cara Membuat Twitter Follow Burung Terbang (bird Sprite) pada Blogspot

Hallo Sobat Edit-HTML, kali ini saya akan menjelaskan bagaimana cara membuat twitter Follow dengan gaya burung yang terbang ke seluruh halaman blog sobat, cukup mudah dan sangat praktis namun tetap kreatif, inilah langkah-langkahnya:

Blogger Dashboard > Layout > Page Element > Add a Gadget > HTML/JavaScript

Kemudian Copykan Code dibawah ini ke HTML/JavaScript yang telah terbuka

<div class="widget-content">

<script type="text/javascript" src="http://techgyo.com/wp-content/FlyingTwitbird/tripleflap.js"></script>

<script type="text/javascript">

var birdSprite="http://techgyo.com/wp-content/FlyingTwitbird/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/akuntwittermu";var tweetThisText = "Twitter - kamu http://www.alamatblogmur.blogspot.com/";tripleflapInit();

</script>

<a id="theBird" href="http://twitter.com/akuntwittermu" target="_blank" style="display: block; position: absolute; width: 64px; height: 64px; background-image: url(&quot;http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png&quot;); background-color: transparent; z-index: 947; left: 28px; top: 97px; background-position: 0px 0px;"></a>

<a id="theBirdLtweet" href="http://twitter.com/home?status=Twitter%20-%20techgyo%20http%3A//www.alamatblogmu.blogspot.com/" target="_blank" title="tweet this" style="position: absolute; background-image: url(&quot;http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png&quot;); background-color: transparent; width: 58px; height: 30px; z-index: 951; left: 49px; top: 583px; display: none; opacity: 0; background-position: -64px 0px;"></a>

<a id="theBirdLfollow" href="http://twitter.com/akuntwittermu" target="_blank" title="follow me" style="position: absolute; background-image: url(&quot;http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png&quot;); background-color: transparent; width: 58px; height: 20px; z-index: 952; left: 54px; top: 613px; display: none; opacity: 0; background-position: -64px -30px;"></a>

</div>

Keterangan
Yang berwarna merah dapat disesuaikan dengan alamat blog / akuntwitter sobat edit-HTML.


Kemudian Simpan dan Lihat Hasilnya

Read more »

Posted in: Edit Blog

Cara membuat Jam Cantik dan Berbunyi di Blog (blogspot) tanpa Banner

Jika anda ingin membuat atau memasang jam cantik seperti  dibawah pada blog  anda, caranya adalah seperti berikut ini:





buka: Blogger Dashboard > Layout > Page Element > Add a Gadget > HTML/JavaScript


kemudian copy kode di bawah dan paste pada Gadget > HTML/JavaScript yang terbuka:


<embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="https://sites.google.com/site/myedithtml/swf/edit-html.clock-7.swf" wmode="transparent" type="application/x-shockwave-flash" width="120" height="40">


Kemudian Simpan, dan lihatlah hasilnya.


*) warna merah adalah ukuran jam yang dapat anda sesuaikan.

Read more »

Posted in: Edit Blog

Add Google Buzz Buttons to Share Your Blog

Setelah adanya Google Buzz, kini tombolnya makin laris manis digunakan. Makin komplit alat bantu penyebaran artikel blog setelah sebelumnya kita tambahkan button twitter dan share facebook. Berharap saja trafik akan mengalir bila kita tambahkan button satu lagi, Google Buzz.

Untuk melakukannya, ikuti petunjuk berikut :

1. Login ke blogger, klik tata letak, edit HTML, lalu cek expand widget.

2. Salin kode berikut :


<div style="float:right;padding:4px;">
<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title+ "&srcURL=" + data:blog.homepageUrl ' rel='nofolloW' style='text-decoration:none;' target='_blank'>
<img alt='Buzz It' src='http://i49.tinypic.com/25yy8pd.png' style='border:0px;'/></a>
</div>



3. Cari bagian ini :
<div class='post-header-line-1'/>
Setelah ketemu, tempel (paste) kode tadi. Bagi yang kesulitan menemukan, temukan kode ini dalam layoutnya :
<data:post.body/>
lalu tempel kode tadi sebelum bagian ini.

4. Simpan!
Mudah kan?

Read more »

Posted in: Edit Blog

Web : Incorporating Yahoo! Messenger into Blog

Tahukan bahwa ada 3 gambar pilihan yang bisa digunakan sebagai penanda keberadaan online atau tidaknya kita melalui Yahoo! Messenger di web/blog kita?

Ini yang saya maksudkan :


Ini juga yang kmarin ditanya Listi begitu merasa icon Yahoonya tampil mungil diantara tautan lainnya.

Sebenarnya ada tips untuk merubah ukuran icon, yakni dengan merubah angka-angka yang berada di alamat HTTP tempat icon di opi.yahoo dimunculkan.Sebelumnya saya ingin memastikan bahwa alamat icon yang digunakan berasal dari sumber yang sama, yakni <img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border=0>....menemukan tautan yang sama?...kita lanjutkan bila kita merujuk ke alamat yang sama...

OK...ada StyleID disana...angka mana yang dimaksud? begini, saya yang memiliki icon kecil biasanya menggunakan angka 1 sebagai Style ID-nya...coba ubah angka ini untuk mendapatkan tampilan dan ukuran yang berbeda.Angka yang diperkenankan sebagai penggantinya hanya angka 1,2 dan 3.

Jadi apabila icon milik saya beralamat di : http://opi.yahoo.com/online?u=edittagagus&m=g&t=1 maka saya bisa mengubahnya dengan ;

http://opi.yahoo.com/online?u=edittagagus&m=g&t=2 (dimunculkan icon lebih besar)atau
http://opi.yahoo.com/online?u=edittagagus&m=g&t=3 (dimuncukan tampilan icon lainnya)

untuk mendapatkan hasil yang berbeda.

Berikut beberapa kode untuk menautkan fasilitas Yahoo! di web/blog

Kirim Instant Messenger

<a href="ymsgr:sendIM?YOURID">Kirim IM</a>

Kirim Instant Messenger dengan pesan

<a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE">Kirim IM</a>

Menambahkan tautan ke room chat favorit

<a href="ymsgr:chat?ROOMNAME">Gabung ke chat room</a>

Menambahkan tautan hingga kita bisa di add sebagai teman

<a href="ymsgr:addfriend?YOURID">Masukan ke daftar teman kamu</a>

Jadi...kode yang ingin saya masukan ke blog saya dengan id edittagagus dan gambar no 1 hasilnya akan menjadi :

<a href="ymsgr:sendIM?edittagagus"><img src="http://opi.yahoo.com/online?u=edittagagus&m=g&t=1"></a>

Tag : ym status blogger, chatting dengan yahoo messenger, kode yahoo messanger, opi yahoo, menampilkan icon yahoo messenger online, link status ym di web, status online on my blog, ymsgr:sendim?id, tentang yahoo web messenger, masang yahoo messenger di blog, Yahoo! status icons.

Tautan terkait :

Read more »

Posted in: Edit Blog