Showing posts with label Tips Blog. Show all posts
Cara Mudah Membuat Kotak Script di Postingan Blog ~ Mungkin beberapa orang yang mempunyai blog baru risih dengan blognya sendiri karena blognya yang masih baru dan kurang rapih, apalagi yang baru buat blog dan langsung memposting tentang script pasti sobat berpikir "kok nih blog kurang rapih ya?", oleh karena itu disini saya mau ngeshare tentang Cara Mudah Membuat Kotak Script di Postingan Blog.
oke kita langsung saja ke langkah - langkahya :
Kotak Script Tanpa Scrool :
1. Login ke akun blogger sobat dan pilih entri baru.
2. Kemudian buatlah sebuah tulisan yang ingin di posting.
3. Kemudian klik html dan masukan kode script ini dibawah tulisan yang sobat ingin beri kotak script.
5. Kemudian sobat klik compose kembali, maka disitu akan ada kotak script.
6. Kemudian hapus tulisan yang ada di kotak tersebut dan ganti dengan code script sobat.
7. Selesai
NB :
Kotak Script dengan Scrool :
1. Caranya sama seperti diatas hanya saja do kotak script scrool hanya di tambahkan overflow: auto; height: 50px; width: 300px;
2. kode script kotak dengan scrool.
oke demikian postingan kali ini tentang Cara Mudah Membuat Kotak Script di Postingan Blog.
Semoga bermanfaat untuk sobat semua.
oke kita langsung saja ke langkah - langkahya :
Kotak Script Tanpa Scrool :
1. Login ke akun blogger sobat dan pilih entri baru.
2. Kemudian buatlah sebuah tulisan yang ingin di posting.
3. Kemudian klik html dan masukan kode script ini dibawah tulisan yang sobat ingin beri kotak script.
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.Klik Disini.</div>
4. Untuk lebih jelasnya lhat gambar di bawah ini.text-align: left;">
.Klik Disini.</div>
5. Kemudian sobat klik compose kembali, maka disitu akan ada kotak script.
6. Kemudian hapus tulisan yang ada di kotak tersebut dan ganti dengan code script sobat.
7. Selesai
NB :
- Border: 3px adalah ketebalan kotak script tsb
- Double; adalah bentuk kotak script, nih saya kasih gambarannya
dashed
dotted
Groove
inset
outset
ridge
- Padding: 10px adalah panjang kotak ke bawah
- background-color: #ffffff adalah Warna dalam kotak
- Dan text-align:left; = posisi tulisan didalam kotak di kiri.
Kotak Script dengan Scrool :
1. Caranya sama seperti diatas hanya saja do kotak script scrool hanya di tambahkan overflow: auto; height: 50px; width: 300px;
2. kode script kotak dengan scrool.
<div style="border: 3px #1780dd solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 50px; width: 300px;
text-align: left;">
.kode script disini.</div>
overflow: auto; height: 50px; width: 300px;
text-align: left;">
.kode script disini.</div>
oke demikian postingan kali ini tentang Cara Mudah Membuat Kotak Script di Postingan Blog.
Semoga bermanfaat untuk sobat semua.
Thank You For ALLAH SWT
Thank You For Sobat Blogger
HAPPY BLOGGING ! ! !
Cara Membuat Menu Dropdown di Blog Tanpa Edit HTML ~ apa kabar Sobat Blogger ketemu lagi nih dengan saya selaku admin di blog ini, disini ane mau ngeshare tentang membuat menu dropdown tanpa edit html, kenapa ane mau ngeshare tutorial ini karena kebanyakan orang membuat blog pasti males dengan hal-hal yang membuatnya bingung seperti edit html, oleh karena itu, saya mau ngeshare tuts ini.
oke kita langsung praktekan saja (mohon disimak)
Langkah - Langkah :
1. Login ke akun Blogger sobat.
2. Pilih Tata Letak.
3. Kemudian klik Tambahkan Gadget.
4. Lalu pilih html/javascript.
5. copy - pastekan code dibawah ini di html/javascript, jangan diberi judul agar blog terlihat rapih.
NB :
Demikian Tutorial kali ini tentang Cara Membuat Menu Dropdown di Blog Tanpa Edit HTML.
Semoga bermanfaat . . .
HAPPY BLOGGING ! ! !
oke kita langsung praktekan saja (mohon disimak)
Langkah - Langkah :
1. Login ke akun Blogger sobat.
2. Pilih Tata Letak.
3. Kemudian klik Tambahkan Gadget.
4. Lalu pilih html/javascript.
5. copy - pastekan code dibawah ini di html/javascript, jangan diberi judul agar blog terlihat rapih.
<style>
#mbtnavbar {
background: #3B5998;
width: 87%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FF0000;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #627AAD;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#mbtnav li li a:hover, #mbtnav li li a:active {
background: #627AAD;
color: #FFF;
display: block;
}
#mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {
background: #EDEFF4;
width: 120px;
color: #FF0000;
display: block;
font:normal 12px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;
}
#mbtnav li li li a:hover, #mbtnav li li li a:active {
background: #627AAD;
color: #FFF;
display: block;
}
</style>
<div id=’mbtnavbar’>
<ul id=’mbtnav’>
<li>
<a href=’Nama Blog Kamu'>Home</a>
</li>
<li><a href=’link kamu’>About</a>
</li>
<li>
<a href=’#'>Page ▼</a>
<ul>
<li><a href=’link kamu’>Nama Sub Tab</a></li>
<li><a href=’link kamu’>Nama Sub Tab</a></li>
<li><a href=’link kamu’>Nama Sub Tab</a>
<ul>
<li><a href=’#'>Sub Sub Page #1</a></li>
<li><a href=’#'>Sub Sub Page #2</a></li>
<li><a href=’#'>Sub Sub Page #3</a></li>
></ul></li></ul></li></ul></div>
#mbtnavbar {
background: #3B5998;
width: 87%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FF0000;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #627AAD;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#mbtnav li li a:hover, #mbtnav li li a:active {
background: #627AAD;
color: #FFF;
display: block;
}
#mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {
background: #EDEFF4;
width: 120px;
color: #FF0000;
display: block;
font:normal 12px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0 -14px;
}
#mbtnav li li li a:hover, #mbtnav li li li a:active {
background: #627AAD;
color: #FFF;
display: block;
}
</style>
<div id=’mbtnavbar’>
<ul id=’mbtnav’>
<li>
<a href=’Nama Blog Kamu'>Home</a>
</li>
<li><a href=’link kamu’>About</a>
</li>
<li>
<a href=’#'>Page ▼</a>
<ul>
<li><a href=’link kamu’>Nama Sub Tab</a></li>
<li><a href=’link kamu’>Nama Sub Tab</a></li>
<li><a href=’link kamu’>Nama Sub Tab</a>
<ul>
<li><a href=’#'>Sub Sub Page #1</a></li>
<li><a href=’#'>Sub Sub Page #2</a></li>
<li><a href=’#'>Sub Sub Page #3</a></li>
></ul></li></ul></li></ul></div>
NB :
- Warna Merah silahkan ganti dengan nama blog sobat
- Warna Biru silahkan ganti sesuai dengan link kepunyaan sobat
Demikian Tutorial kali ini tentang Cara Membuat Menu Dropdown di Blog Tanpa Edit HTML.
Semoga bermanfaat . . .
HAPPY BLOGGING ! ! !
Cara Membuat Cursor Blog Diikuti Dengan Tulisan ~ Mungkin sobat sudah bosan dengan tampilan blog sobat yang begitu begitu aja, nah disini saya akan mengeshare tentang membuat cursor blog diikuti dengan tulisan, Mungkin Tutorial ini sudah sangat lama tetapi tidak apa anggap saja tutorial baru karena untuk seorang blogger profesional sudah paham dengan tutorial ini.
Cara Menambahkan Cursor Selalu di ikuti oleh teks sangatlah mudah Banyak cara yang bisa sobat blogger lakukan untuk memperkeren blog atau mempercool blog sobat. cara ini adalah cara yang paling mudah menurut saya, karna sobat tinggal Copas saja script yang saya berikan. oke daripada banyak cincong atau basa-basi atau apalah2, mending kita langsung saja ke langkah-langkah.
Langkah - Langkah :
1. Masuk ke akun Blog sobat
2. Klik Tata Letak
3. Kemudian Klik Tambah Gadget
4. Klik pilhan HTML/JavaScript
5. Pastekan script di bawah ini ke kolom Konten
NB :
Tulisan yang berwarna biru silahkan sobat ganti dengan keinginan sobat.
6. Klik Simpan
7. Selesai
Demikian Postingan ane kali ini tentang Cara Membuat Cursor Blog Diikuti Dengan Tulisan Semoga Bermanfaat untuk sobat semua.
Cara Menambahkan Cursor Selalu di ikuti oleh teks sangatlah mudah Banyak cara yang bisa sobat blogger lakukan untuk memperkeren blog atau mempercool blog sobat. cara ini adalah cara yang paling mudah menurut saya, karna sobat tinggal Copas saja script yang saya berikan. oke daripada banyak cincong atau basa-basi atau apalah2, mending kita langsung saja ke langkah-langkah.
Langkah - Langkah :
1. Masuk ke akun Blog sobat
2. Klik Tata Letak
3. Kemudian Klik Tambah Gadget
4. Klik pilhan HTML/JavaScript
5. Pastekan script di bawah ini ke kolom Konten
<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='Tutorial Blog '.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>
//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='Tutorial Blog '.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>
NB :
Tulisan yang berwarna biru silahkan sobat ganti dengan keinginan sobat.
6. Klik Simpan
7. Selesai
Demikian Postingan ane kali ini tentang Cara Membuat Cursor Blog Diikuti Dengan Tulisan Semoga Bermanfaat untuk sobat semua.
HAPPY BLOGGING ! ! !
