Rabu, 11 Desember 2013

Membuat tulisan yang bergerak mengikuti kursor mouse

contoh hasilnya

untuk membuatnya silakan simak cara berikut ini
cari ruangan code html/javascript
masukkan code dibawah berikut ini

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'comic sans';
color: #FF0080;
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;}
</style>
<script type="text/javascript">
;(function(){
var msg = "Followers";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
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>


kemudian save dan lihat hasilnya .. . . .

Senin, 09 Desember 2013

menjadikan kursor diikuti oleh bintang bintang

cari ruangan untuk menempatkan code html/javascript
kemudian masukkan code dibawah ini

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/blues.js"></script>

atau juga  bisa

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/purples.js"></script>

kemudian save dan lihat hasilnya

Minggu, 08 Desember 2013

cara mengganti warna Text Highlight

misalnya







akan diganti seperti ini

 





---------------------

caranya masuk ke dashboard >> templates >> edit html
cari code dibawah ini
body {

kemudian masukkan code 

::-moz-selection {
background: #CC3399;
color: #ffffff;
}

Sabtu, 07 Desember 2013

Membuat recent post disertai gambar pada blog


masukkan code dibawah ini kedalam rauang code html/javascript
silakan untuk mencoba
<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>


Jumat, 06 Desember 2013

Membuat kesan pada gambar apabila didekati kursor mouse



masuk ke dashboard >> template >> edit html
cari kode a img {

delete  kode setelah a img { 
gantikan dengan
-webkit-transition-duration:.4s;}

img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}


jika tidak menemukan kode a img{
copy paste code berikut
kemudian diletakkan SEBELUM /* Headings atau /* Header

a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}


coba lihat hasilnya pada gambar postingan blog anda

lihat perbedaanya . .. . .. . 

Senin, 25 November 2013

Membuat 3 menu tab di blog

copy paste code dibawah ini;
masukkan kedalam ruangan html/javascript

semoga berhasil .. .  .

save dan lihat hasilnya

<style>


.tabmenu1 {


text-align:center;


width:260px;


color:#333333


}


a.tabmenu {




background: pink;


width:84px;


text-decoration:none;


color:#333333;


display:inline-block;


padding-top:10px;


padding-bottom:10px;


text-align:center;


font:12 georgia;


letter-spacing:2px;


-webkit-transition-duration:0.5s;


}


a.tabmenu:hover {


background: #000;


color:#fff;


-webkit-transition-duration:0.5s;


}


#menu img { max-width:260px;}


 </style>


<center><div class="tabmenu1">


<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav1').innerHTML" >PAGE 1</a>


<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav2').innerHTML" >PAGE 2</a>


<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav3').innerHTML" >PAGE 3</a>


<div id="menu" style="width:260px;color:#333333;font:12px verdana;">


WELCOME


</div>


<div id="nav1" style="display: none;">


ISI 1


</div></div>


<div id="nav2" style="display: none;">


ISI 2


</div>


</div>


<div id="nav3" style="display: none;">


ISI 3,p.
j<p>
asdaqw<p>
sd


</div></div>

</div></div>

Sabtu, 23 November 2013

Animasi text berjalan di bagian sidebar (marquee)

silakan masukkan code berikut taruh didalam ruangan html/javascript


<marquee style="background-color:FFDDFF; border: 3px solid pink; color:#FF0000; font-family:verdana; font-size:9pt; width:100px; height:25px; " direction="left" behavior="scroll" scrollamount="5" >TEXT BERJALAN ADA DISINI</marquee>

kemudian save dan lihat hasilnya




Minggu, 17 November 2013

Menampilkan satu postingan dihalaman depan blogspot


lari ke dashboard

ikuti langkah berikut pada gambar . ganti dengan 1 / posting di laman utama

semoga berhasil . . . ..


Rabu, 13 November 2013

Membuat kelompok link navigasi menu

copy code berikut masukkan kedalam ruangan html/javascript
<br/><center>
<a href="LINK">About Me</a> | <a href="LINK">Profile</a> | <a href="LINK">Facebook</a><a href="LINK">Twitter</a> | <a href="LINK">Youtube </a> | <a href="LINK">Tips-Trick</a>
<center><a href="LINK">Google Plus</a></center>
</center>


jika berhasil , maka hasilnya kan seperti dibawah

Minggu, 10 November 2013

Meletakkan script iklan banner bergerak di blog


cari ruangan html/javascript
masukkan code berikut
<center><center><div style=' background: #fff; border: 2px solid #fc0c92; padding: 2px; width: 710px;'><div style='text-align: center;'><marquee behavior='alternate' direction='right' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3'><a href="LINK1"><img src="http://icons.iconarchive.com/icons/tanitakawkaw/simple-cute/128/box-icon.png" alt="" width="125" height="125" /></a><a href="LINK2"><img src="http://icons.iconarchive.com/icons/petalart/free-shopping/128/shipping-box-icon.png" alt="" width="125" height="125" /></a><a href="LINK3"><img src="http://icons.iconarchive.com/icons/double-j-design/ravenna-3d/128/Box-icon.png" alt="" width="125" height="125" /></a><a href="LINK4"><img src="http://icons.iconarchive.com/icons/mymovingreviews/3d-movers/128/boxes-brown-icon.png" alt="" width="125" height="125" /></a></marquee></div></div></center></center>


save dan lihat hasilnya
semoga berhasil  . . . .   ,


Senin, 28 Oktober 2013

Membuat navigasi bar di blogspot


masukkan code berikut kedalam ruangan html/javascript
save dan lihat hasilnya

semoga berhasil . .. . . .

<style>

.tingtong{

margin-right:-0px;

margin-left:-0px;

background: url(LINK BACKGROUND);top:0px;

left:0px;

text-align:center;

padding-top:10px;

padding-bottom:10px;

border: #e69fba 3px solid;

}

a.blabla{

background:#e69fba ;

text-decoration:none;

color:#fff;

padding:5px;

font:12px arial;

margin-left:5px;

margin-right:5px;

-webkit-transition:All 0.4s ease;

-moz-transition:All 0.4s ease;

-o-transition:All 0.4s ease;

display:inline-block;

padding-right:10px;


padding-left:10px;


}




a.blabla:hover{background:#fff;

color:#000;

</style>

<br />

<div class="tingtong">

<a class="blabla" href="YOUR LINK">PAGE 1</a>

<a class="blabla" href="YOUR LINK">PAGE 2</a>

<a class="blabla" href="YOUR LINK">PAGE 3</a>

<a class="blabla" href="YOUR LINK">PAGE 4</a>

<a class="blabla" href="YOUR LINK">PAGE 5</a>


</div>

Rabu, 23 Oktober 2013

Memberikan border style di sidebar blog

masuk kedalam edit html
cari code berikut ]]></b:skin>
kemudian paste code berikut ini tepat diatas code yang dicari tadi
.sidebar .widget {
background: #FFF;
border: 2px solid #000;
  margin:5px 5px 1.0em;
  padding:0px 5px 1.0em;
border-radius: 10px; }

simpan template dan lihat hasilnya ..

yang diblok hijau itu adalah lengkungan border

Minggu, 13 Oktober 2013

Menempatkan Hover Over banner link didalam blog

copy paste code berikut ini, letakkan diruangan html/javascript
save dan lihat hasilnya

semoga berhasil

<style>

#bannerdiv {

    z-index: 9999;

    position: fixed;

    bottom: -300px;

    right: 20px;

    -webkit-transition: all 1s ease-in-out;

    -moz-transition: all 1s ease-in-out;

    -o-transition: all 1s ease-in-out;

    transition: all 1s ease-in-out;

    background-color: #000000;

padding: 5px;

margin: 4px;

border-radius: 10px 10px 0px 0px;

}

#bannerdiv:hover {

    bottom: -5px;

}

#bannertitle {

    text-align: center;

    font-size: 11px;

    font-family: verdana;

    letter-spacing: 1px;

    color: #ffffff;

    padding: 3px 5px 15px 5px;

    border-top-left-radius: 10px;

    border-top-right-radius: 10px;

}

 </style>




<br />

<div id="bannerdiv">

<div id="bannertitle">

GIVEAWAY</div>

<center>

<a href="LINK ANDA"><img height="70" src="http://icons.iconarchive.com/icons/tanitakawkaw/simple-cute/128/box-icon.png" width="70" /></a></center>

<center>

<a href="LINK ANDA"><img height="70" src="http://icons.iconarchive.com/icons/double-j-design/ravenna-3d/128/Box-icon.png" width="70" /></a></center>

<center>

<a href="LINK ANDA"><img height="70" src="http://icons.iconarchive.com/icons/petalart/free-shopping/128/shipping-box-icon.png" width="70" /></a></center>

<center>

<a href="LINK ANDA"><img height="70" src="http://icons.iconarchive.com/icons/mymovingreviews/3d-movers/128/boxes-brown-icon.png" width="70" /></a></center>

</div>

Rabu, 09 Oktober 2013

Memberikan border style di sidebar dengan warna lebih dari satu



cari edit html template
cari code berikut  ]]></b:skin>

masukkanm code berikut ini tepat diatas code yang dicari

.sidebar .widget {
background: #FFF;
border-top: 4px solid #F5A9BC;
border-bottom: 4px solid #A9BCF5;
border-left: 4px solid #A9BCF5;
border-right: 4px solid #F5A9BC;

  margin:5px 5px 1.0em;
  padding:0px 5px 1.0em;
border-radius: 10px;
 }

yang tebal >> menentukan warna border style colour
blok hijau >> menentukan lengkungan border


save template . .. , dan lihat hasilnya . .. . ...

Minggu, 06 Oktober 2013

Pasang Breaking News





.newspic {background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggrQtIuqOvcAnRx6iQGV6yJbCyidZxIDURsjNmtQck_CeZiYEbpDYFrGGl5zlVzLzsUL8-8EpTc57otqTp6ptJFmrKhFX6hqlvobETtdbRMg0CHctq805TKCQsQAamr7m7gwjwIhnHaR0/s1600/BRK+NW.png) no-repeat top left;width:979px;margin:0 auto;padding:0 auto; height:24px;color:#fff;}
.news {width: 979px;margin:0 auto;padding:0 auto;line-height: 1.2em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000000;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}
---------------------------------------------------------------

Letakkan kode berikut diatas  </head> 




Jumat, 20 September 2013

Cara mengganti template blogspot

Cara mengganti template blogspot
Cara mengganti template blogspot

=
Cara mengganti template blogspot

=

 klik open setelah itu klik unggah ..  . tunggu samapi proses selesai


Rabu, 11 September 2013

Pengertian [Multimedia Content production]


Multimedia adalah penggunaan dan pemrosesan beberapa media (teks, audio, video, grafik, animasi dan interaktif) yang berbeda untuk menyampaikan informasi atau menghasilkan produk multimedia seperti  (music, video, film, game, entertainment, dll).

Atau penggunaan sejumlah teknologi yang berbeda yang memungkinkan untuk menggabungkan media (teks, audio, video, grafik, animasi dan interaktif) dengan cara yang baru untuk tujuan komunikasi. Dalam kategori ini media yang digunakan bisa berbagai macam diantaranya adalah :

  • Text
  • Grafik
  • Animation
  • Video
  • Music
  • Visual Effect
  • Sound Effect


>> Diproses dengan software >> kemudian menghasilkan multimedia produk >> PUBLIKASI

membuat notifikasi komentar blog

==
membuat notifikasi komentar blog
membuat notifikasi komentar blog


Sabtu, 07 September 2013

Round hover jika kursor menyentuh pada gambar

cari dibagian edit html

cari code berikut  /* Header

silakan masukkan code berikut di atas code yang anda cari
/*------ IMAGE ANIMATION------*/img {filter:alpha(opacity=100);-webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #FF3366; -moz-box-shadow: 0px 0px 20px #FF3366; -webkit-border-top-right-radius:30; -webkit-border-top-left-radius:30; -webkit-border-bottom-right-radius:30; -webkit-border-bottom-left-radius:30;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#FF3366; border-radius: 50px; -moz-border-radius: 50px;}-moz-opacity:1.0;opacity:1.0;}img:hover {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:.80;}u {text-decoration:underline;border-bottom: 2px dotted #ff0080;padding: 0px;}








semoga berhasil .. . . 




Membuat beraneka [aneka macam jenis border]

menentukan warna >> yang diblok hijau

untuk code OUTSET

<div style="background-color:black; -webkit-border-radius: 20px;border:5px OUTSET #001EFF; padding:10px;">TULISAN ADA DISINI</div>

hasil:
TULISAN ADA DISINI

untuk code INSET

<div style="background-color:black; -webkit-border-radius: 20px;border:5px INSET #001EFF; padding:10px;">TULISAN ADA DISINI</div>

hasil:
TULISAN ADA DISINI


untuk code GROOVE

<div style="background-color:black; -webkit-border-radius: 20px;border:5px GROOVE #001EFF; padding:10px;">TULISAN ADA DISINI</div>

hasil:
TULISAN ADA DISINI


untuk code RIDGE

<div style="background-color:black; -webkit-border-radius: 20px;border:5px RIDGE #001EFF; padding:10px;">TULISAN ADA DISINI</div>

hasil:
TULISAN ADA DISINI



untuk code DASHED

<div style="background-color:black; -webkit-border-radius: 20px;border:5px DASHED #001EFF; padding:10px;">TULISAN ADA DISINI</div>

hasil:
TULISAN ADA DISINI



untuk code SOLID

<div style="background-color:black; -webkit-border-radius: 20px;border:5px SOLID #001EFF; padding:10px;">TULISAN ADA DISINI</div>

hasil:
TULISAN ADA DISINI


untuk code DOUBLE

<div style="background-color:black; -webkit-border-radius: 20px;border:5px DOUBLE #001EFF; padding:10px;">TULISAN ADA DISINI</div>

hasil:
TULISAN ADA DISINI


Rabu, 28 Agustus 2013

[Ebook] Berkreasi dengan Wordpress

kreasi bikin situs web dari wordpress
Link Download terkunci, silakan buka dengan klik salah satu tombol dibawah ini:


Download paket
"Kreasi bikin situs web dari wordpress
Ukuran file ( 9,68 MB )

Sumber: http://more-examples.blogspot.com/2012/11/kreasi-bikin-situs-web-dari-wordpress.html

Terkait dengan buku pelatihan
dan video belajar Wordpress
klik DISINI


- Memanfaatan templates dan plugin gratis dari pihak ketiga
- cara menambahkan music, video, visitor view dan masih banyak lagi yg lainnya
- cepat paham dengan CMS wordpress  // tahapan tahapan
- Diambilkan dari berbagai sumber tutorial semoga bermanfaat

Index: [Belajar Bikin Web / Blog] (Blogspot)

 Coba gunakan: Real-time HTML Editor
  1. Cara membuat isi posting pada blogspot
  2. Upload/memasukkan gambar dalam postingan blog
  3. njajal Upload video dalam blog
  4. memasukkan video dari Youtube kedalam blog
  5. memasukkan kode HTML/javascript kedalam blog
  6. Cara backup template blog
  7. Cara mengganti template blogspot
  8. Buka link baru apabila klik gambar
  9. membuat notifikasi komentar blog
  10. membuat gambar bergerak menggunakan marquee
  11. membuat background dibelakang tulisan blog
  12. merubah dan mengganti icon pada blogspot 
  13. Beberapa situs penyedia shootbox gratis
  14. cara daftar dan memasang shoutbox di blogspot
  15. ================================
  16. Cara memasang Signature / tanda tangan digital Dalam Blog
  17. untuk mengetahui banyaknya pengunjung yang online di blog
  18. merubah ukuran ruang komentar pada blogspot
  19. membuat menu Dropdown dalam blog
  20. menampilkan website lain kedalam blog
  21. meletakkan gambar disebelah judul postingan
  22. membuat text bergerak (marquee text)
  23. membuat ruang komentar dibawah postingan
  24. ================================
  25. youtube video player jadikan mp3 dalam blog
  26. membuat dan meletakkan button Back To Top
  27. cara membuat textbox dalam blog
  28. Script untuk membuat populer post dalam blog 
  29. Cara merubah kursor mouse pada blog
  30. widget untuk mengetahui jumlah isi postingan dan comentar
  31. script untuk meletakkan button share facebook dalam blog
  32. Meletakkan button like facebook kedalam blog
  33. Meletakkan button like didalam blog
  34. Meletakkan sitemap di blogspot
  35. Cara membuat scroll box di blogspot 
  36. =============================
  37. Membuat judul blog bergerak
  38. Membuat tulisan yang bergerak mengikuti kursor mouse
  39. menjadikan kursor diikuti oleh bintang bintang 
  40. cara mengganti warna Text Highlight
  41. Membuat recent post disertai gambar pada blog
  42. Membuat kesan pada gambar apabila didekati kursor mouse
  43. Gambar akan berubah bentuk ketika didekati kursor mouse
  44. Jadikan dalam bentuk icon link untuk home, older, newer post
  45. Bikin button follow and dashboard tumblr
  46. Membuat tulisan didalam fieldset
  47. Membuat tempat code untuk iklan / banner
  48. Memasang profile facebook dan blogger didalam blog
  49. Membuat pesan pembuka dan penutup pada blog
  50. Membuat Buat Scroll Box dalam postingan 
  51. =============================
  52. Membuat slide navigation di blog
  53. Membuat Hide Navigation di blog
  54. Membuat 3 menu tab di blog
  55. Membuat navigasi bar di blogspot
  56. Menempatkan Hover Over banner link didalam blog
  57. Memberikan border style di sidebar blog
  58. Memberikan border style di sidebar dengan warna lebih dari satu
  59. Menampilkan satu postingan dihalaman depan blogspot 
  60. Animasi text berjalan di bagian sidebar (marquee) 
  61. Round hover jika kursor menyentuh pada gambar
  62. Meletakkan script iklan banner bergerak di blog
  63. Membuat kelompok link navigasi menu
  64. Memberi bingkai pada sidebar
  65. Memberi gambar disamping pada blog arsip 
  66. =============================
  67. Membuat tab menu dengan latar belakang
  68. Memberikan background title pada sidebar 
  69. Memberikan text bayangan pada judul di sidebar  
  70. Memberikan effek animasi bubbles pada kursor mouse 
  71. Memberi effek sparkling pada kursor mouse
  72. Memasang floating visitor online 
  73. Memberikan background pada title sidebar
  74. Membuat background yang berbeda disetiap postingan
  75. Memberi bayangan pada text yang di tebalkan
  76. Memberi background border untuk footer
  77. Memasang gambar dibagian footer
  78. Memberi warna single pada text yang bergaris bawah
  79. ============================= 
  80. Bagian bawah footer 
  81. Menghilangkan link subscribe Entri (atom) 
  82. Desain label blogger with css 
  83. Berbagi banner iklan untuk blog sendiri
  84. Menghilangkan navbar di blogspot 
  85. Memasang twitter follow di blog
  86. Memberi background gambar pada blog
  87. Membuat kotak untuk tempat iklan
  88. Menempatkan iklan gambar yang bergerak
  89. Memasang iklan / banner posisi terapung disamping
  90. Membuat list html
  91. Cara menghilangkan tulisan diberdayakan oleh 
  92. Menghapus subscribe to (feed link )
  93. Membuat link berupa tombol 
  94. Code untuk membuat artikel random post di sidebar
  95. Code untuk daftar scrool pada sidebar
  96. Menghias text area dengan warna
  97. Membuat mesin pencari di blog sendiri 
  98. Text area dengan select all 
  99. Memasang tombol untuk kembali keatas ( go to top )
  100. Menyembunyikan text dengan tombol spoiler ( show hide )

Jumat, 16 Agustus 2013

Memasukkan kode HTML/javascript kedalam blog

;;
Memasukkan kode HTML/javascript kedalam blog
Add caption
<==>
Memasukkan kode HTML/javascript kedalam blog 
<==>

Memasukkan kode HTML/javascript kedalam blog


 setelah dimasukkan code html/javascript kemudian klik save/simpan
coba lihat perubahan pada web/blog


Kamis, 15 Agustus 2013

open link in new tab ketika setelah diklik

open link in new tab ketika setelah diklik open link in new tab ketika setelah diklik


code untuk open link in new tab

   <a href="Letakkan link untuk dibuka disini" target="_blank" >
   <img src="Letakkan url gambar disini"/></a>


Sebagai contoh, untuk kode gambar adalah seperti ini

<a href="https://facebook.com" target="_blank" >
<img src="http://blog.delicious.com/wp-content/uploads/2013/07/facebook_logo.jpg"/>
</a>

Untuk gambar kedua, link akan dibuka pada tab baru. Jika anda ingin link dibuka pada page yang sama, buang target="_blank"

Sabtu, 27 Juli 2013

Kamis, 25 Juli 2013

Njajal upload video dalam blog

 



<===>
<===>
<===>

 
<===>



  
selesai sudah. . . tinggal tunggu samapi proses selesai upload



Rabu, 24 Juli 2013

Membuat aplikasi desktop untuk Windows

Link Download terkunci, silakan buka dengan klik salah satu tombol dibawah ini:


Contoh Aplikasi Visual Basic.NET free source code
Download free Contoh latihan VB.NET free source code
Ukuran file ( 5MB )


Terkait dengan buku pelatihan
dan video belajar
klik DISINI


Contoh aplikasi Desktop VB.NET
Disini terdapat beberapa contoh program sederhana guna untuk latihan logika pemrograman visual basic , pertama kali dengan cara menyimpannya kedalam bentuk ebooks .chm // semoga dengan adanya contoh program yang sederhana ini kita bisa terus semangat untuk belajar dan memahami cara kerja program tersebut

Jumat, 12 Juli 2013

Cara membuat isi posting pada blogspot

Post entri ] dalam blog merupakan hal yang paling mendasar bagi seorang blogger pemula khususnya

Cara membuat isi posting pada blogspot
Berikut adalah cara bagaimana Anda akan memulai langkah untuk mengetik dalam blog Anda.
>>Buka link www.blogger.com (link ini diperlukan setiap kali Anda akan login ke akun blogger). Maukkan email dan password Anda.
 
>> 
A untukketikkan judul postingan
B untuk isi postingan yang akan diisi
C untuk memberikan label mengenai isi postingan misal kategori artikel, gadget dll
 
>> yang terakhir tinggal tekan/klik Publish disamping isi judul postingan
>> selesai dehh  ..



Minggu, 16 Juni 2013

Memberi bayangan pada text yang di tebalkan

cari dibagian edit html, cari code /* Header

kemudian masukkan code berikut
b {
text-decoration:none;
text-shadow: 0 0 0.2em #FA5858, 0 0 0.2em #FA5858;
padding: 0px;
}

masukkan tepat diatas code /* Header

save dan lihat hasilnya . .
semoga berhasil

Sabtu, 15 Juni 2013

Memberi background border untuk footer


masuk ke bagian edit html , cari code .post-footer {
kemudian masukkan code berikut tepat dibawah code yang dicari

    background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSaATzueHSd2rQXCWUQXFXc1sFAx3tNXBj-px5bU64D4ji5rmF6cw") repeat 2px .25em;
    border: 1px solid #FF0080;
    border-left: 1px solid #FF0080;
    color: #000000;
    font: 90%/1.4em 'Arial',Trebuchet,Arial,Verdana,Sans-serif;
    letter-spacing: 0;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
padding: 6px;
margin:1em 20px;
    text-transform: none;

}

save dan lihat hasilnya ..

semoga berhasil

Jumat, 14 Juni 2013

Memasang gambar dibagian footer

cari dibagian edit html
kemudian cari code <div class='post-footer-line post-footer-line-3'>

kemudian masukkan code berikut

<center><img src='http://icons.iconarchive.com/icons/adidadidu/ipad/icons-390.jpg' style='width: 320px; height: 104px;'/></center>
tepat dibawah code yang dicari tadi

save dan lihat hasilnya .. .

Kamis, 13 Juni 2013

Memberi warna single pada text yang bergaris bawah

cari dibagian edit html
cari code /* Header

kemudian masukkan code berikut tepat diatas code yang dicari tadi
  u {
text-decoration:none;
border-bottom: 2px solid #F781BE;
padding: 0px;
}



save dan lihat hasilnya

Rabu, 12 Juni 2013

Bagian bawah footer

dibagian edit html, cari code <data:post.body/>
kemudian masukkan code berikut tepat diatas code yang dicari tadi
<b:if cond='data:blog.pageType == "item"'>
<div style='width: 400px;'> <div style='clear: right; float: left; margin-right: 5px;margin-top: 5px;'>

<!--Script Kode Iklan Anda disini-->

</div></div>
</b:if>

nanti hasilnya akan seperti terlihat pada gambar dibawah

Selasa, 14 Mei 2013

Memberikan effek animasi bubbles pada kursor mouse

masukkan code dibawah ini diruangan html/javascript
save dan lihat hasilnya

<script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">

// <![CDATA[

var colours=new Array("#fff", "#fff", "#fff", "#fff", "#fff"); // colours for top, right, bottom and left borders and background of bubbles

var bubbles=66; // maximum number of bubbles on screen



/****************************

* JavaScript Bubble Cursor *

* (c) 2010 mf2fm web-design *

* http://www.mf2fm.com/rv *

* DON'T EDIT BELOW THIS BOX *

****************************/

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var bubb=new Array();

var bubbx=new Array();

var bubby=new Array();

var bubbs=new Array();



window.onload=function() { if (document.getElementById) {

var rats, div;

for (var i=0; i<bubbles; i++) {

rats=createDiv("3px", "3px");

rats.style.visibility="hidden";



div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="1px";

div.left="0px";

div.bottom="1px";

div.right="0px";

div.borderLeft="1px solid "+colours[3];

div.borderRight="1px solid "+colours[1];



div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="0px";

div.left="1px";

div.right="1px";

div.bottom="0px"

div.borderTop="1px solid "+colours[0];

div.borderBottom="1px solid "+colours[2];



div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.left="1px";

div.right="1px";

div.bottom="1px";

div.top="1px";

div.backgroundColor=colours[4];

div.opacity=0.5;

if (document.all) div.filter="alpha(opacity=50)";



document.body.appendChild(rats);

bubb[i]=rats.style;

}

set_scroll();

set_width();

bubble();

}}



function bubble() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<bubbles; c++) if (!bubby[c]) {

bubb[c].left=(bubbx[c]=x)+"px";

bubb[c].top=(bubby[c]=y)+"px";

bubb[c].width="3px";

bubb[c].height="3px"

bubb[c].visibility="visible";

bubbs[c]=3;

break;

}

}

for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

setTimeout("bubble()", 40);

}



function update_bubb(i) {

if (bubby[i]) {

bubby[i]-=bubbs[i]/2+i%2;

bubbx[i]+=(i%5-2)/5;

if (bubby[i]>sdown && bubbx[i]>0) {

if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

bubb[i].width=bubbs[i]+"px";

bubb[i].height=bubbs[i]+"px";

}

bubb[i].top=bubby[i]+"px";

bubb[i].left=bubbx[i]+"px";

}

else {

bubb[i].visibility="hidden";

bubby[i]=0;

return;

}

}

}



document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sleft;

x=(e)?e.pageX:event.x+sdown; }



window.onresize=set_width;

function set_width() {

if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (typeof(self.innerHeight)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

else {

swide=800;

shigh=600;

}

}



window.onscroll=set_scroll;

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}



function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}

// ]]>
</script>

Senin, 13 Mei 2013

Memberi effek sparkling pada kursor mouse

masukkan code dibawah ini diruangan html/javascript
save dan lihat hasilnya

<script type='text/javascript'>


</script>


<script type='text/javascript'>

// <![CDATA[

var colour="#000000";

var sparkles=100;


var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();

window.onload=function() { if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny[i]=rats);

starv[i]=0;

tinyv[i]=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(1, 5);

var rdow=createDiv(5, 1);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="3px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="3px";

document.body.appendChild(star[i]=rats);

}

set_width();

sparkle();

}}

function sparkle() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";


star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;

}

}

for (c=0; c<sparkles; c++) {

if (starv[c]) update_star(c);

if (tinyv[c]) update_tiny(c);

}

setTimeout("sparkle()", 40);

}

function update_star(i) {

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

if (starv[i]) {

stary[i]+=1+Math.random()*3;

if (stary[i]<shigh+sdown) {

star[i].style.top=stary[i]+"px";

starx[i]+=(i%5-2)/5;

star[i].style.left=starx[i]+"px";

}

else {

star[i].style.visibility="hidden";

starv[i]=0;

return;

}


}

else {

tinyv[i]=50;

tiny[i].style.top=(tinyy[i]=stary[i])+"px";

tiny[i].style.left=(tinyx[i]=starx[i])+"px";

tiny[i].style.width="2px";

tiny[i].style.height="2px";

star[i].style.visibility="hidden";

tiny[i].style.visibility="visible"

}

}

function update_tiny(i) {

if (--tinyv[i]==25) {

tiny[i].style.width="1px";

tiny[i].style.height="1px";

}

if (tinyv[i]) {

tinyy[i]+=1+Math.random()*3;

if (tinyy[i]<shigh+sdown) {

tiny[i].style.top=tinyy[i]+"px";

tinyx[i]+=(i%5-2)/5;

tiny[i].style.left=tinyx[i]+"px";

}

else {



tiny[i].style.visibility="hidden";

tinyv[i]=0;

return;

}

}

else tiny[i].style.visibility="hidden";

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;

}

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"px";

div.style.width=width+"px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);

}

// ]]>

</script>