Membuat Button Menggunakan CSS3

Membuat Button Menggunakan CSS3

Assalamualaikum,,

Hai Sobat BMCyber, huh 2 baru bisa Share hari teman soalnya kemaren2 lagi test, Oke langsung saja oh yah saya berterima kasih dulu sama bang Deejyan yang telah memberi Ilmunya tentang Membuat Button Menggunakan CSS3

Seperti biasa sobat harus login ke Blogger klik Rancangan klik Edit HTML.
Kemudian cari kode ]]></b:skin>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol (F3).
Jika sudah ketemu letakan kode CSS berikut diatas kode ]]></b:skin>

.button{
background-color:#fff;
background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#cccccc));
background: -moz-linear-gradient(top, #f3f3f3, #cccccc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#cccccc');
color: #940f04;
color:rgba(0,0,0,0.9);
border:1px solid rgba(0,0,0,0.5);
-moz-border-radius:3px;
-webkit-border-radius:3px;
-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
padding: 3px;
padding-top:3px;
padding-bottom:3px;
margin-right:3px;
}
.button a, .button:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#f3f3f3));
background: -moz-linear-gradient(top, #cccccc, #f3f3f3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f3f3f3');
color:#000;
color:rgba(0,0,0,0.9);
border:1px solid rgba(0,0,0,0.5);
-moz-border-radius:3px;
-webkit-border-radius:3px;
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
text-decoration: none;
padding: 3px;
padding-top:3px;
padding-bottom:3px;
box-shadow: inset 0px 0px 5px #fbc26f;
-webkit-box-shadow: inset 0px 0px 5px #fbc26f;
-moz-box-shadow: inset 0px 0px 5px #fbc26f;
}

kemudian untuk mengaplikasikannya sobat tinggal memanggil kode button diatas yaitu dengan cara menambahkan kode class="button"

berikut contohnya :

contoh link tidak menggunakan button

<a href='http://deejayhan.blogspot.com/2012/04/membuat-button-menggunakan-css3.html">Membuat Button Menggunakan CSS3</a>

contoh button tidak menggunakan link

<a href='#nogo'class="button">Membuat Button Menggunakan CSS3</a>

contoh button yang menggunakan link

<a href='http://bmcyber.blogspot.com/2012/04/membuat-button-menggunakan-css3.html'class="button">Membuat Button Menggunakan CSS3</a>

Hasil menggunakan Button dan link

Membuat Button Menggunakan CSS3

11:41 | 5 comments |

ReadMore

Cara Membuat Buku Tamu Melayang di Blog

Cara Membuat Buku Tamu Melayang di Blog

Assalamualaiku Wr. Wb.

Hai Sobat Blogger. Huaaammmm, Pagi-pagi biar melek mending share ilmu saja sambil nunggu terang,, hehehe Ilmu ini saya dapatkan dari kk Deejyan yaitu tentang Cara Membuat Buku Tamu Melayang di Blog

Langsung aja Deh,

DEMO

(klik Buku Tamu di Sebelah kanan jika ingin demonya)

1. Login Ke Blogger kalian
2. Pilih Rancangan ---> ELEMEN halaman
3. Tambah Gadget ---> Pilih HTML/Java Script
4. Simpan kode berikut dalam konten HTML/Java Scriptnya

<!-- Start Shoutbox light effect by Han -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var semahHeight = $(document).height();
var semahWidth = $(window).width();
//Set heigth and width to semah to fill up the whole screen
$('#semah').css({'width':semahWidth,'height':semahHeight});
//transition effect
$('#semah').fadeIn(1000);
$('#semah').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#semah').hide();
$('.window').hide();
});
//if semah is clicked
$('#semah').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>

<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#semah {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#wadah .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#wadah #kid53 {
background:url(http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png) no-repeat 0 0 transparent;
width:272px;
height:460px;
padding:56px 0 20px 5px;
}
#tutupan {
padding:2px 0 0 0;
}
</style>

<ul><center> <a href="#kid53" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul>

<div id="wadah">
<!-- Start Shoutbox -->
<div id="kid53" class="window">

SIMPAN SCRIPT Cbox KALIAN DISINI

<div id="tutupan"><input type="button" value="Close" class="close" />
</div></div><!-- End Shoutbox -->
<div id="semah"></div></div>
<!-- End of Shoutbox light effect by Han-->
</div>

5. Jangan lupa disimpan

Catatan
Untuk ukuran shoutbox/shoutmix/cbox kalian bisa kalian sesuaikan dengan background gambar.
Untuk Shoutmix ukurannya Height: 380px dan Width: 261px
Untuk Cbox ukurannya height:300px width:250px , untuk width yang bawah samakan dengan width pertama, karena di cbox ada 2 width
untuk ukuran tidak harus terpaku pada punya saya diatas, kalian boleh menyesuaikannya sendiri.

Supaya gambar berada melayang disamping silahkan kalian ganti kode ini:

<ul><center> <a href="#kid53" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul>

dengan kode ini :

<ul><div style='display:scroll; position:fixed; top:5px; right:3px;'>
<a href="#kid53" name="modal"><img src="http://lh3.ggpht.com/_MvLBi88bM_I/TKBi6-LLyiI/AAAAAAAABgo/mXUIjU7ayaY/NiceGB.png" width="158" height="58" /></a>
</div>
</ul>

Ni contoh2 Backgrounya gan.

(diatas dengan code ini: http://i809.photobucket.com/albums/zz15/yuda03/GUESTBOOKRED.png)

(diatas dengan code ini: http://i809.photobucket.com/albums/zz15/yuda03/GUESTBOOKRED.png)




Ni untuk Tombol-Tombolnya

(diatas dengan code ini: http://i809.photobucket.com/albums/zz15/yuda03/gbRED.png)

(diatas dengan code ini: http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png)

05:37 | 6 comments |

ReadMore

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

DEMO

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 |

ReadMore

Membuat Efek zoom pada Gambar

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 :

DEMO

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 |

ReadMore

Cara Membuat Menu 3D Flipdown

Assalamualaikum Wr. Wb.

Hai Sobat Blog, saya akan share tentang Cara Membuat Menu 3D Flipdown, Ilmu ini dapat dari Cyber-JM

Oke langsung aja

DEMO

Loggin blogger.com > Rancangan > Edit html
Rancangan > Edit html cari kode ]]></b:skin>

Pastekan kode beriku di atasnya

.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}​

Selanjutnya cari kode <div id='header-wrapper'>
pastekan kode berikut setelah html kode tersebut

<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Home</b></a></li>
<li><a class="top-a" href="#url"><b>Resort</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="#url">Ski Slopes</a></li>
<li><a href="#url">Night Life</a></li>
<li><a href="#url">Restaurants</a></li>
<li><a href="#url">Car Hire</a></li>
<li><a href="#url">Ski Hire Facilities</a></li>
</ul>
<ul class="col">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">The Snowman</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Ski Inn</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Advanced Skills</a></li>
<li><a href="#url">Beginners Slopes</a></li>
<li><a href="#url">Intermediate Slopes</a></li>
<li><a href="#url">Expert</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Information</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="#url">Lift Passes</a></li>
<li><a href="#url">Insurance</a></li>
<li><a href="#url">Ski Schools</a></li>
<li><a href="#url">Snow Report</a></li>
<li><a href="#url">Gear Rental</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Boots</a></li>
<li><a href="#url">Skis</a></li>
<li><a href="#url">Ski Wear</a></li>
<li><a href="#url">Goggles</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#url">Email</a></li>
<li><a href="#url">Telephone</a></li>
<li><a href="#url">Online Form</a></li>
<li><a href="#url">Snail Mail Address</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Privacy</b></a></li>
<li><a class="top-a" href="#url"><b>Nearby</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">Where to go</a></li>
<li><a href="#url">What to do</a></li>
<li><a href="#url">Places of interest</a></li>
<li><a href="#url">National parks &amp; Museums</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">The Snowman</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Ski Inn</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div>

06:16 | 8 comments |

ReadMore

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:

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 |

ReadMore

Disable Rigth Di Blog

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

DEMO

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 |

ReadMore

Simple Faster Blogger Template

Simple Faster Blogger Template

Fitur:
Dynamic Tag Heading
Breadcrumbs Navigation
Auto Read More + thumbnail
Artikel Terkait Dengan Gambar
Tombol Social Media : Share(fb), Twett, dan Plus One
LeaderBoard Ads Ready (728x90) di samping judul blog
Thread Komentar
Navigasi Halaman Bernomor
"Simple Faster Blogger Template"
template ini Simple dan juga fast loading dan tentunya SEO friendly

DEMO

DOWNLOAD

Sumber :MAS-SUGENG

09:55 | 0 comments |

ReadMore

Template Blog Oom

Fitur Template Blog Oom

Ads Google Adsense Siap
Mesin Pencari CSE
Komentra Threaded
Emotion Onion
Laman Blank
Tombol Share
Auto Post Ringan
Kotak Berlangganan

DEMO

DOWNLOAD

08:47 | 1 comments |

ReadMore

Costume CSS3 blogger template

Costume CSS3 blogger template

Assalamualaikum Wr. Wb.

Hai sobat BLogger.. saya akan memberi kan template karyanya kakak JOHANES

bila sobat mau mengganti gambar'a,sobat tinggal cari kode html dibawah ini..

<li><div class='kotak16animasi'>
<div><a href='http://djogzs.blogspot.com/'><img alt='djogzs' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVivpC19jryS_QZ-LbqYG-IWFEXgMPi46K4Lng9r-SUVGqrX2QokENdSenwWlpCk1BvW6Y5ZGgi70OJ7dpoIOtCwTlwDhDtElp4QoanMBo4ZpEB_PJ52LjvMepo9TtNWh5-YdUb07hESA/s1600/Untit232323led-ff1.jpg'/></a></div><div>Selamat datang di blog saya yang sederhana ^_^</div>
</div></li>

21:44 | 0 comments |

ReadMore

Auto Readmore di Blog

Auto Readmore di Blog

Assalamualaikum Wr. Wb.

Hai, Sobat Blogger? Menunggu jam belajar saya akan sedikit memberi ilmu, sudah tidak asing lagi bagi para sobat blogger, tapi tak ada salahnya saya mengingatkan dan menshare lagi, yaitu tentang Auto Readmore di Blog.

Oke langsung saja,
1. Login Ke Blogger.com.
2. Klik Rancangan>> Edit HTML>> Expand Template Widget.
3. Cari kode seperti dibawah ini:

<data:post.body />

4. Ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<br/>
<data:post.body/>
<b:else/><b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if></b:if>

5. Simpan Template.

Biar bagus tampilannya, tambahin deh kode CSS seperti di bawah ini:

Taruh sebelum kode </b:skin>

.thumb img {
float: left;
margin: 0 10px 10px 0;
}

07:51 | 0 comments |

ReadMore

Back to Top dengan Jquery

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 |

ReadMore