Tutorial : Link facebook , twitter dan sebagai nya

السلام عليكم

Menjawab pertanyaan adik Syahirah Samn .. Buat link macam di blog aku ni di sebelah kiri macam yang kat bawah ni .. Harap tutorial ni boleh korang ikut ..

Macam biasa juga , Design > Add Gadget > HTML .. Then post code ni

<style type='text/css'>
    a.linkopacity img {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    -khtml-opacity: 0.5;}

    a.linkopacity:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -khtml-opacity: 1.0; }
    </style><br />
<br />
<div style='display:scroll; position:fixed; top:240px; left:-12px;'><br />
<a class='linkopacity' href='Link GengBlogger' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='gengblogger'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv0gFBKvUgr1bKF4WuFYELL4zZ8h3svYLGTn6wOBhGN52DjnjvE46ICyF33Vdfuaq9L8GLpoLpvdCzYqRBNbW2AfAZOt4UQmqXTL714Z4zAqzCLr3giRs55OXIV6D_fQJHvDbCNjXEDT8H/s320/icongb.PNG" /></a><br />
<a class='linkopacity' href='Link Facebook' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZNsj3ahS12f29FbgBiPmHvEnJxutynIjaeW2WZ37XcAu4fsxvrBO-b-wtoIjd-598AELqx_euafwkUUwESO8f6D-jQDWjWNz8WGex6FZ1qs2WlaHXrVEZehTsWQHCjnVQOJsqTesHGqXX/s320/facebook.png" /></a><br />
<a class='linkopacity' href='Link Twitter' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-WPlC0sjhefdsQnDlom-GvNzgLeWTN1h9Z9W516bKhWqKWJdl9c8pw2eEi_3BGxzvKatXj2uXGCGRnXO6InI5stlmvKBfLDzUd1YNS6XGlmFm8dzvXmlpa0YhcM6sNqKKM6nRUAS80fYd/s320/twitter.png" /></a><br />
<a class='linkopacity' href='Link Feed Blogger' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxH5t6f61t7yDPxaI0cBXNEzuG-tMU5KxrVS3aRa99lDXbHcTqRZ-f6AY6TEDrisZP6MNp-efSuiUeQb5jm_iJoW8-sliNFmlbJLofzXIr2Ra1xF3tnlp_yRkjT4uT0r5tOVFh3hz1DJFB/s320/feedblogger.png" /></a><br />
<a class='linkopacity' href='Link Youtube' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='youtube'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibgTXTrOuFZ0okmdktOyKcAloL-yii7pwapJsXg6TyDTC2WpxnESc8Zgy2aqeutLTvS0mSgpc1jyGOUg8lMhtDaa-RiFSViZ44kiMCeJ3PRXArZ6o1dc2HG4xb5abOxnpG58iXID3hgAZx/s320/youtube.png" /></a><br />
</div>

Kalau korang rasa ada salah , tolong feedback kat aku ok .. Aku akan perbetulkan .. ^^, Kalau korang tak nak certain link tu , korang boleh delete je .. Goodluck
Kalau tak jadi , korang boleh hantar feedback di Terus ke Official MadNip's Blog Page atau di Terus ke Official MadNip's Facebook

---

Tekan ctrl + c untuk copy , Goodluck

---

Tutorial : Hide Shoutbox di sebelah

السلام عليكم

Bagi menjawab persoalan cik adik Syahirah Samn , cara nak hide shoutbox atau bahasa ringkas nya , Chatbox ( ringkas ke ?? Bantai je ) .. First sekali , korang mesti lah ada shoutbox ( korang buat lah shoutbox tu ok , aku dah tak ingat macam mana nak buat shoutbox tu . Sowie ) .. Macam biasa Design > Add Gadget > HTML .. Kemudian masuk kan code ni

<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi4YeTk_iPEfUN2ZrM-vF4qDfqdZ47JK7sF6JEJmmAGZQ7N3xrSVlr8lKtD2GKMqkPhRDiW_RCHUK11F1Ol6hxznR1T-0b21imbPoesoCRDt9nm_BNrEV4_pJi_Cirpk8LZlntdCEXMIXe/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">

function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">

KORANG PUNYA CODE SHOUTBOX ..
<div style="text-align: right;">
<a href="javascript:showHideGB()">
[close]
</a> </div>
</div>
</div>
<script type="text/javascript">

var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Yang color BIRU , korang letak lah code shoutbox korang  , yang  color merah , korang leh tukar gambar untuk shoutbox macam kat aku punya blog ni .. MACAM KAT BAWAH NI

Kalau korang kreatif lagi , korang boleh guna hide ni untuk macam macam lagi .. Contoh untuk korang punya 'about me' ke ? Or something yang korang rasa creative , just do it .. It will be my pleasure and for course for my teacher too .. weeeeeeeeeeee .. ^^,

Kalau tak jadi , korang boleh hantar feedback di Terus ke Official MadNip's Blog Page atau di Terus ke Official MadNip's Facebook

---

Tekan ctrl + c untuk copy , Goodluck

---

Tutorial : Dashboard dan Follow di atas ?

السلام عليكم

Bagi menjawab persoalan SyaraFi KamaRuzzaman. Macam mana nak buat link ke dashboard dan follow kat atas tu ??

Macam biasa ke Design > Add gadget > HTML .. Kemudian paste kan code ni

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

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

Perhatian , perhatikan color biru tu , korang kena cari id blog korang .. JANGAN SILAP TAU !!! Aku akan tunjuk macam mana nak cari blog id .. Aku bukan ajar cara hack ok !

Korang tengok kat dashboard korang , ada edit post , comment dan bla bla bla bla  .. korang klik je yang mana pon .. Tak kesah maaaa ..

Kemudian korang akan dapat satu URL yang macam atas ni .. korang ambil number tu , korang paste kat color biru tadi .. Dan save .. SIAP !!!

Selamat mencuba !
Kalau tak jadi , korang boleh hantar feedback di Terus ke Official MadNip's Blog Page atau di Terus ke Official MadNip's Facebook

---

Tekan ctrl + c untuk copy , Goodluck

---

Tutorial : Pelajari asas HTML

السلام عليكم

Sesetengah orang tak paham HTML ni apa .. So aku kat sini terang secara biasa ja .. Kalau jumpa something yang baru tu , jangan lupa beritahu aku ye .. Aku pun manusia yang dahaga kan ilmu juga .. Peace no war .. ^^v

Marquee - perkataan bergerak sana sini .. Contoh =
SUKA SUKA SUKA

<marquee> korang punya ayat </marquee>

Yang ni ada had , sesuai kalau nak buat pendek je la .. ( Ayat aku terlebih panjang pulak =P )

<marquee behavior width=100 height=50> Korang punya ayat </marquee>

Yang color biru tu korang boleh tukar mengikut cita rasa korang ..

Slow mode
Medium mode
Fast mode vroommmmm

<marquee behavior="scroll" scrollamount="1">Slow mode</marquee>
<marquee behavior="scroll" scrollamount="10">Medium mode</marquee>
<marquee behavior="scroll" scrollamount="20">Fast mode vroommmmm</marquee>

Boleh tukar yang biru tu .. Nak letak 100 pon boleh , kalau crash , aku tak tahu .. =P

I believe I can fly !
aahhh , falling down !

<marquee behavior="" direction="up" height="50">I believe I can fly !</marquee>
<marquee behavior="" direction="down" height="50"> aahhh , falling down !</marquee>
Ikut korang lah nak letak height ke tak .. Kalau ada height , tak lah serabut sangat kan ..

Selamat mencuba ! Kalau nak buat marquee yang lagi lagi gila gila special , boleh search di google .. Banyak !!
Kalau tak jadi , korang boleh hantar feedback di Terus ke Official MadNip's Blog Page atau di Terus ke Official MadNip's Facebook

---

Tekan ctrl + c untuk copy , Goodluck

---

Tutorial : Buat link list macam header link

السلام عليكم

Menjawab soalan daripada miss MIZA LYANA ..

First sekali macam biasa lah Design .. Kemudian add gadget , pilih link list .. Kemudian masuk kan lah segala url yang korang nak .. pasti kan korang buat satu link Home blog korang juga .. Takut orang lain sesat tak dapat cari jalan utama .. =P

Kemudian korang susun lah link korang tu bagi nampak kemas .. Sudah selesai , save ! Kemudian drag korang  punya link list tu di bawah header bagi kedudukan melintang .. Untuk menegak , letak di side box .. Bagi aku  , much better bawah header sebab senang nak cari .. ^^,

Design .. korang faham kan macam mana ????

DAN INI HASIL NYA ! Tengok link tu sudah .. =P

Kalau tak jadi , korang boleh hantar feedback di Terus ke Official MadNip's Blog Page atau di Terus ke Official MadNip's Facebook

---

Tekan ctrl + c untuk copy , Goodluck

---

Tutorial : Buat Header Lawa Smart dan Simple

السلام عليكم

Frist time buat tutorial bergambar ni .. Harap korang lagi paham .. ^^ 

Mula sekali , buka photoscape anda .. Kalau tak ada , boleh download .. Tengok bawah sekali untuk download ok ..

Photoscape version 3.5 .. Latest punya

korang pilih saiz betul betul ok ..

Lepas dah pilih saiz , keluar blank macam ni

korang buat ikut kreativiti korang ok ..

GIMP2 .. Boleh download kat bawah ni ok .. ada link .. ^^,

pasti kan korang ganti JPG dengan PNG tu ok .. JANGAN SILAP !!!!!!!!!!!!!

Tunjuk gambar lagi paham ke tulis lagi paham ?? Or kedua dua nya ?? Korang buat pilihan ok .. ^^,

• Download Photoscape
• Download GIMP2

Kalau tak jadi , korang boleh hantar feedback di Terus ke Official MadNip's Blog Page atau di Terus ke Official MadNip's Facebook

---

Tekan ctrl + c untuk copy , Goodluck

---

Tutorial : Letak like button pada setiap entry

السلام عليكم

Nak buat macam ni pada setiap entry blog korang ?? Ikut tutorial ni dengan baik ok .. Cikgu nak ajar ni .. hehe ..

Design > Edit HTML > tick kat Expand Widget Templates > Ctrl + F > cari code <data:post.body/> lepas tu boleh lah letak code .. 

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

Kalau tak jadi , korang boleh hantar feedback di Terus ke Official MadNip's Blog Page atau di Terus ke Official MadNip's Facebook

---

Tekan ctrl + c untuk copy , Goodluck

---

Tutorial : Cara buat older post bergerak

السلام عليكم

Buat macam ni kat Official MadNip's blog

Pergi ke Design > Add Gadget > HTML/Javascript , then post la code ni ..

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:200px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:190px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background: url(-) repeat-x;
border:0px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:25px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:9px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>
<script language='javascript'>

imgr = new Array();
imgr[0] = "code gambar yang korang nak letak";
imgr[1] = "code gambar yang korang nak letak";
imgr[2] = "code gambar yang korang nak letak";
imgr[3] = "code gambar yang korang nak letak";
imgr[4] = "code gambar yang korang nak letak";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 50;
home_page = "link blog korang";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='https://sites.google.com/site/pengerindu/pengerindu/animatedrecentpost.js' type='text/javascript'></script></div>

Kalau korang tak nak banyak sangat gambar ( takut nampak serabut ) , korang boleh delete imgr[4] = "code gambar yang korang nak letak";   dan delete la yang ketiga , kedua , dan pertama , janji yang 0 tu tetap ada .. Goodluck

Guru saya = azza firza
Kalau tak jadi , korang boleh hantar feedback di Terus ke Official MadNip's Blog Page atau di Terus ke Official MadNip's Facebook

---

Tekan ctrl + c untuk copy , Goodluck

---