Showing posts with label Toturial. Show all posts
Showing posts with label Toturial. Show all posts

Thursday, December 13, 2012

TUTORIAL SCROLL BOX DALAM ENTRY

Tutorial kali ni ialah macam mana nak buat scroll box dalam entry. Scroll box tu hape? Scroll box tu macam ni.




Haaa macam ni lah scroll box :)



Ok dah tahu kan apa tu scroll box.

Apa gunanya scroll box ni? Banyak guna nya. Selalu kalau kita nak masuk gambar banyak-banyak entry kita akan jadi panjang meleret kan. Sampai orang malas dah nak tekan ke bawah. Ha jadi kalau guna scroll box ni save la sikit space kita. Tak la entry jadi panjang berjela ye tak.

Page FB Yang lebih Ohsem Untuk Blog

Sesetengah blogger ada yang mempunyai facebook page untuk blognya. Tidak kira apa tujuan page tersebut, kebiasaannya ianya berkaitan dengan blog. Tutorial kali ini akan menunjukkan cara meletakkan page facebook dalam blog, tetapi bukan dengan design biasa.






Kalau sebelum ini widget yang dinamakan 'facemask' ini didapati di wordpress, kini blogger yang mengunakan platform blogger.com juga boleh menggunakannya.

Thursday, March 8, 2012

Tutorial Origami Comel : Bagaimana Membuat Origami Penguin Comel

Alhamdulillah..video tutorial origami dah siap. Jom sama-sama tengok dan kalau boleh, try bagi komen. Ingat nak letak subtitle english, tp macam malas pulak nak buat sebab banyak keje lain nak kene buat. Harap-harap tutorial ni memberi manfaat kepada semua








Semoga bermanfaat. Jarang orang tau camne nak buat penguin.





Tuesday, January 24, 2012

Cara nak hidden navbar di blogspot




Ni tutorial camna cara nak hilangkan navbar dekat blogspot anda.



Langkah #1 :

Log in blog > Dashboard > Layout > Edit HTML
kemudian klik pada Expand Widget Templates.

Langkah #2 :

Copy code di bawah kemudian paste sebelum atau di atas code ]]></b:skin>

#navbar-iframe {
display:none;
}

p/s : kalau susah nak cari code tu kat Edit HTML tu, tekan Ctrl +  F untuk search.

Langkah #3 : 

Korang klik butang SAVE TEMPLATE pastu siap!
Selamat mencuba.

Bawah ni tutorial bergambar.





Sekian


Saturday, January 21, 2012

Cara pasang Floating Share Button di Blogspot




Untuk memasang Floating Share Button pada sebelah kiri blog seperti yang boleh anda lihat pada blog ini (klik untuk demo), hanya ikut beberapa langkah yang mudah di bawah. 


Langkah 1


Login Blogger Dashboard --> Layout --> Add A Gadget --> HTML/Javascript.

langkah 2

Copy dan paste kod di bawah pada content HTML/Javascript.








<!-- floating page sharers Start -->
<style>
#pageshare {position:fixed; bottom:17%; margin-left:-705px; float:left;
-moz-border-radius:5px 0px 5px 0px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:0px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:0px;
background-color:#ffffff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Share this">
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div></div>





p/s:


1.Untuk mengubah warna background, sila edit kod background-color:#ffffff;



2. Untuk mengubah kedudukan Floating Share Button tersebut, sila edit angka  margin-left:-705px; 



Monday, January 16, 2012

Cara pasang Floating Button di sisi blog



Untuk memasang Floating button di sisi blog seperti yang boleh anda lihat di sisi kanan blog ini, hanya ikut beberapa langkah yang mudah di bawah

Langkah 1

Log in blog => Design => Page Elements => Add A Gadget => HTML/Javascript.

Langkah 2

Salin dan edit kod berwarna biru di bawah dengan menggantikan URL akaun anda pada kod yang di bold. Anda juga boleh menggantikan icon asal dengan icon anda sendiri.

<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>

<div style='display:scroll; position:fixed; top:240px; right:-12px;'>

<a class='linkopacity' href='http://gengblogger.com/' 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/AVvXsEgBi_6zkBaN6b5C7nt7eIFyMjHNG0pLsHNLq47mdHKaxCRzU6TUxGwg5lSwhIgvHtMZ9rmUmdUwUn80QY2w2z5hhF1IKW1mxk-rQoxsJRybiT9qLZMadoBMeNEe6nS_doWXMcqWhV6ZdwTl/s320/icongb.PNG" /></a><br />
<a class='linkopacity' href='http://facebook.com/akaun facebook anda/' 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/AVvXsEi83qsfv8SiTwwv2t-WDWT9l4PeSfX4F0XmDZTSF55EseMqfvmFUEyKgc3YLN1Bm2eWEr3mWetkMxkJ-5ENt3P1lraraTUlnWt7DkSB8XygpZD6UmV6__mIkp50rbVJHjyfy-mx0Nn4lPBy/s320/facebook.png" /></a><br />

<a class='linkopacity' href='http://twitter.com/akaun twitter anda/' 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/AVvXsEhiH6JwRm3zqS0wugUNsS7_96ar12BMJpgaj13DmWgPoxcr13D11UGDCSaRlrmelv9yY_2a5B71YaDz33lagorjpMFQ972m0WNdLe9CIo4p8qzrjuTCX8uOyf6wy4JvqeYEeJTkGXz4mdjE/s320/twitter.png" /></a><br />

<a class='linkopacity' href='http://maribinablog.blogspot.com/feed blog' 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/AVvXsEiGkdYczGSpC4zEQRfcIhz5BOp8jDZ2XV7lPI9mbF_GKaE_WnbkvtRJDbreeFwVBQqSYrGJX5M3s4YPbPr3LsITJiax6zfJytvEisGDeDuBPpEfzj85HOcFIivOeqa3nT9sW_2DSV0kyLRd/s320/feedblogger.png" /></a><br />

<a class='linkopacity' href='http://feedburner.com/akaun feedburner anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feedburner'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVi9iczCFnF2Ps6EyDYlIOMsAVtQvzhzWNc9OyrO6UBbZr3ECL4cyQmmQQfmucK0Dl2cIVGN2YVcx_wlz4RaG22I0NuDyC9OMYnpUKfvLJkzt_ba2xe5x98NUpXErJ3x6509CUADMtxOVF/s320/feedburner.png" /></a><br />

<a class='linkopacity' href='http://youtube.com/akaun youtube anda/' 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/AVvXsEhm9xPULsUV_E5tdoO3f7OG_rV0SmwHP612wLHKn2jrcxE2b2MXei9iWg7Is2AEh6anbqqkb724URNsk1kNLBT1-V40JOJENvlwlzvt-I-atd_xgdUgvoPNMinzTzgklYiRtWnGebuXgO11/s320/youtube.png" /></a><br />

<a class='linkopacity' href='http://flickr.com/akaun flickr anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='flickr'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqPIMMAj9UmkXXbAFoRgFTT-d48v_-Mu0OyZdvAlXjCecUoZIoRDX2LCqGg5fy2ijIlun1U1H6KCTsDhSFC1-6S9Rr2Zr9V2V8RIh0yzJKwxRJSiMmFKE2JnkW8vR7fGMe6k7T7CBAyLPR/s320/flickr.png" /></a><br />

</div>

Seterusnya, paste kod yang telah siap di edit pada ruang Content HTML/Javascript.

Akhir sekali, klik Save.

Anda boleh mencari icon di  http://www.iconspedia.com

Cara pasang widget Recent comments dengan avatar (image profile) di Blogspot




Recent comments with avatar (image profile) seperti yang boleh anda lihat pada sidebar blog saya adalah widget yang sangat menarik. Widget tersebut kini memaparkan gambar avatar pemberi komen beserta dengan komen ringkas pada post yang berkaitan dalam Blogger.

Untuk memasang widget recent comment dengan avatar ini pada blog anda, sila ikut beberapa langkah di bawah.

Langkah 1

Log in blog > Dashboard > Layout > Add A Gadget. Seterusnya klik pada HTML/Javascript.

Langkah 2

Salin kod di bawah dan paste pada ruang Content HTML/Javascript (rujuk langkah 1).

<style type="text/css">
#recentcomment {
width:98%;
margin-left:5px;
}
img.recentcomment-avatar {
background:#fff;
float:right;
padding:2px;
margin:2px -2px 0px 0px;
height:30px;
width:30px;
border:solid #ddd 1px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 0px 0px rgba(0,0,0,0.3);
box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
}
td div.recentcomment-content a,td div.recentcomment-content a:hover{
font-family: 'trebuchet ms';
font-size:1.00em!important;
color:#2C2929;
text-decoration:none;
}
div.recentcomment-content{
font-size:1.00em!important;
text-decoration:none;
line-height:1.45em;
letter-spacing:0.03em;
background: #fff;
padding:4px;
border:1px solid #ddd;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
}
</style>

<script type="text/javascript">
ava_mode = "all";
var cm_num = 5;
var cm_desc = 13;
var homepage = "http://maribinablog.blogspot.com/";

var cm_ava = new Array();
cm_ava['openid'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOcTWwe0vQa15vylFi2hvoG4MFfMRsW6GK_oaT5TK_d0DabkJSUDqGtJXIXy9FezE2q63CewDh_29Jco1XzkAdrZMycrSAve1A2J5VnaH8EvVFWdCRa79tq67cbmaPIve3KrA6TNBIw52s/s1600/blogger.png";
cm_ava['livej'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOcTWwe0vQa15vylFi2hvoG4MFfMRsW6GK_oaT5TK_d0DabkJSUDqGtJXIXy9FezE2q63CewDh_29Jco1XzkAdrZMycrSAve1A2J5VnaH8EvVFWdCRa79tq67cbmaPIve3KrA6TNBIw52s/s1600/blogger.png";
cm_ava['wp'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOcTWwe0vQa15vylFi2hvoG4MFfMRsW6GK_oaT5TK_d0DabkJSUDqGtJXIXy9FezE2q63CewDh_29Jco1XzkAdrZMycrSAve1A2J5VnaH8EvVFWdCRa79tq67cbmaPIve3KrA6TNBIw52s/s1600/blogger.png";
cm_ava['typepad'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOcTWwe0vQa15vylFi2hvoG4MFfMRsW6GK_oaT5TK_d0DabkJSUDqGtJXIXy9FezE2q63CewDh_29Jco1XzkAdrZMycrSAve1A2J5VnaH8EvVFWdCRa79tq67cbmaPIve3KrA6TNBIw52s/s1600/blogger.png";
cm_ava['aim'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOcTWwe0vQa15vylFi2hvoG4MFfMRsW6GK_oaT5TK_d0DabkJSUDqGtJXIXy9FezE2q63CewDh_29Jco1XzkAdrZMycrSAve1A2J5VnaH8EvVFWdCRa79tq67cbmaPIve3KrA6TNBIw52s/s1600/blogger.png";
cm_ava['url'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNi-GSG24aKuBoAjdbsQs8cchj0XnukJ6VNWCKXL8jvUT47Vd7a27wCEtM5I_Cw_NTGFrXKNPXvNKDwyw5Jp1KEN1dJEMudGSwtTAif7_Hh2eZQPwbw4fo5fDmEoHUp0QOtkMsn3qNavL_/s1600/user.png";
cm_ava['anon'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDceLgdqr5Llqd4YlmKOko7zaZ6YGeOrMqk3Z0PfvW5tLLZe26_baeBhMxhJXFN_9HNGYSjD-pHbKdoEYdiuP0WXgeZAUwLaauDoqGPf6ZXib9252-L9qURszqCWaR5iobz78hMA2iAtc/s1600/anonymous.png";

</script>
<script src="http://javscript-code.googlecode.com/files/recent-comment-avt.js" type="text/javascript"></script>

Akhir sekali, klik Save.

p/s: Jika kod yang telah di save tidak berfungsi, sila gunakan kod ini (sila klik)

Cara pasang Sidebar Social Widget di Blogspot




Sidebar Social Widget ini adalah widget yang di bina untuk blog wordpress oleh Ariffshah. Widget ini menggabungkan Facebook page, Twitter, Google plus dan juga Rss yang di muatkan dalam satu widget.

Ianya hanya menggabungkan beberapa kod javascript, HTML dan juga css. Untuk pengguna wordpress yang berminat memasang widget sidebar social ini di blog anda, sila ke tutorial asasnya di http://wp.tutsplus.com/

Bagi pengguna Blogger pula, saya telah berjaya memasukkan widget sidebar social seperti contoh yang boleh anda lihat di sidebar blog saya. Sedikit pengubahsuaian pada kod untuk Facebook page dan juga css untuk warna background.

Bagi pengguna Blogger yang ingin mencuba widget Social sidebar ini di blog anda, bolehlah ikut beberapa langkah-langkah yang mudah di bawah.



Langkah 1

Dapatkan ID untuk Facebook page, Twitter dan juga RSS feed anda.

Contoh:

Facebook page:  http://www.facebook.com/pages/MariBinaBlog/197414523674776
Twitter:  https://twitter.com/Nescafeaisblog
Feedburner:  http://feeds.feedburner.com/maribinablog1 

Langkah 2

Salin dan edit kod di bold dengan menggantikan dengan ID Facebook page, Twitter dan Feedburner dan juga nama blog anda.



<style>
#sidesocial{
border:0 solid #;
}
.sideg{
background:#00FFBF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEbVvcqNY0caYzH0z7-Erl3mVOsOnemempGbgtWPUrQTi_vDuLwaLT_VqSjSrs1mqW5g1JTVgUIsMgnz1HQWz_EJfdXJWsm137-mFlV2gXX59bntuuHx8BuxZ99OIXQTXFFZ0l5Vf6GDG_/s320/gradient.png) repeat-x 0 -100px!important;
font-size:0.85em;
color:#000;
line-height:1px;
border-top:1px solid #FFF;
border-bottom:1px solid #EBEBEB;
padding:5px 11px
}
.sideg span{
vertical-align:text-top;
color:#333;
margin:2px;
}
.sidetw{
background:#0DF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEbVvcqNY0caYzH0z7-Erl3mVOsOnemempGbgtWPUrQTi_vDuLwaLT_VqSjSrs1mqW5g1JTVgUIsMgnz1HQWz_EJfdXJWsm137-mFlV2gXX59bntuuHx8BuxZ99OIXQTXFFZ0l5Vf6GDG_/s320/gradient.png) repeat-x 0 -100px!important;
line-height:1px;
border-top:1px solid #FFF;
border-bottom:1px solid #EBEBEB;
padding:4px 11px;
}
.sidefb{
background:#82CDFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEbVvcqNY0caYzH0z7-Erl3mVOsOnemempGbgtWPUrQTi_vDuLwaLT_VqSjSrs1mqW5g1JTVgUIsMgnz1HQWz_EJfdXJWsm137-mFlV2gXX59bntuuHx8BuxZ99OIXQTXFFZ0l5Vf6GDG_/s320/gradient.png) repeat-x 0 -100px!important;
}
.sidesub{
line-height:1px;
background:#FFB86D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEbVvcqNY0caYzH0z7-Erl3mVOsOnemempGbgtWPUrQTi_vDuLwaLT_VqSjSrs1mqW5g1JTVgUIsMgnz1HQWz_EJfdXJWsm137-mFlV2gXX59bntuuHx8BuxZ99OIXQTXFFZ0l5Vf6GDG_/s320/gradient.png) repeat-x 0 -100px!important;
border-top:1px solid #FFF;
padding:3px 10px;
}
.sidesub span{
width:115px;
}
</style>
<div id="sidesocial">
<div class="sidefb">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMariBinaBlog%2F197414523674776&amp;width=300&amp;height=183&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%2382CDFC&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:183px;" allowtransparency="true"></iframe>
</div>

<div class="sideg">
<div class="g-plusone" data-size="medium" data-href="http://maribinablog.blogspot.com"></div><span>Recommend on Google</span>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</div>

<div class="sidetw">
<a href="https://twitter.com/nescafeaisblog" class="twitter-follow-button">Follow @YOU</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>

<div class="sidesub"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=maribinablog1', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="submit" value="Subscribe" /><span><input type="text" style="width: 165px;
padding: 0px 0px 0px 0px;
vertical-align: middle;
font-size: 0.85em;
margin-top: -1px;
margin-left: 15px;" name="Masukkan email" value="        Masukkan Email"       onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/><input type="hidden" value="maribinablog1" name="uri"/><input type="hidden" name="loc" value="en_US"/></span></form>
</div>
</div>

Langkah 3

Log in blog > Dashboard > layout > Add A gadget > HTML / Javascript

Salin kod yang telah siap di edit pada langkah 2 dan paste pada content HTML/javascript. Seterusnya klik Save.

p/s: Jika kotak Facebook terlalu besar atau kecil, anda boleh mengubahnya dengan mengedit nilai yang di bold dengan warna merah







Monday, January 9, 2012

Cara Float ads Nuffnang dengan close button




Untuk menjadikan ads Nuffnang sidebar float(terapung) dengan close button pada sebelah sisi kanan blog seperti yang boleh anda lihat pada contoh yang ada di blog ini, sila ikut beberapa langkah yang sangat mudah di bawah.


Langkah 1



Log in blog => Design => Page Elements => Add A Gadget => HTML/Javascript.



Langkah 2



Salin dan edit kod berwarna biru di bawah dengan menggantikan teks Masukkan kod di sini dengan kod Nuffnang sidebar anda.



<style type='text/css'>
#topbar{
position:absolute;
margin: 0px -23px;
padding: 0px;
width: 130px;
visibility: hidden;
z-index: 100;
}
</style>

<script type="text/javascript">

/***********************************************
* Floating Top Bar script- &#169; Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopRight=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopRight()", 10);
}
ftlObj = ml("topbar");
stayTopRight();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

<div id="topbar">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIAz9hHWS7L4edQ4UkRXGK8nzOSt4cLJw8QCC3_GG35Xx7e_XNRoJ1dl-723-CzFMZPY-gzoirjvbKqgPMX_45t7XOsCJVWTpfRQ01Ucw4SaY7sIyUcO6H3L9Rm9o99ZzES6FALULKI73g/s320/close.png" border="0" /></a>
Masukkan kod di sini
</div>

Seterusnya, paste kod yang telah siap di edit pada ruang Content HTML/Javascript.

Akhir sekali, klik Save.

Cara pasang Recent posts floating bar widget di Blogspot




Recent posts floating bar  seperti yang boleh anda lihat di bahagian bawah blog ini adalah widget yang sangat menarik. Widget tersebut memaparkan tajuk post terkini yang berefek slider.

Untuk memasang widget Recent posts floating bar slider ini pada blog anda, sila ikut beberapa langkah di bawah.

1. Log in dashboard--> Template --> Edit HTML --> Proceed.

2. Seterusnya tick "Expand Widget Templates"

3. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod </head>

4. Copy dan paste kod css ini, di atas atau sebelum kod </head> 

 <style type='text/css'>

#bd {
float:bottom;
font-family:Arial, Helvetica, sans-serif;
line-height:1.5;
margin-top:5px;
font-size:12px
}

.text {
color:#98BF2F;
margin-left:8px
}

div#news-1 .gk_news_highlighter {
font-family:Verdana, Arial;
font-size:11px;
color:#666
}

div#news-1 {
width:960px;
height:24px;
margin-left: -10px;
display:scroll;
position:fixed;
bottom:1px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEbVvcqNY0caYzH0z7-Erl3mVOsOnemempGbgtWPUrQTi_vDuLwaLT_VqSjSrs1mqW5g1JTVgUIsMgnz1HQWz_EJfdXJWsm137-mFlV2gXX59bntuuHx8BuxZ99OIXQTXFFZ0l5Vf6GDG_/s320/gradient.png) repeat-x 0 -100px;
clear:both;
overflow:hidden
}

div#news-1 .gk_news_highlighter_wrapper {
float:left;
width:820px;
height:24px;
line-height:24px;
overflow:hidden;
position:relative
}

div#news-1 .gk_news_highlighter_item {
width:auto;
height:24px;
padding-left:20px;
display:none;
position:absolute
}

div#news-1 .nowrap {
white-space:nowrap
}

div#news-1 .gk_news_highlighter_title {
padding-left:5px
}

div#news-1 .gk_news_highlighter_desc {
padding-right:5px
}

div#news-1 .gk_news_highlighter_interface {
float:left;
width:120px;
height:24px;
text-align:right;
line-height:24px;
z-index:1000
}

div#news-1 .gk_news_highlighter_interface .text {
float:left;
display:block;
width:auto;
padding-left:5px;
font-weight:700
}

div#news-1 .gk_news_highlighter_interface div {
width:30px;
float:right
}

div#news-1 .gk_news_highlighter_interface a.prev,div#news-1 .gk_news_highlighter_interface a.next {
cursor:pointer;
width:13px;
height:24px;
display:block;
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgugP1tC98fDcGuedu5am-XPiogFXB5ytKF2fKJv9N_sL51woF7dDRdo-OMd9BEfXGK1DOgeNXEGNRjC3OWDTE00jVchOBuN3QmQ_nupHsCQDJGuwpzZHz91WOaOAHf8x3nUHlzEpF3KXk/s1600/play.png&#39;) no-repeat 0 50%;
float:left
}

div#news-1 .gk_news_highlighter_interface a:hover.prev {
background-position:-13px 50%
}

div#news-1 a,div#news-1 a:link,div#news-1 a:visited,div#news-1 a:active,div#news-1 a:focus {
color:#FFF
}

div#news-1 .gk_news_highlighter_interface a.next {
float:right;
background-position:-26px 50%
}

div#news-1 .gk_news_highlighter_interface a:hover.next {
background-position:-39px 50%
}

</style>


5. Seterusnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod <div id='content-wrapper'>. 

Bagi blog yang menggunakan template dari template designer, cari kod </footer>


6. Copy dan paste kod HTML dan Javascript ini, dibawah atau selepas kod <div id='content-wrapper'>

 Bagi blog yang menggunakan template dari template designer, paste kod HTML dan Javascript ini di atas atau sebelum </footer>


 <div id='bd'>
<div class='gk_news_highlighter' id='news-1'>
<div class='gk_news_highlighter_interface'>
<span class='text'>HOT NEWS</span>
<div>
<a class='prev' href='#'/>
<a class='next' href='#'/>
</div>
</div>
<div class='gk_news_highlighter_wrapper'>
<script language='JavaScript'>
imgr = new Array();
showRandomImg = false;
aBold = true;
text = &quot;no&quot;;
showPostDate = false;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = &quot;#000&quot;;
icon = &quot; &#187; &quot;;
label = &quot;&quot;;
numposts = 30;
home_page = &quot;http://maribinablog.blogspot.com/&quot;;
</script>
<script src='http://yourjavascript.com/11843262101/post-hotnews.js' type='text/javascript'/>
</div>
</div>
</div>
<script src='http://yourjavascript.com/01042612211/mootools.js' type='text/javascript'/>
<script src='http://javscript-code.googlecode.com/files/engine_compress.js' type='text/javascript'/>
<script type='text/javascript'>
try {$Gavick;}catch(e){$Gavick = {};};
$Gavick[&quot;gk_news_highlighternews-1&quot;] = {
&quot;animationType&quot; : 3,
&quot;animationSpeed&quot; : 200,
&quot;animationInterval&quot; : 2000,
&quot;animationFun&quot; : Fx.Transitions.linear,
&quot;mouseover&quot; : 1};
</script>

7. Edit kod yang di bold dengan warna merah dengan menggantikannya kepada URL blog anda dan juga bilangan post yang hendak dipaparkan.


8. Seterusnya klik Preview. Jika kedudukan bar terlalu ke kiri atau ke kanan, sila edit nilai pada kod yang di bold dengan warna biru pada langkah 4.



width:960px; (Panjang bar)
margin-left: -10px; (Jika kedudukan bar terlalu ke kanan, edit nilai -10 kepada 10 dan sebaliknya)



9 . Akhir sekali, jika anda berpuas hati dengan kedudukan bar tersebut, klik Save.



Thursday, January 5, 2012

Menukar cursor mouse pada blog





Pada tutorial kali ini, saya akan tunjukkan bagaimana untuk menukar cursor mouse kepada cursor pilihan kita sendiri. Sila ikut beberapa langkah yang ditunjukkan di bawah ini:

p/s: sila save dahulu script template asal.


Langkah 1

Log in blog => Dashboard => Layout => Edit HTML. Tick pada kotak Expand Widget templates.

Langkah 2

Tekan Ctrl+F dan taipkan kod ini pada ruangan Find.]]></b:skin> Seterusnya, tekan enter.


Langkah 3

Salin kod berwarna merah di bawah dan pastekan di atas kod berwarna biru (lihat langkah 3)
body { cursor:url("masukkan url cursor"),default;}

Contoh:

body { cursor:url("masukkan url cursor"),default;}
]]></b:skin>

Untuk menukar jenis cursor, anda boleh dapatkannya di sini . Salin url yang anda rasakan sesuai dan gantikan pada perkataan masukkan url cursor.

Akhir sekali, klik save.

p/s: Untuk buat cursor sampai boleh keluar salji, tutorial akan ditunjukkan pada masa yang akan datang.


Related Posts Plugin for WordPress, Blogger...