Tutorial : Memasang Google Translate Di Blog

Assalamualaikum.

Siapa di sini sedar yang sekarang di dalam blog saya sudah ada Google Translate. Saya baru pasang Google Translate ini pada hari Jumaat yang lepas. Maksudnya sudah 3 hari wujud dalam blog saya. Ini untuk memudahkan pengunjung dari luar negara untuk membaca entri di dalam blog saya. Sebab itu dari dulu lagi, saya sarankan semua blogger untuk menaip entri dengan bahasa baku. Jadi, tidaklah terpinga-pinga pembaca luar negara nanti bila mereka translate penulisan entri blog. Mari ikut tutorial ini untuk pasang Google Translate di dalam blog.

1. Copy kod di bawah.

<div id="google_translate_element">
</div>
<script>

function googleTranslateElementInit() {

new google.translate.TranslateElement({

pageLanguage: 'id',

layout: google.translate.TranslateElement.InlineLayout.SIMPLE

}, 'google_translate_element');

}

</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

2. Dashboard > Layout > Add a Gadget > HTML/JavaScript.

3. Paste kod yang di copy tadi ke dalam ruangan HTML/JavaScript.

4. Klik Save. Kemudian, klik Save arrangement.

Siap! Selamat mencuba.

Tutorial : Scroll Box Untuk Blog List dan Blog Archive

Assalamualaikum.

Tutorial ini diminta oleh Liniey Nor dan Noor Aina. Pertama kalinya, minta maaf sebab lambat sangat buat tutorial ni. Maklumlah tutorial ini agak sukar dibuat. Ini kerana bahagian template blog sekarang menggunakan Edit HTML yang baru. Berharap sangat adik berdua paham tutorial ni. Jika tak paham, nanti tanya ye.

1. Wajib buat bloglist terlebih dahulu. Buka Dashboad > Layout > Add a Gadget > Blog List. Isikan tajuk bloglist dan klik di bahagian "Add a blog to your list" untuk mengisi link blog. Setelah mengisi link blog, klik "Add" dan setelah selesai mengisi semuanya, klik "Save".

2. Kemudian, pastikan kedudukan susunan bloglist yang ingin dibuat skroll nanti berada di bahagian paling atas dari Blog Archive dan Blog List yang lain-lain. Buat seperti gambar di bawah. Setelah susunan sudah betul, klik "Save arrangement".

3. Dashboard > Template > Edit HTML.

4. Klik pada mana-mana kod di dalam bahagian Edit HTML. Tekan butang CTRL+F pada keyboard laptop untuk dapatkan kotak search di dalam bahagian Edit HTML.

5. Taip nama bloglist yang korang buat tadi di dalam kotak search tu.

6. Cari kod di bawah ini. Jumpa?

<div class='widget-content'>

Jika sudah jumpa, ubahkan kod di atas ini kepada kod di bawah ini :

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

* Boleh ubah 200px mengikut kesesuaian blog.

7. Cuba preview template dulu. Jika scroll box ini menjadi, bolehlah klik "Save template".

Jika korang nak buat scroll box untuk "Blog Archive ataupun Bloglist yang lain-lain" pula, korang kena susun kedudukan seperti langkah 1 di atas. Maksudnya jika nak buat scrollbox untuk blog archive, wajib susun blog archive di bahagian atas sekali kemudian barulah bloglist lain di bawah-bawah. Begitu juga jika nak buat scrollbox untuk bloglist yang lain-lain. Utamakan kedudukan yang ingin dibuat scrollbox terlebih dahulu. Paham ke? Kalau xpaham, sila pm FB di SINI.

Tutorial : Cara Mendaftar Shout BUSUK.ORG

Assalamualaikum.

Dulu saya pernah guna kotak chat shout busuk.org ni, tapi sekarang dah tak guna kerana kotak chat ni tiada iP visitor. Jadi sekarang saya guna kotak chat ishoutbox.com. Cara nak daftar kotak chat shout busuk.org ni sangat mudah. Blogger baru pun boleh buat juga. Langkah-langkah daftar :

1. Klik Sini. Kemudian, klik "Sign Up".

2. Isikan bahagian Username, Password dan Email. Klik "Submit". Korang juga boleh mendaftar melalui Facebook.

3. Log in Username & Password. Klik "Submit".

4. Ubah mana-mana setting yang korang rasa nak ubah. Pastikan setiap kali setting yang korang ubah tu, korang save tau.

5. Setelah siap ubah kesemua setting, copy kod yang ada dibahagian "Home".

6. Kembali ke Blogger. Klik Dashboard > Layout > Add a Gadget > HTML /JavaScript > Paste kod yang korang copy tadi.

7. Preview dan siap!

* Senang saje ni. Tapi saya buat tutorial ni kerana nak pelbagaikan jenis kotak chat blog korang. Selamat mencuba.

Tutorial : Membuat Widget Follower Google Friend Connect (GFC)

Assalamualaikum.

Rasanya semua blogger tahu yang widget "Google Friend Connect (GFC)" sudah tidak disediakan oleh pihak Blogger. Tetapi sebenarnya widget ni masih boleh dibuat jika tidak disediakan secara asal. Korang tau ke widget GFC ni apa? Widget GFC ni adalah widget untuk follow sesebuah blog. Kepada sesiapa yang nak tau cara nak buat widget GFC ni, jom tengok tutorial di bawah ni ye. Widget ni hanya boleh dibuat jika korang dah ada follower blog. Jika masih tiada lagi, suruhla sesiapa follow blog korang dulu ye.

1. Korang wajiblah ada blog dan ada follower. Ini syarat paling utama ye.

2. Dashboard > Layout > Add a Gadget > HTML/JavaScript.

3. Copy link di bawah dan paste link ke dalam ruangan HTML/JavaScript.

 <a href="http://www.blogger.com/follow-blog.g?blogID=ID BLOG KORANG" target="_blank" title="Follow With Google Friend Connect"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKfUKV-1E4uCH5QCIfck2RX7IHr_JN4w07JHrw2ZDjsWgrYKmpfRRXylvcW2vwE-_hs-nwPbF41GDt3HeNnZmcKmYJ9sZLEUSSjEiqAHE5ummOJVjgh9c8C8baF5i9NokHmocUa4jURQjP/s1600/follow-with-google-friend-connect-button.jpg" /></a>

4. Gantikan ID BLOG KORANG. Jika sesiapa tak tahu id blog yang mana satu, sila komen entri ni ye. Selepas dah siap, klik SAVE.

5. Dashboard > Overview > Followers.

6. Klik "Add the Followers gadget".

7.  Dalam kotak "Configure Followers List", korang boleh ubah di bahagian kotak "Title" jadi "Followers". Kemudian tick bahagian "Use template default styles". Klik Save. Dah siap!

* Maaf kalau tak jadi. Kemungkinan blog korang lain jenisnya.

Tutorial : Upload Fail PDF Ke Dalam Entri Blog

Assalamualaikum. Sebenarnya tutorial ni pernah direquest oleh cikgu saya pada tahun lepas. Alhamdulillah saya dah tolong beliau. Dan sebenarnya saya nak buat tutorial ni untuk korang jugak. Tetapi oleh kerana saya terlupa nak buat tutorial ni untuk korang pada tahun lepas, maka tutorial ni baru dibuat. Jadi kepada sesiapa yang nak tau, jom ikut tutorial di bawah ni. Kalau tak paham, terus tanya di kotak komen entri ni.

1. Mula-mula, pergi ke link INI.

2. Kemudian klik Log In. Korang boleh log in guna facebook.

3. Bila dah siap daftar, klik Upload.

4. Korang akan masuk ke ruangan Upload a Document. Kemudian klik "Select files to upload". Cari fail dan upload fail yang korang nak upload tu.

5. Setelah upload, nanti akan ada bahagian additional information. Korang isi Title, Description, Category, Topic, Type dan Tags yang sesuai. Jika dah siap isi semua, klik Save & Continue (lihat di kanan bawah).

6. Korang juga boleh share fail yang diupload tadi ke media sosial yang lain. Di bahagian kotak "Embed" ada kod kan. Itulah kod PDF untuk dimasukkan ke dalam entry blog. Copy semua kod tu ye. Tick bahagian "Submit content to be featured on Scribd's homepage". Kemudian isi bahagian kotak "Explain why this content should be featured on Scribd". Kemudian, klik Submit. Fail PDF korang dah siap upload!

7. Buka blog korang dan create entri seperti biasa. Jika korang nak upload PDF tadi, klik HTML di sebelah bahagian Compose. Paste kod yang saya suruh copy tadi di langkah kelima. Kemudian klik Compose semula. Jadi kan? Alhamdulillah. Nanti korang bolehla selalu upload fail PDF dalam entri. Di bawah ni contohnya :

Invoice Guide-Exabytes

  

Selain itu, korang juga boleh upload dokumen biasa seperti dari Microsoft Word & Microsoft Excel ke Scribd ni. Jika korang nak upload fail PDF yang telah sedia ada di Scribd ke entri blog, ikut langkah di bawah.

1. Mula-mula, klik SINI.

2. Tengok bahagian kanan atas dan klik pada apa yang ditunjukkan oleh bulatan merah di bawah.

3. Klik pada "My Content".

4. Di bahagian "Published", sila pilih mana satu fail PDF yang korang nak upload ke blog. Klik pada tajuk fail PDF tu ye. Sebagai contoh. Fail Invoice Guide-Exabytes.

5. Klik pada Embed.

6. Ubahla setting di dalamnya. Pabila dah siap, copy kod yang disediakan. Jika nak masukkan ke dalam entri blog, ikut seperti langkah 7 di atas ye. Siap!

Diharapkan tutorial ni korang pahamlah ye. Sebab langkahnya terlalu banyak nak dibuat. Selamat mencuba.

Tutorial : Widget Instagram Untuk Blog

Assalamualaikum. Sebelum korang buat widget ni, korang perlu ada instagram dan daftar instagram terlebih dulu di dalam handphone. Kalau tak daftar, sampai bila-bila pun korang tak boleh buat. Kalau tak ada lagi instagram dalam handphone, sila download app instagram dan daftar ye. Bagi yang sudah ada, korang boleh ikut tutorial ni. Tutorial ni direquest oleh kak Wanieys.

1. Masuk ke SINI.

2. Klik Sign in for FREE.

3. Masukkan Username dan Password korang. Lepas tu, klik Log in.

4. Korang dah masuk ke dalam akaun kan. Jadi, sila ikut anak panah di dalam gambar di bawah untuk langkah seterusnya.

5. Pabila korang dah masuk di bahagian Tools, korang akan nampak kod untuk Button Profile. Copy kod tu.

6. Buka bahagian Layout blog korang > Add a Gadget > HTML/JavaScript. Kemudian korang paste kod tadi ke ke dalam HTML/JavaScript.

7. Kalau korang nak buat kerangka instagram pula, korang kena copy kod di bawah ni pula dan paste di bawah kod Button Profile tadi.

<center><iframe src="http://widget.stagram.com/in/id_instagram?s=100&w=2&h=2&b=1&p=5" allowtransparency="true" frameborder="0" scrolling="no" style="border:none;overflow:hidden;width:230px; height: 227px" ></iframe>

Sila ubah id_instagram kepada id instagram korang. Id instagram ialah username instagram korang.

8. Nanti kod yang di paste ke dalam HTML/JavaScript tadi akan jadi seperti di bawah.

<center><center><center><a class="followgrambutton" username="pinkgemstone90" rel="232149750" href="http://followgram.me/pinkgemstone90">Follow @pinkgemstone90</a><script type="text/javascript" src="http://external.followgram.me/v1/follow/js/"></script>

</center><iframe src="http://widget.stagram.com/in/pinkgemstone90/?s=70&amp;w=2&amp;h=2&amp;b=1&amp;p=5" allowtransparency="true" style="border:none;overflow:hidden;width:169px; height: 154px" frameborder="0" scrolling="no"></iframe>

Kod di atas ni kod instagram saya. Tak semua kod Button Profile korang semua sama. Jadi korang kena ikut step yang di atas tadi untuk mendapatkan kod Button Profile. Kalau korang nak buat Badges Instagram tu pula, ikut tutorial di bawah ni.

1. Mula-mula, masuk SINI.

2. Klik Log in.

3. Masukkan Username dan Password, kemudian klik Log in.

4. Kemudian tengok di bawah kanan atas. Korang akan nampak seperti gambar di bawah. Sila ikut anak panah untuk membuat langkah seterusnya.

5. Pabila korang dah masuk bahagian Badges tadi, sila pilih Badges mana yang korang nak masukkan. Kalau saya, saya pilih seperti gambar di bawah.

6. Copy kod yang diberikan. Dashboard > Layout > Add a Gadget > HTML/JavaScript. Paste kod tadi. Save! Kalau korang nak paste di bawah kod frame instagram tadi pun boleh. Saya gabungkan saje untuk jimatkan ruang.

* Wah, dah jadi ke widget instagram korang tu.hehe Tahniahla kepada yang berjaya buat. Sesiapa yang masih pening nak buat tu, jangan malu bertanya ye... :)

Tutorial : Melajukan Masa Blog Loading

Assalamuaikum.

Seperti yang dijanjikan semalam, saya telah buat satu post di depan fb saya sendiri yang saya telah menjumpai satu tutorial yang sangat mudah dan berkesan yang saya sendiri telah lakukan di dalam blog saya. Wah korang mesti berkobar-kobar nak tau kan. Sabar dulu, sabar ye. Kita baca dulu di bawah ni, apa yang saya post di facebook semalam.

Terima kasih kepada kak Izan Hussain Mia & Sharina Elyana.

Jom lawat blog kak Izan di SINI & blog Sharina di SINI.

Sebelum saya ajar bagaimana nak lajukan loading blog ni, mari kita timbang ketiga-tiga blog terlebih dulu. Mari kita tengok blog mana paling berat. Kepada sesiapa yang tak tahu di mana mau timbang berat blog, klik SINI. Hasil dari timbangan adalah :

Tengok ni korang, kami punya blog tersangatlah berat. Entah apa yang ditanggungnya sampai blog dah sakit bahu. Masa untuk loading nak sampai seminit. Mula-mula, saya pun jadi risau sebab tidak keruan dibuatnya sebab kalau dibiarkan makin sarat blog ni. Tapi masalahnya disebabkan perasaan sayang nak buang macam-macam yang bertanak dalam blog, inilah jadinya. Sekarang tak perlu risau sebab saya ada cara yang paling mudah tanpa korang buang apa-apa yang korang sayang sangat tu. Jom ikut tutorial di bawah. Nanti kita tengok blog siapa paling laju.haha :D

1. Korang copy dulu kod di bawah ni. Copy tau, wajib!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><br /><script type="'text/javascript'" src="'https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver="></script><script type="text/javascript"><br />jQuery(document).ready(function($){<br />if (navigator.platform == "iPad") return;<br />jQuery("img").lazyload({<br />effect:"fadeIn",<br />placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3fcPQ4muVh80kHs7TcCz1t4W_M1f3KlyIuYnI8C_j1u4TPTmcwX69Z41MnA8p20D7ATBiLWgj0eUoKWGawHXjOjH4c2vE1U653haEjUKac03uScaDgGDxYFCbCagScVtxFuizg5cro5E/s1600/grey.gif"<br />});<br />});</script>

2. Dashboard > Layout. Korang cari bahagian Blog Posts korang di mana dalam layout.

3. Kalau dah jumpa, klik Add a Gadget > HTML/JavaScript dan paste kod yang di copy tadi.

4. Jadi, kod tu berada di sini sekarang.

5. Tarik kotak kod tu untuk dibawa ke bawah kotak Blog Posts.

6. Save! Korang perlu timbang berat blog sekali lagi di SINI. Korang dah bersedia nak tengok perubahannya? Jom kita timbang. Keputusannya ialah :

Nah, terus berkurang load time tu.haha yang pasti, saya punya blog paling ringan. Jangan jeles tau. Sebenarnya banyak lagi rahsia yang saya pernah buat dulu untuk melajukan masa blog loading, tapi tak ingatlah pulak. Ini saje cara yang saya ingat. Tapi korang juga boleh cuba kaedah di bawah ini untuk lajukan loading blog.

KAEDAH LAIN UNTUK LAJUKAN LOADING BLOG

• Gunakan warna HTML

Pastikan anda menggunakan warna HTML untuk background blog. Jangan sesekali guna imej photoshop dan sebagainya untuk background blog kerana imej tersebut mengambil masa yang lama untuk loading berbanding warna HTML. Korang boleh ambil warna HTML di SINI.

• Hosting image ke blogspot

Bila anda ingin letak gambar dalam entri, pastikan upload imej tersebut ke blogspot image. Jangan guna imageshack kerana permintaan URL agak perlahan untuk gambar yang dihostkan ke imageshack.

• Kedudukan widget javascript

Jika anda ingin letak widget javascript seperti alexa widget, live feed traffic dan lain-lain. Pastikan anda meletakkan widget tersebut di bawah bahagian blog. Ini untuk memudahkan blog anda loading terlebih dahulu sebelum widget tersebut. Korang tahukan yang widget javascript ni lambat loading.

• Halaman utama

Elakkan halaman utama blog yang panjang berjela-jela sehingga 10-20 entri pada halaman tersebut. Letak 3-4 entri pada halaman utama dah memadai.

• Auto Play Music (lagu pada blog)

Lagu yang dipasang pada blog akan menyusahkan pengguna yang mempunyai kelajuan internet yang perlahan seperti broadband. Pada kelajuan internet yang slow, lagu tersebut tidak dapat buffer dengan cepat dan menyebabkan lagu tersekat-sekat.

• Elak animasi flash pada blog

Jangan gunakan header atau animasi flash pada blog kerana ianya sangat berat. Semua orang inginkan animasi flash pada blog kerana ianya menarik tetapi penggunaan flash agak melembabkan blog.

Ini sajelah yang saya dapat ajarkan. Korang jangan lupa cuba ye... :)

Tutorial : Letak Banner Dalam Blog

Nak letak banner yang dilinkkan kepada mana-mana link?

Rasanya ramai yang dah tau tutorial ni.

Kepada yang masih tak tau, sila ikut tutorial di bawah ye.

1. Log in blog > Dashboard > Layout > Add a Gadget > HTML/JavaScript.

2. Copy kod di bawah.

<center>
<a href="http://handbag-addict.blogspot.com/"><img src="http://i.picasion.com/pic64/0a6e97b733dbb215a1673dd57e0a2e54.gif" width="125" height="125" title="Handbag addict" /></a></center><br />

Petunjuk :

<center> : letak <center> jika mahu letak banner ni di tengah-tengah.
http://handbag-addict.blogspot.com/ : gantikan dengan link yang korang ingin tujukan.
http://i.picasion.com/pic64/0a6e97b733dbb215a1673dd57e0a2e54.gif : gantikan dengan link banner korang.
width="125" : boleh ubah kelebaran banner.
height="125" : boleh ubah ketinggian banner.
title="Handbag addict" : boleh ubah tajuk yang bersesuaian.

3. Paste ke dalam HTML/JavaScript.

4. Save!

* Selesai save, nanti ia akan jadi seperti banner di bawah. Nanti korang singgahla ke blogshop ni. Banyak handbag dan purse yang dijual di sana! :)

Tutorial : Button Show-Hide Spoiler

Cantikkan button show-hide spoiler di atas ni.
Jika korang pun nak buat button ni, ikutilah tutorial di bawah.

1. Log in blog > Dashboard > Layout > Add a Gadget > HTML/JavaScript.

2. Copy kod di bawah.

<center><div id="spoiler"><div><input value="Alexa" style="width:88px ;font-size:12px;background-image: url(http://2.bp.blogspot.com/-PG8wKmTPAMA/Tadavlw-zBI/AAAAAAAAAiw/v9-WPrl3aiU/s1600/swatch-mr016_15_hotpink.jpg);-moz-border-radius: 10px; border-radius: 10px;margin:13px;padding:0px;border-style: 2px solid #ff9fcc;" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Hide Spoiler!&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;none&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Show Spoiler!&#39;; }" />
<div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:90%">
<center>CODE WIDGET ANDA </center></div></div></div></center>

Petunjuk :

Alexa : gantikan dengan tajuk button yang korang inginkan.
CODE WIDGET ANDA : digantikan dengan kod widget yang ingin dimasukkan.

3. Paste ke dalam HTML/JavaScript.

4. Save!

* Antara kelebihan button ni ialah : Boleh masukkan banyak widget ke dalam button ni dan ia juga boleh mengemaskan bahagian sidebar blog korang. Cubalah! :)

Tutorial : Favicon

Korang nampak bentuk love di atas ni? Ha, itulah favicon. Pada awalnya, semua blogger tak menggunakan favicon sendiri. Tetapi rasanya, mula-mula kita semua menggunakan favicon blogger. Err yeke, maaf kalau saya tersilap.

Bagaimana nak buat favicon ni? 

1. Mula-mula, korang buat atau cari favicon yang korang inginkan terlebih dahulu.

Sebagai contoh, korang boleh cari di :

SINI & SINI

Jikalau korang tak tau nak pilih Favicon yang mana satu, korang boleh buat favicon sendiri di SINI, SINI, SINI, SINI, SINI, SINI. Suka hati korang nak upload gambar apa pun, tapi korang mesti ingat satu perkara. Favicon ni cuma boleh buat saiz kecil saje. Gunakanlah saiz  16 x 16. Jadi, seeloknya gambar yang hendak diupload mestilah jelas dan terang.

2. Setelah korang dapat favicon yang diinginkan, korang perlu save gambar favicon tu ke dalam laptop/komputer.

3. Log in blog > Dashboard > Layout.

4. Lihat di bahagian kiri atas, korang akan jumpa perkataan Favicon. Klik "Edit".

5. Selepas itu, klik "Choose File" dan masukkan gambar favicon korang.

6. Klik "Save" dan siap!

# Ala, nak masukkan favicon ni mudah saje. Saya buat tutorial ni untuk blogger baru yang baru menjinakkan kaki di dunia blogging. Cubalah buat ye! :)

Tutorial : Kotak Kod Untuk Banner

Assalamualaikum. Harini saya nak ajar korang bagaimana ingin buat kotak kod banner. Apa fungsi kotak kod banner ni? Fungsi dia adalah untuk memudahkan follower-follower untuk tampal banner korang dekat sidebar diorang. Berikut cara-caranya :

1. Log in blog > Dashboard > Layout > Add a Gadget > HTML/JavaScript.

2. Copy kod di bawah.

<center><a href="http://solehahshamsuddin.blogspot.com/" target="_blank"><img src="http://i.imgur.com/GnBZH.gif" border=0 /></a><br /><br /><textarea cols="20" rows="2"><a href="http://solehahshamsuddin.blogspot.com/" target="_blank"><img src="http://i.imgur.com/GnBZH.gif" border=0 /></a><br /></textarea>

* Sila gantikan :

http://solehahshamsuddin.blogspot.com/ : gantikan dengan link blog korang
http://i.imgur.com/GnBZH.gif : gantikan dengan link gambar banner blog korang

3. Paste ke dalam HTML/JavaScript.

4. Save!

Tidak diriku sangka, masih ada yang menanyakan bagaimana nak buat kotak kod banner ni. Tak mengapa, saya sudi menolongnya. Alang-alang menyeluk pekasam, korang masukkanlah banner blog saya ni di sidebar blog korang ye. Di bawah ni, link nya.hehe...

<a href="http://solehahshamsuddin.blogspot.com/" target="_blank"><img src="http://i.imgur.com/GnBZH.gif" border=0 /></a><br />

Tutorial : Top Commenters Widget

Bagaimana nak pasang widget Top Commenters di atas ni?

1. Mula-mula, klik SINI.

2. Kemudian ikuti langkah-langkah yang ditunjukkan oleh gambar di bawah. 

3. Apabila korang sudah selesai mengisi, korang klik "Add this widget to your blog" dan kemudian korang klik :



4. Siap! Sekarang, korang boleh lihat hasilnya. Kita juga boleh tengok list top commenters yang tahun lepas. Semoga widget ini berguna kepada tuan blog untuk mengetahui jari-jemari yang mana satu terlalu rajin komen entri blog... :)

Tutorial : Letak Link Dalam Komen Blog

Ada sesetengah orang tak suka bila kita letak link blog panjang-panjang dalam komen entri kan? Apa kata korang ikut tutorial di bawah. Cara-caranya mudah saje.

1. Korang komen entri blog seseorang tu seperti biasa. Jika nak buat ayat seperti di dalam gambar atas, copy saje link di bawah ni.

<a href="URL BLOG">TEXT YANG TERPAPAR</a>

2. Edit bahagian URL BLOG dan TEXT YANG TERPAPAR. Kemudian publish komen korang tu.

Sebenarnya meletakkan link sebegini mempunyai efek negatif. Ia merupakan kesalahan sesetengah blogger yang suka meletakkan url blog sebegini rupa. Link sebegini dikategorikan sebagai SPAM LINK. Link ini juga dipanggil sebagai link biru. Kalau ada orang yang post komen sebegini dalam komen entri blog saya, automatik saya akan delete komen dia. Maaf, saya tak nak blog saya di "delete".

Kalau dah banyak sangat komen "spam" dalam blog, blog kita tiba-tiba boleh jadi tak wujud ataupun akan dipadam dari blogspot. Mesti jadi kacau-bilau nantikan. Untuk mengelakkan blog seseorang tu daripada di "spam", seeloknya korang jangan gunakan cara ini ye. Kesian tuan blog tu nanti...

Tutorial : Navigate-able Box For Sidebar

Assalamualaikum. Hye, I'm Solehah. Thanks for visit my blog. Click the number, please. Click 1 / 2 / 3 / 4.

✿ Join Bitly Here ! ✿
✿ Join Blin.GD Here ! ✿
✿ Join HzTours Here ! ✿
✿ Join Says.my Here ! ✿
✿ Join Asiafans Here ! ✿
✿ Join Blogr.my Here ! ✿
✿ Join Squidoo Here ! ✿
✿ Join Linked in Here ! ✿
✿ Join PunchTab Here ! ✿
✿ Join YouLikeHits Here ! ✿
✿ Join SEO Profile Here ! ✿
✿ Join Churp-Churp Here ! ✿
✿ Join IrfanKhairi.Affiliate Here ! ✿
✿ Join Harmony Affiliates Here ! ✿
Sign up HB!Affiliate to enjoy free gift!

<! ---- top y texto modificado ---- >

Powered by AutoBacklinks

<! ---- cuidado con esto ---- > <! ---- empieza adlink ---- > <! ---- empieza adlink ---- > <! ---- empieza adlink ---- >

Ads:

super nintendo

accesories sony

<! ---- termina adlink ---- > <! ---- termina adlink ---- > <! ---- termina adlink ---- > </!></!></!></!></!></!></!></!>

|

Silent Reader[s]

✿ Listen 4shared Here ! ✿ ✿ Listen Irondj.net Here ! ✿

Korang nampak kotak 1 2 3 4 di bahagian About Me di atas kanan sidebar blog ni? Ha, itu namanya Navigate-able Box. Kotak ni cuma untuk SIDEBAR SAHAJA tau! Sesiapa yang nak tutorial ni untuk menjimatkan ruang di sidebar blog korang tu, boleh ikut tutorial ini ye. Kalau tak nak, tak mengapa. Kalau nak, selamat mencuba.

Cara-caranya ialah :

1. Copy kod di bawah terlebih dahulu.

<style>

.adv2 ul{background:url(http://i.imgur.com/LsUfp.png);padding:5px;border:1px dashed #DDDDDD;text-align:center;width:250px;color:#555}

.adv2 p{padding:5px;text-align:left;width:250px;color:#555;}

a.tablo{-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

cursor:pointer;background:#ff3399;

width:20px;

text-decoration:none;

border:1px dashed #BBBBBB;

border-radius:33px;

color:#ffffff;

display:inline-block;

text-align:center;

}

a.tablo:hover{background:#ccc;color:#fff;}

 </style>

<div id="adv2" class="adv2">

<center><style>

.babo{background:url(http://www.snazzyspace.com/defaultimages/ff007f_pink.gif);padding:5px;border:3px solid #FF3399;text-align:center;width:250px;color:#555}

a.tablo{

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

cursor:pointer;background:#FF3399;

width:22px;

text-decoration:none;

border:3px solid #ff3399;

color:#ffffff;

box-shadow:1px 1px 3px #eee;

border-radius:33px;

display:inline-block;

text-align:center;

font:22px georgia;

}

a.tablo:hover{background:#F7E8DE;color:#fff;}

#wnsb img{max-width:245px;}

 </style>

<div class="babo">

<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >1</a>

<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >2</a>

<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >3</a>

<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >4</a> </div>

<div id="wnsb" style="width:250px;color:#ff3399; padding:5px;border:3px solid #FF3399;border-top:none;font:11px arial; letter-spacing:1px;">

Navigate around. Replace this with anything/your own words.

</div>

<div id="1" style="display: none;">

This navigation no.1 , remove this and replace with anything you want to be here.

</div>

<div id="2" style="display: none;">

You can also put cbox codes here. Just anything without messing the codes.

</div>

<div id="3" style="display: none;">

The third page

</div>

<div id="4" style="display: none;">

This forth page

</div>

</center>

2. Kemudian, paste kod tadi di http://htmledit.squarefree.com/. Edit kod tu ikut citarasa korang.

Panduan :

Menukar backgound header kotak

Menukar warna sidebar header kotak

Menukar warna bulatan 

Menukar warna sidebar bulatan

Menukar tulisan dan warna tulisan 

Masukkan kod widget yang ingin dimasukkan

*Kod warna boleh dapatkan di SINI.

3. Copy kod yang selesai diedit tu.

4. Buka blog > Layout > Add a Gadget > HTML/JavaScript > Paste kod > SAVE.

5. Preview blog terlebih dahulu, kemudian baru Save!

p/s : Sejujurnya, kod untuk tutorial ni memang susah. Akhirnya, siap juga tutorial ni. Kalau ada yang tak paham tu, jangan malu-malu untuk bertanya. Krdit to Wana.