Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

Tutorial Mewujudkan Bar Terapung Share & Butang Perkongsian Lain-lain

on Wednesday, 25 July 2012



Langkah-langkah membuatnya sangat mudah. Apa yang anda perlukan adalah untuk copy dan paste  kod yang telah disediakan di bawah. Ikut langkah-langkah Dibawa nie:
  1. Pergi ke Blogger> Templat
  2. Backup template anda
  3. Klik Edit HTML
  4. Klik Teruskan
  5. Kemudian Klik Expand Template Widget
  6. mencari
<b:includable id='post' var='post'>

Copy kode dibawa dan letakkan kode yang dicopy tadik tu kat bawah kode yang anda cari tadik...owkey

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.mbt_social_floating{
position:fixed; bottom:10%; margin-left:-60px; float:left;
width:60px;
background-color:#f7f7f7;
padding: 5px 0 0px 0px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhutUPlnAjcH3fhKNX5KWR1ISm1mvA_7E1s1FwqUEYTLiLGnrAxnaQyvu5HwQ8VwIO6P1GQ0Ej-CdslPUg2Uo4Zy7ziNssbk9P2vKL2CZuz_v22OJLHOd6Qgb7MnRoJcqfa2tzslkSBfuvT/s400/gc_social_sprite.gif&#39;) no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhutUPlnAjcH3fhKNX5KWR1ISm1mvA_7E1s1FwqUEYTLiLGnrAxnaQyvu5HwQ8VwIO6P1GQ0Ej-CdslPUg2Uo4Zy7ziNssbk9P2vKL2CZuz_v22OJLHOd6Qgb7MnRoJcqfa2tzslkSBfuvT/s400/gc_social_sprite.gif&#39;) !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.mbt_social_floating .stButton_gradient{
border:none !important;
}
.mbt_social_floating .stBubble_count{
width:44px !important;
font-size: 15px !important;
font-weight: normal !important;
padding-top:7px !important;
height:23px !important;
background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
color:#00a6df;
background-color:#f8fbfc !important;
}

.st_fblike_vcount{
margin-bottom: 0px;
display: block;
}
.st_twitter_vcount{
margin-bottom: 3px;
display: block;
}

.st_email{
margin-bottom: 5px; margin-top: 3px;
display: block;
}
.mbt_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}
</style>

<div class='mbt_social_floating'>
<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false});</script>
<span class='st_fblike_vcount' displaytext=''/>
<span class='st_twitter_vcount' displaytext='' st_via='KHAIRULAZMI21'/>
<div style='margin:5px 0 0px 0;'>
<center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center>
</div>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
</div>

<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: &quot;MY BLOGGER TRICKS&quot;,
ui_header_color: &quot;#ffffff&quot;,
ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://ciffahmimalomuchacha.blogspot.com/2012/07/tutorial-mewujudkan-bar-terapung-share.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>


Hanya menggantikan KHAIRULAZMI21 dengan username Twitter anda. Simpan template anda dan Dah selesai! Kredit : mybloggertricks



Tutorial : Cara Membuat Widget Recent Post Dengan Thumbnail

on Sunday, 27 May 2012


Cara Membuat Widget Recent Post Dengan Thumbnail

Tutorial : Cara Membuat Widget Recent Post Dengan Thumbnail

Widget Recent Post atau artikel terbaru umumnya ditempatkan diposisi sidebar. Sedangkan jenis widget recent post menurut pengetahuan saya hanya ada 2, yaitu widget recent post dengan thumbnail yang tidak bergerak dan ada juga widget recent post dengan slide show/bergerak (model tayangan). .

Cara Membuat Widget Recent Post dengan Thumbnail :

Langkah 1
Login ke dashboard blogger anda.

Langkah 2
Pilih Rancangan > Elemen Halaman > Add Gadget (HTML/JavaScript).

Langkah 3
Copy kode CSS dan JavaScript dibawah ini dan paste pada gadget yang baru dibuat tadi.

<right><style>img.recent_thumb{padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:40px;border:0;float:left;margin:0 0 5px 0px;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:15px;font-color:black;font-family:calibri;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs normal {font-size:13px;} </style> <script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script> <script style="text/javascript"> var numposts = 8; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 75; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script></right>
Langkah 4
Simpan dan lihat hasilnya.

Langkah 5
Silahkan memodifikasi sendiri script ini untuk merubah ukuran gambar/thumbnail, jenis dan warna huruf serta jumlah posting yang ingin ditampilkan pada widget.

Selamat mencoba dan salam blogger.

Tutorial : Widget Get Connect Versi Sembang Cyber


Hari ni Azmie nak kongsikan dengan anda semua. Bagaimana nak membuat widget "Get Connect"tutorial ini dari blog Sembang Cyber. Contohnya adalah seperti dibawah ini. 

Tutorial : Widget Get Connect Versi Sembang Cyber

Sebenarnya widget berkenaan dicipta adalah untuk mengurangkan masa loading blog. Di mana widget asal bagi Google Friend Connect dan juga Google Plus telah mempengaruhi masa loading blog. Langkah-langkah nya seperti di bawah: 

Download & Upload Imej

Okay perkara pertama yang anda perlu lakukan adalah memuat turun imej-imej dibawah ke dalam komputer anda. Kemudian sila upload kesemua gambar yang telah di muat turun tadi ke dalam Picasa Web Album ataupun Picture Hosting yang anda mahukan.

Tujuan anda disuruh berbuat demikian adalah untuk mengelakkan widget ini hilang fungsi. Kerana tiada jaminan imej-imej dibawah akan terpapar di blog anda jika anda menggunakan link imej yang ada di dalam tutor ini. Tetapi anda boleh cuba dulu memasang widget ini ke dalam blog anda dan jika imej-imej dibawah terpapar. Anda tidak perlu lakukan seperti yang disuruh tadi. Tapi anda nak buat pun boleh juga. Ianya sebagai sokongan jika saya terdelete imej-imej berkenaan dari Picasa Web Album saya.




Langkah-langkah Pemasangan

Selepas anda selesai dengan langkah utama tadi. Silalah Log In ke dashboard blog anda, kemudian pilih "Layout" diikuti "Add a Gadget" dan seterusnya pilih "HTML/JavaScript".

Copy and Paste code dibawah ke dalam ruangan HTML/JavaScript tadi.
HTML/JavaScript

<div style='text-align:center;padding-top:5px;'>

<a href='http://feeds.feedburner.com/ID-Feedburner' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxSpLj5QM-WWxrrv3EIXxdToY-vLGqzI5NaYW28L67aveObu-VipHpqIgQLDEQ8SRvJs9JmUlcz1EnicajxF-U3yHTshbUBZ1v9aQ4UWyKzkNgskx2rneBskBQfoR-mjb34hUYTEhNZPld/s80/Subscribe.png' width='80'/></a> <a href='http://feedburner.google.com/fb/a/mailverify?uri=ID-Feedburner&amp;loc=en_US' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuvb-Ykf1blcvXTDwS-_gb5eAInTJ-gb5zKPEjb4k1gdcagjvTpe_e_ONBdzz6Oiijh5b8ykl7ERVzdtFyQHxxP_OnYxIZfeoq25IwlcQ96d4U_37Qwtf1O3SxGUbGZNrSAVEBIZP54Lj6/s36/Mail.png' width='36'/></a>

<a href='URL-FANPAGE-FACEBOOK' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilJK4AVN5sTTtZS657MPnKXJZ4MjehydZZaBbGUbVI_OwsX6q_gPpn1WFuqrAOzOOVlWrsKHsS9dUHzD_VAooM-J4tVrDhUwG07nlJcuTafKCcovHmF-7RGrWFxr-K_D_o5JANpne15P4p/s80/Facebook%252520%2525282%252529.png' width='80'/></a>

<a href='http://twitter.com/ID-Twitter' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBctgjY-CD0yGE1af3O_6R8MGMCv339LjLcElLFQUc4NezcuVj7KgBRGCp2ZTVc6iJO3ykjftyKMgNJK1yYf5Uzu2jj4sWXliwwtdLD-nsxoijhQls_bBjqaNO-MQEz9OnlmVQxPd2otyh/s80/Twitter%252520%2525281%252529.png' width='80'/></a>

</div>

<center style='padding-top:5px;padding-bottom:5px;'><a href='http://www.blogger.com/follow-blog.g?blogID=ID-BLOG' rel='nofollow' target='_blank' title='follow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJpOs1ZrfsEBIz4IXWYeXBixFPS2_FGpz65XnX9PjMHN6oP0_ScKkKEcGqQ7DYA-wYMw8pFxsTX5YhtSG8qc2NfCX9csrAOmat8x7DhjwyfQa0RFVj24j_yGLLClemVSOuQIrslyhyphenhyphenyUiP/s118/GFC3.png' style='margin-right:2px;border:2px solid #000;'/><a href='https://plus.google.com/ID-Google-Plus' rel='nofollow' target='_blank' title='Google +'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixQ3RPGfxjeDpE5Cfe5mnQf7FI6_82KMy3ota_b-xQ4jkkYHG0uRksZTYVci9jYU460SkzdEuIZeO5z96L2SgUADMFL2sFOyEXIrEr9OIUZBJH7QADZamcPClpVAY3upxljFd_uAicSDn5/s159/gfc1.png' style='border:2px solid #000;'/></a></a></center>


Langkah untuk Customize Widget Get Connect

Sekarang kita teruskan dengan arahan untuk customize widget berkenaan. Okay yang berwarna merah tu anda perlu gantikan dengan ID anda sendiri. Untuk yang gambar sampul surat tu. Anda perlu aktifkan fungsi email di feedburner. Kerana jika anda tidak aktifkan. Ianya tidak akan berfungsi. Manakala yang berwarna biru itu pula adalah link/url bagi imej button yang anda download dan upload ke dalam hosting gambar anda sendiri. Anda boleh tukar dengan link anda sendiri.

Selamat Mencuba, law jadi britahu yer...

    Tutorial : Fibox Shoutbox Yang Cool Untuk Blogger

    on Wednesday, 23 May 2012




    Fibox adalah satu lagi nama baru untuk shoutbox yang memasuki ruang maya ini. Rentetan daripada shoutmix yang akan menamatkan perkhidmatan percumanya, admin dapati Fibox menawarkan shotbox yang bagi admin memang cool, (walaupun bagi admin baru sekali pandang:)


    Fibox kini dalam fasa beta dimana lebih banyak penambahbaikan yang akan dilakukan oleh pihak yang terbabit. Lihat pada paparan yang mesra pengguna dan penggunaannya yang mudah, admin tidak ambil masa yang lama untuk terus daftar. Anda boleh melihat contoh shotbox Fibox ini yang admin letakkan di blog ohbest.

    Sambil-sambil daftar, admin ambil kesempatan untuk letakkan sekali tutorial untuk daftar Fibox seperti di bawah.

    Sambil-sambil daftar, admin ambil kesempatan untuk letakkan sekali tutorial untuk daftar Fibox seperti di bawah.

    Langkah 1
    Buka www.fibox.ws, kemudian klik pada Sign Up 


    Langkah 2
    Masukkan email address dan password. Tick pada term of service kemudian klik continue



    Langkah 3
    Notification mengatakan activation email dihantar kepada emial yang anda daftar.


    Langkah 4
    Buka email dan klik pada link yang diberi.


    Langkah 5
    Pengesahan bahawa akaun anda telah diaktifkan.



    Langkah 6
    Login akaun anda, dan untuk kali pertama anda login anda akan diminta untuk create nama untuk shoutbox anda.


    Langkah 7
    Daripada dashboard, anda boleh tetapkan setting yang anda kehendaki


    Langkah 8
    Copy code yang diberi dan paste ke dalam ruangan HTML/javascript blog anda.

    Langkah 9
    Save dan lihat hasilnya.


    Tambahan:

    Selepas pendaftaran, anda juga boleh login menggunakan akaun facebook anda.

    Selamat mencuba??

    Tutorial : Pasang Radio Online Pada Blog

    on Friday, 18 May 2012





    Radio era adalah antara stesyen radio yg diminati.Mungkin ada yg berminat hendak memasang radio era blog masing masing .Berikut adalah cara memasangnya: Masuk ke design--page elements.



    add a gadget

     
    Pilih HTML/Javascript


    Masukkan kod dibawah ini:
    <center><div></div><div><object type="application/x-shockwave-flash" data="http://ads.era.fm/inc/app/shared/dvrplayer/capsules/radioactive/amp_flash/era/era.swf" width="145" height="50"></object></div></center>
    Radio sinar FM
    .date-header {<embed name="plugin" src="http://ads.sinar.fm/inc/app/shared/dvrplayer/capsules/sinar.swf" type="application/x-shockwave-flash" width="199px" height="46px"></embed>
    HITZ FM
    <center><iframe src="http://ads.hitz.fm/inc/app/shared/dvrplayer/capsules/radioactive/amp_flash/hitz/index_t.html" width="640" height="360" scrolling="no" frameborder="0"></iframe></center>
    ria89.7 fm
    <p><embed name="mediaplayer1" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" type="application/x-mplayer2" showstatusbar="1" enablecontextmenu="false" autostart="true" transparentstart="1" loop="0" controller="true" filename="http://www.mediacorpradio.sg/radioliveplayer/asx/ria897/fm897.asx" width="320" height="63"></embed>
    saiz boleh diubah pada width dan height pada kod diatas.

    Tutorial : Tukar Ayat Asal Linkwithi




    Bagi sesiapa yang menggunakan linkwithin pada blog, sememangnya akan muncul satu ayat yang telah di'set'kan secara automatik semasa meletakkan gadget tersebut. Bagi bahasa melayu, akan keluar ayat, "Anda mungkin juga meminati" dan bagi english "You may also like these stories"..

    Ini adalah yang biasa,


    Dan ini pula yang agak kurang biasa.:)



    Anda ingin tukar ayat ini mengikut kehendak anda.?
    Ikuti tutorial yang sangat mudah ini.:)

    Langkah 1
    Login akaun anda, kemudian dari dashboard > layout

    Langkah 2
    Dari page element yang dipaparkan, cari element untuk Linkwithin kemudian klik edit

    Langkah 3
    Daripada kod yang dipaparkan, tambah kod ini dibahagian atasnya

    <script>linkwithin_text='AYAT ANDA DISINI'</script>

    Penerangan : Tukarkan "AYAT ANDA DISINI" dengan apa-apa yang anda kehendaki.:)

    Kod anda sepatutnya kelihatan seperti ini.


    Langkah 4
    Selepas selesai, klik save untuk lihat kesannya..

    Tutorial : Cara Letak Linkwithin Dalam Blog




    Assalamualaikum dan salam 1 Malaysia
    Hari ini, kita akan belajar cara letak linkwithin dalm blog
    Owkey, ikut step ini  saje.


    Linkwithin antara blog yang berguna untuk memaparkan post yang berkaitan dalam sesebuah blog. Link within ini berbeza dengan 'related post' biasa kerana linkwithin memaparkan thumbnail bagi entri yang berkaitan.

    Contoh:


    Antara kelebihan menggunakan linkwithin adalah:

    1.Paparan dengan thumbnail yang lebih menarik perhatian pengunjung
    2.Cara yang mudah untuk letak dalam blog tanpa memerlukan ubahan yang kompleks.

    Berikut adalah cara ringkas untuk meletakkan linkwithin dalam blog.



    Langkah 1

    Langkah 2
    Pada paparan yang muncul, masukkan maklumat yang berkaitan.


    \Cara Letak linkwithin Dalam Blog


    Jika background anda gelap,tick pada kotak kosong kecil tu, dan pastikan anda masukkan bilangan yang sesuai dengan lebar blog anda.

    Langkah 3
    Klik pada install widget

    Cara Letak Linkwithin Dalam Blog


    Langkah 4
    Pilih blog anda ingin masukkan linkwithin(pilih jika anda ada lebih dari 1 blog, kemudian klik add widget

    Cara Letak Linkwithin Dalam Blog


    Langkah 5
    Apabila sudah selesai, klik save pada page element anda. Dan boleh lihat hasilnya.:)

    Cara Letak Linkwithin Dalam Blog




    Owkey Selamat Mencuba,,,,

    Tutorial : Membahagi footer kepada 3 bahagian



    Assalamualaikum dan salam 1 Malaysia
    Hari ini, kita akan membahagikan footer kepada 3 bahagia
    Owkey, ikut step ini  saje.

    Seperti mana yang diketahui kebanyakan template untuk blog mempunyai hanya satu columns pada footer.Ia menyebabkan kita tidak boleh meletakkan lebih widgets pada ruangan tersebut.Dengan membuat ruangan footer kepada tiga bahagian,maka lebih banyak widgets seperti Recent Posts, Recent Comments,Archives dan iklan dapat dimasukkan.Membuat footer sebegini pada blogspot adalah amat mudah dengan hanya mengikuti langkah dibawah ini:

    Nota:sebelum anda mengedit template adalah disarankan supaya membuat salinan template terlebih dahulu dengan mengklik Download Full Template pada halaman Layout--- Edit HTML .Pindahkan widget yang ada pada footer pada mana mana side bar atau bahagian yang lain.

    Langkah 1
    Pada Design pilih edit HTML

    Langkah 2
    Cari kod berikut
    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>
    @

    <div id='footer-section'>
    <b:section class='footer' id='footer'/>
    </div>
    Nota:pada sesetengah template selain dari footer-wrapper anda mungkin jumpa footer atau footer-section

    Langkah 3
    Tukarkan kesemua bermula dari <div> ke </div> dengan kod berikut:

    <div id='footer'>
    <div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/>
    <p>
    <hr align='center' color='#5d5d54' width='90%'/></p>
    <div id='footer-bottom' style='text-align: center; padding: 10px;'>
    <b:section class='footer' id='col-bottom' preferred='yes'>
    </b:section>
    </div>
    <div style='clear:both;'/>
    </div>

    Langkah 4
    Kemudian save template anda.

    Tutorial : Bagaimana nak buat "top commentators"

    on Wednesday, 16 May 2012





    Assalamualaikum dan salam 1 Malaysia 
    Hari ini, kita akan belajar macam mana nak 
    Tutorial Bagaimana nak Buat Top commentators 
    Owkey, ikut step ini saje

    Langkah 1
    Login blog >> design+page element >> add a gadget >>HTMLjavascript

    Langkah 2
    Copy code dibawah dan paste dalam HTML tadi
    <script type="text/javascript">
    function getYpipe(feed) {
    document.write('<ul style="list-style-image: url(link gambar nak pakai);margin-left: 22px;">');
    var i;
    for (i = 0; i < feed.count ; i++)
    {
    var href = "'" + feed.value.items[i].link + "'";
    if(feed.value.items[i].link == "")
    var item ="<li>" + feed.value.items[i].title + "</li>";
    else
    var item = "<li>" + "<a href="+ href + '" target="_blank">' + feed.value.items[i].title + "</a> </li>";
    document.write(item);
    }
    document.write('</ul>');
    }
    </script>
    <script src="http://pipes.yahoo.com/pipes/pipe.run?
    YourBlogUrl=http://ciffahmimalomuchacha.blogspot.com
    &ExcludedNick1=azmi'R
    &ShowHowMany=10
    &_callback=getYpipe
    &_id=23022d7836bf2dd3c10a329feb9be26a
    &_render=json"
    type="text/javascript"></script>

    Langkah 3

    Link gambar nak pakai : kamu kena letak image atau picture bersize kecil (yang bersesuaian) untuk letak sebagai icon. mana nak ambil gambar-gambar tu ok kat sini ada banyak picture cari saja ok graphic cute!

    http://ciffahmimalomuchacha.blogspot.com : ini pula korang masukkan link blog kamu ok

    Azmi'R : ok yang ini pula kalau kamu rasa tak nak masuk sekali nama kamu dalam top comment tu korang boleh letak nama yang kamu pakai pada blog.

    10 : ini pula jumlah yang kamu nak pamerkan top samapai berapa kah blog kamu


    Langkah 4
    Owkey , yang paling penting view dulu untuk milihat sama ada yang kiat buat tu berhasil kah atau tidak kalau berhasil SAVE

    Tutorial : Cara Buang Word Verification Pada Comment




    Assalamualaikum dan salam 1 Malaysia 
    Hari ini, kita akan belajar macam mana nak 
    buang word verification pada comment



    Tujuan utama kita tak perlu pakai word verify ni 1. kebanyakan pengguna blogspot suka komen blog yang tak pakai verify word ni. 2. ia pengaruh kuat pada internet sebab membuatkan pembaca geram dan terus pangkah tak jadi komen. sebab loading lama. lagi-lagi blog yang banyak pakai widget kan.Owkey, ikut step ini saje

    Langkah 1
    Login blog >> settings >> comments

    Langkah 2
    Cari bahagian Show word verification for comments? >> tick No

    Langkah 3
    Siap boleh save setting.


    Owkey siap uda tu.. semoga berjaya

    Tutorial : Animated Recent Post Widge

    on Sunday, 13 May 2012




    Assalamualaikum dan salam 1 Malaysia

    Bagi sesiapa yang menghadapi masalah background widget ini tunjuk 'bandwidth exceed", boleh copy semula kod dibawah, dan masukkan semula url anda. Meletakkan animated recent post widget dapat men'stail'kan lagi cara paparan recent post yang ada pada blog anda. Contoh recent post widget adalah seperti berikut.

    (tunggu page habis load utk tengok pergerakan, pergerakan sebenar adalah lebih perlahan dan lancar)


    Berikut adalah cara-cara untuk menggunakan widget ini.

    Langkah 1

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

    Langkah 2 

    Copy code berikut dan paste di ruangan HTML/javascript

    <center><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:220px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }
    #spylist li {
    width:208px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:70px;
    overflow: hidden;
    background:#fff repeat-x;
    border:1px solid #ddd;
    }


    #spylist li a {
    text-decoration:none;
    color:#4B545B;
    font-size:11px;
    height:18px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }
    #spylist li img {
    float:left;
    margin-right:5px;
    background:#EFEFEF;
    border:0;
    }
    .spydate{
    overflow:hidden;
    font-size:10px;
    color:#0284C2;
    padding:2px 0px;
    margin:1px 0px 0px 0px;
    height:15px;
    font-family:Tahoma,Arial,verdana, sans-serif;
    }


    .spycomment{
    overflow:hidden;
    font-family:Tahoma,Arial,verdana, sans-serif;
    font-size:10px;
    color:#262B2F;
    padding:0px 0px;
    margin:0px 0px;
    }


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


    imgr = new Array();
    imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
    imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
    imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
    imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
    imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
    showRandomImg = true;
    boxwidth = 255;
    cellspacing = 6;
    borderColor = "#232c35";
    bgTD = "#000000";
    thumbwidth = 70;
    thumbheight = 70;
    fntsize = 12;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "comments";
    showPostDate = true;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";
    icon2 = " ";
    numposts = 10;
    home_page = "http://URL BLOG.blogspot.com/";
    limitspy=4
    intervalspy=4000
    </script>


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

    </div>
    </center>

    <small><a href="http://tutorialuntukblog.blogspot.com/2010/08/animated-recent-post-widget.html" target="_blank">get this widget here</a></small>

    Warna Biru : kamu letak URL BLOG dengan url blog anda..


    Baca ini: 
    Didapati tidak semua template blog 'boleh masuk' dengan widget ini. Kemungkin sebahagian besar boleh menggunakan widget ini. Oleh itu anda boleh mencuba dahulu samada boleh guna atau tidak untuk blog anda. Masih belum jumpa penyelesaian untuk itu.

    Langkah 3

    View, Save dan lihat hasilnya.


    SEMOGA BERJAYA

    Tutorial : Misterlinky - cara mudah untuk pengunjung masukkan link di blog




    Assalamualaikum dan salam 1 Malaysia

    Sesetengah pemilik blog akan memasukkan link pengunjung sebagai exchange. Cara ini bagus untuk meningkatkan trafik blog. Kebiasaanya, link pengunjung akan dimasukkan oleh pemilik blog.

    Tetapi dengan misterlinky, pengunjung sendiri akan meninggalkan link blog mereka pada blog² yang meletakkan widget ini. Secara tidak langsung dapat memudahkan kedua-dua belah pihak, pemilik blog dan pengunjung blog.

    Berikut contoh widget misterlinky ini.





    Langkah 1
    Untuk mendapatkan widget ini, anda boleh dapatkan (daftar) di www.misterlinky.net/


    Langkah 2
    Setelah selesai mendaftar dengan linkwinky, dapatkan kod HTML

    Langkah 3
    Dashboard > Design > Add Gadget > Html

    Langkah 4
    Kemudian paste di bahagian page element blog anda.

    Langkah 5
    View, kalau jadi save owkey

    Antara kelebihan menggunakan misterlink ini adalah widget yang simple dan mudah untuk memasukkan url blog. Pemilik blog juga senang untuk menguruskan widget ini(jika ada link yang tidak dikehendaki)

    SEMOGA BERJAYA

    Tutorial : Floating Button

    on Thursday, 10 May 2012


    Bentuk Floating Button Macam ney..??
    Kalau nak buat jom lihat langkah yang saya berikan owkey...




    Floating button ini , ada dekat sebelah KIRI blog saya kalau nak tukar ke sebelah kanan pun boleh

    Langkah 1
    Log in > Dashboard > Design > Add Gadget > Html/Java Script

    Langkah 2
    Copy code dibawah ni dan paste di ruang HTML/Javascript


     <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:140px; left:-12px;'>

    <a class='linkopacity' href='http://www.facebook.com/Kochikami azmiey' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/232.png" /></a><br />

    <a class='linkopacity' href='http://twitter.com/KHAIRUL21' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/432.png" /></a><br />

    <a class='linkopacity' href='http://ciffahmimalomuchacha.blogspot.com' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/blogger_64x64.png" /></a><br />
    </div>

    Link Youtube

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



    Langkah 3.
    Belum Siap lagi  , owkey, yang tulisan warna PINK tu , kamu tukarkan lah dgn link kamu

    Langkah 4
    Yang warna hitam = boleh tukarkan mengikut kesesuaian blog . Left boleh tukar menjadi Right !

    Langkah 5
    Bagi yang warna BIRU pula , Jika kamu nak kekalkan pun boleh , kalau nak , just tukar kan je link itu mengikut kemahuan kamu...owkey

     
    © BLOG BUDAK BAEK All Rights Reserved