"Back to Top" adalah salah satu fasilitas yang dapat digunakan pada blog untuk memudahkan pengunjung menavigasi halaman pada blog anda. Fungsi dari Back To Top yaitu mengantarkan kembali pengujung anda ke halaman paling atas. Penggunaan JQuery dengan fungsi ini dapat memberikan hasil scroll yang lebih baik....dalam hal ini scroll menjadi lebih smooth atau halus...Jika anda udah gak sabaran pengen membuatnya langsung aja dipraktekin...
1. Login ke blogger.
2. Pilih Tata Letak dan Klik Edit HTML
3. Masukan script jquery berikut ini diatas </head><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
4. Masukan kode javascript ini setelah script jquery tadi:<script type='text/javascript'>
5. Cari kode <body> dan ubah menjadi <body id='top'>
//<![CDATA[
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
//]]>
</script>
<!-- end scro
6. Masukkan kode html berikut sebelum </body><div id='goingtop'>
7. Simpan template anda dan lihat hasilnya.
<a href='#top' title='Top'><img src='http://i627.photobucket.com/albums/tt351/testemplates/goto_top.gif' style='right:20px; bottom:20px; position: fixed;'/></a></div>
Untuk membuat blog anda lebih creative maka anda perlu membuat sesuatu yang berbeda. Kali ini Blog Trik dan Tips akan memberikan trik membuat Thumbnail Gallery dengan efek JQuery pada bagian heading dan caption. Thumbnail Gallery ini dikembangkan oleh Queness.
Untuk membuatnya sangat mudah. Ikuti aja langkah berikut ini:
1. Login ke blogger
2. Klik Tata Letak dan klik Edit HTML
3. Expand widget template
4. Masukan script berikut ini sebelum code </head> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
5. Masukan java script berikut ini dibawah script sebelumnya<!-- Thumbnail Gallery -->
<script src='http://choenblogspot.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script>
$(document).ready(function () {
// transition effect
style = 'easeOutQuart';
// if the mouse hover the image
$('.photo').hover(
function() {
//display heading and caption
$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
},
function() {
//hide heading and caption
$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:-60},{duration:200, easing: style});
}
);
});
</script>
6. Tambahkan gadjet pada elemen halaman kemudian pilih HTML/Javascipt dan masukan kode berikut ini:
Keterangan: ubah alamat image dan url diatas sesuai yang anda inginkan.
<div class="photo">
<div class="heading"><span>Bukan Template Coklat</span></div>
<a href="http://bukantemplatecoklat.blogspot.com/"><img alt="" src="http://1.bp.blogspot.com/_dfnTVAxeWMI/Snl-0DulohI/AAAAAAAABvQ/sTRn2qXumsk/template-coklat.jpg"/></a>
<div class="caption"><span>Bukan Template Coklat - Free Blogger Template Bukan Template Coklat. </span></div>
</div>
7. Masukan kode CSS berikut, pastinya di dalam kode css sesudah <b:skin><![CDATA[ atau sebelum ]]></b:skin>/* Trumb Gallery */
8. Simpan template anda dan lihat hasilnya
.post .photo img {
/* Ini khusus kode CSS di postingan, perlu disesuaikan dengan template anda*/
padding: 0;
border: 0;
margin-top: -34px;
line-height: 0;
}
.photo {
/* relative position, so that objects in it can be positioned inside this container */
position:relative;
font-family:arial;
/* hide those extra height that goes beyong the size of this container */
overflow:hidden;
border:5px solid #000;
width:250px;
height:190px;
}
.photo .heading, .photo .caption {
/* position inside the container */
position:absolute;
background:#000;
height:50px;
width:250px;
/* transparency for different browsers */
/* i have shared this in my CSS tips post too */
opacity:0.6;
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
}
.photo .heading {
/* hide it with negative value */
/* it's the height of heading class */
top:-50px;
}
.photo .caption {
/* hide it with negative value */
/* it's the height of bottom class */
bottom:-60px;
}
/* styling of the classes*/
.photo .heading span {
color:#26c3e5;
top:-50px;
font-weight:bold;
display:block;
padding:5px 0 0 10px;
}
.photo .caption span{
color:#999;
font-size:9px;
display:block;
padding:5px 10px 0 10px;
}
Penerapan JQuery pada blog kini semakin populer, salah satunya yaitu membuat slide show caption. Trik berikut ini dikembangkan oleh http://www.serie3.info/s3slider/ dengan menamakannya "s3Slider jQuery plugin". Slide show ini akan menampilkan gambar dan sebuah caption diatas gambar. Gambar dan caption akan ditampilkan bergantian. Trik ini mudah diterapkan pada blog anda dan biasanya digunakan untuk menampilkan foto-foto dokumentasi serta gambar template blog. Untuk demo klik disini - DEMO.
Untuk membuatnya pertama yaitu
1. Log in ke blogger
2. Klik Tata Letak dan klik pada edit HTML
3. Expand template
4. Masukan script berikut sebelum </head>:<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
5. Masukan script jquery ini dibawah script tadi:<!-- begin s3Slider jQuery plugin -->
6. Masukan kode berikut ini pada template, atau menaruhnya pada gadjet anda:
<script src='http://choenblogspot.googlecode.com/files/s3Slider.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script><div id="s3slider">
Keterangan: Ubahlah alamat gambar dan keterangannya sesuai kebutuhan anda.
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="http://jquerybloggertemplate.blogspot.com/"><img src="http://lh6.ggpht.com/_dfnTVAxeWMI/SoKzm2f0hbI/AAAAAAAABwk/JMGaOAIMv2c/template-jQ1.jpg"/></a>
<span>Free Blogger Template, jQuery I</span>
</li>
<li class="s3sliderImage">
<a href="http://typo-cufon.blogspot.com/"><img src="http://lh3.ggpht.com/_dfnTVAxeWMI/SoK0ZiKiiJI/AAAAAAAABwo/5ac17qT9_pM/template-cufon.jpg"/></a>
<span>Free Blogger Template with Cufón to Replace Heading Title</span>
</li>
<li class="s3sliderImage">
<a href="'http://bukantemplatecoklat.blogspot.com/"/><img src="http://lh6.ggpht.com/_dfnTVAxeWMI/SoK1ueDCUrI/AAAAAAAABws/q6aFadO-7QU/template-coklat.jpg"/></a>
<span>Free Blogger Template "Bukan Template Coklat"</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
7. Masukan kode berikut sesudah kode <b:skin><![CDATA[ atau sebelum kode ]]></b:skin>/* s3Slider jQuery plugin */
Keterangan: width:250px dan height:190px dapat anda rubah sesuai dengan ukuran image yang anda ingin tampilkan, dan jangan lupa disesuaikan juga width:225px; pada .s3sliderImage span.
#s3slider {
border:5px solid #000;
width:250px; /* important to be same as image width */
height:190px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#s3sliderContent {
margin: 0px; padding:0px;
width:250px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
text-indent: 0px; /* reset blogger */
font: 10px Arial, Helvetica, sans-serif;
padding: 10px 13px;
margin: 0;
width:225px; /* need edit to be same as image width or wider */
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: block; /* important */
top: 0;
/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}
.clear {
clear: both;
}
Apakah anda sudah pernah melihat sebuah list yang menjorok. List ini akan menjorok ke dalam apabila cursor mouse berada disekitar posisi list tersebut. Oke mungkin kalian penasaran apa itu list yang menjorok. Blog Trik dan Tips akan memberikan trik bagaimana membuat list yang menjorok.
Berikut ini adalah langkah untuk membuatnya:
1. Login ke blogger
2. Klik Tata Letak dan Klik Edit HTML
3. Cari kode ini: </b:skin>
4. Paste kode dibawah ini setelah kode pada langkah 3<script type='text/javascript'>
function lm_toRight(obj) {
obj.marginValBackUp = parseInt(obj.style.marginLeft);
obj.style.marginLeft = (obj.marginBackUp + 5).toString() + "px";
}
function lm_restore(obj) {
obj.style.marginLeft = obj.marginBackUp.toString() + "px";
}
</script>
Keterangan: Anda dapat mengatur seberapa jauh list tersebut menjorok ke dalam dengan mengubah angka kode berwarna merah
5. Untuk membuat list dalam postingan maka jangan lupa untuk memasang atribut ini:<li onmouseover='lm_toRight(this)' onmouseout='lm_restore(this)'>
6. Jika anda ingin membuat semua list menjorok maka sisipkan kode berwarna biru pada kode di langkah 4<script type='text/javascript'>
Selamat mencoba semoga berhasil!!!
function lm_toRight(obj) {
obj.marginValBackUp = parseInt(obj.style.marginLeft);
obj.style.marginLeft = (obj.marginBackUp + <span style="color: rgb(255, 0, 0);">5</span>).toString() + "px";
}
function lm_restore(obj) {
obj.style.marginLeft = obj.marginBackUp.toString() + "px";
}
</script>
function lm_loadBehavior() {
var lis = document.getElementsByTagName("li");
for(var i=0; i < lis.length; i++) {
var li = lis[i];
li.onmouseover = function(){lm_toRight(this);}
li.onmouseout = function(){lm_restore(this);}
}
}
var lm_window_onload = window.onload;
window.onload = function() {
if(lm_window_onload) {lm_window_onload();}
lm_loadBehavior();
}
Jika anda mempunyai gadjet HTML Javascript yang kebanyakan pastinya anda akan sulit mencari dan membedakan satu sama lainnya. Anda akan mengalami kesulitan untuk mencari kode-kode dalam gadjet tersebut. Itu karena anda tidak menampilkan judul gadjet karena biasanya akan menggangu penampilan dari blog. Jadi Blog Trik dan Tips akan memberikan solusi bagaimana menampilkan judul tersebut pada elemen halaman tanpa menggangu penampilan blog. Caranya yaitu dengan menghilangkan judul pada tampilan blog namun menampilkannya pada elemen halaman.
Oke langsung kita praktekin:
1. Login ke blogger.
2. Klik Tata Letak dan klik Edit HTML
3. Cari kode ini: ]]></b:skin>
4. Tambahkan kode dibawah ini sebelum kode pada langkah 3#hidden_widget h2 {
5. Cari lagi kode ini: </b:section>
display:none;
}
6. Tambahkan kode dibawah ini setelah kode pada langkah 5.<div id='hidden_widget'>
7.Save template anda
<b:section id='sidebar_hidden' preferred='yes'>
</b:section>
</div>
Coba lihat hasilnya sekarang! Coba anda tulis masing2 gadjet HTML JavaScript dengan judulnya. Anda tidak akan menemukan judul tersebut pada tampilan blog lagi...selamat mencoba!!!
Jika anda sering memposting artikel mengenai tutorial ngeblog, maka anda akan sering menggunakan fasilitas HTML encoder. Selama ini Blog Trik dan Tips menggunakan HTML Encoder dari situs ini http://francois.schnell.free.fr/tools/BloggerPaste/BloggerPaste.html. Tapi kini ada cara lain untuk memudahkan anda menggunakan fasilitas HTML encoder langsung dari situs Blogger-Blogspot. Jika fasiitas ini ada pada blogger maka anda lebih cepat untuk membuat posting. Cara memasangnya pada blogspot cukup mudah dan cepat...silahkan dicoba jika tertarik untuk memasangnya.
Berikut langkah memasangnya:
1. Download Greasemonkey 0.8.20090123.1 pada situs https://addons.mozilla.org/en-US/firefox/addon/748 lalu menginstall dan restart browser anda kembali.
2. Kemudian install JavaScript http://userscripts.org/scripts/source/42696.user.js
Coba lihat di menu posting anda pasti akan muncul tombol HTML Encode Selection. Nah untuk memparse HTML code maka anda hanya menghighlight code HTML yang ingin diparse dan klik tombol tadi.
Selamat mencoba!!!
Untuk membuat refleksi gambar biasanya dilakukan dengan perangkat lunak Adobe Photoshop dan lain sebagainya. Namun tidak semua orang dapat menjalankan program tersebut. Bagaimana dengan kita yang memiliki pengetahuan terbatas namun ingin membuat refleksi gambar pada blog. Tentunya Blog Trik dan Tips memiliki cara tersendiri untuk membuat refleksi gambar. Untuk membuatnya langsung aja kita praktekan...
1. Login ke blogger
2. Klik Tata Letak dan Klik Edit HTML
3. Kopi kode dibawah ini dan paste antara ]]></b:skin> dan </head><script type='text/javascript'>
//<![CDATA[
if (!document.myGetElementsByClassName) {
document.myGetElementsByClassName = function(className) {
var children = document.getElementsByTagName('*') || document.all;
var elements = new Array();
for (var i = 0; i < children.length; i++) {
var child = children[i];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
}
}
var Reflection = {
defaultHeight : 0.5,
defaultOpacity: 0.5,
add: function(image, options) {
Reflection.remove(image);
doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }
if (options) {
for (var i in doptions) {
if (!options[i]) {
options[i] = doptions[i];
}
}
} else {
options = doptions;
}
try {
var d = document.createElement('div');
var p = image;
var classes = p.className.split(' ');
var newClasses = '';
for (j=0;j<classes.length;j++) {
if (classes[j] != "reflect") {
if (newClasses) {
newClasses += ' '
}
newClasses += classes[j];
}
}
var reflectionHeight = Math.floor(p.height*options['height']);
var divHeight = Math.floor(p.height*(1+options['height']));
var reflectionWidth = p.width;
if (document.all && !window.opera) {
/* Fix hyperlinks */
if(p.parentElement.tagName == 'A') {
var d = document.createElement('a');
d.href = p.parentElement.href;
}
/* Copy original image's classes & styles to div */
d.className = newClasses;
p.className = 'reflected';
d.style.cssText = p.style.cssText;
p.style.cssText = 'vertical-align: bottom';
var reflection = document.createElement('img');
reflection.src = p.src;
reflection.style.width = reflectionWidth+'px';
reflection.style.display = 'block';
reflection.style.height = p.height+"px";
reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';
d.style.width = reflectionWidth+'px';
d.style.height = divHeight+'px';
p.parentNode.replaceChild(d, p);
d.appendChild(p);
d.appendChild(reflection);
} else {
var canvas = document.createElement('canvas');
if (canvas.getContext) {
/* Copy original image's classes & styles to div */
d.className = newClasses;
p.className = 'reflected';
d.style.cssText = p.style.cssText;
p.style.cssText = 'vertical-align: bottom';
var context = canvas.getContext("2d");
canvas.style.height = reflectionHeight+'px';
canvas.style.width = reflectionWidth+'px';
canvas.height = reflectionHeight;
canvas.width = reflectionWidth;
d.style.width = reflectionWidth+'px';
d.style.height = divHeight+'px';
p.parentNode.replaceChild(d, p);
d.appendChild(p);
d.appendChild(canvas);
context.save();
context.translate(5,image.height-1);
context.scale(1,-1);
context.drawImage(image, 0, 0, reflectionWidth, image.height);
context.restore();
context.globalCompositeOperation = "destination-out";
var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");
context.fillStyle = gradient;
context.rect(0, 0, reflectionWidth, reflectionHeight*2);
context.fill();
}
}
} catch (e) {
}
},
remove : function(image) {
if (image.className == "reflected") {
image.className = image.parentNode.className;
image.parentNode.parentNode.replaceChild(image, image.parentNode);
}
}
}
function addReflections() {
var rimages = document.myGetElementsByClassName('reflect');
for (i=0;i<rimages.length;i++) {
var rheight = null;
var ropacity = null;
var classes = rimages[i].className.split(' ');
for (j=0;j<classes.length;j++) {
if (classes[j].indexOf("rheight") == 0) {
var rheight = classes[j].substring(7)/100;
} else if (classes[j].indexOf("ropacity") == 0) {
var ropacity = classes[j].substring(8)/100;
}
}
Reflection.add(rimages[i], { height: rheight, opacity : ropacity});
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
addReflections();
});
//]]>
</script>
4. Simpan template anda
5. Jika anda ingin menampilkan refleksi gambar maka gunakan atribut class = "reflect" on the image code.
contohnya: <img src="http://img177.imageshack.us/img177/5585/reflectionqq8.png" class="reflect"/>
