23 Sep 2012

Widget HTML Javascript Blogger



Javascript di bawah ini berisi Kode HTML untuk Widget Blogger.  Penggunaannya Anda tinggal Copy paste  Widget yang dikehendaki lalu pasangkan di Blogger Anda. Selamat Mencoba, Semoga Berhasil.

1.  SLIDER HEADER
<a href="http://picasion.com/"><img src="http://i.picasion.com/pic65/f7785bc9ed1044e4a58690dd48f1a35e.gif" width="1107" height="280" border="0" alt="picasion" /></a><br /><a href="http://www.picasion.com/"></a>

<script src="http://h1.flashvortex.com/display.php?id=2_1350313051_8075_253_0_1107_74_8_1_88" type="text/javascript"></script>                 “ BIARLAH ROHMU MENYALA-NYALA”

2.  JAM DAN TANGGAL
<!-local time clock widget - html code - localtimes.info --><div align="center" style="margin:15px 0px 0px 0px"><div align="center" style="width:140px;border:1px solid #ccc;background:#010 ;color: #010 ;font-weight:bold"><a style="padding:2px 1px;margin:2px 1px;font-size:13px;line-height:16px;font-family:arial;text-decoration:none;color:#11ff11" href="http://localtimes.info/Asia/Indonesia/Jakarta/"><img src="http://localtimes.info/images/countries/id.png" border="0" style="border:0;margin:0;padding:0" />&nbsp;&nbsp;Jakarta Time</a></div><script type="text/javascript" src="http://localtimes.info/clock.php?continent=Asia&country=Indonesia&city=Jakarta&color=green&widget_number=1000&fwdt=150&mon=1"></script></div><!-end of code--></!-end></!-local>

3.  PENGUMUMAN GAMBAR BERJALAN
<table border="10" cellpadding="3" height="185" width="277" bgcolor="#b1c3d9" />
<tr>
<td>
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="277" height="185" align="center">
<img src="https://lh6.googleusercontent.com/-_gSg4FxA9Xo/UH0H74iB1-I/AAAAAAAAANw/6ksVIp8_nVI/s220/hengky.jpg" height="185" width="277" />
<img src="https://lh6.googleusercontent.com/-uM5P4ubdV-4/UH0H_eR3RwI/AAAAAAAAAN4/gefwsmFcVoM/s220/chang.jpg" height="185" width="277" />
<img src="https://lh6.googleusercontent.com/-KcG7kywPuKM/UH0IECM0QnI/AAAAAAAAAOA/45K-lC8M9OY/s220/supit.jpg" height="185" width="277" />
<img src="https://lh5.googleusercontent.com/-0PbY5IxJUq8/UH0IGAYPFvI/AAAAAAAAAOI/8B3b2GAx4MM/s220/daniel.jpg" height="185" width="277" />
<img src="https://lh5.googleusercontent.com/-tYmYGP6uH7s/UH0IJ1T01fI/AAAAAAAAAOQ/0S2ieWmXzYw/s220/yanto.jpg" height="185" width="277" />
<img src="https://lh4.googleusercontent.com/-NEM0bMQXTV4/UH0IMTqdiWI/AAAAAAAAAOY/0wfJ0Rp8Rnw/s220/johan.jpg" height="185" width="277" />
<img src="https://lh5.googleusercontent.com/-rICGJeXZauE/UH0IPx8onEI/AAAAAAAAAOg/BC78JZA7Xvk/s220/riza.jpg" height="185" width="277" />
<img src="https://lh4.googleusercontent.com/-AvI0E47tu1g/UH0ISAwadzI/AAAAAAAAAOo/FneK_noMhAg/s220/ari.jpg" height="185" width="277" />
<img src="https://lh4.googleusercontent.com/--09ifxs1-78/UH0IVALSHrI/AAAAAAAAAOw/CiBu2Lh19Q0/s220/lily.jpg" height="185" width="277" />
</marquee>
</td>
</tr>
</table>

4.  PENGUMUMAN DROP DOWN
<div><form name="copy"><div align="center"><span><input value="Renungan Minggu Ini" type="button" onclick="javascript:this.form.txt.focus();this.form.txt.select();" /></span></div><p align="center"><textarea style="width: 300px; height: 210px;background-color:#C1F3B1" name="txt" rows="5" wrap="VIRTUAL" cols="20">TUJUAN HIDUP : BEKERJA MEMBERI BUAH
“Tetapi jika aku harus hidup di dunia ini, itu berarti bagiku bekerja memberi buah.” Filipi 1:22a
Begitu banyak hal yang harus kita hadapi selama kita masih hidup di dunia ini. Masalah tidak akan pernah habis-habisnya, tetapi akan terus datang. Menjadi pengikut Kristus bukan berarti bahwa kita akan terlepas dari masalah, tetapi kita akan mendapat kekuatan dari Tuhan untuk dapat melalui masalah tersebut.
“Tetapi orang-orang yang menanti-nantikan TUHAN mendapat kekuatan baru: mereka seumpama rajawali yang naik terbang dengan kekuatan sayapnya; mereka berlari dan tidak menjadi lesu, mereka berjalan dan tidak menjadi lelah. ” Yesaya 40:31
Sumber : PelitaHidup
</textarea></p></form></div>

5.  BREAD OF LIVE
<form action="http://www.biblegateway.com/quicksearch/" method="post">
<table border="1" cellspacing="0" cellpadding="2" style="border-color: #600;">
<tr><th style="background-color: #600; color:#fff; text-align: center; padding: 0 10px;">Lookup a word or passage in the Bible</th></tr>
<tr><td style="background-color: #fff; text-align: center; padding: 0 10px;">
<p style="margin-bottom: 0;">
<input type="text" name="quicksearch" /><br />
<input type="submit" value="Search BibleGateway.com" /><br />
</p>
<a href="http://www.biblegateway.com/" title="The Bible in multiple languages, versions, and formats">
<img src="http://static5.bgcdn.com/images/logos/bglogo_sm.gif" width="146" height="44" alt="BibleGateway.com" border="0" /></a><br />
<small>
<a href="http://www.biblegateway.com/usage/form/">Include this form on your page</a><br />
</small>
</td></tr>
</table>
</form>

6.  WIDGET KODE WARNA :
<object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="280" id="obj1" width="280"> <param value="http://www.2createawebsite.com/build/color.swf" name="movie" />
<param value="High" name="quality" />
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" name="obj1" type="application/x-shockwave-flash" width="280" height="280"> </embed></object>

7.  WIDGET KODE WARNA BERPUTAR :
<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="290" id="col" width="290"> <param value="sameDomain" name="allowScriptAccess" />
<param value="http://www.2createawebsite.com/build/col.swf" name="movie" />
<param value="high" name="quality" />
<param value="#ffffff" name="bgcolor" />
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="290" align="middle" height="290"> </embed></object>

8.  GLITTER 
<a href="http://www.glitter-graphics.com"><img src="http://dl8.glitter-graphics.net/pub/1053/1053138e5jkzm47tv.gif" width=156 height=143 border=0></a><br><a href="http://www.glitter-works.org" target=_blank>glitter-graphics.com</a>              Gembala 

<a href="http://www.glitter-graphics.com"><img src="http://dl3.glitter-graphics.net/pub/117/117193tdajxe3wh8.gif" width=100 height=100 border=0></a>           Salib

<a href="http://www.glitter-graphics.com"><img src="http://dl7.glitter-graphics.net/pub/2647/2647047cdbxxm7flj.gif" width=134 height=99 border=0></a><br><a href="http://www.glitter-works.org" target=_blank>glitter-graphics.com</a>           Merpati

<a href="http://www.glitter-graphics.com"><img src="http://dl7.glitter-graphics.net/pub/1594/1594447bbaybzoemv.gif" width=250 height=222 border=0></a><br><a href="http://www.glitter-works.org" target=_blank>glitter-graphics.com</a>           Rajawali

<a href="http://www.glitter-graphics.com"><img src="http://dl.glitter-graphics.net/pub/382/382561ai7h9zeppn.gif" width=100 height=99 border=0></a>   Mr. Bean

<div align="center"> <a href="http://www.glitter-graphics.com"><img src="http://dl8.glitter-graphics.net/pub/1053/1053138e5jkzm47tv.gif" width="176" height="163" border="0" /></a><br /><a href="http://www.glitter-works.org" target=_blank>Jesus Gembala yang Baik</a></div>
Gembala dan domba berjalan

<div align="center">
<a href="http://www.glitter-graphics.com"><img src="http://dl3.glitter-graphics.net/pub/117/117193tdajxe3wh8.gif" width="150" height="200" border="0" /></a></div>   salib


9.  Memasang Text Berjalan

<div align="left"><font face="georgia" color="White"><strong><marquee bgcolor="red" width="70%" scrollamount="3" behavior="alternate"> </marquee></strong></font></div>


10.  Link Widget

http://www.komputerseo.com/2010/12/cara-memasang-gambar-animasi-lucu-di.html
http://www.widgetbox.com/widgets/

http://bloggergadgets.net/
http://gpdilc.blogspot.com/?view=sidebar   ( Video Inspirasi & Motivasi Kristen )



11.  Memasang Icon YM

1. Copy-paste kode dibawah ini jika anda ingin menampilkan icon YM seperti ini :


<center><a href="ymsgr:sendIM?kode_ym_anda"><img src="http://opi.yahoo.com/online?u=kode_ym_anda&m=g&t=1" border="0" width="64" height="16"></a></center>


2. Kalau ingin menampilkan icon YM seperti disamping ini masukkan kode HTML dibawah ini:


<center><a href="ymsgr:sendIM?kode_ym_anda"><img src="http://opi.yahoo.com/online?
u=kode_ym_anda&m=g&t=14" border="0"></a></center>

yang bercetak merah kode_ym_anda diganti dengan ID YM anda sendiri
Misalnya email anda namaku@yahoo.com maka IDnya cukup namaku (tanpa @yahoo.com)



12.  Pembuatan Breadchumb ( Posisi Browser Anda ) 

Seperti biasa anda harus login ke Blogger.
Langsung tuju Edit HTML.
Klik Expand Template Widget.
Letakkan kode berikut ini tepat  sebelum  kode   ]]></b:skin>

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef}

Setelah itu, cari kode seperti ini :
<div class='post hentry'>

Letakkan kode berikut ini tepat setelah kode <div class='post hentry'>

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

Terakhir, Simpan Template Anda.


13.  Membuat Gambar / Objek ke tengah-tengah ( center )
<div  align = "center" > …Text HTML / Javascript Anda… </div >



14.  SEO BLOG

1. Pakai Meta tags
<meta name="robots" content="INDEX, FOLLOW"/>
<meta name="description" content="Deskripsi dari blog Anda di sini "/>
<meta name="keywords" content="kata kunci atau keyword simpan disini, buatlah beberapa keyword yang sobat anggap sangat berhubungan dengan blog Anda "/>

2. Pakai dofollow
Cari Kode berikut : <a expr:href='data:comment.authorUrl' rel='nofollow'>
Hapus rel=’nofollow’   sehingga menjadi :

<a expr:href='data:comment.authorUrl' >

Kemudian, cari kode : <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
Hapus rel=’nofollow’  sehingga menjadi menjadi :

<a expr:href='data:backlink.url'><data:backlink.title/></a>

3. Mendaftarkan Blog Anda  ke Google :
https://www.google.com/webmasters/tools/submit-url


15.  Membuat TOP MENU

<ul>
<li><a href="http://the-camry.blogspot.com/">H O M E</a></li>
<li><a href="http://the-camry.blogspot.com/2012/10/artikel-dan-berita-gereja.html">Breaking News</a></li>
<li><a href="http://the-camry.blogspot.com/2012/10/sermon-notes-ibadah-raya.html">Sermon Notes</a></li>
</ul>

Catatan :
1.  Yang berwarna MERAH adalah Alamat link yang dituju
2.  Yang berwarna BIRU adalah Judul Menu


16.  Script Pemasangan Iklan - Banner Floating

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>
</script><br />
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#btm_banner {
bottom: 0;
position: fixed;
width: 100%;
opacity: 0.9;
left: 0;
}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: 110px; z-index: 9999;'>
<div style='text-align: right; width: 735px; height: 3px;'>
<img id='closed' src='http://www.voa-islam.com/images/close-icon.png'/></div>
<div style='clear: both;'></div>
<p>
<p><center>

<a href="http://studyonline21.blogspot.com/ " target="_blank"title="Pasang Iklan"><img src="http://3.bp.blogspot.com/-XMdc1kjTDfE/UXStxuTU4SI/AAAAAAAACt4/TCZ-OQo5w-c/s640/banner+floating.jpg" border="0"/></a> 

atau pakai banner flash :

<a href="http://studyonline21.blogspot.com/ " target="_blank"title="Pasang Iklan"><script src="http://h2.flashvortex.com/display.php?id=2_1352261186_11833_442_0_728_90_9_2_100" type="text/javascript" ></script></a>  
       
( Karena Flash, Membukanya harus klik 2X bersamaan / Double Click )

</center></p>
</p>
</div>

Yang berwarna BIRU dan MERAH,  mohon diganti sendiri, OK ?


17.  Music Blog

<!-- SCM Music Player http://scmplayer.net -->
<script type="text/javascript" src="http://scmplayer.net/script.js"
data-config="{'skin':'skins/scmGreen/skin.css','volume':100,'autoplay':true,'shuffle':true,'repeat':1,'placement':'top','showplaylist':false,'playlist':[{'title':'Blessed Be The Name of The Lord','url':'http://www.youtube.com/watch?v=_S-KvvTkuOc'},{'title':'Holy, Holy, Holy','url':'http://www.youtube.com/watch?v=UWndDW_271g'},{'title':'How Great Thou Art','url':'http://www.youtube.com/watch?v=3GKhDCsLrUg'},{'title':'I Give You my Heart','url':'http://www.youtube.com/watch?v=mZGzu6oI9b4'},{'title':'Ku Dibri Kuasa','url':'http://www.youtube.com/watch?v=GvlE_ElTi84'},{'title':'Lord of lords','url':'http://www.youtube.com/watch?v=O2uPvHCQ-T4'},{'title':'One Way','url':'http://www.youtube.com/watch?v=G689PlEXiXk'},{'title':'Open The Eyes','url':'http://www.youtube.com/watch?v=iMn8vdlcwJE'},{'title':'Satu Hal yang Kurindu','url':'http://www.youtube.com/watch?v=yTC-Svts8SA'},{'title':'Sukacita Surga','url':'http://www.youtube.com/watch?v=bBoLCDkP9sc'},{'title':'With All I Am','url':'http://www.youtube.com/watch?v=FMrAafe7Mns'},{'title':'Yesus Kekuatanku','url':'http://www.youtube.com/watch?v=mlWs4gANE2c'}]}" ></script>
<!-- SCM Music Player script end -->


Tidak ada komentar:

Posting Komentar