Tips and Triks Blog

Saturday, June 29, 2013

Tutorial Scroll Box Untuk Blog Archive

Blog archive untuk sesebuah blog boleh menjadi list yang begitu panjang apabila banyak entri yang di post atau jika sudah lama terlibat dengan dunia blogging.

Tutorial kali ini kan menunjukkan bagaimana untuk jadikan blog archive anda boleh scroll untuk menampakkannya lebih ringkas menyenangkan mata memandang.:)

Tutorial untuk buat scroll bagi blog archive adalah seperti berikut.

1. Dari dashboard > design > edit html > Expand widget templates.
(backup template untuk langkah berjaga²)

2. Menggunakan fungsi find (ctrl + F), cari kod <div id='ArchiveList'>

3. Anda akan jumpa kod ini <div class='widget-content'> sebelum kod <div id='ArchiveList'>

4. Gantikan kod <div class='widget-content'> yang anda jumpa di langkah 3 dengan kod berikut.

<div class='widget-content' style='overflow:auto; height:200px'>

Note: Anda boleh tukar 200px dengan ketinggian yang anda mahukan.

Contoh:

Sebelum.

Selepas

4. Save dan lihat hasilnya.:)

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

Untuk scroll box widget lain yang menggunakan html code, boleh rujuk tutorial scroll box untuk widget

Friday, June 28, 2013

Tutorial Tab Menu / Navbar Menu Blogspot

Tutorial tab menu atau navbar menu di blogspot. Mempunyai tab menu atau navbar menu dalam sesebuah blog boleh digunakan oleh pemilik blog untuk meletakkan link yang penting atau link yang ingin diberi perhatian oleh pengunjung blog. Anda boleh lihat contoh tab menu yang ringkas di sini

Tutorial untuk membuat tab menu / navbar menu adalah seperti berikut.

1. Dari dashboard > design > edit html

(backup template untuk langkah berjaga²)

2. Menggunakan fungsi find (ctrl + F), cari kod ]]></b:skin>

2.1 Jika tidak jumpa, cari kod </head>

3. Copy dan paste kod di bawah SEBELUM kod yang anda jumpa di langkah 2 @ 2.1

ul#list-nav {

list-style:none;

margin:20px;

padding:0;

width:525px

}

ul#list-nav li {

display:inline

}

ul#list-nav li a {

text-decoration:none;

padding:5px 0;

width:100px;

background:#FF0099;

color:#eee;

float:left;

text-align:center;

border-left:1px solid #fff;

-moz-border-radius: 5px;

}

ul#list-nav li a:hover {

background:#FF6699;

color:#000

-moz-border-radius: 5px;

}

Contoh.:

4. Save template anda.

5. Kemudian, kembali ke dashboard, pergi ke design > page element > add a gadget > HTML/javascript

6. Copy dan paste kod di bawah di dalam HTML/javascript kemudian tukarkan 'Link' dengan link yang anda mahu letak di tab menu.

Contoh : <li><a href='http://ohbest.blogspot.com'>Home</a></li>

Selepas selesai masukkan link yang dikehendaki,

save.

<div>

<ul id='list-nav'>

<li><a href='Link'>Home</a></li>

<li><a href='Link'>About Us</a></li>

<li><a href='Link'>Services</a></li>

<li><a href='Link'>Products</a></li>

<li><a href='Link'>Contact</a></li>

</ul>

</div>

7. Drag ke bawah element header, save dan lihat hasilnya.:)

Tutorial Buat Tab Menu

Nota 1: Untuk langkah 3, anda boleh ubah beberapa kod seperti warna background, border, dan radius. Bergantung kepada bagaimana tab menu yang anda mahukan.

Nota 2: Jika anda hendak tambah tab menu, copy paste barisan di langkah 6.

Happy blogging.:)

Thursday, June 27, 2013

Membuat SEO Blog Title dan Description

Membuat Blog SEO Friendly. Dalam entri lepas, admin ada bagitahu tentang kepentingan mempunyai url blog yang bersesuaian dengan tujuan berblogging, Tips SEO : Url blog / Niche blog. Dan mungkin seperti yang diketahui, mungkin ada yang ramai 'sayang' untuk tukar alamat blog yang asal.

Oleh itu, untuk kali ni admin akan tekankan faktor seterusnya yang penting untuk menarik trafik ke blog kita daripada search engine. Title blog dan description adalah yang seterusnya. Ini juga boleh dikatakan sebagai identiti sesebuah blog. Seperti blog ini admin menggunakan identiti Tutorial untuk blog dan tips blogspot.

Kenapa title dan description penting.

Ok admin buat contoh yang mudah, kalau anda suka satu lagu, apa yang biasanya anda pikir untuk merujuk kepada lagu tersebut. Tajuk lagu, artis, dan album serta mungkin tahun lagu keluar. So ini boleh admin katakan sebagai title dan description. Begitu juga blog, title dan description penting sebagai pengenalan awal, selepas itu baru masuk bab lirik (entri) dan lain-lain.

(macam tak best je contoh admin bagi ni.:)

Bagaimana hendak letak/ubah title dan description

Untuk pengguna blogger, tidak sukar untuk menukar title blog dan description.

Dari dashbord > settings > basic

Dan anda akan lihat bahagian title dan description. Anda boleh letak title dan description mengikut apa yang anda kehendaki yang bersesuaian dengan blog anda.

Contoh title dan description blog ini adalah seperti di bawah.

Bagaimana untuk letakkan title dan description.?

1. Untuk title, tidak perlu begitu banyak perkataan, cukuplah antara 3 hingga 5 patah perkataan. Jika terlalu banyak, sebenarnya agak menggangu apabila diindex di search engine. Ini kerana apabila diindex oleh search engine, title blog ini akan ditunjuk bersama title entri dalam result di search engine. Dan title blog juga akan dipaparkan di browser.

2. Untuk description boleh buat ayat sehingga 500 patah perkataan. Kebiasaannya untuk description ini akan ditunjukkan di bawah title blog.

description blog boleh dibuat dalam ayat yang menerangkan apa kandungan blog anda dan juga kenapa blog itu diwujudkan.

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

Penggunaan title dan description blog yang betul secara tidak langsung membuka mata search engine kepada blog anda. Admin tahu mungkin masih ada yang was-was hendak tukar title blog, mungkin sebab title blog sekarang sudah 'cantik', lagi² yang berblogging sekadar suka².:)

Bagi yang blogging memang ada tujuan yang khusus, baik anda tukar title dan description anda. Besar juga kesannya kepada SEO blog anda.:)Dan juga untuk title dan description ini, masih ada beberapa 'penambahbaikan' yang boleh dilakukan kepada keduanya. Admin akan ceritakan dalam entri seterusnya.

Happy blogging.:)

Wednesday, June 26, 2013

Cara Fans Page Facebook Melayang di Blogspot

Cara mendapatkan banyak Liked di fans page facebook yang ada di blogspot. Facebook dan blogger adalah kombinasi yang agak bagus. Dengan adanya facebook page, blogger dapat berinteraksi dengan pengunjung. Salah satu penggunaan yang cool adalah dengan meletakkan facebook like badge semasa blog anda dibuka.

Secara tidak langsung dapat menggalakkan pengunjung blog anda untuk pada masa yang sama 'like' pada page anda.

Contoh seperti dibawah

Anda juga boleh melihat demo di test blog ini.

Tutorial letak facebook like badge semasa blog dibuka seperti dibawah.

1. Dari dashboard > design > edit HTML

2. Backup template blog sebagai langkah berjaga²

3. Dengan menggunakan fungsi find (ctrl + F), cari kod <body>
3.1 Jika anda tidak jumpa code <body>, cari kod ini
<body expr:class='"loading" + data:blog.mobileClass'>

4. Copy dan paste code di bawah selepas kod yang anda jumpa di langkah 3 atau 3.1

<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='OhBest'
//]]>
</script>
<link href='http://kakinetwork.com/sources/fbfans-pro/kakinetwork.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/unwanted86/javascript/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='https://sites.google.com/site/unwanted86/javascript/kakinetwork.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 15,
wait: 0,
url: 'http://www.facebook.com/OhBest',
closeable: true,
});
});
//]]>
</script>
<div id='fbtpdiv'/>

Contoh:

NOTA:
i) Gantikan 'OhBest' pada row KNFBFansPRO='OhBest' dengan nama yang anda mahu.
ii)Gantikan '15' pada row 'timeout: 15,' dengan masa paparan yang anda mahu semasa blog dibuka
iii) Gantikan dengan url page anda pada row url: 'http://www.facebook.com/OhBest',

5. Save dah lihat hasilnya.:)

Kredit: Terima kasih kepada kakinetwork.com untuk code yang sungguh cool ini.

Tuesday, June 25, 2013

Cara Posting Gambar Di Blogspot

Apabila menghasilkan sesebuah entri bagi blog, antara perkara yang hendak dimasukkan adalah gambar. Mungkin mudah untuk masukkan gambar sekeping dua dalam entri blog. Bagaimana pula untuk memasukkan berpuluh-puluh gambar (seperti gambar pergi melancong, perkahwinan, dsb) dalam satu entri blog dengan cara yang mudah.?

Contoh banyak gambar yang dimasukkan sebuah entri seperti di entri ini. Suasana terminal bas di China

Berikut adalah tutorial untuk memasukkan banyak gambar dalam blog sekaligus.

1. Dari dashboard anda, klik pada 'create new post'

2. Pada paparan yang muncul, pilih mode 'compose' kemudian klik pada ikon 'gambar'.

3. Klik pada 'Choose files'

4.Dari paparan yang muncul, pilih seberapa banyak gambar yang anda ingin masukkan, kemudian tekan 'open'

5. Proses upload bermula.

6. Apabila selesai, tekan 'add selected'.
Pastikan sebelum anda tekan 'add selected' semua gambar telah dipilih.

7. Selesai, itu sahaja. Mudah bukan..:)

Berapa maksimum gambar yang boleh diletakkan.?

-Admin sendiri tidak pasti. Kerana admin pernah upload sehingga 40keping, masih lagi ok.:).
Tapi pastinya boleh upload banyak sekaligus.:)

Membuat Menu Vertikal (Vertical) Blogspot

Sebelumnya kita pernah membahas tentang membuat menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal (ya iyalah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :

1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');

Pilihan Warna menu vertikal :

	blue1.gif blue2.gif
	green1.gif green2.gif
	red1.gif red2.gif
	pink1.gif pink2.gif
	black1.gif black2.gif

3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.

Dah gitu aja. Gampang kan???? :D

Monday, June 24, 2013

Download a Powerful Multimedia Software

Do you want to get a Powerfull Multimedia Software? Blaze Media Pro is the solution. It is powerful all-in-one software that includes an audio converter (MP3, WMA, WAV, OGG, etc.), MP3 encoder and MP3 decoder, MP3 ripper, MPEG encoder and MPEG decoder, video converter (AVI, MPEG, WMV, etc.), audio editor, video editor, CD/DVD burner, and much more in a single software application.
Blaze Media Pro's unique Media Manager makes it easy to work with all your audio and video creations - playback at your fingertips. Even rename, copy, move, or tag files instantly. You can convert DVD to AVI, MPG, WMV with this software. You also don't need another CD burning software and DVD burning software anymore, because you will get it all in one software. You can download the powerfull software HERE and then you can try it.

Buku Tutorial Membuat Website Dengan Joomla

Bagi yang pingin belajar membuat website dengan joomla, inilah buku yang tepat untukmu. Dengan joomla, membuat website menjadi lebih mudah. Kita tidak membutuhkan pengetahuan tentang desain atau pemrograman. Pengerjaannya pun tidak memakan waktu yg lama. Buku ini menjelaskan secara lengkap bagaimana membuat website dengan menggunakan joomla., mulai dari intallasi, membuat template, membuat dan mengisi content dan modul, sampai dengan cara menguploadnya ke web hosting. Ayo dapatkan di toko-toko buku terdekat. Oh ya, buku ini juga dilengkapi CD yg berisi Program joomla, XAMPP, Software FTP, Template, Modul, dll.

Cara Edit / Mengganti Template Wordpress

Mungkin para pengguna wordpress pernah merasa kesal ketika akan mengganti atau mencoba merubah template wordpress tetapi diharuskan membayar dulu kira2 sebesar $15. Tapi ternyata ada cara supaya kita bisa mengedit atau mengotak-atik template wordpress dengan tanpa mengeluarkan dana sepeserpun alias gratis. Mau tahu caranya? ...

Syaratnya yaitu kamu harus memiliki domain dan hosting terlebih dulu. Untuk domain kamu bisa memakai domain gratis dari co.cc atau jika pingin domain .com/.net/.org km bisa membeli domain di http://domain.superinhost.com. Selain domain kamu juga harus memmiliki hosting. Kamo bisa memakai hosting gratis di 000webhost atau bisa juga beli hosting murah di superinhost.com

Langkah awalnya yaitu kita harus mensetting domain dan hosting kita. Bagi yang belum tahu caranya silahkan BACA TUTORIAL INI. Langkah berikutnya yaitu kita cari atau download template wordpress yang ada dipasaran, dan tentunya cari yang gratisan dong. Coba cari lewat google dengan memakai kata kunci misal "Free Template wordpress" atau "Free Wordpress Themes" dll. Biasanya hasil downloadnya akan berupa file "zip" atau "rar". Extract dulu file tersebut sehingga menjadi folder yang didalamnya terdapat beberapa file.

Langkah berikutnya yaitu login ke cpanel hosting kamu. kemudian pilih "File Manager". Kemudian masuk ke folder "Public_html --> ...wp-content\themes\". Upload file-file yang sudah di ekstract tadi ke folder tersebut. Kemudian buka alamat "http://namadomainmu.com/wp-admin" untuk login ke wordpress administrator (Jangan lupa ganti namadomainmu.com dengan nama domainmu ya). Lalu pergi ke menu "Design --> Themes". Nha maka disitu kamu akan menjumpai template yg telah kamu upload tadi. Untuk mengaktifkannya tinggal diklik aja template yg km suka kemudian "Activate". Trus coba deh buka blog wordpress kamu. Gimana berhasil gak? .... Gampang kan.... :D

Sunday, June 23, 2013

Setting Domain dan Hosting Untuk Wordpress Gampang

Sekali-kali buat tutorial untuk wordpress ah, :D
Edisi perdana tutorial wordpress kali ini akan aku coba jelaskan tentang bagaimana cara setting domain dan hosting untuk wordpress. Untuk domain bisa menggunakan sub domain atau bisa menggunakan domain gratis dari co.cc atau bisa juga beli domain murah di www.dodoldomain.com. Sedangkan untuk hostingnya bisa menggunakan hosting gratisan dari 000webhost atau bisa juga membeli hosting murah dari superinhost.com
Ok mari kita mulai saja tutorialnya.

* SETTING DOMAIN
Kita harus memiliki domain terlebih dahulu. Kemudian mengarahkan domain kita ke hosting yg kita pilih. Caranya yaitu dengan mengganti name server domain kita. Bagi yang memakai hosting dari 000webhost biasanya name servernya adalah ns01.000webhost.com dan ns02.000webhost.com sedangkan bagi yang menggunakan hosting dari superinhost.com maka name servernya adalah ns1.superinhost.com dan ns2.superinhost.com

* SETTING HOSTING DAN INSTALL WORDPRESS
1. Masuk ke cpanel Hostingmu lalu cari dan pilih icon fantastico

kalo di 000webhost iconnya ini

2. Setelah itu pilih "wordpress" dan lalu "new installation"

3. Kemudian isikan data-data pada form yg muncul. Kosongkan kolom "Install in directory" jika pingin install wordpress di domain pokok.

4. Kemudian klik tombol "Install Wordpress". Tunggu sebentar kemudian klik tombol "Finish Installation".
5. Untuk untuk masuk ke administrator wordpressnya biasanya melalui URL http://namadomainmu.com/wp-admin. DIsitu km bisa posting2 dan macem.

OK jadi deh wordpressnya. Oh ya, kalo pake hosting sendiri kita bisa ngedit2 template wordpressnya lho.
Selamat Mencoba....

Internet Broadband Speed Test

If you already have an Internet connection, you probably connect to the Internet with a modem that plugs into your telephone line (often referred to as a "dial-up connection"). If you're setting up an Internet connection for the first time, it really makes sense to go for Broadband right from the start, as the entry-level packages are generally much better value than the dial-up alternative. Once you've looked into the options and know which types of broadband Internet are available in your area, the next step is to choose the best deal. The biggest factor to consider when you choose a deal is speed. How fast is the connection? And is it fast enough to do all the things you would like to be able to do?

Broadband speed is measured by the amount of data your connection can send and receive in Kilobytes per second (Kbps) or Megabytes per second (Mbps). You can check it with broadband speed test. You will know how fast is your internet connecttion. The speed check will work for any type of connection including ADSL, cable/fibre optic and by the 3G mobile network (mobile broadband). Make sure that you have closed any other applications using the internet (for example email, instant messenger, and so on). Your broadband speed can vary wildly at different times of the day depending on external factors, such as the number of users online in your building, your street and even your country

Saturday, June 22, 2013

Cara Highlight Author Comment Blogspot

Highlight Author Comment fungsinya adalah supaya komentar author (pemilik blog) berbeda dengan komentar orang lain . Contohnya bisa dilihat di blog ini. Untuk komentar pemilik blog akan ada bordernya dan ada efek lainnya. Nha berikut ini akan aku beberkan cara untuk membuat Highlight Author Comment ini. Dah siap semuanya ? OK lets dance togather :D

1. Login ke blogger trus ke menu "Layout --> Edit HTML"
2. Beri tanda centang pada kotak "Expand Widget Templates"
3. Copy script berikut ini sebelum kode ]]></b:skin> atau copy ke dalam kode CSS.

.comment-body-author {
background: #E6E6E6; /* Warna Background */
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px;
}

4. Kemudian cari kode2 seperti berikut. Mungkin kode yg ada di HTML kamu akan beda, tp walaupun beda usahakan semirip mungkin dengan kode berikut ini :

5. Kode yang berwarna merah adalah kode yang harus kamu tambahkan di HTML kamu. Posisinya harus benar, ingat itu.
6. Kalo sudah terus disave template kamu.

Comment author ini berdasarkan profil dari pemilik blog tsb. Jadi supaya efeknya muncul sebelum memberi komentar kamu harus login dulu di blogger. OK.
Oh ya ini bukan untuk komentar dari haloscan lho. Tapi hanya untuk kotak komentar yg dari blogger murni

Friday, June 21, 2013

Software Recommended to Download

It's important to us to know what is the nice computer software that can be downloaded. Gadget Advisor is one of many site that provide info about it. We can find for some high quality best Windows software downloads. A list of applications that have been tested extensively such as best Firefox extensions also served as a comprehensive listing of the high quality software. When evaluating for recommendation, they are not only do consider the functionality and features of the application, but also test to ensure it works well. We can also get reviews info from some software such as review for Blaze Media Pro and other gadgets. Therefore, be sure to check back for updates periodically.

Thursday, June 20, 2013

Menampilkan / Pasang Emoticon di Kotak Komentar

Dengan adanya emoticon di kotak komentar tentunya akan membuat blog menjadi lebih hidup. Para komentator menjadi lebih bisa mengekspresikan perasaannya melalui icon2 (emoticon). Kalau di wordpress mungkin feature ini sudah tersedia. Tapi untuk blogspot kita harus mengotak-atik dan mengakalinya supaya bisa menampilkan emoticon di area komentar. Gimana? kamu mau memasang emoticon ini?

Seperti biasanya, di trik ini akan diberikan dua macam emoticon, yaitu emoticon kucing (seperti punyaku ini) dan emoticon yahoo. Kamu tinggal pilih mana yang kamu suka.

Emoticon Yahoo :

Emoticon Kucing :

Gini nih cara membuatnya :

1. Pertama login ke blogger, trus ke "Layout (Tataletak) --> Edit HTML "
2. Beri tanda centang pada kotak "expand widget template"
3. Lalu letakkan script berikut sebelum kode </body>

Untuk Emoticon Yahoo :

Untuk Emoticon Kucing :

4. Kemudian cari kode berikut ini :

5. Kalo sudah ketemu letakkan kode2 berikut setelah kode <p class='comment-footer'>

Ini untuk Yahoo emoticon :

Kalo mo yang emoticon kucing pake yang ini :

6. Kalo sudah trus di "save" dan coba lihat hasilnya

Tambahan
* Kadang-kadang ada beberapa template memiliki kode yang beda. Kalau caranya sudah dilaksanakan dengan benar tapi hasilnya tidak terjadi apa2 atau kodenya tidak berubah menjadi emoticon, kemungkinan itu karena Kode untuk templatenya berbeda atau bisa juga karena mugnkin hosting untuk menaruh file emoticon dan javascriptnya sedang bermasalah.