TIK ITU ASIK: Tutorial Blog

Cara Mengganti Icon Pada Adress Bar

Ada salah satu sobat yang bertanya melalui komentar "kang fatur gimana cara mengganti icon pada adress bar kaya yang punya kang fatur". OK untuk sobat raa_cassie mungkin ini jawaban dari saya, mudah-mudahan bisa membantu

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :

Bagi sobat yang tidak puas dengan icon/gambar tersebut, sobat bisa menggantinya dengan gambar sesuai dengan keinginan kita. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu .....

masuk ke "Layout --> Edit HTML" trus tempatkan script berikut sebelum kode </head>

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYXV-70J6SPqy5CyYmsgrL05NVDLZbt3cXoveCNC7zTLDGylLPvZPfWPT1AZRwNFZyVaV3YwiyMnHI2covsCysRTWebL7N0KJSzsaQzik93cle27677irdrVpvSYzRDUzY9fmtWmq0Zwg/s1600/Title+Bar.gif' rel='shortcut icon'/>

Ganti huruf yang dicetak tebal dan merah dengan lokasi gambar dimana sobat menyimpannya. Sobat bisa menyimpan gambarnya di 000webhost atau bisa juga di photobucket dan juga di imageshack atau kalo sobat tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://img87.imageshack.us/img87/5862/image1an1.gif

http://img110.imageshack.us/img110/6218/image2ie0.gif

http://img98.imageshack.us/img98/9617/image3cr0.gif

http://img134.imageshack.us/img134/633/image4hx4.gif

http://img139.imageshack.us/img139/83/image5oa7.gif

http://img509.imageshack.us/img509/6449/image6fu0.gif

http://img527.imageshack.us/img527/6543/image7go9.gif

http://img507.imageshack.us/img507/5774/image8wn8.gif

http://img150.imageshack.us/img150/5784/image9qo1.gif

http://img404.imageshack.us/img404/1214/image10vr1.gif

http://img412.imageshack.us/img412/3808/image11pc0.gif

http://img100.imageshack.us/img100/4658/image12du2.gif

http://img132.imageshack.us/img132/4733/image13lj1.gif

http://img145.imageshack.us/img145/7793/image14zg9.gif

http://img412.imageshack.us/img412/4403/image15jc7.gif

http://img264.imageshack.us/img264/7575/image16kn8.gif

Selamat mencoba....

Kang Fathur

Membuat Agar Blog Transparan

Blog Transparant Blogger Trik Blogger Tutorial Blog

Halo para sobat blogger yang bae-bae pada hari yang cerah ini akhirnyasaya meluangkan waktu untuk berbagi ilmu kepada sobat semua. Kali ini saya hanya untuk mengambulkan permintaan dari para sobat yang meminta "Supaya Blog Transparan"

O.K sesuai janji saya untuk memposting cara membuat blog transparan, ini tipsnya. Bagi yang memerlukan silahkan di coba. Walaupun ini adalah tip's yang tergolong mudah tapi siapa tahu sobat memerlukannya....

O.K kita langsung aja ikuti langkah-langkah berikut ini :

1. Seperti biasa login ke blog sobat
2. Dashboard/dasbor
3. Layout/tataletak
4. Edit HTML, centang "EXPAND TEMPLATE WIDGET" dan download lengkap template buat berjaga-jaga jika terjadi kesalahan.

Terus cari setiap kata :

background

contoh :

background: #000000;

Lalu ganti kode warnanya (teks yang tercetak merah) menjadi transparent, atau kurang lebi seperti ini

background: transparent;

atau sobat bisa juga melakukan dengan cara kedua yaitu buang saja value warna merah yang ada sehingga menjadi seperti ini :

background: ;

Cari di setiap posisi dimana sobat ingin posisi tsb terlihat bening/Transparan.
Contoh bagian Header, body, side bar, post footer, lower dll.
Nah mudah bukan ? setelah itu klik Save/simpan perubahan, dan lihat hasilnya....
Semoga tip's ringan ini bermanfaat bagi para sobat semua !!

Selamat mencoba ......,

Kang Fathur

Efek Opening Aneh

Blog Triks Blogger Blogger Tutorial Tips Blogger Tutorial Blog

Hahahah... kayak ga ada nama yang lain aja buat efek pembuka yang satu ini ! btw karena sudah bingung buat kasih namanya, terpaksa saya kasih nama n'tu ajah.....
setelah kang fatur posting Membuat Efek Roaming Windows akhirnya kangfatur buat lagi nie yang judulnya pake aneh, Kenapa diblang aneh yaa karena membuat Jendela kita menjadi mondar mandir kaya yang lagi pusing hehe. Okay... , jika para sobat tertarik, silahkan ikuti langkah-langkah berikut :

1. Sign in ke account blogger sobat
2. Pergi ke Layout | Page Elements tab untuk blog Sobat
3. Klik "Tambah Gadget" link yang muncul di sidebar tata letak Sobat untuk menambahkan script
4. Sobat akan melihat jendela popup dengan semua jenis Gadgets yang dapat ditambahkan ke blog Sobat.
5. Klik pada "HTML / JavaScript" gadget

Kemudian Copast(Copy paste) kode dibawah ini :

<script>
//Edited by Andreas fafandreo at october'2008
window.scrollBy(0, 1)
window.resizeTo(0,0)
window.moveTo(0,0)
//setInterval("move()",30);
setTimeout("move()", 1);
var mxm=50
var mym=25
var mx=0
var my=0
var sv=50
var status=1
var szx=0
var szy=0
var c=255
var n=0
var sm=30
var cycle=2
var done=2
function move()
{
if (status == 1)
{
mxm=mxm/1.05
mym=mym/1.05
mx=mx+mxm
my=my-mym
mxm=mxm+(400-mx)/100
mym=mym-(300-my)/100
window.moveTo(mx,my)
rmxm=Math.round(mxm/10)
rmym=Math.round(mym/10)
if (rmxm == 0)
{
if (rmym == 0)
{
status=2
}
}
}
if (status == 2)
{
sv=sv/1.1
scrratio=1+1/3
mx=mx-sv*scrratio/2
my=my-sv/2
szx=szx+sv*scrratio
szy=szy+sv
window.moveTo(mx,my)
window.resizeTo(szx,szy)
if (sv < 0.1)
{
status=3
}
}
if (status == 3)
{
c=c-16
if (c<0)
{status=8}
}
if (status == 4)
{
c=c+16
if (c > 239)
{status=5}
}
if (status == 5)
{
c=c-16
if (c < 0)
{
status=6
cycle=cycle-1
if (cycle > 0)
{
if (done == 1)
{status=7}
else
{status=4}
}
}
}
if (status == 6)
{
cycle=2
status=4
done=1
}
if (status == 7)
{
c=c+4
if (c > 128)
{status=8}
}
if (status == 8)
{
window.moveTo(0,0)
sx=screen.availWidth
sy=screen.availHeight
window.resizeTo(sx,sy)
status=9
}
var timer=setTimeout("move()",0.3)
}
</script>

Setelah sobat paste kode diatas, silahkan sobat klik tombol Save/simpan o.k?
Jangan lupa, karena kita menginginkan agar gadget ini beraksi pada saat awal halaman dibuka, maka letakkan gadget ini pada posisi PALING ATAS !! baik pada side bar maupun tempat gadget lainnya o.K?
Dan lihat hasilnya !! hehehe... kalian dapet opening yang bikin dag-dig-dug pengunjung !!
Mudah bukan ?

Kalau sudah dipasang... silahkan anda bagikan ilmu ini pada teman-teman yang membutuhkan, Jangan pelit ya ?

Selamat mencoba !!

Kang Fathur

Menghilangkan Navbar Blogspot

Blog Triks Blogger Blogger Tutorial Tips Blogger Tutorial Blog

Sobat Monik mengajukan pertanyaan yang di tulis melalui shoutMix di Blog Kang Fatur yang ini. Beliau menanyakan bagaimana cara menghilangkan Navbar Blogger, dan kali ini saya akan mencoba membahasnya. Apa itu Navbar Blogger? navbar blogger adalah suatu frame yang berukuran kecil miliknya blogger yang terdapat di bagian atas blog. frame ini berfungsi untuk login ke blogger atau bisa juga sebagai jalan untuk melihat blog lain atau bisa juga untuk menandai blog yang sekiranya melanggar TOS blogger seperti blog yang mengandung unsur SARA ataupun pornografi untuk dilaporkan ke pihak blogger.

Apakah kita bisa menghilangkan Navbar Blogger? jika pertanyaannya seperti itu maka tentu jawabanya adalah bisa, akan tetapi sebelum menghilangkan navbar tersebut ada baiknya sobat berfikir-fikir dahulu dan silahkan baca TOS blogger secara seksama, karena resiko yang akan di pikul sangatlah berat yaitu akan di tutupnya account blogger sobat atau dengan kata lain sobat akan kehilangan blog kesayanangannya. Lumayan mengerikan bukan? memang beberapa waktu yang lalu tersiar kabar bahwa pernah ada yang menanyakan ke pihak blogger apakah boleh menghilangkan navbar blogger atau tidak? dan katanya sekarang pihak blogger membolehkan untuk menghapus navbar, tapi entahlah apakah berita tersebut benar atau tidak yang jelas sobat harus selalu membaca TOS secara seksama.

Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.

Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Atau bisa juga menaruh kode berikut persis di bawah kode <body> :
<style type='text/css'>
#navbar-iframe {display:none;}
</style>

Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :

Untuk template klasik

1. Sign in di blogger
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman
5. Copy kode berikut lalu paste di atas kode </style>

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Klik tombol Simpan Perubahan Template
Selesai.

Untuk template baru

1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data
5. Copy kode berikut lalu paste di atas kode ]]></b:skin>

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

6. Klik tombol Simpan Template
7. Selesai.

Selamat menikmati blog tanpa Navbar, semoga bermanfaat.

Kang Fathur

Membuat Widget Tersembunyi

Blog Triks Blogger Blogger Tutorial Tips Blogger Tutorial Blog Widget

Para sobat bloger, Kang Fatur nongol lagi nie setelah satu bulan lebih ga posting-posting yaa malum jadi orang susah akhirnya waktu buat postingpun ga ada karena sibuk masalah pribadi. Walaupun sibuk yaa alhamdullilah dihari minggu ini Kang Fatur bisa posting lagi untuk berbagi dengan sobat-sobat blogger.

Kali ini Kang Fatur mao berbagi dengan sobat yaitu membuat Buku Tamu Tersembunyi hehe aneh yaa?? sebetulnya widget ini sudah banyak para blogger lain yang bikin tapi demi para pengunjung blog Kang Fatur, yaa Kang Fatur sediakan disini dan mudah-mudahan bermanfaat di hati para sobat.

Gak usah panjang lebar lagi tiba saatnya kita ke langkah-langkah pembuatan :

1. Seperti biasa Masuk ke account Blogger sobat, pilih "Layout" kemudian "Page Elements",
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. Copy-paste kode di bawah ini:

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi26aVKnr3DxIhB83nei4nM2-QQbSBqnEHvpEDP6oWxxWgcjHBJuQvkmRpcyRdKkM36SJ092xBuwk15fsjylBlW6-pn591gxYkdMms6Q9DLf5a9-xCVaHV01FLZfF4-mFs2ZIe1ZAkJ4lLF/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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">



<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://ade-tea.blogspot.com/2009/11/membuat-buku-tamu-tersembunyi.html">
sini (Blog KangFatur)
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

4. Pada kode di atas, cari kode dan ganti kode tersebut dengan kode buku tamu yang sobat dapatkan dari situsnya,
5. Sobat juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah sobat deeh hehe.
6. Border dan Backgrounnya juga bisa sobat ubah ubah O.K
7. Selamat mencoba!

Kang Fathur