Simak langkah2 dibawah ini:
1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </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;
}
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>
Note:
Jika script yang saya block warna kuning tersebut sudah terpasang di template sobat, sobat tidak perlu memasang nya kembali cukup copy script yang belum terpasang saja.
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 😊
