Subscribe to Revolution Church

Makalah Keperawatan

Blog Accessories

Blogger Pemula

Showing posts with label Kode CSS. Show all posts
Showing posts with label Kode CSS. Show all posts

Wednesday, August 24, 2011

Cara Membuat/Memasang Recent Post Di Blog

0 comments
Assalamualaikum Wr. Wb.


Oke.. Jumpa lagi di Blogger Bambua*09....!!
Oy, posting kali ini membahas tentang modifikasi atau biasa juga disebut Blog Accessories. Mungkin ini sudah tidak populer lagi bagi kalangan Blogger Master. Tapi tips Memasang Recent Post Di Blog kali ini bisa membantu para sobat Blogger Pemula untuk mempermudah pengunjung Blogger melihat postingan yang telah sobat publikasikan...

Oke..Langsung saja, langkah pertama seperti biasa :
  • Log in ke Blogger Anda.
  • Pilih Tata Letak/Layout.
  • Pada halaman Page Element/Elemen Laman.
  • [Klik] Add a Gadget.
  • Pilih HTML/Javascript.
  • Copy code di bawah ini dan paste ke dalam HTML/Javascript tersebut.

<script src="http://sites.google.com/site/anasku2000/post-terakhir.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://URL Blog Sobat/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

  • Ganti tulisan yang berwarna Biru "http://URL Blog Sobat" dengan alamat URL Blog Sobat.
  • Simpan dan coba sobat lihat hasilnya.
Ket :
  • Tulisan yang berwarna Orange "var numposts = 10"adalah Jumlah Posting yang ingin ditampilkan dalam Recent Post.
Semoga bermanfaat....!!!


Bambua*09

Cara Membuat Animasi Tulisan Pada Kursor pada blog

0 comments
Assalamualaikum Wr. Wb.


Membuat Tulisan Bergerak Pada Kursor
Nah...Sekarang saya mau ngasih tau bagaimana cara Membuat Tulisan Bergerak Pada Kursor (Animasi) Blog... Sesuai dengan permintaan dari sahabat blogger yaitu cara Membuat Animasi Tulisan Pada Kursor pada blog.

Malas rasanya nge-blogging tanpa ada modifikasi-modifikasi keren pada blog anda. Maka dari itu di posting kali ini saya akan membahas tentang cara Membuat Animasi Tulisan Pada Kursor pada blog.


Langka-langkah yang harus anda lakukan..:

  1. Log in ke Blogger Anda.
  2. Pilih Tata Letak.
  3. Tambah Gadget dan pilih HTML/JavaScript.
  4. Copy paste code script di bawah ini....(paste ke HTML/JavaScript anda)

<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='eNaL Rhay SyahRinggan'.split('').reverse().join('');

var font='Verdana,Arial';
var size=3; // up to seven
var color='#ff0000';

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//---------------------------------------------------


var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" size="+size+" color="+color+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();

</script>


Selesai dech....!!! Coba anda lihat hasilnya....

Ket :
  1. Ganti kata berwarna [merah] "eNaL Rhay SyahRinggan" di atas sesuai dengan kata yang anda inginkan.
  2. Ganti kode berwarna [biru] "#ff0000" di atas sesuai dengan warna yang anda inginkan.

Bambua*09

Cara Menambahkan Recent Post Dengan Gambar Thumbnail

0 comments
Assalamualaikum Wr. Wb.


Oke, kali ini saya akan membagikan trik-tips Cara Menambahkan Recent Post Dengan Gambar Thumbnail disampingnya.

Langka-langkah yang harus anda lakukan..:


  1. Log in ke Blogger Anda.
  2. Pilih Tata Letak.
  3. Tambah Gadget dan pilih HTML/JavaScript.
  4. Copy paste code script di bawah ini....(paste ke HTML/JavaScript anda)

<div style='float:left;'>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6xY-9VFWHzt8er8E6qQA8SBgWAnHz6_ZKcV13EULRM4lnAjJsbyRx-zTDpoZQYKY90rV8wFmq9V1SkPN9PlZ7MFg_PEkT4QxNzOqE_YOETOc44MonvH532WBw-bdSnAHbwnWQ4rYLW9M/";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6xY-9VFWHzt8er8E6qQA8SBgWAnHz6_ZKcV13EULRM4lnAjJsbyRx-zTDpoZQYKY90rV8wFmq9V1SkPN9PlZ7MFg_PEkT4QxNzOqE_YOETOc44MonvH532WBw-bdSnAHbwnWQ4rYLW9M/";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6xY-9VFWHzt8er8E6qQA8SBgWAnHz6_ZKcV13EULRM4lnAjJsbyRx-zTDpoZQYKY90rV8wFmq9V1SkPN9PlZ7MFg_PEkT4QxNzOqE_YOETOc44MonvH532WBw-bdSnAHbwnWQ4rYLW9M/";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6xY-9VFWHzt8er8E6qQA8SBgWAnHz6_ZKcV13EULRM4lnAjJsbyRx-zTDpoZQYKY90rV8wFmq9V1SkPN9PlZ7MFg_PEkT4QxNzOqE_YOETOc44MonvH532WBw-bdSnAHbwnWQ4rYLW9M/";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6xY-9VFWHzt8er8E6qQA8SBgWAnHz6_ZKcV13EULRM4lnAjJsbyRx-zTDpoZQYKY90rV8wFmq9V1SkPN9PlZ7MFg_PEkT4QxNzOqE_YOETOc44MonvH532WBw-bdSnAHbwnWQ4rYLW9M/";
showRandomImg = true;
boxwidth = 260;
cellspacing = 3;
borderColor = "#FFFFFF";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Komentar";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 15;
home_page = "Alamat URL Blog Anda/";
</script>
<script src="http://ary-pratama.googlecode.com/files/recentposts_thumbnail.js" type="text/javascript"></script>

</div>
<div style='clear:both;'/></div>

Simpan hasil kerja sobat....


Keterangan:  
  1. boxwidth = 260; Gantri angka itu untuk menyesuaikan ukuran gadget
  2. numposts = 15; Angka "15"  Jumlah postingan, bisa diganti
  3. home_page = "Alamat URL Blog Anda/"; Urlnya ganti dengan Url blog kamu


Selamat mencoba n' semoga bermanfaat..!!

Bambua*09

Cara Menambahkan Animasi Tulisan Pada Kursor

0 comments
Assalamualaikum Wr. Wb.


Cara Menambahkan Animasi Tulisan Pada Kursor
Nah...Sekarang saya mau ngasih tau bagaimana Cara Membuat Tulisan Bergerak Pada Kursor (Animasi) Blog... Sesuai dengan permintaan dari sahabat blogger yaitu Cara Membuat Animasi Tulisan Pada Kursor (Berputar-putar) pada blog.

Malas rasanya nge-blogging tanpa ada modifikasi-modifikasi keren pada blog anda. Maka dari itu di posting kali ini saya akan membahas tentang Cara Membuat Animasi Tulisan Pada Kursor (Berputar-putar) pada blog.

Contohnya bisa anda lihat pada gambar di bawah ini..:


Langka-langkah yang harus anda lakukan..:
  1. Log in ke Blogger Anda.
  2. Pilih Tata Letak.
  3. Tambah Gadget dan pilih HTML/JavaScript.
  4. Copy paste code script di bawah ini....(paste ke HTML/JavaScript anda)
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #999;



/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = "***eNaL Rhay SyahRingGan***";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();

</script>
* Ket :
  • Ganti  tulisan yang berwarna merah (***eNaL Rhay SyahRingGan***)dengan tulisan yang anda inginkan.
  • Ganti  tulisan yang berwarna merah (#999) dengan warna yang anda inginkan.
Lalu simpan...selesai dech.....!!

Coba Anda lihat hasilnya..n' selipkan komentar sobat sebagai pelengkap posting ini.

Bambua*09

Cara Mengganti Icon Cursor Keren Pada Blog

0 comments
Assalamualaikum Wr. Wb.


Cara Mengganti Icon Cursor Keren Pada Blog
Selamat datang di Blog Bambua*09.....!! Mau modifikasi blogger anda....???
Nach sekarang saya nemuin cara memodifikasi blogger.

Dalam posting kali ini saya akan membahas tentang cara memodifikasi blogger anda, Cara yang satu ini termaksud g' sulit kok... Kamu ikutin aja langkah-langkah Cara Mengganti Icon Cursor Keren Pada Blog.

Nach Langkah-langkahnya seperti biasa....yang harus anda lakukan..:

  1. Log in ke Blogger Anda.
  2. Pilih Tata Letak.
  3. Tambah Gadget dan pilih HTML/JavaScript.
  4. Copy paste code script di bawah ini....(paste ke HTML/JavaScript anda)



      * Ket :
  • Ganti tulisan "http://img2.enal.com/img/icon18_rhay_allbkgsyahrenggan.png" dengan alamat URL Cursor Anda...

     5.  Save...Selesai dech.....!!!!

         Coba dech kamu lihat hasilnya......!!!

Bambua*09

Cara Membuat CBox / Buku Tamu di Samping Blog

0 comments
Assalamualaikum Wr. Wb.


Hay sobat blogger.....kali ini saya ingin berbagi pengetahuan sekalian ingin share cara membuat CBox pada blog yang biasanya disebut dengan Buku Tamu,,,Hahayyyy....

Tapi kali ini CBox yang saya akan share yaitu CBox atau biasanya disebut dengan Buku Tamu bukan  yang  sering kali kita lihat di area widget pada blog, Namun CBox yang akan saya Share yaitu CBox yang tepatnya  berada di posisi samping blog sobat.....

Okey...Jika sobat blogger tertarik dengan Cara Membuat CBox / Buku Tamu di Samping Blog ikuti langkah-langkahnya....!!!!

  • Seperti biasa Log in ke Blogger anda [klik] disini.
  • Pilih Tata Letak/Layout.
  • Pada halaman Page Element/Elemen Laman.
  • [Klik] Add a Gadget.
  • Pilih HTML/Javascript.
  • Copy code di bawah ini dan paste ke dalam HTML/Javascript tersebut.


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:30px;
float:left;
cursor:pointer;
background:url('http://th387.photobucket.com/albums/oo318/cem_ply/th_buku-tamu_03.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #F5F5F5;
background:#000000;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www3.cbox.ws/box/?boxid=3261541&amp;boxtag=f2qtm9&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain3-3261541" style="border:#0A19F7 1px solid;" id="cboxmain3-3261541"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www3.cbox.ws/box/?boxid=3261541&amp;boxtag=f2qtm9&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform3-3261541" style="border:#0A19F7 1px solid;border-top:0px" id="cboxform3-3261541"></iframe></div>
</div>
<!-- END CBOX -->
<br/>
<a href="http://forantum.blogspot.com">.
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Hide]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

  • Sobat juga bisa merubah warna dan posisi tempatnya sesuai keinginan sobat.
  • [Klik] Save...!! 
  • Selesai dech....Oya, harap tinggalkan Commennya yach...!!

Semoga bermanfaat...!!

Bambua*09

Menambahkan Google Translate Icon Di Blog

0 comments
Assalamualaikum Wr. Wb.


Menambahkan Google Translate Icon Di Blog 
Oke...Jumpa lagi di Blog Bambua*09 dengan panduan-panduan yang bermanfaat...Kali ini saya akan membagikan trik-trik yang saya gunakan untuk membuat Google translate pada blogspot.

Dalam posting ini membahas tentang bagaimana cara memasang Google translate pada blogspot dengan tambahan icon bendera negara. Ini juga termaksud salah satu dari Blog Accessories dengan menambahkan kode HTML/JavaScript pada blogspot. Mungkin trik cara memasang Google translate kali ini sudah tidak populer lagi di kalangan pem-Blogger para Master blogger. Tapi bagi saya, trik ini masih bermanfaat bagi para blogger pemula yang masih dalam tahap pembelajaran.

Dengan memasangkan Google translate pada blog sobat, para pengunjung yang berasal dari luar negara indonesia dapat men-translatorkan semua isi blog dengan bahasa dari negaranya.


Oke langsung saja, sobat ikuti langkah-langkahnya :
  • Log in ke Blogger Anda.
  • Pilih Tata Letak/Layout.
  • Pada halaman Page Element/Elemen Laman.
  • [Klik] Add a Gadget.
  • Pilih HTML/Javascript.
  • Copy code di bawah ini dan paste ke dalam HTML/Javascript tersebut.

  • Simpan dan lihat hasilnya.....!!!

Semoga bermanfaat....

Bambua*09

Cara Membuat Tombol Back to Top di Blogspot

0 comments
Assalamualaikum Wr. Wb.

Cara Membuat Tombol Back to Top di Blogspot
Hay...Jumpa lagi nich..!! Sobat Bloggger, kali ini saya akan membahas sekaligus membagi pengetahuan kepada sobat Blogger. Namun materi posting kali ini masih tetap membahas cara memodif/memberikan Accessories pada Blog.

Seperti pada penjelasan diatas, kali ini saya akan share cara Cara Membuat Tombol Back to Top di Blogspot pada sobat Blogger. Dengan menambahkan kode script, sobat bisa membuat Tombol Back to Top yang berkaitan dengan scroll ke atas dan ke bawah pada Blog dengan menggunakan animasi jquery dengan sekali klik..!

Oke.., jika sobat tertarik dengan trik Membuat Tombol Back to Top di Blogspot, sobat ikutin ajh cara-caranya..:

Langkah-langkah yang harus dilakukan yaitu :
  • Seperti biasa Log in ke Blogger anda. => Blogger.com
  • Pilih Tata Letak/Edit HTML.
  • Cari Kode </body> (Gunakan saja pencarian cepat => Ctrl + F) 
  • Copy paste kode Script di bawah ini. Taruh kode Script di bawah ini tepat di atas kode </body>

<div style="display:none;" class="atas" id="atas"></div>
<div style="display:none;" class="bawah" id="bawah"></div>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script text="text/javascript">
$(function() {
var $elem = $('#outer-wrapper');
$('#atas').fadeIn('slow');
$('#bawah').fadeIn('slow');
$('#bawah').click(
function (e) {$('html, body').animate({scrollTop: $elem.height()}, 800);});
$('#atas').click(
function (e) {$('html, body').animate({scrollTop: '0px'}, 800);});
});
</script>


  • Setelah itu, sobat cari kode ]]></b:skin> 
  • Copy paste kode dibawah ini tepat diatasnya kode ]]></b:skin>.

#bawah{ padding:7px; background-color:white; border:1px solid #CCC;
position:fixed; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBoEvWdi5YpDtuSTUl-yao2agcZkZouuFs7ZFwuPFCtLbgFWc_YKuQ42cNf_hU0sSMzZw7naA7NOoEar0TvklqLHpc_aNwcyi0ma-EiAz89DF3Gmw1hqTZKtBpvtzi3vFeCxFTklJ3cJw/s50/Button-Next-icon.png) no-repeat top left;
background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7;
left:70px; white-space:nowrap; cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
#atas{ padding:7px; background-color:white; border:1px solid #CCC;
position:fixed; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTvTS0G4-dXcbn5qNBFVCaRfsHIEX2TCGoblK029DeKelSysrdwKswMt28GfezLLgGR4zZ64V6deYCEfzhqiTImfVMNYKR_FNXJBr8hzAx3Kt-wQvDTHyFO9WI1xvlXyIfCS6vaCqCLRY/s50/Copy+of+Button-Next-icon.png) no-repeat top left;
background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7;
left:30px; white-space:nowrap; cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}

  • Simpan hasil kerja anda....!!
  • Lihat hasilnya....

Semoga bermanfaat....!!
Bambua*09

Memasang Emoticon Smiley Untuk Komentar Blog

0 comments
Assalamualaikum Wr. Wb.


Memasang Emoticon Smiley Untuk Komentar Blog
Semakin meningkatknya para komentator di blogger dan semakin meningkatnya pula keinginan sobat blogger untuk mengubah tampilan di area komentar atau menambah pernak-pernik lainya. Maka dari itu saya juga ingin membuat pernak-pernik komentar di blogger dengan Emoticon Smiley sehingga para komentator bisa mengexpresikan ucapanya dengan sebuah gambar Emoticon Smiley.


Nach.. posting saya kali ini yaitu cara memodifikasi Blogspot sobat Blogger agar tampak menarik, tapi kali ini saya akan share tentang cara Memasang Emoticon Smiley Untuk Komentar Blog.

Lihat gambar dibawah ini :

:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*
:|8-}~x(:-tb-(:-Lx(=))


Gambarnya kurang lebih seperti diatas, teks atau tulisan yang disamping kanan gambar adalah symbol yang jika ditulis di kotak komentar akan berubah menjadi gambar yang ada disamping kirinya.

Okey....capeg juga low cerita panjang lebar..!! Hufttttt....... :D
Jika sobat blogger tertarik untuk memasangnya silahkan ikuti langkah-langkah berikut :
  • Seperti biasa Log in ke Blogger anda. => Blogger.com
  • Pilih Tata Letak/Edit HTML.
  • Jangan lupa centang pada Expand Widget Template.
  • Cari Kode </body> (Gunakan saja pencarian cepat => Ctrl + F) 
  • Copy paste kode Script di bawah ini. Taruh kode Script di bawah ini tepat di atas kode </body>

<script src='http://ary-pratama.googlecode.com/files/smiley.js' type='text/javascript'/>

  • Kalau sudah, sobat cari kode seperti di bawah ini :

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>

  • Kemudian selipkan kode Skript di bawah ini diantara kode berwarna biru dan orange atau tepatnya di bawah kode <p class='comment-footer'>

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))</b>


  • Nah...kalou sudah, Simpan hasil kerja sobat...dan lihat hasilnya.
Bambua*09

Cara Membuat Gadget Di Atas Header Pada Blog

0 comments
Assalamualaikum Wr. Wb.


Cara Membuat Gadget Di Atas Header Pada Blogspot
Oke, tentunya sobat tau bagaimana cara membuat/menambahkan gadget di samping dan bawah pada blogspot. Ketika sobat ingin membuat/menambahkan Navbar di blog sobat, namun di bagian Page Elemen/Elemen Laman pada blog sobat tidak tersedia Add Gadget sedangkan sobat ingin sekali menambahkan gadget di bagian atas Header.

Tenang saja, kali ini saya akan menjelaskan sekaligus membagikan pengetahuan saya kepada sobat blogger. Tapi menambahkan gadget kali ini berbeda dengan cara menambahkan gadget disamping dan bawah posting pada blogspot.

Oke, bagi sobat blogger yang ingin tahu bagaimana Cara Membuat Gadget Di Atas Header Pada Blogspot, sobat ikuti langkah-langkah berikut ini :
  • Log in ke Blogger Sobat [klik] disini
  • Pilih Tata Letak
  • Pilih Edit HTML
  • Beri tanda centang pada kotak Expand Widget Templates.
  • Cari kode yang mirip dengan kode dibawah ini :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


  • Jika sudah dapat, ganti kode tersebut dengan kode dibawah ini :

<b:section class='header' id='header' showaddelement='yes'>

  • [klik] Simpan Template.
  • Selesai.
Semoga informasi ini bermanfaat....

Bambua*09

Cara Membuat Widget Navigasi Dibawah Header Pada Blog

0 comments
Assalamualaikum Wr. Wb.


Cara Membuat Widget Navigasi Dibawah Header Pada Blog
Dengan adanya menu Navigasi pada sebuah blog akan menambah ketertarikan pengunjung untuk melihat apa saja isi dari menu Navigasi yang telah dipublikasikan oleh pemiliknya. Tapi tidak semua Template Blog dilengkapi dengan menu navigasi yang dapat kita modifikasi sedemikian rupa sesuai keinginan sobat.
 
Ketika sobat blogger ingin menambahkan/memodif blog sobat dengan memberikan navigasi menu dibagian bawah header namun dalam blog sobat tidak terdapat/memiliki Add Gadget dibawah header, rasanya gimana gituhh,, apalagi sobat dah merancang menu Navigasi keren yang menggunakan kode JavaScript.

"Lalu bagaimana caranya agar bisa memasang menu Navigasinya kalo tidak dilengkapi dengan Gadget tambahan dibawah header...??"

Tenang dan jangan khawatir.....kali ini saya akan memberikan tips cara Membuat Widget Navigasi Dibawah Header Pada Blog.

Langsung saja ikuti langkah-langkah berikut ini :
  • Log in ke Blogger Sobat [klik] disini
  • Pilih Tata Letak
  • Pilih Edit HTML
  • Cari kode seperti dibawah ini, (gunakan pencarian cepat => Ctrl + F) kemudian ketikkan nama file yang sobat cari.

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' preferred='no'>
<b:widget id='Header1' locked='true' title='teks (Header)' type='Header'/>
</b:section>
    </div>

Atau kode seperti ini :

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='teks (Header)' type='Header'/>
</b:section>
    </div>

  • Setelah dapat, Copy paste kode dibawah ini tepat dibawah kode diatas tersebut.

<div id="under_header">
<b:section class='header' id='underheader' preferred='yes'/>
</div>

  • Setelah selesai, cari kode ]]></b:skin>.
  • Copy paste Script dibawah ini, dan letakkan tepat diatas kode ]]></b:skin>.

    #under_header{
    margin:10px 0;
    padding:1%;
    width:98%;
    }

    • Kemudian [klik] Simpan Template.
    Semoga bermanfaat.....!!
    Sisipkan komentar untuk melengkapi artikel ini.

    Bambua*09

    Cara Membuat Icon Keren Disamping Judul Posting Blogspot

    0 comments
    Assalamualaikum Wr. Wb.



    Cara Membuat Icon Keren Disamping Judul Posting Blogspot
    Menambahkan icon keren disamping judul postingan pada Blogspot akan menambah keindahan dan ketertarikan para pengunjung. Anda bisa memperindah blog anda dengan menambahkan icon keren disamping judul posting pada blog yang anda miliki.





    Buat sobat blogger yang ingin memperindah blog-nya dengan menambahkan icon keren disamping judul posting agar tampak kelihatan lebih menarik, saya punya cara yang dapat membantu sobat untuk Cara Membuat Icon Keren Disamping Judul Posting Blogspot.

    Nach,,,,jika sobat merasa tertarik tuk memasang icon disebelah judul posting kali ini, saya akan memberikan caranya...

    Langsung saja...ikuti langkah-langkah berikut ini :
    Langkah I
    • Siapkan gambar/icon yang akan sobat gunakan
    • Ubah ukuran icon menjadi (32x32px) atau (25x25px)
    • Upload icon tersebut ke blog sobat, kemudian copy alamat URL gambar/iconnya. Contoh  (http://icons.iconarchive.com/icons/hybridworks/yoritsuki/32/Takezake-sake-in-a-bamboo-container-icon.png).
    •  Jika sudah selesai, sobat lanjut langkah yang ke dua.



    Langkah II
    • Silahkan Log in ke Blogger anda [klik] disini
    • Pilih Tata Letak/Edit HTML.
    • [klik] Download Full Template. Untuk berjaga-jaga apabila terjadi kesalahan.
    • Cari kode seperti dibawah ini :      => Gunakan saja pencarian cepat => Ctrl + F) 

    .post h3 {
    color: #444;
    font-size: 18px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    margin: 0 0 5px;
    padding: 10px 0px 0px;


    • Jika sudah ketemu, sobat tambahkan/sisipkan kode dibawah ini :

    background:  url("Alamat URL icon sobat") 0px 3px no-repeat;

    • Masukkan alamat URL icon sobat. Contoh alamat URL Icon punya saya (http://icons.iconarchive.com/icons/hybridworks/yoritsuki/32/Takezake-sake-in-a-bamboo-container-icon.png).
    • Kemudian atur posisinya agar tepat. Anda tinggal mengatur padding: 10px 0px 0px; sehingga menjadi padding: 10px 35px 8px; atau terserah dari keinginan sobat.
    • Jika sudah selesai, nanti hasilnya akan menjadi seperti dibawah ini : 

    .post h3 {
    background:  url("http://icons.iconarchive.com/icons/hybridworks/yoritsuki/32/Takezake-sake-in-a-bamboo-container-icon.png") 0px 3px no-repeat;
    color: #444;
    font-size: 18px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    margin: 0 0 5px;
    padding: 10px 35px 8px;

    • Setelah selesai, [klik] Simpan Template 
    • Nach....anda bisa liat hasilnya dech...!!!

    Sobat bisa mengganti icon yang sobat inginkan, terserah dari selera sobat.
    Jika sudah hasilnya akan seperti dibawah ini :



    Jika sobat tidak mempunyai gambar/icon keren, sobat bisa menggunakan gambar/icon yang saya telah siapkan sebelumnya...

     
    http://icons.iconarchive.com/icons/everaldo/starwars/32/Darth-Vader-icon.png


      http://icons.iconarchive.com/icons/joker-design/android/24/contacts-icon.png

      http://icons.iconarchive.com/icons/iconshock/high-detail-social/24/blogger-icon.png

      http://icons.iconarchive.com/icons/musett/glow-ball/24/Google-Earth-icon.png


    http://icons.iconarchive.com/icons/everaldo/starwars/32/clone-old-icon.png



    Semoga bermanfaat....!!



    Bambua*09

    Cara Mengubah Footer Menjadi 3 Kolom Pada Blogspot

    0 comments
    Assalamualaikum Wr. Wb.


    Cara Mengubah Footer Menjadi 3 Kolom Pada Blogspot

    Jumpa lagi nih sobat blogger...!!
    Oke, kli ini saya akn membahas cara mengubah kolom footer menjadi 3 kolom..

    Kadang template yang kita gunakan hanya tersedia satu kolom footer saja. Membahas tentang trik & tutorial Blogger dah banyak...namun ada beberapa kode yang tidak cocok dengan template kita..atau kadang terdapat perbedaan kode dalam template.

    Tampilan Widgat Sebelum di Ubah:


    Dengan menambahkan footer menjadi 3 kolom kita bisa membuat space yang lebih luas pada blog.

    Jika sobat tertarik pada trik blogger kali ini dengan Mengubah Kolom Footer Menjadi 3 Kolom Pada Blogspot, sobat bisa mencobanya....!!

    Oke,,Langsung saja ikuti langkah-langkah dibawah ini:
    • Seperti biasa Log in ke Blogger anda. [klik] disini
    • Jika terdapat Widgat pada Footer sebaiknya sobat pindahkan terlebih dahulu.
    • Pilih Tata Letak/Edit HTML.
    • Cari kode ]]></b:skin> (Gunakan saja pencarian cepat => Ctrl + F) 
    • Jika sudah dapat, silahkan sobat letakkan kode dibawah ini tepat diatas kode ]]></b:skin> 
    #footer-column-container {
    clear:both;
    }
    .footer-column {
    padding: 10px;
    }

    • Jika sudah, sobat cari kode <b:section class='footer' id='footer'> 
    • Jika sudah dapat, silahkan sobat ganti kode <b:section class='footer' id='footer'> dengan kode dibawah ini :
    <div id='footer-column-container'>
    <div id='footer1' style='width: 300; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'>
    </div>
    <div id='footer2' style='width: 400; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'>
    </div>
    <div id='footer3' style='width: 300; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'>
    </div>
    <div style='clear:both;'/>
    </div>

    Ket :
    Kode berwarna hijau (width: 300;) lebar kolom footer, sobat bisa mengganti angkanya sesuai dengan lebar template blog sobat.
    • Jika tidak terdapat kode  <b:section class='footer' id='footer'> pada template, sobat bisa cari kode <!-- end content-wrapper --> dan letakkan kode diatas dibagian bawah kode <!-- end content-wrapper -->
    • Kemudian [klik] Simpan Template.
    • Selesai.

    Jika sobat ingin membuat kolom Footer agar terlihat lebih menarik, sobat tidak susah payah lagi untuk mengedit kode-nya, karena sebelumnya saya sudah menyiapkan kode-nya dan sobat bisa menggunakan kode dari saya ini... Sobat bisa mengganti kode diatas tadi:

    #footer-column-container {
    clear:both;
    }
    .footer-column {
    padding: 10px;
    }
    • Silahkan sobat ganti dengan kode dibawah ini :
    #footer-column-container {
    clear:both;
    }

    .footer-column {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqg7EqIv2_GWQtjpNtHUfmpZi-A8Z69zOO35aAeXmXKi6rntX8xNPndFVRatq-_WJfXFI8BaqzHKmTk3t140vnb4HruFqql97HWSBf9jNrKd6bDN-N2b2WpAUimuIg-TLDi94_4-gmYi0/s1600/sidebartop.gif) top no-repeat;
    float: left;
    width: 290px;
    margin: 0 0 10px;
    border: 1px solid #DDD;
    padding:0px 10px 10px 10px;
    border: 1px solid #DDD;
    }

    .footer-column ul li {
    background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSftG-Hf79xerl5qWUrh3DSlWT90zt1TI85qsFkxmE98VQQLiKa4q3i-xikNdGQ4UUHawJ7W_ojRxdBpiKtcOBC618TXzjNox1kZc-UDWqpeUM6lIxk6qWYAGNG10BgRZXvyGGfXpkfPj1/s1600/Stock-Index-Down-icon.png) no-repeat;
    list-style-type: none;
    margin: 0 0 5px;
    padding-left: 20px;
    }

    .footer-column ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    .footer-column h2 {
    background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs8_cnS0X1gmICZ0DMd-xZahGnsg3O818ZN-8vjbM04rtrWZts02ioVIJtnzUmLH0AVgsihFctgcuXTlEXV6xipOgveJvXIUEpvdekMfCLcmKNIN2p65n5dZOs5EsQC9BxazaAKGoq68w/s1600/headline.png);
    color: #FFF;
    font-size: 14px;
    font-family: Arial, Tahoma, Verdana;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    margin: 0 10 10px;
    padding: 3px 0 3px 7px;
    }

    • Jika sudah selesai, maka tampilannya akan seperti dibawah ini:



    Semoga Trik ini bisa membantu Sobat....!!
    Selamat Mencoba...

    Bambua*09

    My Facebook

    Statistik

     
    BAMBUA*09. Copyright 2008 All Rights Reserved by Bambua*09 Blogger Template by BAMBUA*09