|| BMCyber || Share For All ||

Fans Page

Powered by Blogger.
Showing posts with label Jquery. Show all posts
Showing posts with label Jquery. Show all posts

Mengganti Tulisan Older Post dan Newer Post Dengan Judul Artikel

older post

Mengganti Tulisan Older Post dan Newer Post Dengan Judul Arrtikel

Assalamualaikum Warohmatullahi Wabarokatuh.

Hai Sobat BMCyber,, Maf ni baru bisa Posting soalnya kemaren2 sibuk. Oke hari ini saya akan share tentang Mengganti Tulisan Older Post dan Newer Post Dengan Judul Artikel. sebelumnya makasih buat kak deejayhan yang udah kasih ilmunya

Langsung saja:
Cara memasangnya, ikuti langkah berikut:

1. langkah 1
a. Login ke blogger dan masuk ke bagian Edit Template (Dashboard -> Rancangan -> Edit HTML).
b. Letakkan kode berikut ini sebelum </head>

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

c. Lalu, simpan Template
b. Langkah ke 2
Tambahkan kode di bawah ini ke gadget (Dengan menambahkan widget Javascript/HTML) (posisinya bebas).

<style type="text/css">
#blog-pager-newer-link {font-size:12px;width:200px;float:left; text-align:left;}
#blog-pager-older-link {font-size:12px;width:200px;float:right; text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
});
</script>

- Simpan gadget Javascript/HTML
- Sekarang coba buka blog kamu, dan lihat dibawah posting, apakah link older post dan newer post sudah berubah dan yang muncul adalah judul artikel atau postingannya ???

03:19 | 2 comments |

Membuat Pop-Up Facebook Like Jquery

FB

Membuat Pop-Up Facebook Like Jquery

Assalamualaikum Warohmatullahi Wabarokatuh

Hai Sobat BMCyber, Sebelum Jumatan Saya akan membagikan Materi tentang Membuat Pop-Up Facebook Like Jquery Makasih Buat Kakak Deejayhan

Oke langsung saja

DEMO

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/AVvXsEh930ZzKqR9mIxyW1-I6Ep-iZuYUB226HVfS4bKHx1m06K81pwqczwWkQ-0mumpImd_iJFJUtT-zs_IIQsuoKJ6QUHzatn5rRvOTrDCs6Yvs0Np_0BMCssJthx3NBi3-GuAmDnSLr10UF3M/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 .
11:52 | 5 comments |

Membuat jsBloggerLightbox di Blogger

light box

Klik gambar diatas sebagai DEMOnya


Membuat jsBloggerLightbox di Blogger

Assalamualaikum Warohmatullahi Wabarokatuh.

Hai Sobat BMCyber, Emang yah kalo kita lagi bosan lebuh baik kita membagi2 ilmu yang kita dapatkan, oke sebelum lanjut saya berterima kasih kepada kk Deejayhan. oke materi sekarang yang akan saya bagikan ke sobat BMCyber tentang Membuat jsBloggerLightbox di Blogger

Oke langsung saja:

.Login ke akun Blogger
.Sekarang Pergi ke Desain> Edit HTML. (Pertama Backup Template Anda)
.Sekarang mencari tag </ head> dan paste kode berikut di atas code </head>

<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src='http://jsblogstop-blogger-feed-tools.googlecode.com/svn/trunk/jsBloggerLightBox.js' type='text/javascript'></script>

.Simpan
Keterangan :
Lightbox ini secara otomatis mendeteksi gambar dan menampilkannya di jendela overlay.
11:14 | 0 comments |

Membuat YUI Lightbox Jquery Blogger


Membuat YUI Lightbox Jquery Blogger

Assalamualaikum Wr. Wb

Hai Sobat Blogger, Huft hari ini sedikit membosankan ni bagi saya,, dari pada bosan lebih baik saya share trik aja ni saya dapatkan dari Deejyan.. Langsung aja deh Membuat YUI Lightbox Jquery Blogger


Cara Menambahkan YUI Lightbox Ke Blogger
Ada 2 cara untuk menambahkannya .
Cara 1 :
1. Sekarang Pergi ke Desain> Edit HTML.

2. Sekarang mencari tag </ head> dan paste kode berikut hanya atas / Sebelum itu.

<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/27675057/YUI%20lightbox/container.css" />
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/dragdrop-min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/container-min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/Lightbox.js"></script>

Cara ke 2 :
1. Pergi ke Halaman Post / Anda ingin menambahkan YUI Lightbox dan kemudian pergi ke tab Edit HTML.

2. Sekarang salin kode dari bawah dan paste di sana.

<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/27675057/YUI%20lightbox/container.css" />
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/dragdrop-min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/container-min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/YUI%20lightbox/Lightbox.js"></script>

Cara Posting YUI Lightbox ke Postingan:
1. Sekarang untuk menambahkan gambar ke dalam YUI Lightbox, Pertama menambahkan foto

<img src="1-th.jpg" id="photo1"/>

Dalam hal ini, silakan membuat catatan dari tag id dan ini adalah versi lebih kecil dari link image.Sekarang itu dengan lightbox menggunakan kode berikut.

<script type="text/javascript">
init = function(){

var dataSource = {
photo1:{url:"1.jpg", title: 'Rocks'}, /*This is the larger image*/

};
var lightbox = new YAHOO.com.thecodecentral.Lightbox({
imageBase:'js/lightbox',
dataSource: dataSource
});
}
YAHOO.util.Event.on(window, 'load', init);
</script>

Contoh Kode Gambarnya Lihat dibawah ini

<script type="text/javascript">
init = function(){
/**
* Format:
* Image_ID : {url : 'point_to_original_image', title: 'optional title'}
*/
var dataSource = {
photo1:{url:"http://test.thecodecentral.com/demos/lightboxrev/photos/1.jpg", title: 'Rocks'},
photo2:{url:"http://test.thecodecentral.com/demos/lightboxrev/photos/2.jpg"},
photo3:{url:"http://test.thecodecentral.com/demos/lightboxrev/photos/3.jpg", title: 'Untitled'},
photo4:{url:"http://test.thecodecentral.com/demos/lightboxrev/photos/4.jpg", title: 'Iceberg'},
photo5:{url:"http://test.thecodecentral.com/demos/lightboxrev/photos/5.jpg", title: 'Unknown Place'},
photo6:{url:"http://test.thecodecentral.com/demos/lightboxrev/photos/6.jpg", title: 'Iceberg 2'}
};
/**
* imageBase: tell lightbox where to find images need to render the ui
* this usual located in the same folder as the Lightbox.js
* dataSource: a JavaScript object contains a list of images that
we are going to attach the lightbox to
*/
var lightbox = new YAHOO.com.thecodecentral.Lightbox({
imageBase:'js/lightbox',
dataSource: dataSource
});
}
YAHOO.util.Event.on(window, 'load', init);
</script>


ekarang simpan Post / Page.
Description: Membuat YUI Lightbox Jquery Blogger
13:33 | 3 comments |

Membuat Efek zoom pada Gambar

Efek Zoom

Membuat Efek zoom pada Gambar

Assalamualaikum Wr. Wb.

Hai Sobat Blogger, Hari ini saya akan share tentang Membuat Efek zoom pada Gambar ini saya dapatkan dari DeeJayHan

Langsung aja, Cekidot :


Langkah Tambahkan ke Blogger:

1.Login ke akun Blogger.
2. Sekarang Pergi ke Desain> Edit HTML.

Sekarang mencari tag dan paste kode di bawah ini letakkan di atas

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/Easy%20Image%20Zoom/easyzoom.js"></script>
<link href="http://dl.dropbox.com/u/27675057/Easy%20Image%20Zoom/default.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript">
jQuery(function($){
$('a.zoom').easyZoom();
});
</script>

Sekarang mencari ]]> </ b: skin>
tag dan paste kode berikut hanya atas / Sebelum itu.

/* Edit width, height and placement of the dynamically created image zoom box. */
#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:50px;
left:700px;
overflow:hidden;
-moz-box-shadow:0 0 10px #777;
-webkit-box-shadow:0 0 10px #777;
box-shadow:0 0 10px #777;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

Sekarang untuk menambahkan gambar ke dalam Easy Zoom Pertama anda harus menggunakan kode

<a href="Image.Jpg" class="zoom"><img src="Image.Jpg" alt="Teks Anda"></a>

Lalu Save / Terbitkan dan lihat efek zoom nya :D
14:16 | 3 comments |

Text-Shadow dan Membesar Dengan Efek Hover

Assalamualaikum Wr. Wb.

Hai Sobat Blogger, Hari ini saya akan Share Tentang Text-Shadow dan Membesar Dengan Efek Hover, Ilmu ini saya dapatkan dari Cyber-JM

Oke langsung saja ini Demonya di text di blog DEMO:


untuk membuatnya silahkan copy kode berikut

<style type="text/css">
#DM{margin:0 auto;padding:5px;text-align:center;}.polo_box {width:280px;height:200px;background:none;}#ease.polo_box {
-webkit-transition: all 4s ease-in;-moz-transition: all 4s ease-in;-o-transition: all 4s ease-in;-webkit-transition: all 4s ease-in;transition: all 4s ease-in;}#DM:hover .polo_box, #DM.hover_effect .polo_box {text-shadow: 0 0 10px lime;color:lime;-moz-transform:scale(2.2);-webkit-transform:scale(2.2);-webkit-transition-duration: 3s;}
</style>
<div id="DM">
<div class="polo_box" id="DM">
<div class="center">
Proklamasi
Kami bangsa Indonesia dengan ini menjatakan kemerdekaan Indonesia.
Hal-hal jang mengenai pemindahan kekoeasaan d.l.l., diselenggarakan
dengan tjara seksama dan dalam tempo jang sesingkat-singkatnja.
Djakarta, hari 17 boelan 8 tahoen 05
Atas nama bangsa Indonesia.

Soekarno/Hatta</div>
</div>
</div>


06:00 | 0 comments |

Disable Rigth Di Blog

disable

Assalamualaikum Wr. Wb.

Sebelum Berangkat Sekolah, atau mengerjakan UN ke 2, saya akan membagikan Ilmu yang aku dapat kan dari Cyber-JM
Oke langsung aja


Loggin blog > Rancangan > Edit Html
Cari kode dan pastekan ini di atasnya

<style>
.overlay{
background-color:rgba(0,0, 0, .9);
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGUlEQVQYlWNgGDxAW1t7s7a29mbqKRzKAACehgTR4PFIOAAAAABJRU5ErkJggg==);
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
}
.box{
position:fixed;
height:200px;
width:600px;
left:-100%;
top:22%;
background-color:rgba(0,0, 0, .4);
color:#777;
font:20px arial,sans serif;
padding:20px;
border:1px solid #222;
-moz-box-shadow: 0 1px 5px #000;
-webkit-box-shadow: 0 1px 5px #000;
z-index:9999;
}
.close{
float:right;
width:36px;
height:36px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiQdBep1V_TA-c01onJl-2i2XFnhEoVvbVjzhDd1pTINEbm-l3eTl1wYN0ShGjQHSYwsrron5Ep3u2t5Jd7ZhpJ0nQpV9RHFKK5UvmZ37AhGydcBEn9NdTpuc7o99Mujb-ipl8mhX0xFsl/s1600/close_icon.png) repeat top left;
margin-top:-10px;
margin-right:-10px;
cursor:pointer;
}
.box h1{
font:60px arial black,sans serif;line-height:0.8em;
color:red;
}
</style>
<script type="text/javascript" src="http://pandet-pandet.googlecode.com/files/disble-right-click.js"></script>
<div class="overlay" id="overlay" style="display:none;">
</div>
<div class="box" id="box">
<a class="close" id="close"></a>
<h1>
Disable right click</h1>
<p>
Maaf Klik kanan di non aktifkan</p>
</div>

Cukup itu saja dan simpan Semoga bermanfaat dan terima kasih

05:42 | 1 comments |

Back to Top dengan Jquery

Back to top

Back to Top dengan Jquery

Assalamualaikum Sobat Blogger

Langsung aja deh,, Ilmu ini sebenernya udah gak asing lagi,, tapi saya akan tetap memberi ilmu ini karena sedikit berbeda,Back to Top dengan Jquery yang akan saya share ini menggunakan Jquery.

Cekibrot.

ikuti langkah2 berikut ini:

1. Masukan script jQuery berikut diatas
(jika telah ada script ini tidak perlu diperlukan lagi)

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

2. Masukan pula script 'back to top' ini dibawah script jQuery diatas:

<script src='http://choenblogspot.googlecode.com/files/backtotop.js' type='text/javascript'/>

3.Kemudian letakan kode html dibawah ini di elemen halaman atau di letakan sebelum atau dibagian footer, dan benahi posisinya dengan CSS sesuai keinginan anda.

<a href='#' onclick='MGJS.goTop();return false;'>Top</a>

Selesai dah,, Selamat Mencoba Wassalam
05:43 | 0 comments |