Top News Berita Infotaiment Terbaru | Top Online News

Tampilkan postingan dengan label JQuery. Tampilkan semua postingan

Membuat Menu LavaLamp Jquery Blogger

Minggu, 13 Mei 2012

Cara membuatnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin> :
3. Dan Simpan kode berikut diatasnya

/* ---------------
lavaLamp With Image
---------------------------------- */
.lavaLampWithImage {
position: relative;
height: 29px;
width: 421px;
background:-moz-linear-gradient(left, #ff6900, #ff9700, #ff6900, #ff9700, #ff6900); no-repeat top;
-moz-border-radius:10px;
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
padding: 15px;
margin: 10px 0;
overflow: hidden;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqgpUCAmmvgxB3UhfS8cH5PFet2piQ1q6TWnSWNBos0G35zEJQ5lWtJEV3cX7T75Nh-migzZICovo9etS9HPiOIn89st4MLZkT6LCtnIYMW9mXGosUPpY7KuWMDCiq_7wXkYl2haCvaa0/s1600/lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqgpUCAmmvgxB3UhfS8cH5PFet2piQ1q6TWnSWNBos0G35zEJQ5lWtJEV3cX7T75Nh-migzZICovo9etS9HPiOIn89st4MLZkT6LCtnIYMW9mXGosUPpY7KuWMDCiq_7wXkYl2haCvaa0/s1600/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage li a {
font: bold 14px arial;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
border: none;
}

4. Simpan java script berikut tepat diatas kode </head>

<script src='http://hanjs.googlecode.com/files/jquery.easing.min.js' type='text/javascript'/>
<script src='http://hanjs.googlecode.com/files/jquery-1.1.3.1.min.js' type='text/javascript'/>
<script src='http://hanjs.googlecode.com/files/jquery.lavalamp.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$("#1").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
</script>

5. Cari kode berikut (ctrl+F untuk mempermudah pencarian) :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

ini kalau mau posisi nya di bawah header ..
kalau mau posisinya seperti punya saya di atas cari kode ini <div id='top-wrap'>

6. jika sudah ketemu simpan kode beikut dibawah kode yang dicari tadi :

<ul class="lavaLampWithImage" id="1">
<li><a href="#">Home</a></li>
<li><a href="#">Plant a tree</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Ride an elephant</a></li>
</ul>

Semoga Bermanfaat

Read Post | komentar

JQuery, Triks Blogger

Membuat A Perfect Share Box Widget for Blogger/Blog

Kamis, 10 Mei 2012

Dalam posting ini saya akan menunjukkan cara untuk menambahkan widget pangsa kotak sempurna untuk blogger blog.
Seperti yang Anda lihat dari angka itu berisi link ke halaman fan Facebook, Google + halaman dan mengikuti twitter tombol, RSS dan yang paling penting sebuah forum langganan yang menarik yang akan lebih meningkatkan jumlah daftar pelanggan. Kami menggunakan CSS dan jQuery untuk memperbaiki penampilan widget ini.

Cara memasang Widget ini ke blog anda .

Login ke akun Blogger anda
Klik Rancangan
Klik Tambahkan Widget
Lalu pilih HTML/Javascript
Masukkan kode di bawah ini di dalam HTML/Javascript

Lalu Klik Simpan / Save

Keterangan :
- Yang bercetak miring tebal _deejayHan_ adalah Feedburner saya , anda ganti dengan feedburner anda.
- Yang bercetak miring tebal / 113365724969342915982 adalah profil GooglePlus saya , maka anda ganti dengan profil GooglePlus anda
- Yang bercetak miring tebal DeeJayHanBlog adalah Profil fan page facebook saya , anda ganti dengan profil fan page facebook anda

- Yang bercetak miring tebal DeeJayHan_Blogs adalah profil twitter saya , anda ganti dengan twitter anda .

Semoga Bermanfaat sob .

Read Post | komentar

JQuery, Triks Blogger

Membuat Pop-Up Facebook Like Jquery

Rabu, 09 Mei 2012

Aku Mengingat Anda jQuery Pop-Up Facebook Seperti widget Box (versi 1) dalam posting saya yang lebih tua dan dalam posting ini saya memberikan lagi jQuery pop-up seperti facebook widget kotak dengan gambar latar belakang, memeriksa demo screenshot ane atas, jika Anda ingin widget ini dan Anda ingin menambahkan widget ini ke blog Anda cukup ikuti langkah di bawah ini sederhana

Cara menambahkan widget ini ke blogger anda ?

1 . Masuk ke akun blogger anda .

2 . Klik Rancangan

3 . Lalu Klik Tambahkan Widget

4 . Pilih HTML/Javascript

5 . Masukkan kode di bawah ini ke HTML/Javascript

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script><script src="https://gj37765.googlecode.com/svn/trunk/html/[www.gj37765.blogspot.com]jquery.colorbox-min.js"></script><style>#colorbox, #cboxOverlay, #cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;}#cboxOverlay{position:fixed;width:100%;height:100%;}#cboxMiddleLeft, #cboxBottomLeft{clear:left;}#cboxContent{position:relative;}#cboxLoadedContent{overflow:auto;}#cboxTitle{margin:0;}#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;}#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}.cboxPhoto{float:left;margin:auto;border:0;display:block;}.cboxIframe{width:100%;height:100%;display:block;border:0;}#cboxOverlay{background:#000;opacity:0.5 !important;}#colorbox{/*box-shadow*/-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);box-shadow:0 0 15px rgba(0,0,0,0.4);}#cboxTopLeft{width:14px;height:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat 0 0;}#cboxTopCenter{height:14px;background:url(http://2.bp.blogspot.com/-3KW95qDrjH0/TwRGYol22fI/AAAAAAAACM4/lCr80B0MD2U/s1600/%255Bwww.gj37765.blogspot.com%255Dborder.png) repeat-x top left;}#cboxTopRight{width:14px;height:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat -36px 0;}#cboxBottomLeft{width:14px;height:43px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat 0 -32px;}#cboxBottomCenter{height:43px;background:url(http://2.bp.blogspot.com/-3KW95qDrjH0/TwRGYol22fI/AAAAAAAACM4/lCr80B0MD2U/s1600/%255Bwww.gj37765.blogspot.com%255Dborder.png) repeat-x bottom left;}#cboxBottomRight{width:14px;height:43px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat -36px -32px;}#cboxMiddleLeft{width:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) repeat-y -175px 0;}#cboxMiddleRight{width:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) repeat-y -211px 0;}#cboxContent{background:#fff;overflow:visible;}#cboxLoadedContent{margin-bottom:5px;}#cboxLoadingOverlay{background:url(http://3.bp.blogspot.com/-7VRvnW_MUSw/TwRGXjXjloI/AAAAAAAACM0/5K-J5jgkxo4/s1600/%255Bwww.gj37765.blogspot.com%255Dloadingbackground.png) no-repeat center center;}#cboxLoadingGraphic{background:url(http://3.bp.blogspot.com/-xjj51r2lm2M/TwRGaKezqHI/AAAAAAAACNI/lKX9_-YUUdY/s1600/%255Bwww.gj37765.blogspot.com%255Dloading.gif) no-repeat center center;}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C;}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C;}#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute;bottom:-29px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat 0px 0px;width:23px;height:23px;text-indent:-9999px;}#cboxPrevious{left:0px;background-position:-51px -25px;}#cboxPrevious.hover{background-position:-51px 0px;}#cboxNext{left:27px;background-position:-75px -25px;}#cboxNext.hover{background-position:-75px 0px;}#cboxClose{right:0;background-position:-100px -25px;}#cboxClose.hover{background-position:-100px 0px;}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px;right:27px;}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px;}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666;}#mdfb a, #mdfb a:hover, #mdfb a:visited{text-decoration:none;}.mdbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;/*border-radius*/-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;/*box-shadow*/-webkit-box-shadow:5px 5px 5px #CCCCCC;-moz-box-shadow:5px 5px 5px #CCCCCC;box-shadow:5px 5px 5px #CCCCCC;padding:10px;line-height:25px;font-family:arial !important;}.mdbox-tagline{color:#999;margin:0;text-align:center;}#mdsubs-container{padding:35px 0 30px 0;position:relative;}a:link, a:visited{border:none;}.demo{display:none;}</style><script type="text/javascript">jQuery(document).ready(function(){if (document.cookie.indexOf('visited=false') == -1) {var fifteenDays = 1000*60*60*24*30;var expires = new Date((new Date()).valueOf() + fifteenDays);document.cookie = "visited=true;expires=" + expires.toUTCString();$.colorbox({width:"600px", inline:true, href:"#mdfb"});}});</script><div style='display:none'><div id='mdfb' style='padding:10px; background:#fff;'><center><table align="center"background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj219M-1_Zy0wqftmHKiWT8-aotQdjMu9zMnvz8f0eTLpcBXnluJFDoUkPvIV7jsiZPg6WR3GBhfXopj8fKGYCCJQPtPI5JbGzpXlPkjX_q9G_Hlqq6LPIJTMVTMslaR4sm7SDUtZ9O9-x5/s1600/adsense+background+image%2528gj37765.blogspot.com.jpg.png" border="0" height="300" style="width: 505px;"><tbody><tr><td height="345" width="505"><div align="right"><script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"type="text/javascript"></script><script type="text/javascript">FB.init("32eb3732082b27e7c314feb421a56208");</script><fb:fan profile_id="201758876517562" connections="10" width="360" height="270" css="https://gj37765.googlecode.com/svn/trunk/[www.gj37765.blogspot.com]mdfacebook.css?"></fb:fan></div></td></tr></tbody></table></center><p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.deejayhan.blogspot.com">Blogger Widgets</a></p></div></div>

6 . Lalu Simpan dan lihat hasilnya :D
Keterangan :
- Yang nomor berwarna merah / 201758876517562 diganti dengan ID fan page anda .

Semoga Bermanfaat untuk semuanya :)

Read Post | komentar

JQuery, Triks Blogger

Membuat Bounce & Share - Widget Social Bookmarking Blogger

Minggu, 29 April 2012

LANGKAH # 1
Login ke Blogger -> Layout -> Edit HTML dan pilih centang kotak Expand Template Widget
Kemudian, cari (CTRL + F) kode ini di template:

</head>

Copy Semua code dibawah ini dan masukkan code dibawah ini di atas </head>

<!--BOUNCING-ICONS-START-->

<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/screen2.css' media='all' rel='stylesheet' type='text/css'/>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/execute.js' type='text/javascript'/>

<!--BOUNCING-ICONS-STOP-Help-http://deejayhan.blogspot.com-->

LANGKAH # 2:
Sekarang cari kode ini di template:

<data:post.body/>

Atau

<div class='post-footer'>

Dan sisipkan dibawah code di atas itu, paste kode ini:

<!--SOCIAL-BOOKMARKING-BUTTONS--><br/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<center>

<ul id='nav-shadow'>

<li class='button-color-1'><a  expr:href='&quot;http://twitter.com/home/?status=Currently  reading-&quot; + data:post.title + &quot; &quot; +  data:post.url' target='_blank' title='Tweet This Post'/></li>

<li class='button-color-2'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot;  + data:post.url + &quot;&amp;title=&quot; +  data:post.title' target='_blank'/></li>

<li class='button-color-3'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot;  + data:post.url + &quot;&amp;title=&quot; +  data:post.title' target='_blank'/></li>

<li class='button-color-4'><a expr:href='&quot; http://digg.com/submit?url=&quot;  + data:post.url + &quot;&amp;title=&quot; +  data:post.title' target='_blank'/></li>

<li class='button-color-5'><a expr:href='&quot;http://del.icio.us/post?url=&quot;  + data:post.url + &quot;&amp;title=&quot; +  data:post.title'  target='_blank'/></li></ul></center>

<a  href="http://deejayhan.blogspot.com/2012/04/membuat-bounce-share-widget-social.html"  target="_blank"><span style="font-size: x-small;">Get this  widget</span></a>

</b:if>

<!--SOCIAL-BOOKMARKING-BUTTONS-http://deejayhan.blogspot.com-->

Sekarang klik Save Template

Read Post | komentar

JQuery, Triks Blogger

Membuat Energy Saving Mode Jquery Blogger

Selamat Malam Sobat Blogger. Malam ini kita akan memodifikasi tampilannya dengan gambar sehingga tampilan screensaver berupa gambar, namun perlu Anda ketahui bahwa penambaan gambar pada energy saving ini akan membuat loading blog akan semakin berat karena mendapat tambahan satu gambar lagi yaitu gambar pada energy saving mode, hal ini dapat Anda jadikan pertimbangan jika ingin membuat energy saving mode dengan gambar, untuk yang benar-benar ingin memasangnya ikuti langkah berikut :

- VIEW DEMO -

Pertama login ke Akun Blogger Anda
Kedua klik Rancangan
Ketiga Klik Edit HTML
Keempat Masukkan Kode dibawah ini dan Letakkan di atas kode </head>

<script language='javascript' src='http://jquery-new.googlecode.com/files/energisavingmode.js' type='text/javascript'/>

Dan Simpan Template.
Semoga Bermanfaat.
NB : Semua Script sudah dijadikan satu di Javascript .

Read Post | komentar

Popular Posts

Membuat Menu LavaLamp Jquery Blogger

Minggu, 13 Mei 2012

Membuat A Perfect Share Box Widget for Blogger/Blog

Kamis, 10 Mei 2012

Membuat Pop-Up Facebook Like Jquery

Rabu, 09 Mei 2012

Membuat Bounce & Share - Widget Social Bookmarking Blogger

Minggu, 29 April 2012

Membuat Energy Saving Mode Jquery Blogger

Berita Teknologi Terbaru – LintasTeknologi.Com

Chord Gitar | Lirik Lagu

Kategori

Popular Posts

Membuat Menu LavaLamp Jquery Blogger

Minggu, 13 Mei 2012

Membuat A Perfect Share Box Widget for Blogger/Blog

Kamis, 10 Mei 2012

Membuat Pop-Up Facebook Like Jquery

Rabu, 09 Mei 2012

Membuat Bounce & Share - Widget Social Bookmarking Blogger

Minggu, 29 April 2012

Membuat Energy Saving Mode Jquery Blogger

document.write(ultimaFecha);

Berita Teknologi Terbaru – LintasTeknologi.Com

Chord Gitar | Lirik Lagu

Kategori