Xp-Fire

Share button memang masih merupakan suatu bahasan penting untuk ditempatkan dalam suatu blog. Ia akan membantu anda untuk mempublikasikan posting atau blog anda kepada pengunjung di dunia maya. Sebelumnya saya telah memposting artikel Cara Membuat Share Button Cantik yang sebenarnya berhubungan dengan posting ini. Namun saya hanya merubah tampilan share button tersebut dengan menambahkan fungsi cMotion Image Gallery dari Dynamic Drive. Kelebihannya anda dapat membuat image gallery dengan menempatkannya pada widget. Selain itu juga dapat memfungsikan ini sebagai tampilan gambar pada posting artikel anda. Sebelum lanjut lihat dulu demonya.



Sekarang mari kita lanjut pada cara pembuatannya. Silahkan ikuti langkah berikut ini.
Log in ke blog anda
Klik Rancangan


Klik Edit HTML


Masukkan kode berikut di atas kode </head>

<link rel="stylesheet" href="http://bloekoetoek-blogonol.googlecode.com/files/gallerystyle2.css" />
<script type="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/motiongallery2.js"></script>

Simpan template


Klik Lagi Rancangan


Klik Tambah Gadget


Pilih HTML/JavaScript


Masukkan kode berikut ke dalamnya dan jangan lupa Simpan

<div style="overflow:hidden;">
<div id="motioncontainer" style="width:auto; height:300px; overflow:hidden; position: relative;">
<div id="motiongallery" style="position:absolute; left:0; top:0;">
<!--Gallery Contents below-->
<a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a><br />
<a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a><br />
<a href="masukkan alamat blog anda di sini"><img src="masukkan alamat gambar anda di sini" border=1></a><br />
<a href="masukkan alamat twitter anda di sini"><img src="http://i1138.photobucket.com/albums/n524/blogonol/blogonol-twitter.png" border=1></a><br />
<a href="masukkan alamat facebook anda di sini"><img src="http://i1138.photobucket.com/albums/n524/blogonol/blogonol-facebook.png" border=1></a><br />
<a href="masukkan alamat rss feed anda di sini"><img src="http://i1138.photobucket.com/albums/n524/blogonol/blogonol-rss.png" border=1></a><br />
<a href="masukkan alamat stumbleupon anda di sini"><img src="http://i1138.photobucket.com/albums/n524/blogonol/blogonol-stumbleupon.png" border=1></a><br />
<a href="masukkan alamat digg anda di sini"><img src="http://i1138.photobucket.com/albums/n524/blogonol/blogonol-digg.png" border=1></a><br />
<!--End Gallery Contents-->
</div></div></div>

Catatan 
Kalau anda ingin menggunakan menjadi motion image gallery, gunakan script di bawah ini. 

<div style="overflow:hidden;">
<div id="motioncontainer" style="width:auto; height:300px; overflow:hidden; position: relative;">
<div id="motiongallery" style="position:absolute; left:0; top:0;">
<!--Gallery Contents below-->
<a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a><br />
<a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a><br />
<a href="masukkan alamat blog anda di sini"><img src="masukkan alamat gambar anda di sini" border=1></a><br />
<a href="masukkan alamat blog anda di sini"><img src="masukkan alamat gambar anda di sini" border=1></a><br />
<a href="masukkan alamat blog anda di sini"><img src="masukkan alamat gambar anda di sini" border=1></a><br />
<a href="masukkan alamat blog anda di sini"><img src="masukkan alamat gambar anda di sini" border=1></a><br />
<a href="masukkan alamat blog anda di sini"><img src="masukkan alamat gambar anda di sini" border=1></a><br />
<a href="masukkan alamat blog anda di sini"><img src="masukkan alamat gambar anda di sini" border=1></a><br />
<!--End Gallery Contents-->
</div></div></div>

Kalau anda mau menambahkan gambar copy kode 

<a href="masukkan alamat blog anda di sini"><img src="masukkan alamat gambar anda di sini" border=1></a><br /> 

Kemudian masukkan sebelum kode <!--End Gallery Content-->

Kalau anda ingin menggunakannya pada posting artikel, silahkan masukkan kode di atas pada mood Edit HTML setelah anda berada di posting area. Jangan lupa Terbitkan Entri dan lihat hasilnya. Sekarang anda sudah memiliki Share Button dengan Motion Image. Selamat mencoba dan sukses selalu.