Letak Facebook Share Button dalam Blog

Barangsiapa tidak mengenali jati dirinya,  dia  akan terjerumus.
Barangsiapa takut kepada Allah, dia akan selamat.
Barangsiapa belum pernah mencuba sesuatu,  dia akan tertipu.
Barangsiapa menentang kebenaran, dia pasti akan terkalahkan.
Barangsiapa mengetahui akan datangnya ajal, pasti akan berkurangan angan-angan dan cita-citanya.

Assalamualaikum anak muda. Kamu semua adalah harapan negara dan juga Agama. Jadikan hari ini lebih baik dari semalam, insyaAllah. Mulakan dengan senyuman ^^...Ok..Penggunaan button share dalam blog untuk web sosial facebook dapat memudahkan para pengunjung sesebuah blog berkongsi apa yang disukai kepada kawan-kawan di facebook.

Dengan hanya beberapa klik sahaja, ianya sudah siap sedia untuk dikongsi di profile facebook. selain itu penggunaan facebook share button ini dapat manarik lebih ramai pelawat ke sesebuah blog.

Contoh penggunaan facebook share button (selain blog ini) adalah di unwanted86 dan juga ohbest.

Cara untuk memasukkan facebook share button ini adalah seperti berikut.

1. Pilih jenis facebook share button yang anda kehendaki, kemudian copy code yang diberi.

Code untuk Full

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Code untuk Compact

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

2. Login akaun blogger, dari dashboard > design > edit HTML > Expand Widget Templates (Jangan lupa backup template)

3. Menggunakan fungsi find (ctrl + F), cari kod ini.

<div class='post-header-line-1'/>

jika tidak jumpa, cari kod ini.

<div class='post-header-line-1'>

4. Selepas itu paste kod share button (langkah 1) DIBAWAH kod yang anda cari (langkah 3)

5. Save template dan lihat hasilnya.

Al-Quran Panduan Hidup

"Serulah (manusia) kepada jalan Tuhanmu dengan hikmah dan palajaran yang baik dan bantahlah mereka dengan cara yang baik. Sesungguhnya Tuhanmu Dialah yang lebih mengetahui tentang siapa yang tersesat dari Jalan-Nya dan Dialah yang lebih mengetahui orang-orang yang mendapat petunjuk" (An Nahl : 125)

READ MORE >>

Letak Background Gambar Pada Blockquote

Assalamualaikum. Harap sahabat-sahabat semua sihat selalu ya. Teringat saya kepada satu surah dalam At Taubah ayat 71, Allah berfirman "Dan orang-orang yang beriman, lelaki dan perempuan, sebahagian mereka (adalah) menjadi penolong bagi sebahagian yang lain. Mereka menyuruh (mengerjakan) yang maruf, mencegah dari yang mungkar, mendirikan shalat, menunaikan zakat, dan mereka ta’at kepada Allah dan Rasul-Nya. Mereka akan diberi rahmat oleh Allah, sesungguhnya Allah Maha perkasa lagi Maha Bijaksana" 

Menurut Imam Said bin Jubair, "Jika seseorang tidak mahu mengajak kepada yang ma'ruf dan mencegah kemunkaran sehingga keadaan dirinya sempurna, maka tidak akan ada seorangpun yang akan mengajak kepada yang ma'ruf dan mencegah kemunkaran." Iman Malik mendukung pendapat Imam Said bin Jubair ini, dan beliau sendiri menambahkan, "Dan siapakah diantara kita yang lengkap dan sempurna?". Semoga kita digolongkan dalam kalangan orang-orang yang menyeru kepada kebaikan dan mencegah kemungkaran. InsyaAllah...untuk kali ini, tutorial ini akan menunjukkan pula bagaimana untuk meletakkan background bergambar bagi blockquote.

Contoh blockquote dengan background warna biasa


Contoh background dengan background bergambar




Kelebihan letak gambar sebagai background untuk blockquote adalah untuk menjadikan blockquote lebih cantik dan menarik. semestinya anda ingin berbeza berbanding hanya meletakkan background berwarna yang biasa bukan.:)

Untuk menukar kepada background bergambar, tutorialnya adalah mudah sahaja.

Cuma sebelum itu, anda hendaklah tahu gambar apa yang anda mahu letak sebagai background blockquote anda. Ini kerana pemilihan gambar bersaiz besar adalah kurang sesuai. Gambar yang paling sesuai untuk dijadikan background untuk adalah background blockquote adalah jenis seamless tile.

Anda boleh google untuk pelbagai jenis background jenis ini, selain itu disini ada 2 web yang nawarkan seamless tile background. Boleh pilih gambar yang dirasakan bersesuaian dengan warna tulisan pada blog anda.

Free Seamless Tiles 1
Free Seamless Tiles 2

Tutorial untuk menukar background blockquote ini adalah seperti berikut.

1. Login > dashboard > design > edit HTML

2. Backup template asal blog dengan download full template

3.Dengan menggunakan fungsi Find (ctrl + F), cari kod berikut

.post blockquote {

4. Kemudian di bawah kod tersebut, letakkan kod ini.

background-image:url(url gambar);

url gambar: tukarkan dengan url gambar yang anda hendak jadikan background. ( Tutorial url gambar : click here)

p/s: contoh kod adalah seperti berikut


5. Apabila selesai, save template dan lihat hasilnya.:)

READ MORE >>

Ubah Lebar Gambar Dalam Entri

Assalamualaikum sahabatku yang dikasihi Allah. Nabi SAW bersabda yang bermaksud: “Sesungguhnya Allah telah menugaskan satu malaikat berhubung peringkat kejadian anak dalam kandungan rahim ibunya dan keadaan akan dilalui, apabila air benih itu jatuh ke dalam rahim, malaikat bertanya: “Ya Tuhanku! Air benih ini akan disempurnakan kejadiannya atau tidak? Ya Tuhanku! Darah seketul ini akan disempurnakan kejadiannya atau tidak? Ya Tuhanku! Daging segumpal ini akan disempurnakan kejadiannya atau tidak? Maka apabila Allah hendak sempurnakan jadinya seseorang anak, malaikat bertanya lagi: Ya Tuhanku! Adakah ia seorang (yang bernasib) celaka atau (yang bernasib) bahagia? Lelakikah atau perempuan? Bagaimana pula keadaan rezekinya dan ajalnya? (Selepas malaikat mendapat jawabnya) maka ia menulis seperti diperintahkan sedang anak itu dalam perut ibunya.” (Hadis Riwayat Anas r.a)

Sebagai seorang yang beragama Islam, kita wajib mempercayai dan bersyukur terhadap kurniaan Allah. Ini kerana beriman kepada qada dan qadar merupakan rukun iman yang ke-6 dan menyangkalnya boleh mengakibatkan terbatalnya iman kita.

Sesungguhnya takdir manusia telah ditentukan sedang ia masih di dalam kandungan ibunya. Namun ini bukan alasan untuk umat Islam hanya berpeluk tubuh tanpa berusaha dan berdoa. Sebaliknya umat Islam harus menggunakan alasan ini untuk lebih kuat berusaha dan berdoa dalam mengecapi kejayaan dan kebahagiaan di dunia dan akhirat.

Ada entri dalam blog yang memerlukan anda untuk meletakkan gambar sebesar yang mungkin bergantung kepada ruang yang ada. Sebelum ini tutorial sudah menunjukkan bagaimana untuk memaparkan saiz yang maksimum untuk gambar yang telah diupload.


Untuk kali ini, tutorial akan menunjukkan bagaimana untuk menguruskan saiz gambar yang telah diupload. Ini kerana apabila gambar terlalu besar, maka ianya akan melebihi ruang yang sepatutnya untuk entri.

Terdapat 2 cara untuk tutorial ini.

Cara 1:
Masukkan width="200" ke dalam kod gambar.

Contoh:

<img src="URL GAMBAR" width="500" >

Nilai 200 boleh ditukar bergantung kepada lebar ruangan entri anda. Kebiasaannya lebar entri bagi ssebuah blog antara 400 hingga 500. Jadi anda boleh cuba mana yang sesuai.

Contoh gambar dengan width 400




Cara 2:
Masukkan width="95%" ke dalam kod gambar.

Contoh:

<img src="IMG URL" width="95%" >

Cara kedua mengunakan peratus untuk menentukan saiz gambar. Kalau anda memasukkan 95%, maka gambar yang terhasil akan mengambil lebar 95% daripada lebar sebenar ruangan entri anda.


contoh width 95%



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

p/s: height jarang dipertimbangkan kerana width yang lebih penting.

Selamat Mencuba.:)

READ MORE >>

Scroll Box untuk Widget

Assalamualaikum anak muda sayangkan Agama. Daripada Abdullah ibn Abbas ra, bahawa Rasulullah pernah berdoa: “Ya Allah aku berserah kepada engkau, aku beriman kepada engkau, aku bertawakal kepada engkau, aku kembali kepada engkau dan aku berjuang kerana engkau. Ya Allah, aku berlindung dengan kemuliaan dan kekuatan engkau, tiada Tuhan yang aku sembah melainkan engkau, janganlah aku disesatkan. Engkau yang hidup dan tidak akan mati sedangkan jin dan manusia semuanya akan mati (Muttafiqun alaih)”. (Riwayat al-Bukhari dan Muslim)

Doa adalah mustajab bagi orang mukmin. Oleh itu hendaklah berdoa kepada Allah dengan menyerahkan diri dengan penuh keimanan dan bertawakal kepadanya serta memuji sifat-sifatnya.

Setiap hamba Allah hendaklah meletakkan sepenuh harapan kepadanya supaya diterima doanya. ^^

Meletakkan sesuatu widget adalah bagus untuk blog. Walau bagaimanapun, adakalanya widget tersebut boleh 'menggangu' pandangan jika mengambil ruang yang agak besar untuk blog.

Salah satu penyelesaianya adalah dengan menjadikan widget tersebut boleh scroll. Ini secara tidak langsung dapat mengurangkan ruang yang digunakan dan menjadikan blog anda nampak lebih kemas.



Scroll box ini juga sesuai dengan apa sahaja widget yang anda mahu.:) Antara widget yang sesuai menggunakan scroll box ini adalah Mister Linky. Ini kerana jika jumlah pengunjung yang meletakkan url adalah banyak, ruang yang digunakan juga akan bertambah.

Secara ringkasnya, apa sahaja widget yang guna kod HTML boleh guna cara ini untuk jadikannya scroll.:)

Tutorial untuk membuat scroll box adalah seperti berikut..

1. Dari dashboard > design > add a gadget > HTML/javascript
(Jika anda sudah letakkan widget hanya buka HTML/javascript widget yang anda telah letak di blog)

2. Kemudian masukkan/ubah kod widget seperti berikut.

<div style="width:426px;height:100px;overflow:auto; ">

Letakkan kod widget anda disini

</div>

Note :
width: ubah mengikut lebar yang anda kehendaki
height: ubah mengikut tinggi yang anda kehendaki

3. Apabila selesai, save dan lihat hasilnya..

Senang bukan..:)

READ MORE >>

Letak Button Like Untuk Blog

Assalamualaikum. Sahabat-sahabat yang ku cintai kerana Allah. Ingatlah Dunia adalah tempat untuk manusia beramal dalam sekian waktu yang ditentukan dan bukanlah tempat untuk bermukim, bersenang lenang sepanjang hayat kerana kedudukan seseorang itu di dunia ini adalah seperti pedagang atau pengembara yang akan pulang ke kampung halaman tempat asalnya iaitu alam akhirat yang kekal abadi.

Untuk itu, setiap amal ada waktunya di mana apabila luputnya waktu sesuatu amal sudah tentu waktu itu tidak akan berulang kembali. Oleh itu orang yang mengerti nilai waktu akan menyedari bahawa waktu itu sebenarnya adalah umurnya yang jika habisnya suatu detik waktu maka berkuranglah jangka hayatnya dan berkurang pula tempoh amalnya. Selepas itu kekecewaan dan penyesalan tidak berguna lagi.

Oleh itu seseorang yang inginkan kebahagian yang kekal abadi hendaklah memelihara waktunya daripada terbuang dengan percuma atau sebelum tiba waktu yang menghalang seperti sibuk, sakit dan sebagainya. Manusia yang mengejar dan menghabiskan masa dengan mencari “sesuatu yang tidak diciptakan oleh Allah di dunia” (kebahagiaan yang hakiki) adalah manusia yang rugi dan perbuatan yang sia-sia.

Ok...Bagaimana anda hendak menentukan secara rawak berapa ramai yang suka blog anda.?.
Salah satu daripadanya adalah dengan meletakkan button 'like' untuk blog.

Jika tutorial meletakkan button 'like' dalam entri merujuk kepada pengunjung yang suka pada entri anda, meletakkan button 'like' ini pula akan merujuk kepada bilangan pengunjung yang suka blog anda secara keseluruhannya.

Anda boleh menggunakan kod yang diberi untuk diletakkan di sidebar blog anda



Tutorial untuk meletakkan button ini seperti di bawah.

1. Login akaun blogger, dari dashboard > design > add a gadget > HTML javascript

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript

<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border: medium none; overflow: hidden; width: 280px; height: 40px;" src="http://www.facebook.com/plugins/like.php?href=http://URL-ANDA.blogspot.com&layout=standard&show_faces=false&width=280&action=like&font=arial&colorscheme=light&height=40"></iframe>

note: Gantikan URL-ANDA dengan url blog anda

3. Save dan lihat hasilnya.:)

READ MORE >>

Tukar Warna Text Highlight

Assalamualaikum semua. Mulakan dengan senyum. Senyum tak perlu kata apa-apa, senyum ^^. Daripada Ibnu Mas’ud beliau berkata: “Rasulullah SAW bersabda: Wahai Muaz, adakah kamu tahu tafsir (maksud) La haula wala quwwata illa billah? Muaz menjawab: Allah dan rasul-Nya lebih mengetahui. Rasulullah SAW bersabda: La haula (tiada daya) dari menghindari maksiat kepada Allah melainkan dengan kekuatan Allah, wala quwwata (tiada kekuatan) atas mentaati Allah melainkan dengan pertolongan Allah SWT. Kemudian Rasulullah SAW menepuk bahu Muaz dan Baginda bersabda: “Demikianlah yang diberitahu oleh kekasihku Jibril daripada Tuhan.”

Sebenarnya apabila kita banyak menyebut Allah SWT atau berzikir mengingati-Nya sebanyak-banyaknya, ia mampu menjadi penyembuh, tetapi sekiranya kita banyak ingat kepada manusia ia boleh menjadi penyakit.

Berbalik kepada toturial kita. Apabila seseorang highlight text dalam blog kita, warna yang akan keluar adalah biru, itu default.

Tetapi ada juga tutorial yang membolehkan anda menukar warna text selection ini seperti contoh di bawah.

Default.


Selepas tukar warna text selection





Tutorial untuk tukar warna text selection adalah seperti berikut.


1. Dari dashboard > design > edit HTML

2. Dengan menggunakan fungsi Find, cari code body {

3. Selepas jumpa code body {, pastekan kod di bawah di atas body {

::-moz-selection {

background: #CC3399;

color: #ffffff;

}

Contoh:


Note: Anda boleh menukar warna text highlight dengan menggantikan warna kod yang dihighlight di atas.

4. Save dan lihat hasilnya..:)


Pssst.. Mencari kod warna.?
Klik di sini

READ MORE >>

Cara Buat Bubble Cursor Pada Blog

Assalamualaikum. Ucapkan syukur kita kepada Allah setiap masa. Kerana manusia yang tidak bersyukur itu adalah manusia yang sombong. Hendaklah sentiasa berusaha menghindarkan diri daripada semua sifat-sifat yang buruk dan keji serta memperbaiki kualiti diri dengan menambahkan amal ibadat dan mengamalkan sifat-sifat mulia dari masa ke semasa. InsyaAllah ^^.

Cursor untuk blog anda memang boleh dipelbagaikan. Samada untuk menukar icon cursor sahaja, atau menjadikannya sparkle. Dan juga tidak ketinggalan untuk menjadikan cursor anda menghasilkan bubbles.

Contoh cursor bubble yang menarik ini boleh di lihat di test blog ini.

Ikuti tutorial mudah di bawah untuk letakkan bubble cursor di blog anda.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Copy code bubble cursor di bawah, kemudian paste di ruangan HTML/javascript.
(code ini bubble warna biru. Untuk tukar warna bubble, sila ikuti tutorial sehingga habis)

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/bubblecursor.js"></script><script type="text/javascript">

// <![CDATA[

var colours=new Array("#0066FF", "#0066FF", "#0066FF", "#0066FF", "#0066FF"); // colours for top, right, bottom and left borders and background of bubbles

var bubbles=100; // maximum number of bubbles on screen

/****************************

* JavaScript Bubble Cursor *

* (c) 2010 mf2fm web-design *

* http://www.mf2fm.com/rv *

* DON'T EDIT BELOW THIS BOX *

****************************/

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var bubb=new Array();

var bubbx=new Array();

var bubby=new Array();

var bubbs=new Array();

window.onload=function() { if (document.getElementById) {

var rats, div;

for (var i=0; i<bubbles; i++) {

rats=createDiv("3px", "3px");

rats.style.visibility="hidden";

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="1px";

div.left="0px";

div.bottom="1px";

div.right="0px";

div.borderLeft="1px solid "+colours[3];

div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="0px";

div.left="1px";

div.right="1px";

div.bottom="0px"

div.borderTop="1px solid "+colours[0];

div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.left="1px";

div.right="1px";

div.bottom="1px";

div.top="1px";

div.backgroundColor=colours[4];

div.opacity=0.5;

if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);

bubb[i]=rats.style;

}

set_scroll();

set_width();

bubble();

}}

function bubble() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<bubbles; c++) if (!bubby[c]) {

bubb[c].left=(bubbx[c]=x)+"px";

bubb[c].top=(bubby[c]=y)+"px";

bubb[c].width="3px";

bubb[c].height="3px"

bubb[c].visibility="visible";

bubbs[c]=3;

break;

}

}

for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

setTimeout("bubble()", 40);

}

function update_bubb(i) {

if (bubby[i]) {

bubby[i]-=bubbs[i]/2+i%2;

bubbx[i]+=(i%5-2)/5;

if (bubby[i]>sdown && bubbx[i]>0) {

if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

bubb[i].width=bubbs[i]+"px";

bubb[i].height=bubbs[i]+"px";

}

bubb[i].top=bubby[i]+"px";

bubb[i].left=bubbx[i]+"px";

}

else {

bubb[i].visibility="hidden";

bubby[i]=0;

return;

}

}

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sleft;

x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;

function set_width() {

if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (typeof(self.innerHeight)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

else {

swide=800;

shigh=600;

}

}

window.onscroll=set_scroll;

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height;

div.style.width=width;

div.style.overflow="hidden";

return (div);

}

// ]]>

</script>

3. Save dan lihat hasilnya.:)



Note:
Bagi yang hendak tukar bubble dengan warna yang anda kehendaki selain 4 warna di atas, caranya.

Cari kod di bawah dari code yang anda paste tadi, kemudian tukarkan code warna seperti yang dihighlight


Hendak cari kod warna.?
Rujuk code warna Klik sini

Selamat Mencuba.:)

READ MORE >>

Tutorial Gerakkan Title Blog

Assalamualaikum sahabat-sahabat. Semoga ceria-ceria selalu. Rasulullah saw telah bersabda yang maksudnya: “Mana-mana lelaki tidak akan berdua-duaan (berkhalwat) dengan perempuan, melainkan pasti syaitan akan menjadi yang ketiga”. (at-Tirmidzi)

Perlu diingat syaitan merupakan makhluk yang bijak (menghasut). Selagi ada kesempatan yang terluang, ia akan menggoda manusia untuk melakukan perbuatan yang terkutuk.

Oleh itu kita hendaklah sentiasa berwaspada. Jangan sekali-kali menghampiri pintu yang menghumban ke neraka seperti melakukan khalwat yang akhirnya menjebakkan diri kepada zina dan sebagainya.

OK..Title blog secara default adalah dalam keadaan statik. Anda boleh tukarkan title blog anda dengan mudah dan juga anda boleh membuatkan ianya bergerak dari kanan ke kiri.



Contoh title bergerak di test blog.

Tutorial untuk buatkan title blog bergerak adalah seperti berikut.


1. Dari dashboard > Design > Add a gadget > Html/Javascript

2. Copy dan paste code berikut dalam ruangan HTML/Javascript

<script language=javascript>

msg = "Title Blog Anda";

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 'Title Blog Anda' dengan apa sahaja yang anda mahu.

3. Save dan lihat hasilnya.:)

READ MORE >>