Berbagi Itu Indah (Tutorial Blog, Softwares, TIK, etc): Tutorial Blog

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Timbang Berat Blog

Berapa lama masa loading blog anda? Lama masa loading blog merupakan peranan yang amat penting. Lebih cepat, lebih bagus. Jika terlalu lama masa yang diambil untuk loading blog, kemungkinan pengunjung blog anda tanpa segan mengklik close tab sebelum selesai loading page.

Timbang berat blog anda di sini http://tools.pingdom.com/. Masukkan url blog, kemudian klik "test now"

Tips mengurangkan masa loading blog:
1 Kurangkan penggunaan image (jpeg) karena size jpeg biasanya adalah besar.

2 Kurangkan bilangan entry post pada home page blog anda. Default setting adalah 7 post, kurangkan kepada 2 atau 1 saja.

3) Kurangkan widget yang menggunakan javascript.

4) Widget yang mempunyai size yang besar seperti blog archieve, blog list atau follower, letak di bagian bawah sekali, supaya element yang lain dapat dibaca terlebih dahulu.

5) Letak "Read More" untuk meringkas entry post, supaya loading setiap entry dapat dibaca dengan lebih cepat.

Sharing is Caring ^_^

Menghilangkan "Word Verification" Pada Comment Di Blog Anda

Apakah anda tahu apa itu "Word Verification For Comment" ? Mari lihat gambar di bawah ini:

Benda ini lah yang biasanya membuat orang malas untuk comment, seperti mau buka peti harta karun saja kan? hahaha. Jadi dihilangkan supaya anda disable fungsi "word verification" ini bagi memudahkan orang untuk comment. Gak enakkan ketika mau comment pun disuruh isi perkataan seperti ini? ZzZ.. *_* oke ikuti tutorial di bawah ini untuk cara-cara menghapusnya :

1) Sign in akun blogger

2) Dashboard >> Settings >> Comments

3) Pada tab Comments, scroll ke bawah dan anda akan jumpai kata-kata " Show word verification for comments? " Oke pada soalan itu, tick pada "No"

4) Klik Save Setting.

Done! tidak ada lagi "persoalan untuk buka peti harta karun". ^_^

Sharing is Caring ^_^

Link automatically dibuka pada new tab

Untuk trick kali ini, sembarang link yang di klik dalam blog anda automatically akan dibuka pada new tab, tanpa perlu menambah code target blank pada setiap 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

<head>

4) Kemudian copy dan paste code SETELAH / DI BAWAH code <head> yang anda cari tadi:

<base target='_blank'/>

Contoh:

<head>
<base target='_blank'/>

5) Klik save template.

Selamat mencoba! :)

Sharing is Caring ^_^

Menghilangkan "Subscribe to : Posts (Atom)" pada blog

"Subscribe to : Post (Atom)" terletak pada bagian bawah post. Kalau anda merasa perkataan itu menyemak, mari ikuti tutorial di bawah ini untuk cara-cara menghilangkannya:

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

4) Setelah jumpa code  ? oke sekarang tukar / gantikan code tersebut dengan code di bawah ini:

<b:include name='feedLinks'/>

5) Klik preview, kalau berhasil dan tidak ada error, klik save.

Selamat mencoba! :)

Sharing is Caring ^_^

Title post dan sidebar di tengah

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-code di bawah ini:

Untuk SIDEBAR

- Cari code h2 {

- Copy dan paste code SETELAH / DI BAWAH code h2 {

text-align:center;

Contoh:

h2 {
text-align:center;

Untuk TITLE POST

- Cari code

h3.post-title {

atau kalau tidak jumpa code diatas, cari code:

h3.post-title, .comments h4 {

atau kalau tidak jumpa juga code diatas, cari code:

h4 {

- Copy dan paste code SETELAH / DI BAWAH code h3.post-title { atau h3.post-title, .comments h4 { atau h4 {

text-align:center;

Contoh:

h3.post-title {
text-align:center;

4) Setelah semua selesai, klik preview dan jika tidak ada error, klik save template dan lihat hasilnya.

Selamat mencoba! :)

Sharing is Caring ^_^

Cara menghilangkan Attribution (Powered by Blogger)

Apakah anda tahu apa itu "Attribution"? Coba scroll ke bagian paling bawah sekali dalam blog anda. Anda akan jumpai perkataan yang tertera Powered by Blogger. Perkataan itu boleh dihilangkan. 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 di bawah:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

4) Bila sudah jumpa, tukar perkataan true dengan false

5) Kemudian klik preview, kalau tidak ada error, klik save template.

6) Setelah itu buka blog anda dan scroll ke bagian paling bawah sekali, masih ada lagi perkataan Powered by Blogger kan? Okay, klik pada button edit attribution tu (gambar spanar), then klik remove..

7) Selesai! Powered by Blogger telah hilang! :)

Selamat mencoba! :)

Sharing is Caring ^_^

Button Follow dan Dashboard

Preview:

Button ini akan muncul pada sisi kanan blog anda. Caranya, 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

<div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://assets.tumblr.com/images/iframe_follow_alpha.png?6" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?6" /></a></div>

Note:
Pada ruang ID BLOG ANDA, masukkan ID blog anda. Bagaimana cara untuk mendapatkan blog ID itu ya? Perhatikan gambar di bawah ini:

4) Setelah memasukkan blog ID pada code tadi, klik Save dan lihat hasilnya.

Selamat mencoba! :)

Sharing is Caring ^_^

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 ^_^

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 ^_^

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 ^_^

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 ^_^

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 ^_^

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 ^_^

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 ^_^

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 ^_^

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 ^_^

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 ^_^

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 ^_^

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 ^_^

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 ^_^