GuruGoBlog

This is Delphi, A free premium blogger theme for you.

9/28/2011

Satu lagi cara membuat image reflection atau gambar dengan efek bayangan pada posting adalah dengan menambahkan kode javascript pada template blog. Kalau pada posting yang sebelumnya, di image reflection manualkita bisa membuat efek bayangan ini dengan bantuan pihak ketiga dari situs image reflection maker, maka yang ini lebih simple dan sederhana. Anda bisa membuat gambar atau image yang dipostingkan akan berbayang atau tidak. Artinya, tinggal disesuaikan dengan kebutuhan saja. Caranya dengan menambahkan perintah class="reflect" pada setiap image yang telah diupload ke posting.

Membuat image reflection otomatis pada posting

Klik Tata Letak

Pilih menu Edit HTML

Letakkan kode berikut di atas kode </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>

Klik tombol Simpan Template

Selesai

Membuat Image Reflection Otomatis Pada Blog

Posted by GuruGoBlog on 15.37

Klik Tata Letak

Pilih menu Edit HTML

Letakkan kode berikut di atas kode </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>

Klik tombol Simpan Template

Selesai

Pertama,pergilah ke Dashboard
Selanjutnya pilih tab Edit Html
Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates'
Nah,setelah itu cari kode : .post img { (Gunakan Ctrl+F) Biasanya dibawahnya akan ada kode tambahan untuk cssnya,seperti:.post img {padding:4px; border:1px solid #cccccc;}
Nah,tinggal ganti kode tersebut dengan kode berikut:

.post img {
background:url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;}

Setelah itu simpan template dan lihat hasilnya :D

Specially thax for http://i30.tinypic.com/1qsh1h.jpg

Membuat Bayangan/ Shadow Pada Gambar Posting

Posted by GuruGoBlog on 15.27

Pertama,pergilah ke Dashboard
Selanjutnya pilih tab Edit Html
Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates'
Nah,setelah itu cari kode : .post img { (Gunakan Ctrl+F) Biasanya dibawahnya akan ada kode tambahan untuk cssnya,seperti:.post img {padding:4px; border:1px solid #cccccc;}
Nah,tinggal ganti kode tersebut dengan kode berikut:

.post img {
background:url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;}

Setelah itu simpan template dan lihat hasilnya :D

Specially thax for http://i30.tinypic.com/1qsh1h.jpg

Header adalah bagian yang paling penting untuk dipercantik, baik dengan penggunaan gambar yang menarik, background yang proporsional dan tulisan yang komunikatif sehingga pengunjung blog merasa dihargai pas ketika berkunjung ke halaman blog. Pilihan lainnya adalah penggunaan flash, dan digabung dengan javascript untuk memunculkan tampilan yang dinamis dan keren. Kali ini pilihannya adalah memasang slide out navigation floating pada header. Penggunaan slide ini direkomendasikan, karena selain gunanya mempercantik header blog, kegunaan lainnya adalah untuk membuat anchor link ke kontak online seperti Email, Facebook, Twitter, dan Plurk. Jika berminat memasang Slide Out Navigation pada blog anda, ikuti langkah-langkah berikut.

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.
Copy dan paste kode di bawah pada content HTML/Javascript.

<style> ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 0px; list-style: none; z-index:999999; width:721px; } ul#navigation li { width: 103px; display:inline; float:left; border:0;
} ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#E7F2F9; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; text-decoration:none; text-align:center; padding-top:80px; opacity: 0.96; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
} ul#navigation li a:hover{ background-color:#CAE3F2; } ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#60ACD8; font-family:trebuchet-ms, arial, tahoma, Sans-Serif; font-weight:bold; text-shadow: 0 -1px 1px #fff;
} ul#navigation .rss a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAIKTblasn6PJx6HIvwMNpP4rkxF-Q9oXdEOmN4UxHmNK4VrW-HXsTdZ_CglETgDY1ZC7jTM4b3Q_xHZfSiqzPw2Qw0GexqI62GW003Aefc0vhbYxSUDN4VrTZiWNcIziG44MUXV1ftm4/s400/rss.png); } ul#navigation .facebook a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5-qk5R99fLNm_wopjD6eAqpKsY_Frc4fbo6uThnK_CiTbTBGMXajlBzI45766S1ZYsncsL4LXiw0gIwTu1e2SII6V5EFjNVkw2j-ivmR5GVa52g0tUYpjrXxyvdVStuNCauLkbJc4tY/s400/facebook.png); } ul#navigation .twitter a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8u7EaVnA6iXLldG0tRj2kTkExP0Cvo8Xtopr3t9d7aLqNBRBIRDiO_W4vUsoTA4MeXFepCVyPseq7gfXFTkBI5rFQJz-78UzOP_L-Snta_YuVtC5PIwJkMst3baHUTiBSMeH9SKiSn4A/s400/twitter.png); } ul#navigation .about-me a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibWI1iVwMhEyUHj_SHYBYC3Wh68Ucy80_XUbk8czXFh7kfirV_4WreWafmBeK-SCRf6pbB8gYPOiXid2WCOC4awoLOImxwGM4sLz6r8tMgFTmcl6Dn1ZJPQcTu_1dF-333k0WeKzvRKnM/s400/photo.png); } ul#navigation .e-mail a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWmNJtk838FFCK7X7flCS35RnAd8XA1gCps_EpJE-Uqq5kZdkwoZ90r7pI6aM-mKf5dPU39V5KN_4hZL3S0_8HnFYJ8Vg9l_jAtYBG56ykegSYi8GBhcXi3-J7Fbe5G-7gDm4NGiWO7pE/s400/mail_edit.png); } </style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.3.2.js"></script>
<script type="text/javascript"> $(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); });
$('#navigation > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); </script>
<ul id="navigation"> <li class="rss"><a href="http://nama-blog-anda.blogspot.com/atom.xml"><span>RSS Feed</span></a></li> <li class="facebook"><a href="http://www.facebook.com/profile.php?id=masukkan-ID-Facebook-disini"><span>My Facebook</span></a></li> <li class="twitter"><a href="http://twitter.com/masukkan-ID-Twitter-disini"><span>My Twitter</span></a></li> <li class="about-me"><a href="http://draft.blogger.com/profile/masukkan-ID-Blogger-disini"><span>My Profile</span></a></li> <li class="e-mail"><a href="mailto:masukkan-email-disini@gmail.com"><span>My E-Mail</span></a></li> </ul>

Catatan:

1.Untuk mengubah warna background, silahkan edit kode background-color:#E7F2F9;

2. Untuk mengubah warna tulisan, silahkan edit kode color:#60ACD8;

3. Untuk memasukkan ID bagi akun Facebook, Twitter , RSS Feed, Profile dan E mail anda, silahkan edit kode yang di bold dengan warna merah.

Akhir sekali, klik Save. Selamat mencoba...

Membuat Slide Out Navigasi Floating Di Atas Header

Posted by GuruGoBlog on 15.09

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.
Copy dan paste kode di bawah pada content HTML/Javascript.

<style> ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 0px; list-style: none; z-index:999999; width:721px; } ul#navigation li { width: 103px; display:inline; float:left; border:0;
} ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#E7F2F9; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; text-decoration:none; text-align:center; padding-top:80px; opacity: 0.96; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
} ul#navigation li a:hover{ background-color:#CAE3F2; } ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#60ACD8; font-family:trebuchet-ms, arial, tahoma, Sans-Serif; font-weight:bold; text-shadow: 0 -1px 1px #fff;
} ul#navigation .rss a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAIKTblasn6PJx6HIvwMNpP4rkxF-Q9oXdEOmN4UxHmNK4VrW-HXsTdZ_CglETgDY1ZC7jTM4b3Q_xHZfSiqzPw2Qw0GexqI62GW003Aefc0vhbYxSUDN4VrTZiWNcIziG44MUXV1ftm4/s400/rss.png); } ul#navigation .facebook a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5-qk5R99fLNm_wopjD6eAqpKsY_Frc4fbo6uThnK_CiTbTBGMXajlBzI45766S1ZYsncsL4LXiw0gIwTu1e2SII6V5EFjNVkw2j-ivmR5GVa52g0tUYpjrXxyvdVStuNCauLkbJc4tY/s400/facebook.png); } ul#navigation .twitter a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8u7EaVnA6iXLldG0tRj2kTkExP0Cvo8Xtopr3t9d7aLqNBRBIRDiO_W4vUsoTA4MeXFepCVyPseq7gfXFTkBI5rFQJz-78UzOP_L-Snta_YuVtC5PIwJkMst3baHUTiBSMeH9SKiSn4A/s400/twitter.png); } ul#navigation .about-me a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibWI1iVwMhEyUHj_SHYBYC3Wh68Ucy80_XUbk8czXFh7kfirV_4WreWafmBeK-SCRf6pbB8gYPOiXid2WCOC4awoLOImxwGM4sLz6r8tMgFTmcl6Dn1ZJPQcTu_1dF-333k0WeKzvRKnM/s400/photo.png); } ul#navigation .e-mail a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWmNJtk838FFCK7X7flCS35RnAd8XA1gCps_EpJE-Uqq5kZdkwoZ90r7pI6aM-mKf5dPU39V5KN_4hZL3S0_8HnFYJ8Vg9l_jAtYBG56ykegSYi8GBhcXi3-J7Fbe5G-7gDm4NGiWO7pE/s400/mail_edit.png); } </style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.3.2.js"></script>
<script type="text/javascript"> $(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); });
$('#navigation > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); </script>
<ul id="navigation"> <li class="rss"><a href="http://nama-blog-anda.blogspot.com/atom.xml"><span>RSS Feed</span></a></li> <li class="facebook"><a href="http://www.facebook.com/profile.php?id=masukkan-ID-Facebook-disini"><span>My Facebook</span></a></li> <li class="twitter"><a href="http://twitter.com/masukkan-ID-Twitter-disini"><span>My Twitter</span></a></li> <li class="about-me"><a href="http://draft.blogger.com/profile/masukkan-ID-Blogger-disini"><span>My Profile</span></a></li> <li class="e-mail"><a href="mailto:masukkan-email-disini@gmail.com"><span>My E-Mail</span></a></li> </ul>

Paling tidak ada dua cara membuat teks bergerak. Yang pertama adalah menggunakan kode html marquee. Dan yang kedua adalah menggunakan javascript. Kedua cara ini mempunyai kekurangan dan kelebihan.
Membuat teks bergerak dengan html marquee, lebih ringan daripada menggunakan javascript, jadi blog anda akan lebih mudah dibuka pada saat loading. Inilah kelebihannya. Tetapi kekurangannya, kode html ini tidak bisa dibaca oleh browser tertentu. Artinya teks ini tidak bisa bergerak (diam) di beberapa browser. Membuat teks bergerak dengan javascript keunggulannya, teks ini bergerak di semua browser utama. Kekurangannya adalah, script ini lebih berat dari cara html membuat teks bergerak. Jadi pilihannya tergantung anda.

Pertama, Cara membuat teks bergerak dengan javascrpt. Contohnya anda bisa lihat di Di Sini

Untuk membuatnya silahkan kopi paste kode di bawah ini:

<script
 language="JavaScript1.2">

//Specify the marquee's width (in pixels)
var marqueewidth="490px"
//Specify the marquee's height
var marqueeheight="25px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2
//configure background color:
var marqueebgcolor=""
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1

//Specify the marquee's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie:
 that\'s great):

var marqueecontent='<nobr><font face="Arial, Verdana, 
Sans-serif" color="#fff", text-shadow:"0 1px 0 #aa8600">Sinondang 
Maroban Torang, Torang Mambaen Sonang... Horas Tondi Madingin, Sayur 
Matua Bulung.</nobr>'


////NO NEED TO EDIT BELOW THIS LINE////////////
marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) 
//slow speed down by 1 for NS
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" 
style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')
var
 actualwidth=''
var cross_marquee, ns_marquee

function populate(){
if (iedom){
cross_marquee=document.getElementById? 
document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
cross_marquee.innerHTML=marqueecontent
actualwidth=document.all? temp.offsetWidth : 
document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",20)
}
window.onload=populate

function scrollmarquee(){
if (iedom){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"

}
else
 if (document.layers){
if (ns_marquee.left>(actualwidth*(-1)+8))
ns_marquee.left-=copyspeed
else
ns_marquee.left=parseInt(marqueewidth)+8
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" 
cellpadding="0"><td>')
if (iedom){
write('<div 
style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')
write('<div
 
style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'"
 onMouseover="copyspeed=pausespeed" 
onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" 
style="position:absolute;left:0px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' 
name="ns_marquee" bgColor='+marqueebgcolor+'>')
write('<layer name="ns_marquee2" left=0 top=0 
onMouseover="copyspeed=pausespeed" 
onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

Kedua, Cara membuat teks bergerak dengan html.

Contoh:

<marquee>Selamat di http://wisencare.blogspot.com</marquee>

Hasilnya akan terlihat seperti ini.

Selamat Datang di http://wisencare.blogspot.com

Untuk membuat latar belakang berwarna, kita bisa membuat kode warna HTML.

<marquee bgcolor="#000033">Selamat Datang ke Maribinablog.blogspot.com</marquee>

Hasilnya akan kelihatan seperti ini.

Selamat Datang di http://wisencare.blogspot.com

<marquee bgcolor="#000033">Selamat Datang http://wisencare.blogspot.com</marquee>

Jika anda ingin mengubah arah pergerakan teks, ke kiri, kanan, atas atau bawah, penambahan teks direction dan kode arah pergerakan perlu dibuat.

Kode arah pergerakan:

left= ke kiri
right= ke kanan
up= ke atas
down= ke bawah

<marquee direction="right" bgcolor="#000033">Selamat Datang di http://wisencare.blogspot.com</marquee>

Hasilnya akan kelihatan seperti di bawah ini.

Selamat Datang di http://wisencare.blogspot.com

Untuk menjadikan teks bergerak secara bolak balik, kanan ke kiri perlu penambahan teks behavior.

Kode behavior= alternate

Contoh:

<marquee
 behavior="alternate" direction="right" bgcolor="#000033">Selamat 
Datang di http://wisencare.blogspot.com</marquee>

Hasilnya akan kelihatan seperti ini.

Selamat Datang Ke Maribinablog.blogspot.com

Cara membuat scrolling text yang bisa di hentikan dengan cursor mouse, penambahan teks onmouseover, onmouseout dan scrollamount perlu dibuat. Kode this.stop(), this.start () dan kecepatan pergerakan scrolling text juga perlu di masukkan.

Kode scrollamount = 1- 5 (anda dapat mengubah kecepatan sesuai angka pilihan anda, tetapi semakin tinggi nilainya semakin laju pergerakan teks tersebut.)

<marquee
 behavior="alternate" direction="left" bgcolor="#000033" 
onmouseover="this.stop()" onmouseout="this.start()" 
scrollamount="2">Selamat Datang 
http://wisencare.blogspot.com</marquee>

Hasilnya akan kelihatan seperti ini.

Selamat di http://wisencare.blogspot.com

Anda juga boleh mengubah pergerakan teks secara variasi dalam satu kotak. Penambahan teks height dan size perlu dibuat.

Contoh:

<marquee
 behavior="alternate" direction="up" onmouseover="this.stop()" 
onmouseout="this.start()" scrollamount="2" 
bgcolor="#000033"><marquee direction="right" 
behavior="alternate">Selamat Datang 
http://wisencare.blogspot.com</marquee></marquee><br 
/>

Hasilnya akan kelihatan seperti ini.

Selamat Datang http://wisencare.blogspot.com

Cara membuat scrolling text yang dengan background gambar terdapat perlu kode tambahan lagi. Untuk mengganti background berwarna kepada background bergambar gantikan teks bgcolour kepada background beserta link gambar tersebut. Ukuran background juga perlu di tambah.

Contoh:

<center><table
 style="border-collapse: collapse; width: 338px; height: 75px;" 
background="http://i593.photobucket.com/albums/tt12/Maribinablog/retro_blue_background.jpg"
 border="1" bordercolor="white"><tbody>
<tr><td><span style="color: rgb(255, 0, 0); font-family: 
arial black;"><marquee><img style="width: 30px; height: 
30px;" src="http://www.uptownshelby.biz/blogger_logo.png"> Selamat 
Datang ke Wisencare.blogspot.com Semoga Ada yang manfaat buat anda. 
</marquee></span></td></tr>
</tbody></table></center>;

Hasilnya akan kelihatan seperti ini:

Selamat Datang ke Wisencare.blogspot.com Semoga Ada yang manfaat buat anda.

Selamat berkreasi.

Cara Membuat Teks Bergerak

Posted by GuruGoBlog on 14.48

<script
 language="JavaScript1.2">

//Specify the marquee's width (in pixels)
var marqueewidth="490px"
//Specify the marquee's height
var marqueeheight="25px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2
//configure background color:
var marqueebgcolor=""
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1

//Specify the marquee's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie:
 that\'s great):

var marqueecontent='<nobr><font face="Arial, Verdana, 
Sans-serif" color="#fff", text-shadow:"0 1px 0 #aa8600">Sinondang 
Maroban Torang, Torang Mambaen Sonang... Horas Tondi Madingin, Sayur 
Matua Bulung.</nobr>'


////NO NEED TO EDIT BELOW THIS LINE////////////
marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) 
//slow speed down by 1 for NS
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" 
style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')
var
 actualwidth=''
var cross_marquee, ns_marquee

function populate(){
if (iedom){
cross_marquee=document.getElementById? 
document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
cross_marquee.innerHTML=marqueecontent
actualwidth=document.all? temp.offsetWidth : 
document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",20)
}
window.onload=populate

function scrollmarquee(){
if (iedom){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"

}
else
 if (document.layers){
if (ns_marquee.left>(actualwidth*(-1)+8))
ns_marquee.left-=copyspeed
else
ns_marquee.left=parseInt(marqueewidth)+8
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" 
cellpadding="0"><td>')
if (iedom){
write('<div 
style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')
write('<div
 
style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'"
 onMouseover="copyspeed=pausespeed" 
onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" 
style="position:absolute;left:0px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' 
name="ns_marquee" bgColor='+marqueebgcolor+'>')
write('<layer name="ns_marquee2" left=0 top=0 
onMouseover="copyspeed=pausespeed" 
onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

Kedua, Cara membuat teks bergerak dengan html.

Contoh:

<marquee>Selamat di http://wisencare.blogspot.com</marquee>

Hasilnya akan terlihat seperti ini.

Selamat Datang di http://wisencare.blogspot.com

Untuk membuat latar belakang berwarna, kita bisa membuat kode warna HTML.

<marquee bgcolor="#000033">Selamat Datang ke Maribinablog.blogspot.com</marquee>

Hasilnya akan kelihatan seperti ini.

Selamat Datang di http://wisencare.blogspot.com

<marquee bgcolor="#000033">Selamat Datang http://wisencare.blogspot.com</marquee>

<marquee direction="right" bgcolor="#000033">Selamat Datang di http://wisencare.blogspot.com</marquee>

<marquee
 behavior="alternate" direction="right" bgcolor="#000033">Selamat 
Datang di http://wisencare.blogspot.com</marquee>

<marquee
 behavior="alternate" direction="left" bgcolor="#000033" 
onmouseover="this.stop()" onmouseout="this.start()" 
scrollamount="2">Selamat Datang 
http://wisencare.blogspot.com</marquee>

<marquee
 behavior="alternate" direction="up" onmouseover="this.stop()" 
onmouseout="this.start()" scrollamount="2" 
bgcolor="#000033"><marquee direction="right" 
behavior="alternate">Selamat Datang 
http://wisencare.blogspot.com</marquee></marquee><br 
/>

<center><table
 style="border-collapse: collapse; width: 338px; height: 75px;" 
background="http://i593.photobucket.com/albums/tt12/Maribinablog/retro_blue_background.jpg"
 border="1" bordercolor="white"><tbody>
<tr><td><span style="color: rgb(255, 0, 0); font-family: 
arial black;"><marquee><img style="width: 30px; height: 
30px;" src="http://www.uptownshelby.biz/blogger_logo.png"> Selamat 
Datang ke Wisencare.blogspot.com Semoga Ada yang manfaat buat anda. 
</marquee></span></td></tr>
</tbody></table></center>;

Hasilnya akan kelihatan seperti ini:

Selamat Datang ke Wisencare.blogspot.com Semoga Ada yang manfaat buat anda.

Selamat berkreasi.

9/27/2011

Kali ini aku mau ngejelasin trik kali dengan gaya puisi, biar nggak bosen, tapi jangan diketawain ya, soalnya lom pernah buat puisi nih.

Tatkala link-link jumlahnya sudah berjuta-juta
Maka semakin sesaklah dada blog ini
Jikalau hal ini tidak diatasi dengan bijaksana
Maka blognya dikau akan penuh sesak dengan link-link itu
Udah bagus nggak puisinya? ancur ya? :r Ok lanjuuut.

Oleh karena itulah
hamba memberanikan diri untuk menawarkan obat sesak tersebut
Melalui secuil ilmu berikut
Daku berharap dapat membantu kisanak supaya blognya tidak sesak

Kira-kira pada mudeng nggak ya penjelasan tadi, ah biarin deh :z
:r udah ah, udah mual2 nih pake gaya puici, sekarang ganti gaya biasa aja.

Untuk trik kali ini, ada dua macam kotak blogroll yang akan kita buat, terserah kamu mo pilih yang mana. Kotak blogroll-nya yaitu:

1. Kotak Blogroll Model Textarea

Contohnya seperti kotak blog roll seperti punyaku itu, itu lho yg atasnya ada tulisanya "Friend links"
Nha begini cara membuatnya :
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

keterangan:
- Kode width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu bisa merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
- Ganti tulisan "#link1,#link2, #link3 dst" dengan daftar link-link kamu, oh ya itu juga bisa diisi dengan banner link.
- Jika kamu pingin daftar link-linknya berjajar kayak punyaku, maka hilangkan kode <br />

2. Kotak Blogroll Model Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar (yg biasanya disebelah kanan trus ditarik keatas kebawah itu lho). Link-link ato isi didalam kotak ini akan bergerak/berjalan, bisa vertikal ato horizontal. Nah gini nih cara buatnya:
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

Keterangan :
- Kode "up" itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down, left, right (udah mudeng to artinya, gak usah dijelasin ya).
- Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode <br />.
- Angka "100" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll.

OK SELAMAT MENCOBA......

Membuat Kotak Blogroll dan Marquee

Posted by GuruGoBlog on 16.25

Masih dalam rangkaian materi Membuat Daftar Isi atau Table Of Content (TOC) . Setelah kemarin posting cara Membuat Daftar IsiSesuai Label atau Category , maka sesuai janji kali ini akan saya lanjutkan dengan Membuat Daftar Isi Sesuai Tanggal Posting sebagai salah satu bentuk pelayanan prima pada pengunjung .

Sebelumnya saya benar2 mohon maaf belum bisa mengunjungi sobat2 karena benar2 sedang ada segudang kesibukan ofline hingga jarang sekali Online dan postingan ini saya paksakan untuk memenuhi janji pada postingan sebelumnya.

Ok .. Cara membuat Daftar Isi berdasarkan Tanggal posting ini hasilnya bisa dilihat pada contoh disini atau silahkan sobat lihat pada navbar menu blog ini. Adapun langkah2nya adalah sbb. :

Login dulu ke http://www.blogger.com/
Kemudian buat sebuah Entri Baru dan pilih Edit HTML. atau kalau biasa pake Windows Live Writer (WLW) gunakan modus Source atau Sumber.
Berilah judul, misalnya: Daftar Isi Berdasarkan Label.
Copy Paste script dibawah ini dan ganti namasaungweb.blogspot.com dengan nama Blog anda :

<script style="text/javascript" src=" http://saungweb.googlecode.com/files/TOCtanggal.js "></script>
<script src="http://saungweb.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Setelah di-paste, klik Terbitkan Entri atau publish dan lihat hasilnya
Kalau artikelnya sudah banyak bisa ditambah fungsi scrol yang di pasang sebelum code no. 4 , sehingga lengkapnya akan seperti ini : (Kode warna pink silahkan sesuaikan, kalaupun mau dihapus juga silahkan) :

<div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 400px; background-color: none; text-align: left;">
<p align="center">
<font size="4">Daftar Isi Berdasarkan Tanggal Posting</font></p> <script style="text/javascript" src=" http://saungweb.googlecode.com/files/TOCtanggal.js "></script>
<script src="http://saungweb.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<p>
Kalau yang ini untuk melihat <a href="http://saungweb.blogspot.com/2010/04/daftar-isi.html"target="_blank">Daftar isi Berdasarkan Label / Category</a></p> </div>
Selanjutnya tinggal buat link yg menuju ke postingan ini dan bisa disimpan di navbar menu atau di sidebar dll, Untuk lebih jelasnya silahkan lihat pada postingan sebelumnya tentang Membuat Daftar Isi Sesuai Label

Selamat mencoba untuk Membuat Daftar Isi Berdasarkan Tanggal Posting , semoga bermanfaat.
Kalau mau lihat script aslinya yang belum diedit ada disini

Membuat Daftar Isi Sesuai Tanggal Posting

Posted by GuruGoBlog on 16.23

Ok .. Cara membuat Daftar Isi berdasarkan Tanggal posting ini hasilnya bisa dilihat pada contoh disini atau silahkan sobat lihat pada navbar menu blog ini. Adapun langkah2nya adalah sbb. :

Login dulu ke http://www.blogger.com/
Kemudian buat sebuah Entri Baru dan pilih Edit HTML. atau kalau biasa pake Windows Live Writer (WLW) gunakan modus Source atau Sumber.
Berilah judul, misalnya: Daftar Isi Berdasarkan Label.
Copy Paste script dibawah ini dan ganti namasaungweb.blogspot.com dengan nama Blog anda :

<script style="text/javascript" src=" http://saungweb.googlecode.com/files/TOCtanggal.js "></script>
<script src="http://saungweb.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Setelah di-paste, klik Terbitkan Entri atau publish dan lihat hasilnya
Kalau artikelnya sudah banyak bisa ditambah fungsi scrol yang di pasang sebelum code no. 4 , sehingga lengkapnya akan seperti ini : (Kode warna pink silahkan sesuaikan, kalaupun mau dihapus juga silahkan) :

<div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 400px; background-color: none; text-align: left;">
<p align="center">
<font size="4">Daftar Isi Berdasarkan Tanggal Posting</font></p> <script style="text/javascript" src=" http://saungweb.googlecode.com/files/TOCtanggal.js "></script>
<script src="http://saungweb.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<p>
Kalau yang ini untuk melihat <a href="http://saungweb.blogspot.com/2010/04/daftar-isi.html"target="_blank">Daftar isi Berdasarkan Label / Category</a></p> </div>
Selanjutnya tinggal buat link yg menuju ke postingan ini dan bisa disimpan di navbar menu atau di sidebar dll, Untuk lebih jelasnya silahkan lihat pada postingan sebelumnya tentang Membuat Daftar Isi Sesuai Label

Selamat mencoba untuk Membuat Daftar Isi Berdasarkan Tanggal Posting , semoga bermanfaat.
Kalau mau lihat script aslinya yang belum diedit ada disini

Apa sih dropdown menu itu?
Dropdown menu yang seperti ini itu lho :

Nha udah tahu kan? Dengan dropdown menu kita bisa mnghemat space/ruang di blog kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang banyak. Itu bisa diisi dengan arsip, blogroll dll.
Gimana? Mau mencobanya?
Gini nih caranya :

Login ke blogger, trus masuk ke menu "Page Element" trus pilihAdd page elements --> HTML/JavaScript. Kemudian masukkan script berikut ini di kocat "Content"

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Text yang berwarna merah adalah link. ganti text2 tersebut dengan link2 kamu.
Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus km ganti.

Contohnya seperti ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://trik-tips.blogspot.com/2008/01/membuat-menu-horizontal.html"> Cara Membuat Menu Horizontal </option>
<option value="http://trik-tips.blogspot.com/2007/12/cara-membuat-search-engine.html"> Cara Membuat Search Engine</option>
</select>

maka hasilnya akan seperti ini :

untuk menambahkan menu lagi, tambahkan kode seperti ini :

sebelum kode </select>

Link dalam dropdown menu di atas jika di klik akan membuka link di halaman yang sama. Ini cocok untuk Arsip dan link-link yang masih berhubungan dengan blog tsb.

Ada satu tipe lagi yang jika diklik linknya maka akan membuka window baru tanpa menutup blog kamu. Yang ini cocok untu Blogroll atau Friend link.
Cara mambuatnya seperti diatas tapi ganti kode berikut

ganti dengan kode ini :

hasilnya akan seperti ini :

Gimana? Bisa nggak?

Membuat Dropdown Menu

Posted by GuruGoBlog on 16.22

Text yang berwarna merah adalah link. ganti text2 tersebut dengan link2 kamu.
Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus km ganti.

Contohnya seperti ini :

maka hasilnya akan seperti ini :

untuk menambahkan menu lagi, tambahkan kode seperti ini :

ganti dengan kode ini :

hasilnya akan seperti ini :

Gimana? Bisa nggak?

Membuat tab view biasa dan tab view menggunakan jquery memang tidak jauh berbeda,hanya saja ada penambahan beberapa kode javascript untuk menghasilkan efek menggulung atau istilah kerennya Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget

Lihat screenshot pic nya gan ato sobat bisa juga lihat widgetnya di sidebar pada blog ini:

Langkahnya sangat sederhana,agan pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.

#slick_area {
border:0px solid #585858;
background-color:#ffffff;
padding:8px;
margin:10px 0;
line-height:18px;
}
#slick_area a{
color:#ffffff;
text-decoration:none;
}
.slick_area a:hover{
color:#FF0000;
}
ul.slick {
margin:2px 5px 8px 0;
padding:0px;
}
ul.slick li {
list-style:none;
display:inline;
background-color:#ffffff;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:0px solid #585858;
}
ul.slick li:hover {
color:#red;
}
ul.slick li.active {
background-color:#ffffff;
border:1px solid #585858;
color:#222222;
}
.content-slick {
background-color:#ffffff;
border:0px solid #585858;
color:#222222;
min-height:40px;
padding:7px 13px 5px;
text-align:left;
}
.content-slick ul {
margin:20px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #222222;
padding:1px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#ffffff;
}
.content-slick ul li a {
text-decoration:none;
color:black;
display:block;
}

Setelah itu,carilah kode </head>,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:

<script language='javascript' src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('#tabdua, #tabtiga').hide();
$("ul.slick li").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content-slick").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>

Lalu simpan templates sobat ya.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<ul class="slick"><li title="tabsatu" class="slick active">Tab Satu Gan</li><li title="tabdua" class="slick active">Tab Dua Gan</li><li title="tabtiga" class="slick">Tab Tiga Gan</li></ul>
<div id="tabsatu" class="content-slick">Letakkan kode HTML/Javascript anda di Tab Satu</div>
<div id="tabdua" class="content-slick">Letakkan kode HTML/Javascript anda di Tab Dua</div>
<div id="tabtiga" class="content-slick">Letakkan kode HTML/Javascript anda di Tab Tiga</div>

Setelah itu simpan dan sobat sekarang dah punya slick tab view widget yang dapat dijadikan alternative buat ngehemat tempat ,moga berhasil and selamat ngulik kodenya ya :D

Keterangan : kode berwarna merah gantilah atau isilah dengan widget yang sobat inginkan,bisa kode iklan,alexa widget,maupun kode HTML/Javascript yang lain.

Membuat Tabview Dengan Efek Animasi Gulung Jquery

Posted by GuruGoBlog on 16.20

Langkahnya sangat sederhana,agan pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.

#slick_area {
border:0px solid #585858;
background-color:#ffffff;
padding:8px;
margin:10px 0;
line-height:18px;
}
#slick_area a{
color:#ffffff;
text-decoration:none;
}
.slick_area a:hover{
color:#FF0000;
}
ul.slick {
margin:2px 5px 8px 0;
padding:0px;
}
ul.slick li {
list-style:none;
display:inline;
background-color:#ffffff;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:0px solid #585858;
}
ul.slick li:hover {
color:#red;
}
ul.slick li.active {
background-color:#ffffff;
border:1px solid #585858;
color:#222222;
}
.content-slick {
background-color:#ffffff;
border:0px solid #585858;
color:#222222;
min-height:40px;
padding:7px 13px 5px;
text-align:left;
}
.content-slick ul {
margin:20px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #222222;
padding:1px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#ffffff;
}
.content-slick ul li a {
text-decoration:none;
color:black;
display:block;
}

Setelah itu,carilah kode </head>,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:

<script language='javascript' src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('#tabdua, #tabtiga').hide();
$("ul.slick li").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content-slick").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>

Lalu simpan templates sobat ya.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<ul class="slick"><li title="tabsatu" class="slick active">Tab Satu Gan</li><li title="tabdua" class="slick active">Tab Dua Gan</li><li title="tabtiga" class="slick">Tab Tiga Gan</li></ul>
<div id="tabsatu" class="content-slick">Letakkan kode HTML/Javascript anda di Tab Satu</div>
<div id="tabdua" class="content-slick">Letakkan kode HTML/Javascript anda di Tab Dua</div>
<div id="tabtiga" class="content-slick">Letakkan kode HTML/Javascript anda di Tab Tiga</div>

Sebenarnya sudah banyak yang memposting tentang membuat tab view, namun tak apa saya tuliskan tutorialnya di sini. Widget tab view sangat berguna untuk blog karena dapat menghemat ruang pada blog dan bisa menampung begitu banyak link serta konten blog di dalamnya. Contohnya bisa anda lihat pada gambar di bawah ini:

Nah, untuk membuat widget tab view pada blog anda silahkan ikuti langkah berikut :

Pilih menu Layout » masuk ke Edit HTML

Cari kode ini ]]></b:skin>

Copy lalu paste kode berikut ini sebelum kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}

div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */
text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Times New Roman, Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000080; /* Warna Font Menu Utama Atas */
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #BDBDBD; /* Warna background Menu Utama Atas */
}

div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF; /* Warna background Kotak Utama */
border: 1px solid #000000; /* Warna border Kotak Utama */
overflow: hidden;
}

div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Teks yang berwarna merah adalah keterangan untuk mengatur tab view. Seperti ukuran tebal border, tinggi dan lebar tab view serta warna background. Nah, untuk mengatur warna, silahkan gunakan kode warna saya.

Kemudian pasang kode berikut sebelum kode </head>

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

Kemudian klik Save Template

Masuk ke menu Page Elements

Pilih Add a Gadget » Pilih menu HTML/Javascript, Copy lalu paste kode berikut di dalamnya.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Lalu klik Save dan tempatkan widget tab view agar sesuai dengan template anda.

Selesai

Sebagai catatan:

Angka yang berwarna merah adalah ukuran lebar dan tinggi widget tab view.
Kode yang berwarna hijau adalah teks pada menu utama di bagian atas.
Kode yang berwarna biru adalah teks yang berada di halaman tab view yang bisa kamu isi dengan link apa saja, gambar, banner dan script lainnya.
Untuk menambahkan jumlah menu maka perhatikanlah text yang berkedip2-kedip. Tambahkan menu berikutnya di bawahnya.

Contoh pengaturan teks :

Teks "Tab 1" dapat diganti dengan teks lain seperti "Tutorial Blogger", "Bisnis" atau teks lainnya.
Sedangkan pada bagian isi menu di bawahnya yang berwarna biru Tab 1.1 <br />bisa diganti dengan link posting blog seperti ini :
<ul><li><a href="http://bangdel.blogspot.com/2009/06/tentang-saya-dan-blog-bang-del.html">Tentang Saya Dan Blog Bang Del</a></li>

Mudah-mudahan tutorial membuat widget tab view ini dapat bermanfaat, terima kasih.

Membuat Tabview

Posted by GuruGoBlog on 15.44

Nah, untuk membuat widget tab view pada blog anda silahkan ikuti langkah berikut :

Pilih menu Layout » masuk ke Edit HTML

Cari kode ini ]]></b:skin>

Copy lalu paste kode berikut ini sebelum kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}

div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */
text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Times New Roman, Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000080; /* Warna Font Menu Utama Atas */
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #BDBDBD; /* Warna background Menu Utama Atas */
}

div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF; /* Warna background Kotak Utama */
border: 1px solid #000000; /* Warna border Kotak Utama */
overflow: hidden;
}

div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Kemudian pasang kode berikut sebelum kode </head>

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

Kemudian klik Save Template

Masuk ke menu Page Elements

Pilih Add a Gadget » Pilih menu HTML/Javascript, Copy lalu paste kode berikut di dalamnya.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Lalu klik Save dan tempatkan widget tab view agar sesuai dengan template anda.

Selesai

Sebagai catatan:

Angka yang berwarna merah adalah ukuran lebar dan tinggi widget tab view.
Kode yang berwarna hijau adalah teks pada menu utama di bagian atas.
Kode yang berwarna biru adalah teks yang berada di halaman tab view yang bisa kamu isi dengan link apa saja, gambar, banner dan script lainnya.
Untuk menambahkan jumlah menu maka perhatikanlah text yang berkedip2-kedip. Tambahkan menu berikutnya di bawahnya.

Contoh pengaturan teks :

Teks "Tab 1" dapat diganti dengan teks lain seperti "Tutorial Blogger", "Bisnis" atau teks lainnya.
Sedangkan pada bagian isi menu di bawahnya yang berwarna biru Tab 1.1 <br />bisa diganti dengan link posting blog seperti ini :
<ul><li><a href="http://bangdel.blogspot.com/2009/06/tentang-saya-dan-blog-bang-del.html">Tentang Saya Dan Blog Bang Del</a></li>

Mudah-mudahan tutorial membuat widget tab view ini dapat bermanfaat, terima kasih.

Karena sering ditanya tentang bagaimana caranya membuat Tab VIew (Biasanya nanyanya gini: "Mas cara membuat menu yg kayak punya mas gmn? yg ada "Tips & Trik", "Lain-lain", "Terbaru", "Komentar" itu lho). Ya kan? hayo ngaku... Tabview itu sangat berguna sekali, karena dengan ukuran kotak yang relatif kecil tapi bisa memuat isi yang buanyak. Sebenarnya dah dari dulu pingin posting tentang itu, tp karena yg dulu cara pasanganya sulit jadi belum bisa aku jelaskan. Trus akhirnya aku menemukan metode baru dalam pembuatannya. Cara yang ini mungkin mirip dengan punyanya o-om, tp scriptnya agak beda. Dan aku dapet script ini juga bukan dari o-om lho :D
Tab view itu contohnya seperti ini :

Beginilah cara untuk membuat menu tab view tersebut

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin>atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode</head>

<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.

Membuat Menu Tabview

Posted by GuruGoBlog on 15.24

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>