Floating Button

Preview:


Floating button digunakan untuk memudahkan reader connect dengan sosial network anda. Selain menghemat ruang, juga akan tampak cantik. Floating button ini akan muncul pada sebelah sisi kanan atau kiri blog anda. Selain social network, anda juga boleh letak button lain untuk floating button ini (ex: email, link blog, youtube dan etc), tergantung kepada apa yang anda letakkan.

Caranya:

1) Sign in akun blogger

2) Dashboard > Design > Page Element > Add A Gadget > Html / Javascript

3) Copy paste code di bawah pada ruang Html / Javascript tadi
<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:140px; left:-12px;'>

<a class='linkopacity' href='URL FACEBOOK ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/232.png" /></a><br />

<a class='linkopacity' href='URL TWITTER ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/432.png" /></a><br />

<a class='linkopacity' href='URL BLOG ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/blogger_64x64.png" /></a><br />


</div>

Note:
- Pada tulisan berwarna biru, masukkan url facebook, twitter dan blog anda.
- Pada tulisan berwarna merah, masukkan url button yang anda inginkan. Search button di google atau image hosting mana saja. Kalau ingin menggunakan yang tersedia juga tidak masalah, tidak perlu search.
- Yang warna purple, boleh ditukar mengikuti kesesuaian dengan blog. Left boleh ditukar dengan right.

4) Save dan lihat hasilnya.

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Menghilangkan Navigation Bar - Cara 2

Jika cara pertama tidak berhasil, coba pula cara yang ini oke, mari ikuti langkah-langkahnya:

1) Sign in akun blogger

2) Dashboard >> Design >> Edit HTML

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari code ini

/* Variable definitions
4) Kemudian copy dan paste code ini SEBELUM / DI ATAS code /* Variable definitions tadi
#navbar-iframe { display: none !important; }

5) Klik preview, jika sudah hilang nav bar, klik save template.

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Menghilangkan Navigation Bar

Kebiasaanya akan ada satu nav bar warna biru pada bagian paling atas blog. Mungkin anda rasa nav bar tersebut menganggu ruang dalam blog atau nampak tidak cantik. Cara meremove nav bar ini mudah saja. Ikuti tutorial di bawah ini:
* kalau tidak jadi juga, coba tutorial yang ni juga ya.

1) Sign in akun blogger

2) Dashboard > Design > Template Designer

3) Di bagian Template Designer, klik Advanced > Add CSS

4) Copy code di bawah dan paste pada ruang Add CSS tadi
#navbar-iframe {
display: none !important;
}

Contoh:

5) Kemudian klik "apply to blog" dan "view blog" untuk lihat hasilnya.

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Menghilangkan tanggal pada post

Caranya mudah saja:

1) Sign in akun blogger

2) Dashboard > Design > Page Element > seterusnya ikuti tutorial bergambar di bawah ini


 


 

3)Kemudian klik save.

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Meletakkan Home button dalam blog

Home button berfungsi untuk memudahkan pengunjung blog kembali ke halaman utama blog anda setelah banyak page yang dibuka. Untuk trick ini, home button akan muncul pada bagian blog, yang terletak di top atau bottom, left or right. Cara memasang home button ini mudah saja, mari ikuti tutorial di bawah ini:

1) Sign in akun blogger

2) Dashboard > Design > Page Element > Add a Gadget > Html / Javascript

3) Copy paste code di bawah pada ruang Html / Javascript tadi

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; bottom:10px; left:-12px;'>

<a class='linkopacity' href='Url blog anda' style='margin-left: 1em; margin-right: 1em;' title='HOME'><img border="0"width="50" height="50" src="Url Home icon" /></a><br />

Note :
Url blog anda  - Url / link blog anda ( contoh: http://muhammadhabibiebinyursal.blogspot.com)
bottom dan left  - untuk mengubah letak button, tukar dengan top / bottom dan left / right
 Url Home icon - letakkan url gambar icon home yang anda inginkan. Bisa dicari di google atau image hosting mana saja atau hanya dengan pilih home button yang disediakan di bawah ini:

http://img189.imageshack.us/img189/2902/98425686.png


http://img190.imageshack.us/img190/3407/13314253.png


 
http://img641.imageshack.us/img641/7218/24934856.png


http://img703.imageshack.us/img703/5702/45961315.png

4) Save dan lihat hasilnya.

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Efek miring apabila cursor menyentuh image

Caranya:

1) Sign in akun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari code

]]></b:skin>
4) Kemudian copy paste code di bawah sebelum code ]]></b:skin> yang anda cari tadi:
.post img{
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.post img:hover{
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);

contoh:
.post img{
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.post img:hover{
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);

 ]]></b:skin>

7) Klik preview, jika tidak ada error, klik save dan lihat hasilnya.

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Efek miring apabila cursor menyentuh link

Caranya:

1) Sign in akun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari code

a:hover {

4) Kemudian copy paste code di bawah setelah code a:hover { yang anda cari tadi:
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);

contoh:
 a:hover {
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);


5) Sekali lagi, dengan menggunakan ctrl + F, cari code di bawah pula:
a:link {


6) Kemudian copy paste code di bawah setelah code a:link { tadi:
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;

Contoh:
 a:link {
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;

7) Klik preview, jika tidak ada error, klik save dan lihat hasilnya.

Selamat mencoba! :)

 * efek ini hanya berkesan pada browser mozilla firefox
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Efek animated image apabila cursor menyentuh link

Caranya:

1) Sign in akun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari code  

a:hover

4) Kemudian copy paste code di bawah setelah kod  a:hover  yang anda cari tadi:
 color:#FF6699; background:url(URL IMAGE) ;background-repeat: repeat;
text-decoration:underline;

 contoh:
 a:hover
color:#FF6699; background:url(URL IMAGE) ;background-repeat: repeat;
text-decoration:underline;

Note:
pada URL IMAGE masukkan url image yang anda inginkan. Anda boleh search image animated di sini . Cara mendapatkan url image di Glitter Graphic bisa pula refer di sini . Atau anda hanya pilih dan copy url image yang disediakan di bawah:

http://dl5.glitter-graphics.net/pub/590/590935ankbyj1xx4.gif


http://dl7.glitter-graphics.net/pub/474/474167l68h9nknqq.gif


http://dl4.glitter-graphics.net/pub/1102/1102514nugaxacg8m.gif


http://dl9.glitter-graphics.net/pub/690/690739pesbqr6dqw.gif


http://dl2.glitter-graphics.net/pub/1455/1455682apvfgvhztr.gif



http://i603.photobucket.com/albums/tt117/misdollymie/rainbowhover.gif

5) Klik preview, jika tidak ada error, klik save dan lihat hasilnya.

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Efek round hover pada image apabila dilalukan cursor


Untuk membuat kesan khas pada gambar, silahkan ikuti tutorial di bawah:

1) Login akun blogger anda

2) Dashboard > Design > Edit HTML > Backup template terlebih dahulu (untuk lagkah berjaga-jaga)

3) Tekan ctrl + F serentak, cari code
/* Headings
atau
/* Header

Copy code di bawah dan paste SEBELUM code /* Headings atau /* Header
a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .9.9;
border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

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

/*Header


4) Save dan lihat hasilnya.

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Favicon

Favicon adalah icon kecil yang muncul di sebelah url blog anda pada menu bar. Menarik bukan? cara menukar favicon ini mudah saja, mari ikuti tutorial di bawah ini:

1) Sign in akun blogger anda

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"


3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari code
</head>

4) Kemudian copy dan paste code di bawah sebelum code </head> yang anda cari di langkah 3 tadi
<link href='URL gambar' rel='shortcut icon' type='image/x icon'/>

<link href='URL gambar' rel='icon' type='image/x-icon'/>

Note:
Pada ,URL gambar, masukkan url gambar favicon yang anda inginkan.

Contohnya, code anda akan menjadi seperti ini:
<link href='"http://dl10.glitter-graphics.net/pub/459/459830qyqjkq81to.gif' rel='shortcut icon' type='image/x icon'/>

<link href='"http://dl10.glitter-graphics.net/pub/459/459830qyqjkq81to.gif' rel='icon' type='image/x-icon'/>

</head>


5) Klik preview, jika tidak ada error, klik save.

P/S : Terdapat banyak favicon yang bisa anda pilih. Dibawah ini disediakan beberapa favicon. Hanya copy url dan ganti dengan code didalam tadi.

http://dl10.glitter-graphics.net/pub/459/459830qyqjkq81to.gif


http://dl6.glitter-graphics.net/pub/440/440576q8wrax7se2.gif

http://dl8.glitter-graphics.net/pub/1008/1008838wybxuht5da.gif

http://dl8.glitter-graphics.net/pub/434/434518xlbzh5vtds.gif

http://dl.glitter-graphics.net/pub/1008/1008951xbh88shb03.gif


http://dl3.glitter-graphics.net/pub/1040/1040193nacd9v14uy.gif

Dan masih banyak lagi, anda bisa cari yang lainnya disini glitter-graphics.com

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Shoutbox

Cbox atau shoutbox sangat penting bagi sebuah blog. Ia berfungsi sebagai kotak interaksi di antara pengunjung blog dengan pemilik blog.
Ikuti tutorial di bawah untuk cara mendapatkan Cbox.

1) Pergi ke Cbox
Anda di mintai sign up terlebih dahulu. Ikuti tutorial bergambar di bawah ini:

Lengkapi data yang diperlukan, jangan lupa tick pada kotak agree, kemudian klik create my cbox!



Cbox akan menghantar link activation ke email anda. Buka email dan klik link activation tersebut :

 

Seteleh login, klik pada tab look & feel. Di situ terdapat setting untuk layout options, style presets, colour & fonts. Anda boleh menukar layout, size, style, warna cbox dan banyak lagi mengikuti keinginan anda ( jangan lupa klik save untuk setiap setting yang anda ubah:


Setelah menyesuaikan dengan rupa cbox yang anda inginkan, klik publish.

 
  Setelah klik publish, code untuk cbox anda akan terpapar, copy code tersebut :
Setelah copy code cbox, install kod tersebut pada blog anda. Kalau tidak tahu cara menginstal code html pada blog tersebut, lihat tutorial ini.

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Text Berkelip

Cara membuat text berkelip:
1) Copy paste code di bawah pada ruang HTML/Javascript atau ingin post dalam entri pun juga boleh.

<div style="color: black; text-align: center;">
<blink> Text berkelip anda </blink></div>

Note:
black - gantikan dengan warna text yang anda inginkan
center - letak text yang anda inginkan, seperti center, left atau right
Text berkelip anda -  gantikan dengan kata-kata yang anda inginkan


2) Save / publish dan lihat hasilnya.

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Scroll Box untuk Widget

Jika size widget yang anda pasang menggunakan terlalu banyak ruang dalam blog, ruang tersebut boleh dikecilkan dengan aplikasi scroll box. Paparan widget adalah penuh tapi diminimizekan sizenya dalam blog dengan penggunaan kotak scroll yang lebih kecil.


Caranya:
1) Sign in akun blogger

2) Dashboard > Design > Add a Gadget > Html / Javascript

3) Copy paste code di bawah pada ruang Html / Javascript tadi
<div style="width:426px;height:100px;overflow:auto; ">

Letakkan kod widget anda di sini

</div>

426 : width - ubah nilai ini kepada size lebar scrool box yang anda inginkan
100 - ubah nilai ini kepada size tinggi scrool box yang anda inginkan

4) Save dan lihat hasilnya.

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di 1 komentar:
Label:

Kata-kata bergerak di Menu Bar

1) Sign in akun blogger

2) Dashboard > Design > Add a Gadget > Html / Javascript

3) Copy dan paste code berikut dalam ruangan HTML/Javascript tadi
<script language=javascript>
msg = "kata-kata anda disini";

msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</script>

Note: Tukarkan 'kata-kata anda disini' dengan kata-kata yang anda inginkan.

4) Save dan lihat hasilnya.

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Cara Pasang Code HTML / Javascript dalam Blog

Kebiasaannya widget-widget seperti shoutbox, online visitor counter, recent post with thumbnail dan banyak lagi element widget yang penting untuk blog, memerlukan kita untuk memasang code script yang berazazkan Html atau javascript. Penambahan yang ingin dilakukan biasanya akan melalui perkara yang sama yaitu code yang diperoleh menggunakan copy dan di'paste'kan di ruangan html/javascript.

Tutorial kali ini akan menunjukkan pada anda bagaimana cara untuk meletakkan code HTML / Javascript pada blog.

1)  Login akun blogger anda

2)
 

3) Bawah tab page element, klik add a gadget




















4)
 


5)
 
6) Save dan lihat hasilnya. Letakcode itu juga boleh di ubah dengan hanya drag di bagian mana saja pada page element itu, seperti pada bagian header, footer, sidebar kanan atau sidebar kiri. Setelah drag, jangan lupa klik save.

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Scroll Box untuk Blog Archive

Penggunaan aplikasi scroll box pada blog archive adalah satu langkah yang bijak untuk menghemat ruang sidebar dalam blog anda, biasanya melihat blog archive akan menjadi terlalu panjang dengan link post-post lama dalam blog. Untuk menggunakan aplikasi scroll box ini, silahkan ikuti tutorial di bawah ini:

1) Login akun blogger anda

2) Dashboard > Design > Edit HTML

3) Tick pada kotak Expand Widget Templates

4) Sebelum itu, silahkan backup templates anda terlebih dahulu sebagai langkah berjaga-jaga.

5) Dengan menggunakan fungsi find pada keyboard (tekan ctrl + F serentak), cari code
<div id='ArchiveList'>

6) Anda akan jumpa code ini <div class='widget-content'> sebelum code <div id='ArchiveList'> tadi.

7) Gantikan kod <div class='widget-content'> yang anda jumpa di langkah 6 dengan kod di bawah ini:
<div class='widget-content' style='overflow:auto; height:200px'>

Contoh
Sebelum :
<div class='widget-content'>
<div id='ArchiveList'>


Selepas digantikan code scrollbox :
<div class='widget-content' style='overflow:auto; height:200px'>
<div id='ArchiveList'>

8) Save dan lihat hasilnya.

*Note - boleh tukar 200px mengikuti tinggi yang anda inginkan.

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Link Berpelangi / Rainbow Link

Apabila cursor mouse menyentuh link dalam blog anda, link tersebut akan berubah kepada effect warna-warni. Untuk mengetahui cara-caranya, silahkan ikuti tutorial di bawah ini:

1) Login akun blogger anda

2) Dashboard > Design > Add a Gadget > HTML / Javascript

3) Copy code di bawah dan paste dalam ruangan HTML tadi
<script src="https://sites.google.com/site/tutorialcursorsparkle/rainbow.user.js" type="text/javascript">
/***********************************************
http://jombinabelog.blogspot.com/
***********************************************/
</script>

4) Save dan lihat hasilnya

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Cursor Berkilauan / Sparkle

Tutorial ini akan menunjukkan anda bagaimana cara untuk menjadikan cursor di dalam blog berkilauan/sparkle. Silahkan ikuti tutorial berikut:

1) Login > Dashboard > Add a Gadget > HTML / Javascript

2) Copy dan paste code berikut pada ruangan HTML (Pilih code mengikut warna sparkle pilihan kamu) 

Sparkle kuning:
<script src="https://sites.google.com/site/tutorialcursorsparkle/yellow.js" type="text/javascript"></script>

Sparkle pink:
<script src="https://sites.google.com/site/tutorialcursorsparkle/salmon.js" type="text/javascript"></script>

Sparkle putih:
<script src="https://sites.google.com/site/tutorialcursorsparkle/putih.js" type="text/javascript"></script>

Sparkle ungu:
<script src="https://sites.google.com/site/tutorialcursorsparkle/purple.js" type="text/javascript"></script>

Sparkle hijau:
<script src="https://sites.google.com/site/tutorialcursorsparkle/lawngreen.js" type="text/javascript"></script>

Sparkle hitam:
<script src="https://sites.google.com/site/tutorialcursorsparkle/black.js" type="text/javascript"></script>

Sparkle biru:
<script src="https://sites.google.com/site/tutorialcursorsparkle/biru.js" type="text/javascript"></script>

Sparkle hijau kebiruan:
<script src="https://sites.google.com/site/tutorialcursorsparkle/aqua.js" type="text/javascript"></script>

3) Save dan lihat hasilnya.

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Salju dalam Blog

Ingin suasana blog yang bersalju? Silahkan ikuti tutorial di bawah ini:

1) Login akun blogger > Dashboard > Design > Add a Gadget > HTML/Javascript

2) Copy paste code salju berikut ke dalam ruangan HTML/Javascript tadi

Salju putih:
 
<script type="text/javascript" src="https://sites.google.com/site/tutorialbelog/snowwhite.js"></script>


Salju pink:
 
<script type="text/javascript" src="https://sites.google.com/site/tutorialbelog/snowred.js"></script>


Salju purple:
 
<script type="text/javascript" src="https://sites.google.com/site/tutorialbelog/snowpurple.js"></script>


Salju biru:
 
<script type="text/javascript" src="https://sites.google.com/site/tutorialbelog/snowblue.js"></script>


Salju hitam:
 
<script type="text/javascript" src="https://sites.google.com/site/tutorialbelog/snowblack.js"></script>

3) Save dan lihat hasilnya. Selamat mencoba! :)

* Untuk menjadikan salju muncul penuh dalam blog, drag element html ke bagian header.

Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:

Cursor Unik untuk Blog

Udah bosan dengan bentuk cursor biasa? Sebenarnya terdapat berbagai cursor unik yang kamu bisa pilih. Contohnya seperti di bawah ini:

Caranya :
1) Pergi ke sini
2) Pilih cursor dan copy codenya
3) Pergi ke akun blogger kamu, klik Dashboard >> Design >> Add a Gadget >> HTML / Javascript
4) Paste code cursor tadi di ruangan HTML / Javascript
5) Klik Save dan lihat hasilnya

Selamat mencoba! :)
Sharing is Caring ^_^
Diposting oleh di Tidak ada komentar:
Label:
Langganan: Postingan (Atom)
Copyright© All Rights Reserved muhammadhabibiebinyursal.blogspot.com