Tutorial : Widget Popular Posts Warna-Warni

Assalamualaikum (^___^)v

*kalau tak jawab dosa, kalau jawab AWESOME*

Atas permintaan beberapa orang beLogger, jadi saya buatkan tutorial ini.. Tutorial apakah? Bagaimana untuk membuat widget ini -->

PROSEDUR 1

• Dashboard --> Layout --> Add a Gadget --> Popular Posts

• Tick pada "All the Time"
• Untick "Image Thumbnail" and "Snippet"
• Displat post ikut suka korang-korang nak letak berapa

• Save!

PROSEDUR 2

• Dashboard --> Template --> Edit HTML
• CTRL + F utk buka kotak search

• Search for this code

]]></b:skin>

• Dah jumpa? Copy pula code di bawah ini & pastekan DIATAS code yg korang-korang search tadi

/* Rainbow Popular Post by http://hzndi.blogspot.com*/#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}#PopularPosts1 ul li:first-child + li + li:after{content:"3"}#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}#PopularPosts1 ul li:first-child + li:after{content:"2"}#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}#PopularPosts1 ul li:first-child:after{content:"1"}#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

• Preview dulu
• Kalau dah jadi & puas hati, sila SAVE!

Harap korang-korang faham & dapat membantu mereka-mereka yg bertanya.. Ada apa-apa lagi, sila lar request.. InsyaAllah, akan membantu kalau boleh.. Selamat mencuba!! (^___^)v

Happy beLogging from beLOg FakhRuru

- lebih AWESOME daripada biasa -

(^___^)v

Tweet

---

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

---

Tutorial : Gabungkan Widget/Gadget

Assalamualaikum (^__^)v

*kalau tak jawab dosa, kalau jawab AWESOME*

Rasanya dah lama gegiler beLog FakhRuru tak buat segmen tutorial hias-hias beLog utk korang-korang semua.. Huhuhu~ Nie pun dapat request daripada beLogger Kecik - Mieza Suhaini.. Jadi mOod tutorial hias-hias beLog datang balik.. Thanks to u! Hahaha!! (^__^)v

Hah! Nampak gambar kat atas tue? Kali ini saya nak tunjukkan korang-korang macam mana nak gabungkan widget/gadget seperti kat ats tue.. Dapat lar jimatkan ruang di sedebar korang-korang nanti (^__^)v

PROSEDUR

• Dashboard --> Layout --> Add a Gadget --> Edit HTML
• Copy code di bawah --> pastekan di ruang Edit HTML --> Save

<style type="text/css">
.tabber {
padding: 0px !important;
border: 0 solid #bbb !important;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px; /*--Pull tab down 1px--*/
overflow: hidden;
position: relative;
background: #ffffff;
cursor:pointer;
}
html .tabber h2.active {
background: #fff;
border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #fffffff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3 });
});
</script>
<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">tabber widget</a></p></div>

• Kemudian, letakkan kotak Edit HTML korang-korang tue di bawah Widget/Gadget yg korang-korang nak gabungkan.. Sebagai contoh seperti saya:-

• PURPLE --> tukar dgn warna background yg korang-korang nak
• MERAH --> berapa bilangan Gadget/Widget yg korang-korang nak gabungkan
• Preview dulu & dgn automatiknya Widget/Gadget korang-korang akan bergabung bergantung kpd bilangan yg korang-korang letak lar
• Save bila dah berpuas hati (^__^)v

Senang kan? Selamat Mencuba drp beLog FakhRuru

- lebih AWESOME daripada biasa -

...ARIOS AMIGOS...

(^___^)v

Tweet

---

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

---

Freebies : Sweet Couple Untuk Chatbox/Shoutbox

Assalamualaikum (^__^)v

*kalau tak jawab dosa, kalau jawab AWESOME*

Ingat tak dulu-dulu saya ada sediakan freebies burung hantu? Kalau tak ingat, sila lar terjah sini Freebies Burung Hantu Untuk Chatbox/Shoutbox. Ok, kali ini saya sediakan lagi satu freebies, still lagi utk Chatbox/Shoutbox, but yg lebih tomei-tomei.. SWEET COUPLE!! (^__^)v

Oh My Gucci! Sangat-sangat sweet!! (^__^)v  Tunggu apa lagi! Take it & put in your beLog! Bukan senang nak dapat freebies tomei-tomei free daripada beLog FakhRuru.. Hehehe!! (^__^)v

http://i.imgur.com/F4Swa.png

http://i.imgur.com/lSdbJ.png

http://i.imgur.com/RJYDc.png

http://i.imgur.com/DQ1KW.png

http://i.imgur.com/g7Dt4.png

Done? Sila tinggalkan link beLog anda.. Boleh lar saya nek terjah menerjah nanti (^__^)v Banyak lagi freebies yg disediakan.. Semuanya adalah di SINI.. Selamat b'beLogging!!

...ARIOS AMIGOS...

(^__^)v

Tweet

---

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

---

Tutorial : Tukar Cursor Blog (Version 2)

Assalamualaikum (^__^)v

*kalau tak jawab dosa, kalau jawab AWESOME*

Dalam Version 2 nie, korang-korang tak perlu nak copy paste seluruh code HTML cursor.. Tetapi hanya cari URL Icon Cursor yg korang-korang nak sahaja.. Bagaimana? Lihat di bawah -->

PROSEDUR

• Dashboard --> Template --> Edit HTML
• Tick pada kotak Expand Widget Templates
• CTRL + F dan search for this code -->

</head>

• Dah jumpa? Copy pulak code di bawah ini dan pastekan DI ATAS code </head> yg korang-korang cari tadi

<style type='text/css'>body, a, a:hover {cursor: url(URL ICON CURSOR), progress;}</style>

• Gantikann perkataan MERAH tue dengan URL Icon Cursor yg korang-korang nak
• Preview dulu & Save kalau korang-korang dah berpuas hati

....................

See! Simple ajer kan.. Nak icon cursor macam beLog FakhRuru punya? Terjah sini Freebies Icon Cursor.. Itu sahaja Tutorial Hias-Hias beLog dari FakhRuru.. Selamat Maju Jaya! (^__^)v

...ARIOS AMIGOS...

(^__^)v

Tweet

---

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

---

Tutorial : Tukar Button Home, Newer & Older Post

Assalamualaikum (^__^)v

*kalau tak jawab dosa, kalau jawab AWESOME*

Dah bosan dengan button Home, Newer & Older yg lama? Ingin tukar kepada yg lebih tomei-tomei? Bagaimana caranya? Ajom beLog FakhRuru membantu anda! (^__^)v

TUKAR BUTTON HOME

• Dashboard --> Template --> Edit HTML
• Tick pada kotak Expand Widget Templates
• Tekan CTRL + F dan search for this code

expr:href='data:blog.homepageUrl'><data:homeMsg/>

• Gantikan code MERAH dengan code di bawah:

<img src="URL ICON HOME"/>

• Letak URL ICON HOME yg korang-korang nak
• Preview dan Save kalau dah jadi

TUKAR BUTTON NEWER PAGE

• Dashboard --> Template --> Edit HTML
• Tick pada kotak Expand Widget Templates
• Tekan CTRL + F dan search for this code:

<data:newerPageTitle/>

• Gantikan code MERAH yg dicari tadi dengan code dibawah:

<img src="URL ICON NEWER"/>

• Letak URL ICON NEWER yg korang-korang nak
• Preview dan Save kalau dah jadi

TUKAR BUTTON OLDER PAGE

• Dashboard --> Template --> Edit HTML
• Tick pada kotak Expand Widget Templates
• Tekan CTRL + F dan search for this code:

<data:olderPageTitle/>

• Gantikan code MERAH yg dicari tadi dengan code di bawah:

<img src="URL ICON OLDER"/>

• Letak URL ICON OLDER yg korang-korang nak
• Preview dan Save kalau dah jadi

....................

Kalau korang-korang perasan.. Step 1 - 3 tue sama jer utk semua button.. Just korang-korang cari code-code yg tertentu aja.. Saya juga ada sediakan Freebies Home, Newer, Older Button.. Terjah lar kalau nak (^__^)v

Dah berpuas hati? dah cantik beLog korang-korang? So, apa tunggu lagi.. Tinggalkan lar link beLog korang-korang untuk saya bersiar-siar (^__^)v

...ARIOS AMIGOS...

(^__^)v

Tweet

---

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

---

Tutorial : Letak Greeting Text di Setiap Post

Assalamualaikum (^__^)v

*kalau tak jawab dosa, kalau jawab AWESOME*

Untuk menambah kecantikan + keayuan post beLog korang-korang, ajom kita letak "Greeting Text" tomei-tomei.. Bagaimana? Scroll di bawah -->

PROSEDUR

• Dashboard --> Template --> Edit HTML
• Tick pada kotak Expand Widget Templates
• Tekan CTRL + F and search for this code -->

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

• Dah jumpa? Then copy pula code di bawah nie & pastekan di bahagian BAWAH code yg korang-korang search tadi

<center><img src='URL GREETING TEXT'/></center>

• Jangan lupa, gantikan perkataan MERAH tue dengan URL Greeting Text/Image korang-korang
• Preview dulu.. Dah cun melecun, barulah korang-korang Save

.

.

.

• Tak ada Greeting Text tomei-tomei? Nak beLog FakhRuru bantu? Bantu beLog FakhRuru dulu dengan klik --> SINI
• Ucapan terima kasih, beLog FakhRuru hadiahkan korang-korang dengan Greeting Text tomei-tomei di sini --> Freebies : Greeting Text

...ARIOS AMIGOS...

(^__^)v

Tweet

---

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

---

Tutorial : Tukar Cursor Blog (Version 1)

Assalamua'laikum (^__^)v

*kalau tak jawab dosa, kalau jawab AWESOME*

Korang-korang nak tukar cursor beLog korang-korang bagi cun melecun macam beLog Fakhruru? Ajom! (^__^)v

PROSEDUR

• Dashboard --> Design/Template --> Edit HTML
• Proceed and tick pada kotak Expand Widget Templates
• CTRL + F and search for this code

</head>

• Dah? Sekarang kite cari code utk cursor korang-korang.. Sila click --> SINI

.

.

.

• Eh! Silap! Silap! Click SINI baru betul.. Thanks yek kerna korang-korang tolong click yg first tue dulu (^__^)v
• Copy lar mana-mana code cursor kat website tue yg korang-korang suka
• Then pastekan code cursor tue DI ATAS code </head> yg korang-korang cari tadi
• Save & lihatlah hasilnya

Senang jer kan? So, selamat mencuba jaya menchantekkan beLog korang-korang daripada Hias-Hias beLog Fakhruru...

...ARIOS AMIGOS...

(^__^)v

Tweet

---

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

---

Tutorial : Perkataan Ikut Cursor

Assalamualaikum (^__^)v

*kalau tak jawab dosa, kalau jawab AWESOME*

Bertemu lagi kita dalam segmen Hias-Hias beLog, setelah sekian lama menyepi.. Wahhh! Dah lama giler kan saya tak buat tutorial beLog utk korang-korang semua.. Mesti ada yang ternanti-nanti, kan? Bajet beLog popular pulak (-.-)"  InsyaAllah, satu hari nanti..

So, today post saya nak ajar korang-korang sesuatu yg special & menarik sikit drp biasa.. Before tue, click sini dulu utk tahu apa yg menariknya SINI & SINI.. Well, nampak gambar di bawah -->

Wow! Menarik tak? Mesti korang-korang tak sabar nak buat jugak, kan.. Hohoho!! Saya sudah! Korang-korang bila lagi? Ajom, sekarang!! (^__^)v

PROSEDUR

• Dashboard --> Design/Layout --> Add a Gadget --> HTML/JavaScript
• Copy code di bawah & pastekan dalam ruang HTML/JavaScript

<style type="text/css">

/* Circle Text Styles */

#outerCircleText {

font-style: normal;

font-weight: normal;

font-family: 'comic sans';

color: #FF0080;

position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}

#outerCircleText div {position: relative;}

#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}

</style>

<script type="text/javascript">

;(function(){

var msg = "PERKATAAN ANDA";

var size = 24;

var circleY = 0.75; var circleX = 2;

var letter_spacing = 5;

var diameter = 10;

var rotation = 0.4;

var speed = 0.2;

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');

var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,

ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],

o = document.createElement('div'), oi = document.createElement('div'),

b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){

e = e || window.event;

ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position

xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position

},

makecircle = function(){ // rotation/positioning

if(init.nopy){

o.style.top = (b || document.body).scrollTop + 'px';

o.style.left = (b || document.body).scrollLeft + 'px';

};

currStep -= rotation;

for (var d, i = n; i > -1; --i){ // makes the circle

d = document.getElementById('iemsg' + i).style;

d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';

d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';

};

},

drag = function(){ // makes the resistance

y[0] = Y[0] += (ymouse - Y[0]) * speed;

x[0] = X[0] += (xmouse - 20 - X[0]) * speed;

for (var i = n; i > 0; --i){

y[i] = Y[i] += (y[i-1] - Y[i]) * speed;

x[i] = X[i] += (x[i-1] - X[i]) * speed;

};

makecircle();

},

init = function(){ // appends message divs, & sets initial values for positioning arrays

if(!isNaN(window.pageYOffset)){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

} else init.nopy = true;

for (var d, i = n; i > -1; --i){

d = document.createElement('div'); d.id = 'iemsg' + i;

d.style.height = d.style.width = a + 'px';

d.appendChild(document.createTextNode(msg[i]));

oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;

};

o.appendChild(oi); document.body.appendChild(o);

setInterval(drag, 25);

},

ascroll = function(){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

window.removeEventListener('scroll', ascroll, false);

};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){

window.addEventListener('load', init, false);

document.addEventListener('mouseover', mouse, false);

document.addEventListener('mousemove', mouse, false);

if (/Apple/.test(navigator.vendor))

window.addEventListener('scroll', ascroll, false);

}

else if (window.attachEvent){

window.attachEvent('onload', init);

document.attachEvent('onmousemove', mouse);

};

})();

</script>

• Gantikan 'PERKATAAN ANDA' itu dgn perkataan yg korang-korang nak
• Kalau korang-korang nak tukar font tulisan, tukar di PERKATAAN WARNA HIJAU

Beberapa jenis contoh font

• Kalau nak tukar warna pula, tukar di PERKATAAN WARNA PURPLE
• Preview dulu, kalau dah ok baru Save
• Lihatlah hasilnya di beLog korang-korang (^__^)v

See! TERamat senang jer, kan... So, selamat mencuba! Dah jadi, tinggal lar komen, boleh lar saya terjah beLog korang-korang juga.. Arios, amigos!!

\(^__^)/

Tweet

---

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

---

Please Do Like Page beLog FakhRuru

Assalamua'laikum (^__^)v

*kalau tak jawab dosa, kalau jawab AWESOME*

Hye my readers! How was your day? Me? Well, just hari yg biasa bukannya luar biasa sebab tidak lebih hangat daripada biasa sehingga menjadikan harinya biasa-biasa sahaja.. Erkk!! (-.-)"  Okay! Sila abaikan segala keconfussing-san korang-korang *a new word of the day*

Post kali ini just nak mempromosikan PAGE beLog FakhRuru di facebook.. Well, saje jer nak menambahkan + meramaikan + memeriahkan + menyemakkan lagi bilangan ahli yg like.. PAGE beLog FakhRuru nie kalau tak silap dah lama dah wujud.. Tapi just sekarang baru nak promosikan.. Daaaa~ (-.-)"

Saya tahu, korang-korang semua KONPEM + WAJIB ada facebook, kan.. Just log in & like PAGE beLog FakhRuru jer.. How? -->

Nampak kan PAGE beLog FakhRuru kat sidebar nie

Just move your cursor & click LIKE (^__^)v

OR

just click this link --> PAGE beLog FakhRuru

& then click LIKE (^__^)v

See! Just simple and easy way, right! Pleaseeeeeee~

.

.

.

Tak berkesan? How about this?

.

.

.

Still nope? And this...

Kalau tak juga, tak tahu lar nak buat macam mana lagi.. Dah bajet tomey-tomey dah muka tue.. Ahakzz!! (-.-)"  Tak rugi mana pun, dalam beberapa saat jer pun.. Nanti senang lar korang-korang tengok & dapat up to date beLog FakhRuru, kan~ (^__^)v  If you guys do like, ...

(^___^)v

Tweet

---

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

---

Tutorial : How to Center the Post Title

Assalamua'laikum (^__^)v

*kalau tak jawab dosa, kalau jawab awesome*

Sedang dlm proses mengedit + mencantikkan beLog seseorang, tetiba t'perasan yg post title dia tak center.. Jadi cuba lar menyenterkannya *bahasa kamus dewan mana yg diambil nie*  & secara automatiknya t'lintas di fikiran utk buat tutorial ini.. Hehehe~ (^___^)v

PROSEDUR

• Dashboard --> Design/Template --> Edit HTML
• Expand Widget by pressing CTRL + F
• Search for this code sampai jumpa (^__^)v

h3.post-title {

• Dah jumpa? Copy pulak code di bawah ini & pastekan di bawah code h3.post-title { tadi

text-align:center;

• Preview dulu.. Kalau dah jadi, save jer lar
• That's all.. Simple mimple jer kan (^___^)v

"WHAT DOESN'T KILL YOU MAKE YOU STRONGER"

P/S : terasa mcm d'pergunakan apabila menyayangi seseorang...

Tweet

---

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

---

Tutorial : Tukar Font Page Kepada Century Gothic

Assalamualaikum (^__^)v

*kalau tak jawab dosa, kalau jawab sayang*

Setelah berkurun lama Hias-Hias beLog berehat, kembali semula dgn muka tak malunya.. Hohoho~ =P  Kali ini nak tunjuk kat korang-korang camne nak tukar font page kepada font CENTURY GOTHIC.. Macam mana pula font Century Gothic tue? Macam yg korang-korang tgh nampak sekarang nie lar, dpn mata korang-korang jer kot.. Tak nampak? Pendek umur =P

Kalau nak senang, memang pergi dekat Customize Template tue lar.. Tapi macam saya, tak ada font Century Gothic kat situ.. Jadi, terpaksa lar buat cara yg lebih complicated (_ _!!

PROSEDUR

• Dashboard --> Template --> Edit HTML
• Tekan CTRL + F serentak & try search for this word

"Page Text"

• Korang-korang akan jumpa code seperti ini

<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font"
default="normal normal 15px Century Gothic, Century Gothic, Century Gothic, Century Gothic, Century Gothic" value="normal normal 16px Century Gothic, Century Gothic, Century Gothic"/>

• Kalau korang-korang tak jumpa, cari sendiri lar code yg serupa seperti itu.. Bahagian-bahagian atas sekali jer, tak perlu nak scroll sampai ke bawah (^__^)v
• Dah jumpa, korang-korang akan nampak yg warna MERAH tue ada pelbagai jenis font.. Just change semua kpd Century Gothic
• Kalau nak adjust saiz dkt post, just tukar yg warna PURPLE tue aja..
• Dah siap semua, preview lar dulu
• Kalau dah jadi, baru save.. Kalau tak, cuba lar lagi sampai jadi.. Kalau tak juga, cari lar tutorial lain.. Hahahaha!! =P

"YOU CAN HAVE EVERYTHING IF YOU PUT EFFORTS ON IT"

P/S : saya akan cuba selagi saya mampu menghadapinya~

Tweet

---

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

---

Tutorial : Blog ID

Assalamua'laikum (^__^)v

*kalau tak jawab dosa, kalau jawab sayang*

Segmen tutorial kembali lagi.. Terima kasih! Terima kasih! Kerana korang-korang masih lagi menapak di beLog saya *bajet beLog popular pulak* (_ _!!  Ok, sila angat bakul sendiri.. Hohoho~

Tutorial kali ini ringkas + simple + senang tapi padat --> untuk mengenali beLog ID korang-korang.. beLog ID nie penting bagi sesetengah tutorial untuk mencantikkan beLog korang-korang.. So, lebih baik utk korang-korang tahu bagaimana utk mengenalpasti beLog ID korang-korang sendiri (^__^)v

PROSEDUR

• Korang-korang pergi di list post beLog korang-korang
• Di bahagian alamat URL korang-korang akan ada seperti ini :-

• Kan di situ dah siap tulis blogID=(19 digit).. Kalau korang-korang tak nampak jugak, sila cucuk biji mata korang-korang dgn garpu
• Kalau tutorial mana-mana memerlukan beLog ID, just copy 19 DIGIT itu sahaja
• Maaf, beLog ID saya terpaksa dirahsiakan utk keselamatan negara.. Ahakz!! *annoying sound*
• Sekian (^__^)v

"HANYA DIRI KITA YG MENENTUKAN SIAPA KITA"

P/S : cuti lama-lama nie tak tau pulak nak buat apa (_ _!!

Tweet

---

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

---

Tutorial : Hilangkan Navbar Pada Blog

Assalamua'laikum (^__^)v

*kalau tak jawab dosa, kalau jawab sayang*

Kali ini kita b'sesi tutorial pulak yek.. Selalu jer nak b'tutorial, macam tak menarik pulak. Jadi kita selang selikan lar dgn post-post yg tidak b'faedah tapi b'makna.. Hohoho~ (^__^)v  Tutorial kali ini simple jer, nak buang Navbar dekat beLog.. Navbar itu ape?

Selalunya benda alah ini ada kat atas beLog korang-korang.. Actually, ok jer ada benda alah ini.. Tapi kalau korang-korang dah ada button "Follow" & "Dashboard" kat atas tue seperti di beLog saya, benda alah ini sangat-sangat menggangu.. Ada 2 cara nak buang Navbar nie.. Pilih lar yg mana b'fungsi dgn beLog anda.. Jom kita hapuskan ia!!! (^__^)v

PROSEDUR 1

• Dashboard --> Template/Design --> Edit HTML
• Tick pada Expand Widget Templates
• CTRL + F and search for this code

Navbar

• Mungkin korang-korang akan jumpa "Navbar" sahaja atau "Navbar-iframe"
• Tukar "Display: block" kepada "Display: none" seperti ini :-

#navbar-iframe {

display: none ;

• Preview/Save & lihatlah hasilnya (^__^)v

PROSEDUR 2

• Prosedur nie kalau korang-korang tak dapat nak search code "Navbar" tue
• CTRL + F and search for this code :-

body {

• Dah jumpa? Then copy pulak code di bawah ini & pastekan di atas code "body {" yg korang-korang search tadi :-

#navbar-iframe {
display: none ;

• Maka, code korang-korang akan menjadi seperti ini :-

#navbar-iframe {

display: none ;

}

body {

font: $(body.font);

color: $(body.text.color);

background: $(body.background);

}

• Preview/Save & lihatlah hasilnya (^__^)v

*********************

"DON'T THINK TOO MUCH BECAUSE YOU CAN BE MAD"

P/S : egomu t'lalu tinggi, baiklah saya menyerah utk kebaikan b'sama~

Tweet

---

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

---

Tutorial : Letak Chatbox (Cbox) di Blog

Salam 1 Malaysia (^__^)v

Owh! Sudah lama tuan empunya beLog tomei-tomei nie tidak membuat segmen tutorial.. Mesti ada yg t'tunggu-tunggu kan? Kan? Jangan malu-malu buaya nak mengaku okay.. Rahsia antara kita sahaja.. Hohoho~ *macam mana buaya malu?* (_ _!!

Rasanya semua para beLogger dah tahu yg FREE SHOUTMIX sudah tiada.. Huhuhu~ *dengan muka tidak b'puas hati* >.<  Sesiapa yg sudi bayar, silalah bayar.. Saya? No wayyyy!! Kedekut nak mampus! Hahahha!! (^__^)v  So, bertukar kpd Cbox pulak *semua orang nak benda free kan* XD

Take a look the tutorial guys! Saya hanya ajar yg basic saja okay! (^__^)v

PROSEDUR

• Buka dulu CBOX punya website --> CBOX
• Klik pada SIGN UP di atas sekali
• Isilah info-info semua yg diperlukan

• Then, tekan lar CREATE MY CBOX!
• Dah? So, korang just SIGN IN dgn masukkan password tadi
• So, kalau korang-korang nak mencantikkan lagi Cbox korang-korang, klik lar LOOK & FEEL atas tue.. Pandai-pandai lar korang-korang explore sendiri yek.. Saya ajar basic jer (^__^)v
• Dah siap semua korang-korang edit ala bagai, klik PUBLISH
• Copy lar code yg disediakan tue & pastekan di beLog korang-korang
• Macam mana pulak nak letak Cbox nie di beLog? Sila klik SINI
• Tamat sudah~ (^__^)v

********************

"GIVE AND TAKE"

P/S : mengidam pizza lar pulak (_ _!!

Tweet

---

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

---

Tutorial : Letak Button Back To Top

Salam 1 Malaysia (^__^)v

Saya dah tak tahu nak update ape, jadi saya hadiahkan korang-korang sempena cuti sekolah ini dgn seketul tutorial biasa-biasa tapi bakal membombastikkan kan beLog korang-korang.. Hohoho~ XD

PROSEDUR

• Dashboard --> Design/Layout --> Add a Gadget --> HTML/JavaScript
• Copy & pastekan code di bawah dalam ruangan HTML/JavaScript

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="URL IMAGE" /></a>

• JANGAN LUPA masukkan URL gambar korang-korang dekat perkataan bold merah itu
• Kalau korang-korang sangat lar malas nak cari gambar, saya hadiahkan korang-korang dgn button comei seperti di bawah ini.. Pilih! Pilih! Free of charge! (^__^)v

http://i.imgur.com/l9v2R.png

http://i.imgur.com/8K7PH.png

http://i.imgur.com/zqbf4.png

http://i.imgur.com/DLyC3.png

http://i.imgur.com/xVkwg.png

http://i.imgur.com/Lmq23.png

• Sudah? So save & lihatlah hasilnya (^__^)v

..............................................

Senang jer kan? Tak sampai 5 minit pun dah boleh siap.. Kalau dah pilih-pilih tue, roger-roger lar saya. Boleh saya terjah beLog korang-korang jugak, nak tengok cantik tak button back to top saya ini (^__^)v

"CURIOSITY KILLS"

P/S : ego manusia sangatlah tinggi~

Tweet

---

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

---

Tutorial : Buat Page Untuk Menu Tab

Salam Tutorial (^__^)v

Excited t'lebih sekajap sebab dapat request tutorial drp pelawat beLog FakhRuru yg cute miut macam tuan punya beLog (_ _!!  Request drp Arefiq yg b'bunyi :-

"salam , nak tanye , nak buat list tutorial2 camne??..pas2 bile org lain tekan link pergi ke list tersebut..tekan link pergi tutorial,dah tahu...cume nak buat list jew...tolong erk..please.."

Actually pada mulanya kurang paham sgt apa yg tuan empunya request nie nak.. Selepas dikaji dibedah dicuci ayat tersebut dgn teliti, rasanya si Arefiq nie nak tahu macam mana nak buat benda alah nie kot :-

Benda alah ini dikenali sbg Page Menu.. Betul tak Arefiq? Betul tak? Kalau tak betul pun, saya tetap nak buat tutorial ini jugak.. Hahaha!! *gelak jahat* XD

PROSEDUR

• Memandangkan saya menggunakan Blogger's New Look, korang-korang pergi ke Dashboard --> Post List --> Page
• New Page --> Blank Page

• Nanti akan keluar macam ini pulak :-

• So, korang-korang letak lar nama page & list-list tutorial atau apa sahaja list yg korang-korang nak.. Yg penting, jgn lupa linkkan list-list tersebut, okay..
• Dah siap semua, just preview dulu or savekan terus
• Kalau nanti nak tambah list lagi, korang-korang just pergi balik dekat page tue & klik EDIT
• Tamat sudah tutorial kali ini (^__^)v

.....................................................

Selamat mencuba korang-korang semua.. Kepada si Arefiq, kalau tutorial ini tidak menepati citarasa anda, sila lar tinggalkan jejak okay.. Hehehe~ (^__^)v

"MALU BERTANYA SESAT JALAN"

P/S : mencuba utk tidak terlalu b'emosi XD

Tweet

---

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

---

Tutorial : Meletakkan Reply to Comment

Salam beLogger (^__^)v

Tutorial kali ini saya nak ajar korang-korang utk letak icon Reply To Comment yg cute miut macam saya (_ _!!  Senang sikit kan, Contoh comment nie saya khas nak reply to somebody-somebody, klik jer button Reply to Comment utk somebody-somebody (^__^)v

Tapi mungkin ada yg tak paham benda apa lar icon Reply to Comment nie? Dekat mana letakknya? So, sebagai contoh di beLog saya yg cute miut macam saya nie :-

PROSEDUR

• Dashboard --> Design/Template --> Edit HTML --> tick Expand Widget Template
• CTRL + F and search for this code :-

<b:include data='comment' name='commentDeleteIcon'/>

• Dah? Copy pulak code di bawah ini dan pastekan di BAWAH code yg korang-korang search tadi

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>Reply to Comment</a></span>

• Jangan save lagi.! Gantikan beLog ID dengan beLog ID anda (penting)
• Korang-korang dah boleh savekan dah.. Tapi.! *ada tapi-tapi lar pulak*  Kekalau korang-korang nak gantikan yg WARNA UNGU tue dgn icon cute miut macam saya, gantikan saja yg WARNA UNGU tue dgn code di bawah ini :-

<img alt='Reply To This Comment' src='URL GAMBAR'/>

• Just gantikan URL gambar tue dgn mana-mana gambar URL yg korang-korang suka
• Sebagai hadiah utk korang-korang yg sudi terjah di beLog saya nie, saya hadiahkan korang-korang dgn beberapa icon Reply to Comment yg tak berapa nak cute miut hasil air tangan saya sendiri (^__^)v

 http://i.imgur.com/RI8g4.png

 http://i.imgur.com/HjM1l.png

 http://i.imgur.com/XQTtl.png

 http://i.imgur.com/2oA8J.png

 http://i.imgur.com/Mgy7P.png

http://i.imgur.com/IqLca.png

• Just copy URL gambar tue dan pastekan dalam code tadi
• Save dan lihatlah hasilnya yg bOombastik tue! (^__^)v

Dah jadi tue jangan lupa beritahu saya yek and bagi link beLog korang-korang sekali. Boleh lar saya tengok cantik tak icon Reply to Comment saya berada di beLog korang-korang (^__^)v

"JUST BE WHO YOU ARE"

P/S : kenapa perasaan ini datang kembali? Tak sukaaa~ (_ _!!

Tweet

---

JGN SHY-SHY CAT UTK B'KOMEN (^_^)v

---