Subscribe:
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Senin, 23 Januari 2012

Trik Hover dan Aktif Selektor Untuk Gambar

Contoh :



CSS Code:
<style type="text/css">
.images_B {
display:block;
 height: 174px;
 width: 232px;
 overflow: hidden;
 background-color: rgba(255, 255, 255, .1);
 cursor: pointer;
 -webkit-box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
 -moz-box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
 box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
}
a img {
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
 transition: all 0.3s ease;
}
a:hover img {
 margin-top: -21px;
}
a:active img {
 margin-top: -60px;
}
small {
 font: 10px/1.5 Verdana;
color: #000;
text-shadow: 0 0 5px #000;
}
.isi {
text-align: center;
font: bold 13px/1.5 Arial;
margin: 2px auto 0;
}
</style>

HTML :

<div class="images_B">

<a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4nqJuxJX0IcG9t0YoFMEbUfFEUKdlIKrpWfieCN4kqGJEDZ1gpA7AfGXHCHvcsKXuPxoMih6CKUgS3K4IoJ24rG6Sinlr5SnpR0owSBJ9cowTBrr8Pl7xsBtjczTcue5bWDfmqZJ7isAT/s1600/hotpants55.jpg" alt="" />
</a>
<div class="isi">
<small>Click and Hold...!!!</small>
<br />Keterangan...
<br />Keterangan...
</div>

</div>


Baca Selengkapnya»»
Diposting oleh Dinar Pragustian 0 komentar
Label: ,

Minggu, 08 Januari 2012

Cara Menyembunyikan Widget Follow

Ini buat agan-agan yang tidak memiliki banyak ruang di sidebar blognya. Untuk membuat alternatifnya, saya buat tutorial ini. Mudah-mudahan bermanfaat.

Berikut langkah-langkahnya :
1. Login ke Blogger
2. Masuk Rancangan - Elemen Laman
3. Tambah Gadget Html/Java Script
4. Copy -  Paste kode berikut :



5. Ambil code script followers anda di sini
6. Setelah itu,bika rancangan - edit Html.cari code <body> dengan cara tekan Ctrl + F, copy paste kode di atas <body>


Sumber : http://www.idsena.web.id/2011/02/cara-menyembunyikan-widget-follow.html
Baca Selengkapnya»»
Diposting oleh Dinar Pragustian 1 komentar
Label: , ,

Senin, 02 Januari 2012

Cara Membuat Gambar Dapat Digeser

contoh 1 : geser gambar ini.

Baca Selengkapnya»»
Diposting oleh Dinar Pragustian 8 komentar
Label: ,

Cara Pasang Icon Burung Twitter Terbang di Blog

Kali ini saya akan menjelaskan cara pasang ikon burung twitter yang terbang bebas dihalaman blog kita.
Berikut cara memasang burung twitter yang akan terbang dihalaman blog kita:

  1. Masuk akun blog kalian
  2. Klik rancangan
  3. Pilih Elemen laman
  4. Tambah Gadget
  5. Pilih HTML/JavaScript
  6. Lalu masukkan kode icon gambar burung twitter dibawah



Kode untuk gambar diatas
<script src="http://imemovaz.googlecode.com/files/tripleflap.js" type="text/javascript">
</script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1V03Yw9lW1fK6-XigoVexzN-kB7DrvzfEMox_Zdn7DNt8FvtsWm3YYjsgydZuToHYKw1gO5OFLcv_xyFSXBBFyP-tbEbrngXhaY0z1O8gBRpurMuB7P2ZU1WckejEnnFnCfrbhejKDC0/s1600/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/TwitterKamu";var tweetThisText = "https://twitter.com/TwitterKamu/";tripleflapInit();
</script>


Atau Bisa Menggunakan Gambar dibawah ini.

Kode untuk gambar ini:
<script src="http://imemovaz.googlecode.com/files/tripleflap.js" type="text/javascript">
</script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8I0hvClNzO_bBaxzdGAyjZf8GDonM06Ld7BnF_jy9eECZZi5gfQzr9u4TqLOhjQSgZExBDFwA1cV2FFzMvmeBF890QDZFXab9J0nD87jn45Xck3Fpa0YnroRF5dq-CJyCK73EDQ7a6Bk/s1600/birdsprite+copy+copy.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/TwitterKamu";var tweetThisText = "https://twitter.com/TwitterKamu/";tripleflapInit();</script>

Langkah Terakhir, ganti kalimat warna biru dengan alamat twitter kamu. Lalu simpan. Selesai...



sumber : http://infotips-rama.blogspot.com/2011/07/cara-pasang-icon-burung-twitter-terbang.html
Baca Selengkapnya»»
Diposting oleh Dinar Pragustian 2 komentar
Label: ,

Selasa, 27 Desember 2011

Tips cara blog bisa masuk google search engine, yahoo, dsb



Kali ini DC akan membahas tentang Tips cara blog bisa masuk google search engine, yahoo, dsb

Sumber pengunjung blog kita bisa dari direktori web, mesin pencari, tautan / link dari website lain dan kunjungan langsung ke alamat / url situs kita. Untuk bisa dicrawl dan diindex google, situs kita harus ditemukan oleh sistem bot google yang akan menelusuri blog kita dan menampilkan situs kita di hasil pencarian google.

berikut ini adalah beberapa cara agar situs web kita kenalan dengan bot punya google, yahoo, dan kawan-kawan :
1. Submit url situs web atau blog kita di sistem milik google, yahoo, dll.
- www.google.com/addurl/
- www.google.com/webmasters/tools/ (khusus yang ahli saja / expert)
- www.submitexpress.com/submit.html (pihak ketiga)
- www.altavista.com/addurl/default
- search.yahoo.com/info/submit.html

2. Submit alamat blog / situs ke web direktori terkenal
- www.dmoz.org

3. Promosi baik-baik
- Pasang signature email kita yang ada link blog atau website kita (hati-hati email kita diangap spam)
-  Pasang signature di komentar blog atau forum walaupun nofollow
-  Pasang iklan di iklan online gratisan
- Masukkan blog kita di web direktori lokal dan internasional sebanyak-banyaknya
-  Daftar direktori blog seperti blog-indonesia.com
-  Pakai pakaian atau atribut yang ada tulisan alamat situs kita
-  Kalau kenalan sama orang lain di internet jangan lupa promosi blog kita.
-  Pasang link blog kita di profil friendster, facebook, hi5, myspace, dan lain-lain.

4. Rajin menebar link blog aktif kita di internet
carilah forum atau blog yang memperbolehkan kita posting link aktif follow web kita di situsnya. seperti memberi komentar atau respon balasan thread di forum komunitas dengan melampirkan link di signature kita. cara ini lumayan ampuh untuk menarik pengunjung dan banyak bot search engine.

-----
Tambahan :
Yang perlu diingat dan diperhatikan adalah proses mulai dari crawl sampai index bisa memakan waktu sebentar maupun lama suka-suka sistem google. Bisa dalam hitungan jam, hari, minggu, bulan, tahun, dan seterusnya. Jadi harap sabar dan jangan mudah putus asa. Jangan bergantung pada meisn pencari saja, tetapi gunakan metode promosi lain.
Kalau buat blog jangan cuma copy paste dari website lain karena google bisa mendeteksi kejahatan hak cipta semacam itu. Buatlah tulisan blog sendiri biarpun jelek karena lama-lama kita bisa jadi ahli menulis.
Artikel atau tulisan blog yang bagus tidak selamanya bisa memancing orang / pengunjung untuk memberi komentar. Komentar bukanlah sesuatu yang patut dibanggakan. Konsentrasilah pada jumlah pengunjung ketimbang jumlah komentar blog.
Semoga membantu :D

source : http://organisasi.org/cara-agar-blog-bisa-terdeteksi-ditemukan-mesin-pencari-google#comment-13996
Baca Selengkapnya»»
Diposting oleh Dinar Pragustian 1 komentar
Label: ,

Membuat Salam Pembuka Unik Di Blog


mungkin anda pernah melihat sebuah blog yang menampilkan salam sapaan, trik kali ini ada hubungannya dengan triks yang Membuat pesan konfirmasi
penasaran mau tau cara membuatnya, langsung aja
petama login terlebih dahulu
2. masuk ke Tata Letak (Layout) >> Element halaman
3. tambah GADGEt >> HTML/JAVA  SCRIPT
4. copy code berikut dan pastekan kedalamnya

<script type='text/javascript'>
var name = prompt("Welcome!! Nama anda siapa", "Nama Anda ");
alert("salam kenal ya "+name)
alert("selamat browsing di blog saya, semoga berkenan!")
</script>
 
5. text yang berwarna Biru bisa anda ganti dengan text yang anda inginkan
6.simpan 
7.lihatlah hasilnya, selesai .....

Saya Butuh Komentar Anda Sobat Untk Kemajuan Blog Ini!!!!!!!

Good Luck!!!!!!!!!!
Baca Selengkapnya»»
Diposting oleh Dinar Pragustian 2 komentar
Label: ,

Sabtu, 05 November 2011

Cara membuat Gambar Melayang Pada Blog

Apa kabar sobat, udah lama tak berjumpa,.,.,.,hehehe..
Kali ini DC akan membahas tentang Image Float...Jika sobat ingin melihat demo nya tinggal klik ini.
Gimana tertarik........


Langkah-langkah :
Login ke Blogger
Klik Rancangan → Elemen Laman → Tambah Gadget → HTML/JavaScript
Kemudian Copy kode Script berikut dan Paste ke dalamnya :

<style type="text/css"> 
#topbar{
position:absolute;
border: 0px solid black;
padding: 2px;
background-color: white;
width: 300px;
visibility: hidden;
z-index: 100;
}
</style> 
<script type="text/javascript"> 
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 900 //set x offset of bar in pixels
var startY = 280 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}


if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div id="topbar"> 
<a href="" onclick="closebar(); return false"><img src="http://2.bp.blogspot.com/-a9JlfuGExAg/Tn8oZGqwPvI/AAAAAAAAFrg/h9-dSAZFXnU/s400/close.gif" border="0" /></a> 
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/pages/dinarcoolblogspotcom/230246126997222" data-width="292" data-show-faces="true" data-stream="false" data-header="false"></div>
</div>
Jika Sobat ingin mengganti gambarnya tinggal ganti tulisan yang berwarna merah dengan gambar yang sobat suka......<img src="link gambar sobat">
Baca Selengkapnya»»
Diposting oleh Dinar Pragustian 0 komentar
Label:

Selasa, 04 Oktober 2011

Cara Membuat Efek Marquee atau Teks Berjalan

Marquee adalah suatu printah dalam program HTML yang berfungsi untuk membuat teks bisa bergerak atau berjalan.


1.  Teks Berjalan Kekiri Kekanan Tiga Kali :
Berjalan Kekanan Tiga Kali

2.  Teks Berhenti Jika Mouse Menyentuh Daerah Marquee :


Teks Berhenti Jika Mouse Menyentuh Daerah Marquee




3.  Teks Berjalan Efek Bounce :
Teks Berjalan Efek Bounce


4.  Teks Berjalan Ke-kiri sekali saja :
Berjalan Kekiri Sekali


5.  Teks Bolak-Balik Secara Horizontal :
Teks Bolak-Balik Horizontal


6.  Teks Bolak-Balik Secara Vertikal :
Teks Bolak-Balik Vertikal


7.  Teks Bergerak Ke Kiri-Ke Kanan :
Bergerak ke kiri dan ke kanan


8.  Teks Marquee Yang Diberi Background :
Marquee dengan efek warna



9.  Teks Marquee Countinue :
Teks Kekanan Continue



Cara Pasang Kode Effek Marquee >>>
Anda sudah tau kode - kodenya sekarang tugas anda memasukkan kode - kode HTML tersebut ke dalam sidebar blog anda, Cara pasang code teks berjalan pada Sidebar blog adalah sebagai berikut :
  1. Login ke Blogger dengan ID anda.
  2. Klik Layout / Tata Letak.
  3. Klik Add Gadget / Tambah Gadget di lokasi yang Anda inginkan.
  4. Pilih HTML/Javascript.
  5. Copy paste code HTML diatas ke dalam Content yang telah tersedia.
  6. Klik Tombol Simpan.
Bagaimana Kalau di pasang di posting??? Jika cara pasang code HTML ke dalam postingan, anda cukup copy paste kode tersebut ke dalam content postingan Anda, Keterangannya :
  1. Width : Untuk mengatur panjang ruangan teks dalam satuan pixel.
  2. Height : Untuk mengatur lebar ruangan teks dalam satuan pixel.
  3. Scrolldelay : Untuk mengatur waktu tunda gerakan dalam satuan mili detik.
  4. Scrollamount : Untuk mengatur kecepatan gerakan dalam satuan pixel.
  5. Dari kode di atas, yang kita tambahkan adalah kode yang diberi (_) bisa anda ganti dengan teks anda sendiri.
Nah, sangat mudah kan? Jika ada masalah, silahkan Bertanya via e-mail. Jika ini berhasil silahkan dinikmati ( Jika ingin request artikel terbaru tentang Software, Tips N Trik silahkan Berkomentar ).
Baca Selengkapnya»»
Diposting oleh Dinar Pragustian 1 komentar
Label:

Cara Membuat Tulisan Bergerak(Marquee)


Bagaimana agar bisa membuat tulisan berjalan?

Seperti Ini ??


Bergerak kekanan !

Bergerak kekiri !

Ke Kanan dan Kekiri ??

Bergerak kekanan Perlahan !

Ke Kanan dan Kekiri Dan Bisa Di stop??


Bergerak Ke Atas


Bergerak Ke bawah
Oke ini kode nya :

Untuk Yang bergerak ke-kanan


Untuk Yang bergerak ke-kiri


Untuk Yang Ke Kanan dan Kekiri



Untuk Yang Bergerak kekanan Perlahan : Note : nilai scrolldelay menentukan cepat atau lambatnya tulisan bergerak.Direction = menentukan arah bergerak



Untuk Yang Ke Kanan dan Kekiri Dan Bisa Di stop



Untuk Yang Bergerak Ke Atas



Untuk Yang Bergerak Ke Atas dan Ke bawah


Note : Anda bisa merubah warna tulisan dengan mengubah angka pada :
rgb(255,0,0)=menjadi merah
rgb(0,255,0)=menjadi Hijau
rgb(0,0,255)=menjadi Biru
Atau dikombinasi....Coba-coba aja ya....

Update:
Karena ada pertanyaan soal bagaiamana cara agar gambar bisa bergerak kekanan atau kekiri, maka saya perlu tambahkan sedikit disini ...
caranya pertama anda bikin dulu image yang anda inginklan, lalu anda upload image tersebut ke photobucket.com
Kemudian nanti dari photobucket anda akan mendapatkan URL dari image yang anda upload tsb.
Kemudian masukkan ke dalam script marque(Berjalan) seperti yg ada diatas.
Berikut contoh script untuk image Photo DC yg BergeraK Kekanan;
<marquee direction="right"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSruQDXzOuBUYFZ-pkBzXw8gC-D93IVbobtuHqZ-axruheLFJkPNNTlUzeJtCNENZzlcM487WEZiuKnRhKk4H8Jgl45b8bFJ2tnB8S1Wc3JjmvZLFPuf_2AjzcErxuS9-gq3BEZYGe_1ds/" /></marquee>

Ini contoh image yg bisa bergerak kekanan :


Ganti Tulisan yang berwarna BIRU dengan URL image milik anda.

Semoga membantu.....
Baca Selengkapnya»»
Diposting oleh Dinar Pragustian 2 komentar
Label:

Sabtu, 24 September 2011

Cara Membuat Tulisan Berputar-putar dan mengikuti cursor








Kali ini saya akan mencoba menjelaskan Cara Membuat Tulisan Mengikuti Cursor.
Jika ada sobat blogger yang tertarik untuk memasang
silahkan ikuti langkah berikut :
Login ke Blogger
Klik Rancangan → Elemen Laman → Tambah Gadget → HTML/JavaScript
Kemudian Copy kode Script berikut dan Paste ke dalamnya :



<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='dinarcool.blogspot.com'.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> 


Keterangan : tulisan yang berwarna biru bisa sobat ganti sesuai keinginan.
jika sudah selesai SIMPAN dan lihat hasilnya


Selamat mencoba
Baca Selengkapnya»»
Diposting oleh Dinar Pragustian 5 komentar
Label:
Langganan: Postingan (Atom)