Simak langkah2 dibawah ini:
1. Login ke akun blogger
2. Klik Template Edit HTML
3. Kemudian tekan Ctrl +F cari kode ]]></b:skin> </style>
4. Lalu tambahkan script CSS ]]></b:skin> </style>
body {
background :# eee ;
margin : 0 ;
padding : 0 ;
}
. example {
position : relative ;
background - color :# fff ;
width : 700px ;
overflow : hidden ;
border : 1px #000 solid;
margin : 20px auto ;
padding : 20px ;
border - radius : 3px ;
- moz - border - radius : 3px ;
- webkit - border - radius : 3px ;
}
#gallery {
height : 600px ;
position : relative ;
width : 100 %;
}
#gallery div,#gallery div a {
height : 128px ;
overflow : hidden ;
width : 192px ;
}
#gallery div {
background - color :# fff ;
background - position : 50 % 50 %;
background - repeat : no - repeat ;
border : 2px solid #000;
left : 250px ;
padding : 5px ;
position : absolute ;
top : 200px ;
border - radius : 3px ;
- moz - border - radius : 3px ;
- webkit - border - radius : 3px ;
- moz - box - shadow : 3px 3px 4px #444;
- webkit - box - shadow : 3px 3px 4px #444;
box - shadow : 3px 3px 4px #444;
}
#gallery div a {
display : block ;
text - indent :- 1000px ;
}
div #fancy_overlay {
position : fixed ;
top : 0 ;
left : 0 ;
width : 100 %;
height : 100 %;
display : none ;
z - index : 30 ;
}
div #fancy_loading {
position : absolute ;
height : 40px ;
width : 40px ;
cursor : pointer ;
display : none ;
overflow : hidden ;
background : transparent ;
z - index : 100 ;
}
div #fancy_loading div {
position : absolute ;
top : 0 ;
left : 0 ;
width : 40px ;
height : 480px ;
background : transparent url ( 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtdp5rD577sFYZYAU4X6OZmwqde_U4v84M_YKa2k4FaE_omh0utWG2r8HYe27dUsRMZ_wpQ8I_4mgfQP45LsoWvYOwhmxCZnTaInIAO_0wlt-oAmkPUbqkd1ROtAVqQw02y8taOVx33VvL/s1600/fancy_progress.png' ) no - repeat ;
}
div #fancy_outer {
position : absolute ;
top : 0 ;
left : 0 ;
z - index : 90 ;
padding : 20px 20px 40px 20px ;
margin : 0 ;
background : transparent ;
display : none ;
}
div #fancy_inner {
position : relative ;
width : 100 %;
height : 100 %;
background : #FFF;
}
div #fancy_content {
margin : 0 ;
z - index : 100 ;
position : absolute ;
}
div #fancy_div {
background : #000;
color : #FFF;
height : 100 %;
width : 100 %;
z - index : 100 ;
}
img #fancy_img {
position : absolute ;
top : 0 ;
left : 0 ;
border : 0 ;
padding : 0 ;
margin : 0 ;
z - index : 100 ;
width : 100 %;
height : 100 %;
}
div #fancy_close {
position : absolute ;
top : - 12px ;
right : - 15px ;
height : 30px ;
width : 30px ;
background : url ( 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_nT-OjOrCRBdrJD1u-6WBd-wAcP-TxqxAgnYPr1BB6UeUnNCumhmwpc7nIrGFFXKD4cyx-VGfMx2il07GDmLvPbYda7azz7tYcVEqTBzfkLGEfpNXBb_AtLQ1f0YD4ZNfEwHLFxQS0fqo/s1600/fancy_closebox.png' ) top left no - repeat ;
cursor : pointer ;
z - index : 181 ;
display : none ;
}
#fancy_frame {
position : relative ;
width : 100 %;
height : 100 %;
display : none ;
}
#fancy_ajax {
width : 100 %;
height : 100 %;
overflow : auto ;
}
a #fancy_left, a#fancy_right {
position : absolute ;
bottom : 0px ;
height : 100 %;
width : 35 %;
cursor : pointer ;
z - index : 111 ;
display : none ;
background - image : url ( "data:image/gif;base64,AAAA" );
outline : none ;
overflow : hidden ;
}
a #fancy_left {
left : 0px ;
}
a #fancy_right {
right : 0px ;
}
span . fancy_ico {
position : absolute ;
top : 50 %;
margin - top : - 15px ;
width : 30px ;
height : 30px ;
z - index : 112 ;
cursor : pointer ;
display : block ;
}
span #fancy_left_ico {
left : - 9999px ;
background : transparent url ( 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrtwbG5z9vr81dPYhJYEAKM0OrPSQR1ZqG_to-rzDOJxGyWllNbqnBUCMh9ar2QwSBPPUfiQHNTVt-yqAr-S3bGang8AKfoXFfmFsO8QSel02YKtRnFUkweKjZwFbJb1PF1od0kZ2CRwUV/s1600/fancy_left.png' ) no - repeat ;
}
span #fancy_right_ico {
right : - 9999px ;
background : transparent url ( 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJQZYrZm0FIAgKQ-AIfCF2KmlgZSTq8R0_i7MVYX2k_DngWBKjVJRWRYRPIPda6hV6FfvxuEQED880kMSeO3VaoplbZE5H6FoC59FOhhOvxxuqpDqmXNU6OvYKOGLS59Gftrk-McemXhbu/s1600/fancy_right.png' ) no - repeat ;
}
a #fancy_left:hover, a#fancy_right:hover {
visibility : visible ;
background - color : transparent ;
}
a #fancy_left:hover span {
left : 20px ;
}
a #fancy_right:hover span {
right : 20px ;
}
#fancy_bigIframe {
position : absolute ;
top : 0 ;
left : 0 ;
width : 100 %;
height : 100 %;
background : transparent ;
}
div #fancy_bg {
position : absolute ;
top : 0 ; left : 0 ;
width : 100 %;
height : 100 %;
z - index : 70 ;
border : 0 ;
padding : 0 ;
margin : 0 ;
}
div . fancy_bg {
position : absolute ;
display : block ;
z - index : 70 ;
border : 0 ;
padding : 0 ;
margin : 0 ;
}
div #fancy_bg_n {
top : - 20px ;
left : 0 ;
width : 100 %;
height : 20px ;
background : transparent url ( 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqBUdNK8yxO1XQt4DdRC7hcvLrVGW1m4Gf1JLTjAFiTTywXKKz_qZaqTdctzSjK_TJo4rFAe_4NyqIhk5f7KMrpqLmIV_RSGBomZQtRlwN_nsqx9QSKzDvCKZO1KuOVGL4Z_qmGVQK0iz9/s1600/fancy_shadow_n.png' ) repeat - x ;
}
div #fancy_bg_ne {
top : - 20px ;
right : - 20px ;
width : 20px ;
height : 20px ;
background : transparent url ( 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZUUmLKzqsnvnBNTKOXTe1JLaTc6bh0e2GA1G73Tjo58flW40lG3H6W5L1nOCkt_AOrBrD8a7zRt3HZIy12W8lCA8WqH1BvwoTP91UT9HuDdVqRhPfb-O6a65nMP3MMiZhk1lImaFTmwmX/s1600/fancy_shadow_ne.png' ) no - repeat ;
}
div #fancy_bg_e {
right : - 20px ;
height : 100 %;
width : 20px ;
background : transparent url ( 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_d5BuVQAmGoIxjXKOn_WIyovyYWM-SJ0CVabNlE0NQmzbeHf32uPTYVAs-E6ersRSSJhAUwaVVoKG48RNlbztEc0fbypajaaLQw4qP5w0oyvHjk4kb67g4EmYSKI-YNb-suJTDsM5e4bx/s1600/fancy_shadow_s.png' ) repeat - y ;
}
div #fancy_bg_se {
bottom : - 20px ;
right : - 20px ;
width : 20px ;
height : 20px ;
background : transparent url ( 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9YZPlpFKhxRkLpyXDMJI0eiMnkGnfjaF1M18CUk9WDMHRSqw1QU_BlcT8A4bCLIw_EWowwsIW7IGPHEJU7W6IISs-ae1UtvE7XfWxAILWsE0X4l7J6LxeE2s5WfbsUn-0qhbwsmbEnjT/s1600/fancy_shadow_se.png' ) no - repeat ;
}
div #fancy_bg_s {
bottom : - 20px ;
left : 0 ;
width : 100 %;
height : 20px ;
background : transparent url ( 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_d5BuVQAmGoIxjXKOn_WIyovyYWM-SJ0CVabNlE0NQmzbeHf32uPTYVAs-E6ersRSSJhAUwaVVoKG48RNlbztEc0fbypajaaLQw4qP5w0oyvHjk4kb67g4EmYSKI-YNb-suJTDsM5e4bx/s1600/fancy_shadow_s.png' ) repeat - x ;
}
div #fancy_bg_sw {
bottom : - 20px ;
left : - 20px ;
width : 20px ;
height : 20px ;
background : transparent url ( 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivaUnLKWvDkQDpftpiWxnB6A7EzU_xw62Ths1bTO2iJ0ZrFtaLZFrJ1yXPpYkabG1Os0gmn4WVEDDipTQr_V6hPvis8RMb_iAbT2XuxwFlKUoYwvUloRdQtpFZCzXeE5i_PV9anpPgKk0I/s1600/fancy_shadow_sw.png' ) no - repeat ;
}
div #fancy_bg_w {
left : - 20px ;
height : 100 %;
width : 20px ;
background : transparent url ( 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdIE8auLyvm3-QH7V4JetBkhrzTUr1QDAIBd7GOiF3DeQZtYSbiJCPJQobW0pojEL44H9Wbc_RISGj7zSDKuF0GG7JjnT-jO9pyVgN3wuYDe0cNU7owOi7In9ebeXI3LOIDkLFPtdtBBLo/s1600/fancy_shadow_w.png' ) repeat - y ;
}
div #fancy_bg_nw {
top : - 20px ;
left : - 20px ;
width : 20px ;
height : 20px ;
background : transparent url ( 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4jV9R8gk5SaAXruqSdp1Ns0ckzc0_HQCPPeOI_3VUERxh_WY7slDK1R3qDYBVUtzotx5mPrCVMXn3drRYjzxTPZXo_d00WaWejex-sIUBfjD7g3osmFNpb8BKzzInhR7c8Q2ryvB1vNjJ/s1600/fancy_shadow_nw.png' ) no - repeat ;
}
div #fancy_title {
position : absolute ;
z - index : 100 ;
display : none ;
}
div #fancy_title div {
color : #FFF;
font : bold 12px Arial ;
padding - bottom : 3px ;
white - space : nowrap ;
}
div #fancy_title table {
margin : 0 auto ;
}
div #fancy_title table td {
padding : 0 ;
vertical - align : middle ;
}
td #fancy_title_left {
height : 32px ;
width : 15px ;
background : transparent url ( 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv0k7lzKSSgzXGlBSerI0w-8FnA5E7IhyAA-65nJUh1UByCwAzo0Od3W8u4JbRtybzSci85_wO5NCkWWus4GnXmc5T6kSBAAOFfqXlNpyEHhzkg5bBJJGmJVBbeqzrP8jn4fFEyQxwNhid/s1600/fancy_title_left.png' ) repeat - x ;
}
td #fancy_title_main {
height : 32px ;
background : transparent url ( 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixNe23m09lruQWSuHLewiuMtRK65ICfN-ss4fXrUIJSZsRAkdPIK3htl-bOWEgAGX-lQULN2LSavwCQ1rIOoMMw8sHF3kpkkN47qloDsw16oo_06hN14x0q1s0ozh0yGWaUgurpEX6lqdI/s1600/fancy_title_main.png' ) repeat - x ;
}
td #fancy_title_right {
height : 32px ;
width : 15px ;
background : transparent url ( 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSebgZXA_0rOUDG-_PDajmEZdXEq52P_Za7Q-f90Julw-AWCx-UyeX_S-aR_6KuRWDO4YEJbHzix850dWlFkC8kM6EIaSPX_feKhNWpqkLyzGs0Icb4Furm8WE0AGG8yM5DobzI4I_D67w/s1600/fancy_title_right.png' ) repeat - x ;
} Copy
5. Tekan
Ctrl +
F cari kode
</head> Lalu masukan script di bawah ini tepat di atas kode
</head>
<script type = "text/javascript" src = " http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js " ></script>
<script type = "text/javascript" src = "https://sites.google.com/site/vanzdy/script/jquery-css-transform.js" ></script>
<script type = "text/javascript" src = "https://sites.google.com/site/vanzdy/script/jquery-animate-css-rotate-scale.js" ></script>
<script type = "text/javascript" src = " http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js " ></script>
<script type = "text/javascript" src = "https://sites.google.com/site/vanzdy/script/jquery.fancybox-1.2.6.pack.js" ></script>
<script>
$ ( document ). ready ( function (){ // on document ready
// onload - randomizing photos
$ ( '#gallery div' ). each ( function () {
var iRL = Math . floor ( Math . random () * 500 );
var iRT = Math . floor ( Math . random () * 350 );
var iMT = Math . floor ( Math . random () * 100 - 50 );
$ ( this ). animate ({
left : iRL ,
top : iRT ,
rotate : iMT + 'deg' ,
}, 2000 );
});
var bPrevClick = false ; // preventing clicking will solve problem with fancybox
$ ( '#gallery div' ). draggable ({ // making photos draggable
containment : 'parent' ,
start : function ( e , ui ) {
bPrevClick = true ;
},
stop : function ( e , ui ) {
setTimeout ( function () {
bPrevClick = false ;
}, 50 );
}
});
$ ( '#gallery div a' ). bind ( 'click' , function ( e ) {
if ( bPrevClick ) {
e . preventDefault ();
e . stopImmediatePropagation ();
}
});
$ ( '#gallery div' ). mousedown ( function ( e ) { // on mouse down
var iMZ = 0 ;
$ ( '#gallery div' ). each ( function () { // searching for max zIndex
var z = parseInt ( $ ( this ). css ( 'zIndex' ))
iMZ = ( z > iMZ ) ? z : iMZ ;
});
$ ( e . target ). closest ( '#gallery div' ). css ({ // we will UP actice image
zIndex : iMZ + 1
});
});
$ ( 'a.fancybox' ). fancybox ({ // fancybox initizlization
zoomSpeedIn : 500 , // zoom IN speed
zoomSpeedOut : 500 , // zoom OUT speed
overlayShow : false // using overlay
});
}); </script> Copy Note:
6. Simpan Template.
Penerapannya:
Supaya kode di atas muncul di posting blog sobat » Silahkan buat Entri baru
gunakan mode HTML kemudian masukan kode berikut ini kedalam halaman posting blog sobat.
Welcome to my blog 😊
Modal Kecil bisa mendapatkan hasil yg luar biasa...
My life is my message.
jangan lupo mampir ke blog saya ya gan di www.portalcoding.com
Cuma Slidernya tidak bisa jalan ya jika blogspot di alihkan ke dot.ID
Mohon infonya.
Tolong gan !!