Facebook like box muncul bila blog dikunjungi

Widget Facebook like box ini akan muncul apabila pengunjung memasuki blog.Mungkin anda pernah meliha widget ini dipasang pada kebanyakan blog diwaktu ini.Ia boleh dipasang pada blogger dan juga wordpress.Widget ini boleh di tutup paparannya,bukan seperti sesetengah blog yang memasangnya seolah olah memaksa pengunjung untuk klik butang like.

Cara memasangnya:

Log in keblogger
Klik pada Layout >>Add a gadget

Pilih HTML/javascript

Dan masukkan kod dibawah ini

<style>
   
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
    #cboxOverlay{position:fixed; width:100%; height:100%;}
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
    #cboxContent{position:relative;}
    #cboxLoadedContent{overflow:auto;}
    #cboxTitle{margin:0;}
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
    .cboxPhoto{float:left; margin:auto; border:0; display:block;}
    .cboxIframe{width:100%; height:100%; display:block; border:0;}
   
    #cboxOverlay{background:#000;opacity:0.5 !important;}
    #colorbox{
            box-shadow:0 0 15px rgba(0,0,0,0.4);
           -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
            -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
           }
     
    #cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfoh9DdVdw-aYDkXSLN3dzNzDZcBCHj9zVc41ESLV_RA7ZEmUL-unfzFgJ_QxonegGq-C9lTAYgWRm7V29qDxiyD6a-ptHJOPewbXcRiWxvhbk2rwjGNmeP3rDzmm0GWQ6NbdoHpzX4J8/s1600/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGeoD82XKcyWGeSuS_IgjOkaJWU8IU3lpoM_60oMcIklZWApkI7V1_xz5FyKVWrG5pfrgNohKnYH4t6b2moZUodMXy9bz4FI4m8Iqga2Ul9kAkg8rE88w9iCoaJKxTP6WTpUeSddV6EWc/s400/border.png) repeat-x top left;}
         #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfoh9DdVdw-aYDkXSLN3dzNzDZcBCHj9zVc41ESLV_RA7ZEmUL-unfzFgJ_QxonegGq-C9lTAYgWRm7V29qDxiyD6a-ptHJOPewbXcRiWxvhbk2rwjGNmeP3rDzmm0GWQ6NbdoHpzX4J8/s1600/controls.png) no-repeat -36px 0;}
         #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfoh9DdVdw-aYDkXSLN3dzNzDZcBCHj9zVc41ESLV_RA7ZEmUL-unfzFgJ_QxonegGq-C9lTAYgWRm7V29qDxiyD6a-ptHJOPewbXcRiWxvhbk2rwjGNmeP3rDzmm0GWQ6NbdoHpzX4J8/s1600/controls.png) no-repeat 0 -32px;}
         #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGeoD82XKcyWGeSuS_IgjOkaJWU8IU3lpoM_60oMcIklZWApkI7V1_xz5FyKVWrG5pfrgNohKnYH4t6b2moZUodMXy9bz4FI4m8Iqga2Ul9kAkg8rE88w9iCoaJKxTP6WTpUeSddV6EWc/s400/border.png) repeat-x bottom left;}
         #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfoh9DdVdw-aYDkXSLN3dzNzDZcBCHj9zVc41ESLV_RA7ZEmUL-unfzFgJ_QxonegGq-C9lTAYgWRm7V29qDxiyD6a-ptHJOPewbXcRiWxvhbk2rwjGNmeP3rDzmm0GWQ6NbdoHpzX4J8/s1600/controls.png) no-repeat -36px -32px;}
         #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfoh9DdVdw-aYDkXSLN3dzNzDZcBCHj9zVc41ESLV_RA7ZEmUL-unfzFgJ_QxonegGq-C9lTAYgWRm7V29qDxiyD6a-ptHJOPewbXcRiWxvhbk2rwjGNmeP3rDzmm0GWQ6NbdoHpzX4J8/s1600/controls.png) repeat-y -175px 0;}
         #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfoh9DdVdw-aYDkXSLN3dzNzDZcBCHj9zVc41ESLV_RA7ZEmUL-unfzFgJ_QxonegGq-C9lTAYgWRm7V29qDxiyD6a-ptHJOPewbXcRiWxvhbk2rwjGNmeP3rDzmm0GWQ6NbdoHpzX4J8/s1600/controls.png) repeat-y -211px 0;}
         #cboxContent{background:#fff; overflow:visible;}
             #cboxLoadedContent{margin-bottom:5px;}
             #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij2rOPvC7navHXf0pu8f4HaoGXVMbrYWS0hc-zpmUs2q3C-XiGzABZMdH0GKpups2WsxgF_aT1Bx7jTcIEMObdzgJ7dRPAdWhkPyRiSc4U5BiCSkXCudJ7uwpM_K7Qs-4yfONy9bNi7o0/s400/loadingbackground.png) no-repeat center center;}
             #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf32gV1wMa5Q6MhXmwnRKEdj_eC8AeatMwgoZJHW1mAG2n_mOVbCzqb2zwoqkXzjjdtIBea1_10HQ9wQX4oEqw7zbIRz683NCmHE0LkscwZvwDFvlVaO0Zrrh5C_1yvan6S6kh_Qq1hG0/s400/loading.gif) no-repeat center center;}
             #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
             #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
             #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfoh9DdVdw-aYDkXSLN3dzNzDZcBCHj9zVc41ESLV_RA7ZEmUL-unfzFgJ_QxonegGq-C9lTAYgWRm7V29qDxiyD6a-ptHJOPewbXcRiWxvhbk2rwjGNmeP3rDzmm0GWQ6NbdoHpzX4J8/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
             #cboxPrevious{left:0px; background-position: -51px -25px;}
             #cboxPrevious.hover{background-position:-51px 0px;}
             #cboxNext{left:27px; background-position:-75px -25px;}
             #cboxNext.hover{background-position:-75px 0px;}
             #cboxClose{right:0; background-position:-100px -25px;}
             #cboxClose.hover{background-position:-100px 0px;}
             .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
             .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
             .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
             .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}


    /*-----------------------------------------------------------------------------------*/
    /*   Facebook Likebox popup For Blogger
    /*-----------------------------------------------------------------------------------*/
    #subscribe {
        font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
    }
    #subscribe a,
    #subscribe a:hover,
    #subscribe a:visited {
        text-decoration:none;
    }
    .box-title {
       color: #F66303;
       font-size: 20px !important;
       font-weight: bold;
       margin: 10px 0;
    border:1px solid #ddd;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding:10px;
    line-height:25px; font-family:arial !important;
    }
    .box-tagline {
       color: #999;
       margin: 0;
       text-align: center;
    }
    #subs-container {
        padding: 35px 0 30px 0;
        position: relative;
    }
    a:link, a:visited {
    border:none;
    }
    .demo {
    display:none;
    }
    </style>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

    <script src="https://sites.google.com/site/teknikbuatblog/tbb/facebook%20pop-up.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
       if (document.cookie.indexOf('visited=true') == -1) {
           var fifteenDays = 1000*60*60*24*30;
           var expires = new Date((new Date()).valueOf() + fifteenDays);
           document.cookie = "visited=true;expires=" + expires.toUTCString();
       $.colorbox({width:"400px", inline:true, href:"#subscribe"});
           }
    });
    </script>
        <!-- This contains the hidden content for inline calls -->
    
            <div style='display:none'>
       <div id='subscribe' style='padding:10px; background:#fff;'>
            <h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
      <center>
          <center>

    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertricks&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center>
<p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>
</div>
</div>

#Tukarkan bloggertricks pada kod diatas dengan username facebook anda

Kemudian klik pada save untuk melihat hasilnya:
Kredit untuk mybloggertricks 

update 8/5/2013

Apa itu page source

Kebelakangan ni aku sibuk sikit memindahkan entri2 dari blog ni dan memplagiat entri blog orang ke forum aku ... aku plagiat atas kebenaran owner.. huhuhu..

Tujuan aku pindahkan ke forum adalah sebab pageloading di forum tu memang laju.. jadi kepada sesiapa yang broadband dia dah sampai limit.. boleh la cari tutorial dari blog ni di situ

NOTACODER

Sebenarnya aku mau share pasal page source.. mungkin ada yang tahu dan ada yang tidak tahu apa dia page source tu.. aku pun tidak tahu secara spesifik sebenarnya.. tapi apa yang aku tau macam2 yang anda boleh ambil dari page source tu..

Kalau dulu aku cuma mengambil javascript pada page source tu dan melihat cara susunan code css tapi sekarang aku bertindak jauh lebih melampau.. hahaha

Apa tidak.. pada masa ni aku sudah mampu memplagiat template hanya dengan melihat page source .. hahaha.. kejamnya aku...

Boleh tahan juga kemahiran aku melihat page source.. ekekek..

Berikut aku sertakan screen shot template yang anda perlu bayar sebanyak USD 15 jika anda hendak menggunakannya..(lebih mahal dari beli domain.. huhuhu)

Tu dia.. USD 15,.. memang kena dengan harga,, cantik template ni

ni gambar template tu digunakan pada blog demo template tu...

Tu dia.. lepas aku curi segala2 dari page source template testing owner asal template tu...aku terus pasang pada template aku.. kena edit lagi ... huhuhu.. bukan boleh pakai terus..

Walau apa pun template ni aku tidak akan release untuk kegunaan awam sebab kalau aku release aku dah kacau periuk nasik designer asal tu...

Aku buat ni untuk menguji sejauh mana kemahiran aku membongkar page source,.. hehehe..

Kepada yang masih tidak tahu apa itu page source... sila tekan

CTRL + U

ketika membaca entri ni.. akan keluar satu window.. yang penuh dengan code.. itulah dia page source...

Sekian

Tutorial cara pasang widget link within

Tutorial request by azzra

Widget ni adalah widget related post yang terbaik bagi aku..

cara pasang pada blog senang saja.. tidak perlu bermain2 dengan code..

Mula2 pastikan anda sudah login akaun blogger anda..

Kemudian pergi ke site ni   http://www.linkwithin.com/learn

isikan apa yang patut.. macam gambar di atas.. email pastikan betul... pada width tu,, anda pilih mengikut kesesuaian blog anda... macam gambar screen shot di atas sekali tu.. adalah 5 stories.. jika blog anda background hitam.. tick pada my blog has light text on dark background.. klu terang.. sila abaikan... kemudian klik get widget

lepas anda klik get widget tadi.. akan keluar seperti gambar di atas,, klik install widget...

lepas tu akan jadi seperti di atas.. sila pilih blog jika anda ada lebih dari 1 blog.. title tu anda boleh letak apa2 saja yang anda suka2 hati... hahaha

kemudian klik add widget ....

lepas tu pindahkan widget tu di bawah blog posts .. seperti gambar di atas... Senangkan

Sekian

Tutorial cara hilangkan warna background untuk template moden

Tutorial ni atas request azzra

Sekarang ni aku agak bz skit sebab tengah belajar buat website.. tutorial ni dah lama diminta tapi baru ada kesempatan untuk buat..

Untuk template moden memang senang untuk di setkan.. sebab template moden ni boleh disetkan menggunakan template designer .. jadi anda tidak perlu bermain2 dengan code

gambar di atas tu contoh widget pada sidebar.. dalam tutorial ni kita akan hilangkan warna background tu


Mula2 pergi ke desbot---desaign---kemudian klik pada tab template designer

bila anda klik pada template designer.. akan jadik la seperti di atas,, kemudian klik advance tu

lepas anda klik advance... cari gadget background kemudian setkan background colour kepada transparent
border colour pun transparent ... bevel colour transparent juga,,, macam gambar di atas lepas tu apply to blog..

selesai

hasilnya seperti gambar di atas...

Sekian

Apa itu domain dan apa itu hosting..

Disini aku akan terangkan secara ringkas apa itu domain dan apa itu hosting.. dalam penerangan ini aku sertakan beberapa blog/site yang aku buat menggunakan domain percuma dan menggunakan hosting percuma

Domain tu kira alamat url la ....

Domain dan hosting google

blogger-blog-tutorial.blogspot.com

Domain sendiri dan hosting google

www.p0l5k4h4ckr3w.co.cc


Domain dan Hosting sendiri

polskahackrew.com

n0t-a-c0der.co.cc

http://notacoder.co.cc/

Hosting tu ialah tempat dimana fail2 seperti entri,template,widget dll disimpan..

Jangan lupa singgah di site2 tu.. semua tu aku punya.. ('',)

Untuk blogspot, segala mala file2 seperti entri,template dan sebagainya.. ia disimpan pada server google... anda masih under google jika anda membeli domain dan menggunakan hosting google..

contoh
www.p0l5k4h4ckr3w.co.cc ialah domain sendiri(percuma) menggunakan hosting google .. Untuk menulis entri/edit template cuma perlu login dashboard blogger.com

Apa macam boleh ikut x penerangan ni..?

Untuk domain dan hosting sendiri... dashboard dia lain sikit.. kebanyakan blogger yang menggunakan domain dan hosting sendiri ni menggunakan platform wordpress sebab ianya mudah dikendalikan.. macam blogspot juga..

polskahackrew.com menggunakan hosting dari netkl domain berbayar platform wordpress

n0t-a-c0der.co.cc menggunakan hosting dari 1freehosting domain percuma platform wordpress

http://notacoder.co.cc/ menggunakan hosting dari wordpress sekali dengan domain platform wordpress...




Pada masa akan datang aku akan buat tutorial cara buat domain dan hosting sendiri..
Yang percuma punya sahaja.. huhu..

Kalau nak,aku boleh buatkan.. itu pun kalau kena dengan rundingan.. huhu

Cara pasang widget add me on google

Widget add me on google adalah seakan akan facebook like box.Ia adalah widget yang memaparkan jumlah follower bagi Google + Circle.Ia adalah widget yang membolehkan kita berhubung dengan pengunjung.

Langkah langkah bagi  memasangnya:
Dapatkan google+ id pada google plus profile page
Url contohnya adalah seperti dibawah ini
https://plus.google.com/b/()812701480064512353519/posts

1.Masuk ke web widgetplus.com
2.Klik pada butang get widget
3.Masukkan google+ id tadi pada tab basic setting (seperti contoh pada teks berwarna merah diatas)

   Beberapa setting lain juga boleh diubah seperti warna background,warna button,saiz  teks dan sebagainya.
4.Kemudian klik pada butang get code(yang akan muncul diatasnya) dan salin kod yang diberi
5.Masuk ke design>>Page elements>>HTML/Javascript
6.Masukkan kod pada widget dan simpan untuk melihat hasilnya.



klik butang +1 jika suka artikel ini :) :)

farrahain96.blogspot.com ditawan oleh Monkey D Luffy

masa aku tengah cuba2 buat website.... bila aku buka blog dan tengok shoutbox aku.. aku diberitahu pasal ni oleh b3nt3n.. huhu.. rindu nak tgk en b3nt3n beraksi..

b3nt3n bagitau yang bukan dia yang buat.. tp kwn dia daa,, huhu

kepada pemilik blog tu harap bersabar ek.. akaun tu akan dikembalikan juga,,

Anda boleh tengok sendiri pada blog http://farrahain96.blogspot.com/..

Agak menarik jugak susunan script deface dari Monkey D Luffy.. ('',)

Jika blog telah pulih.. anda boleh lihat karya Monkey D Luffy pada live demo

LIVE DEMO

Sekian

Laman phising yang sedang menyerang blogger

Sepatutnya aku buat dan release entri ni tadi.. tapi aku sibuk sikit ,, huhu.. aku jumpa link site ni ditinggalkan pada shoutbox aku.. huhu.. nice try.. tapi kantoi juga,,

Ekekekek.. rasanya mungkin ada yang terkena juga dan menjadi mangsa..

tu dia screenshot.. biladahberlalu. huhu macam ayat2 novel.. ekekekek.....

ni gambar penuh dia... sebijik macam nak login blogger.com.. kalau ada yang x perasan dan terus login memang kena la...

berikut adalah form login yang aku ambil dari page source laman phising tu

<form method="get" action="http://biladahberlalu.comyr.com/katalaluanb.php" id="gaia_loginform">
  

</form>


dan berikut adalah form login blogger.com yang sebenar


  <form id="gaia_loginform" action="https://accounts.google.com/ServiceLoginAuth" method="post">



nampak x perbezaan dia.. pandai la tengok ok...


Cara elak terkena laman phising ni senang saja,, kalau nak login pastikan url tu betul... Jika anda sudah sememangnya login ke akaun google... google tidak akan meminta anda login lagi sekali..

sebagai contoh.. anda telah login ke akaun gmail anda... untuk masuk ke dasboard blogger,anda tidak perlu login lagi.. ada faham...?

Jom baca entri ni

Tingkatkan tahap keselamatan blog/google akaun anda dengan 2-step verification

Sekian

Tutorial cara letak facebook send button

Fungsi send button ni adalah untuk memudahkan anda menghantar entri pada rakan2 difacebook anda serta ping blog pada group2 blogger yang telah ditetapkan email group..

anda boleh lihat sendiri pada gambar di atas.. senangkan.. ('',)

Cara pasang pada blog anda mudah ja..

Mula2 pergi ke desbod---design---edit html... tick pada expand widget template..

Cari code

<data:post.body/>
Kemudian copy dan paste code di bawah samada di atas atau di bawah code yang dicari tadi....selesai

<!--Facebook Send button Start P0L5K4H4CKR3W-->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='arial'/>
<!--Facebook Send button End P0L5K4H4CKR3W-->

Sekian

3 blogspot ditawan oleh Programmer Nazaryman Leets Haxor

Aku jumpa ni kat post group FB DragonForce terus aku bookmark blog2 tersebut

Script deface dari Programmer Nazaryman Leets Haxor ni memang menarik dan style..

Berikut adalah senarai blog yang ditawan

http://ireenlove.blogspot.com/
http://sigemukpunyeblog.blogspot.com/
http://fatziq.blogspot.com/

kepada owner blog tersebut.. cuba2 la carik Programmer Nazaryman Leets Haxor kat group DragonForce untuk menuntut blog mereka..

jika blog tersebut telah pulih.. anda boleh lihat pada live demo


LIVE DEMO

CARA TINGKATKAN KESELAMATAN BLOG

Sekian

Tutorial cara buat subdomain untuk blogspot | Net.KL

Terlebih dahulu aku ucapkan jutaan terima kasih kepada admin Ammboi.com kerana menaja domain dan file hosting yang bernilai Rm 450.. atas dari sumbangan tersebut macam2 yang telah aku pelajari..

Tutorial ni aku buat untuk rujukan bersama.. yela.. bukan selamanya aku ada domain dengan file hosting ni..

Tutorial ni adalah untuk mereka yang menggunakan khidmat file hosting Net.KL .. paling minima blogging plan wordpress dan paling maksima Large Biz.. macam yang aku guna ketika entri ni ditulis..

Penerangan ringkas subdomain..
Domain aku ialah polskahackrew.com.. subdomain yang aku buat dalam tutorial ni.. bloggerblogtutorial.polskahackrew.com ,,.. senangkan nak faham.. subdomain ni aku guna pada blog testing aku..

Domain utama(polskahackrew.com) adalah wordpress.. subdomain ni aku buat untuk blogspot..

pengguna wordpress ada 10 subdomain... aku ada unlimited.. huhuhu... sebab aku pengguna plan large biz

Mula2 pergi ke control panel Net.KL korang.. pada domains...klik Advanced DNS Zone Editor...

pada add a record... name isikan nama subdomain.. contoh bloggerblogtutorial.. dia akan automatik jadi bloggerblogtutorial.polskahackrew.com
Pada TTL isi intiger positif.. aku letak 14400 sebab aku tengok semua TTL 14400.. ikut TTL yang ada pada record anda..

Pada TYPE isi CNAME

Pada CNAME pula isi ghs.google.com kemudian klik add record

lepas klik add a record.. scrollkan ke bawah ...pada zone file records cari nama subdomain anda tadi

bila jumpa anda copy la subdomain tu.. agar senang.. x perlu taip.. tapi ada noktah pada hujung subdomain tu.. copy sampai com sahaja,,

lepas tu pergi ke dashboard blogger.com.. klik settings

pada setting klik publishing

pada publishing klik custom domain

kemudian klik switch to advance setting..

masukkan subdomain anda tadi pada your domain tu.. macam dalam gambar di atas..

isi word verification kemudian klik save settings..... selesaiiii

aku ambil screen shot.. sebab suatu masa nanti link ni pasti mati.. xda duit nak renew.. huhuhu

Kepada blogger yang menggunakan wordpress dan menggunakan khidmat file hosting Net.KL.. jika anda ada lebih dari 1 blog iaitu blogspot.. adalah lebih baik anda gantikan domain blogspot tu ke subdomain anda.. sebab trafik subdomain ni bergabung dengan domain utama tu.. jika trafik domain utama dan subdomain tinggi maka makin cepat la alexa rangking naik...

http://bloggerblogtutorial.polskahackrew.com

Apa macam.. ada paham... huhuhu...

Sekian

Tutorial cara hias tajuk widget sidebar

Tutorial ni atas request Inani a.k.a akuastronaut

Tutorial ni menggunakan simple css code.. kita akan hias tajuk widget menjadi rounded corner di atas dan straigh corner di bawah

Contoh seperti gambar di atas tu

Sebelum memulakan upacara mengedit template.. save template terlebih dahulu..

Mula2 pergi ke desbod---design---edit html... tidak perlu tick pada expand widget template..

cari code

]]</b:skin>

kemudian copy dan paste code di bawah,, sebelum code yang dicari tadi

.sidebar .widget h2{background:#FFB3C6;border-radius:10px 10px 0px 0px;text-align:center;font-size:17px;padding:7px;
 }


CONTOH

.sidebar .widget h2{background:#FFB3C6;border-radius:10px 10px 0px 0px;text-align:center;font-size:17px;padding:7px;
 }
]]</b:skin>

Penerangan dan cara edit

.sidebar .widget h2{background:#FFB3C6;border-radius:10px 10px 0px 0px;text-align:center;font-size:17px;padding:7px;
 }

background:#FFB3C6 ni code warna  background untuk tajuk widget sidebar tu.. anda boleh tukar code warna tu ikut suka2 hati anda,, lalalala

border-radius:10px 10px 0px 0px  .. inilah dia code yang buat dia rounded corner di atas dan straight corner di bawah .. angka 10 px tu anda ubah la mengikut kesesuaian makin besar angka tu makin melengkung.. ubah kedua2 angka 10px tu.. jangan ubah angka 0px tu..

text-align:center tu.. membuatkan tajuk sidebar berada di tengah.. jika anda mahutajuk sidebar di kiri tukar code tu dengan  text-align:left;   .. jika anda mahu tajuk tu lepak di kanan tukar code tu kepada text-align:right;

font-size:17px tu saiz tulisan.. anda ubah mengikut kesesuaian blog anda

padding:7px ni aku x tau macamana nak terangkan.. cuba anda ubah ikut kesesuaian.. cuma tukar angka 7 tu

senangkan..

Sekian

CashOut Churp2 Yang Pertama

Selamat beberapa bulan berblogging.. ini adalah pendapatan aku yang pertama,,,. Memang tidak dinafikan gembira rasanya,, huhu weee..

Tu dia.. dah cukup 100 x tunggu lama.. terus tekan cashout.. ekekekek,,,

Da kosong balik.. hua hua hua,, kumpul lagi..

Duit x tau bila sampaii.. dapat duit nanti aku nak beli domain ekekek... untuk 2 tahun mungkin.. hehe,,,... baru blog nampak eklusif walaupun blog ni sentiasa pelik layout dia.. hahaha.. alalala.. gembiranya aku,,,

Kepada mereka yang belum dapat hasil dari churp2 ni.. harap bersabar.. dan tingkatkan usaha,, kalau mau cepat generate.. cer baca entri aku pop up yang mendatangkan hasil tu.. hehehe

Selamat berblogging

Sekian

Code Tutorial | CSS slow hover efek

Seperti yang anda tahu.. hover ni adalah efek saat disentuh mouse.. samada gambar link dan lain2..

Penggunaan yang paling meluas ialah pada link.. sebagai contoh bila link disentuh mouse warna link akan bertukar dengan serta merta..

tapi dengan menggunakan code slow hover efek ni.. link tu tidak akan bertukar serta merta.. tapi secara perlahan2 mengikut setting yang ditetapkan..

Aku pun baru tahu cara penggunaan efek ni.. sebelum aku terlupa.. adalah lebih baik aku buat entri untuk panduan pada masa yang akan datang.. ('',)

Berikut aku sertakan 2 live demo untuk pemahaman

Contoh 1

Letak mouse disini untuk melihat apa yang akan terjadi... lalalalala


Code di tulis seperti berikut

<style type='text/css'>#henteri {background:#ff3366;color:#151515;overflow:hidden;border:5px dashed #0f0;width:90%;height:350px;border-radius:15px;text-align:left;padding:6px;-webkit-transition-duration:5.5s;-moz-transition-duration:5.5s;}

#henteri:hover {background:#151515;color:#eee;overflow:auto;border:5px solid #3366ff;}</style><center><div id='henteri'><br/>Letak mouse disini untuk melihat apa yang akan terjadi... lalalalala<br/><br/></div>

Contoh 2

Apa yang penting ialah barisan code seperti berikut

-webkit-transition-duration:1.5s;-moz-transition-duration:1.5s;

masa delay adalah 1.5s tu.. anda boleh setkan ikut suka hati

cara penggunaan terpulang dari pemikiran logik anda.. aku pun masih kaji lagi ekekek..

salah 1 contoh penggunaan yanh best ialah anda letakkan code tu pada body dan setkan masa 15s.. bila sampai masa blog akan tukar warna dan tulisan..

Cuba lepak dalam entri selama 31.5 saat.. tengok apa jadik..

Sekian

Tutorial cara letak sitemap a.k.a. Daftar Isi di blog V2

Sebelum ni aku ada buat tutorial buat sitemap yang juga dikenali sebagai daftar isi.. versi ni macam best skit berbanding yang sebelum ni.. sebab ia di susun mengikut latest post..

Anda boleh pilih label juga,, memang menarik sikit..

LIVE DEMO

Cara pasang widget ni berbeza sedikit berbanding dengan widget lain tapi senang saja..

Mula2 pergi ke desbord----posting----edit pages---New page

gunakan edit html.. bukan compose...

copy code di bawah...gantikan tulisan URL BLOG ANDA dengan url blog kau orang la.. ekekek

<div id='cl_option'>

<span style='text-align:center;font-size:61px;'>Loading...</span> </div>
<div id='cl_content_list'>

</div>
<script type='text/javascript'>
var jumlah_kata_dalam_ringkasan =0;
</script>
<script src='http://polste.googlecode.com/files/POLSKA_sitemaperr2.js'>

</script>
<script src='http://URL BLOG ANDA.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=9999'>
</script>

CONTOH

<div id='cl_option'>

<span style='text-align:center;font-size:61px;'>Loading...</span> </div>
<div id='cl_content_list'>

</div>
<script type='text/javascript'>
var jumlah_kata_dalam_ringkasan =0;
</script>
<script src='http://polste.googlecode.com/files/POLSKA_sitemaperr2.js'>

</script>
<script src='http://blogger-blog-tutorial.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=9999'>
</script>

Senangkan..

Sekian

Pasang butang share tweet,like dan Plus One

Butang share kali ini adalah  Facebook like, Tweet,dan juga Google  Plus One .Mungkin sebelum ini anda agak sukar untuk meletaknya sebaris kerana memasangnya secara berasingan Jadi  dengan tutorial ini akan lebih memudahkan memasangnya.dalam satu barisan.

Cara memasangnya:
Salin kod dibawah ini terlebih dahulu:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<table border='0'><tr>
    <td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td> <a class='twitter-share-button' data-count='horizontal' data-related='' data-via='teknikbuatblog' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td><td><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='arial'/></td>
</tr></table>    </b:if>

Kemudian masuk ke design…>> Template>edit HTML

Cari kod <div class='post-header-line-1'/>
 Gunakan fungsi search(klik didalam ruangan kod pada template tekan butang CTRL + F untuk mengaktifkan fungsi search)
jika hendak memasang dibawah tajuk posting jika tiada cari kod  <data:post.body/> dan letak kod tadi diatasnya.

Jika hendak memasangnya dibawah letakkan selepas kod <data:post.body/>

Letakkan kod dibawah ini diatas kod </head>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

Jika pernah memasang butang google plus one sebelum ini,tidak perlu memasang kod diatas.

Simpan template dan lihat hasilnya.
Jika anda menggunakan read more dan hendak ia terpapar dihadapan dan juga pada ruang posting delete kod yang berwarna merah diatas
Gantikan perkataan teknikbuatblog dengan username twitter anda


klik butang +1 jika suka artikel ini :) :)

update 8/5/2013

Tutorial cara buat zoom efek pada image pada entry sahaja

Tutorial ni atas request NazaKu

Kalau sebelum ni saya ada buat tutorial zoom efek pada gambar.. dalam tutorial tu efek tu pada semua gambar di blog..

Kali ni hanya untuk gambar pada entri sahaja

Mula2 pergi ke desbot---design---edit html.... tidak perlu tick pada expand widget template..

Cari code

]]</b:skin>

kemudian masukkan code masukkan code di bawah sebelum code yang dicari tadi

.post img, table.tr-caption-container {
border:none;
height:auto;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);border-radius:15px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}


CONTOH


.post img, table.tr-caption-container {
border:none;
height:auto;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-webkit-transform: scale(1.5);border-radius:15px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}
]]</b:skin>

Kemudian preview,, jika ok save...

kawalan saiz zoom terletak pada no 1.5 yang aku besarkan tu.. edit mengikut kesesuaian... makin besar angka makin besar la zoom dia

Sekian

Tutorial cara lebarkan blog

Tutorial ni atas request CIk Kay Jue

Cara lebarkan blog ni untuk template lama iaitu classic template yang launched 2006..

untuk template moden anda boleh lebarkan blog pada pada template designer tu...

Melebarkan blog anda perlu buat 3 perkara serta permainan matematik sikit..ekekek

Pertama lebarkan #outer-wrapper(tempat letaknya #main-wrapper dan #sidebar-wrapper

Kedua lebarkan #main-wrapper(tempat entri)

Ketiga lebarkan #side-wrapper{sidebar la apa lagi.. ekekekek)

Sebelum buat apa2 save template dulu....

Mula2 pergi ke desbot---design---edit html...tidak perlu tick pada expand widget template....

Cari code #outer-wrapper

lepas tu akan kluar la seperti berikut

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Serif;
}

ada yang sama ada yang berbeza... tapi apa yang penting adalah width:660px; tu.. itu lah lebar blog anda... cuba besarkan sedikit...
tukar width:660px; kepada width:800px; atau ikut suka kau... kemudian preview lihat ada perubahan atau tidak..


untuk #main-wrapper dan #sidebar-wrapper anda tidak boleh lebarkan ikut suka hati laki tiri jiran sebelah rumah..

Nota : Jika anda setkan lebar #outer-wrapper 800px; .....
jumlah lebar #main-wrapper + #sidebar-wrapper tidak boleh lebih dari 800px;...

contoh : lebar #main-wrapper anda setkan 540px manakala #sidebar-wrapper anda setkan 240px.. jumlah campur= 780px
jumlah campur tu dibawah 800px... bagi ruang kelegaan sikit..


untuk lebarkan main-wrapper cari code

#main-wrapper

Kemudian akan keluar code seperti berikut

#main-wrapper {
width: 480px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

mungkin berbeza sedikit tapi apa yang penting ialah width:480px;..itulah lebar #main-wrapper
..tukar angka 480px ke 540px

kemudian preview.. cuba lihat perubahan dia...

Sekarang lebarkan sidebar-wrapper

cari code
#sidebar-wrapper kemudian akan keluar sepert berikut.

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

seperti biasa la.. mungkin berbeza dengan code pada blog anda tapi apa yang penting.. width:150px;

Tukar angka 150px kepada 240px kemudian preview

Jika semuanya ok.. anda boleh save...

Sekian

Tutorial cara buat efek link pelangi

Efek link pelangi bukan la untuk membuatkan setiap link tu jadi kaler pelangi tapi.. link tu akan jadi kaler pelangi jika anda letakkan mouse cursor..

Cuba letak mouse pada mana2 link dalam entri ni.. tengok apa jadik

Cara letak pada blog senang saja..

Mula2 pergi ke desbod---design---ada gadget---html/javascript..

kemudian copy dan paste code di bawah

<script src="http://polste.googlecode.com/files/LINK_PELANGI.js" type="text/javascript"></script>

Kemudian save... selesaiii

Sekian

Code Tutorial | Gambar Berputar

Tutorial ni atas request blogger dari seberang,INDRA

Ketika aku buat tutorial ni gambar header aku pada homepage aku pasang efek ni.. memang pelik jugak bila letak mouse pada header tu gambar tu akan berputar..

Simple ja coding dia ni.. terpulang dari anda untuk menggunakannya..

Code di tulis seperti berikut

<style type='text/css'>
#polsking img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;margin:0 auto;}
#polsking img:hover{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}
</style>

<div id='polsking'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOQJoJc4x4KJtDwl-jpNqk3BLE40l_F33eRAeD25V12dUi7-LmG0FVPcVahBGt_ocitfJOxzJj4eLi4tOZy5BT8kztIC-DL3jLpDqpfnyMryoO_fzUfycrA5kx9FT0kwOxxD-j3eUlGuiz/s1600/CATT.png' style='margin-bottom:-70px;'/></div>

Link gambar yang tulisan kaler kuning tu

Demo

Pandai2 la edit k.. ehehehe

Tutorial cara letak page number di blog

Biasanya widget ni digunakan pada blog perkongsian muvee dan software.. namun ada juga blog peribadi yang menggunakan widget ni..

Mungkin ada yang pernah terlihat widget ni dan ada yang belum... jadi aku sertakan gambar sekerin shot

tu la dia page nombor.. sama macam next dan previous page... tapi style sikit

LIVE DEMO

Cara pasang di blog senang saja.. aku permudahkan sikit.. ekekekek...

Mula2 pergi ke desbot---design---edit html...tidak perlu tick pada expand widget template....

Cari code

</body>

kemudian copy code di bawah dan pastekan SEBELUM code yang dicari tadi

<style type='text/css'>
.P0L5K4Area a {font-size:21px;border-right:2px solid #eee;font-weight:bold;}
.P0L5K4Area a:visited {
text-decoration:none;color:#36f;
}
.nomborP0L5K4 a {
text-decoration:none;
margin:0 auto;
padding:9px;
}
.nomborP0L5K4 a:hover {color:#151515;
background-color:#eee;
}
.WHATthePOINT {
color:#333;text-decoration:none;
background: #ccc;
margin:0 auto;
padding:9px;
}
.P0L5K4Of {
text-decoration:none;
padding:9px;
margin: 0 auto;
}
.P0L5K4 a {
text-decoration:none;
}
.P0L5K4 a:hover {
text-decoration:none;
}
.nomborP0L5K4 a:link,.P0L5K4 a:link {
text-decoration:none;
color:#333333;
}
</style>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://polste.googlecode.com/files/NOMborpages.js' type='text/javascript'/>
</b:if>

kemudian preview... jika ok save.... senangkan... ekekekek lalalala

Sekian

Tutorial cara buat semua link open in new tab | HTML

Buka link pada tab baru ni memudahkan pengunjung anda untuk buka banyak2 tab blog anda
Terdapat 2 cara untuk buat semua link buka pada tab baru

Cara 1 dengan menggunakan coding HTML.. cara 2 menggunakan coding javascript

Anda boleh cuba2 terai test klik pada mana2 link dalam entri ni...

Dalam tutorial ni adalah cara 1 iatu menggunakan coding HTML

Mula2 pergi ke desbod---design---edit html...tidak perlu tick pada expand widget templates

Cari code

</head>

Kemudian masukkan code di bawah SEBELUM code yang dicari tadi..

<base target='_blank' />

Kemudian Save...Selesai... senangkan

Sekian

Tutorial cara tukar butang komen blog

Tutorial ni atas request Cikgu Jaja

Butang standard untuk komen tu memang kurang menarik dan tidak menonjol serta tidak dabomd.. haha ..

Gambar di atas tu butang standard... sangat tidak menarik.. hahaha..

Tu dia.. sekali helo kitty daa... cute kan.. hahaha..





butang macam tu pun ok jg tapi masih skema .. hahaha

Macam2 butang anda boleh buat.. terpulang dari kreativiti.. paling senang buat gambar guna photoshop macam yang helo kitty tu.. haha..

Cara buat dia senang saja.. macam makan kacang tanah...


Sebelum anda choba2 membuat tutorial ni.. save dulu template anda..

Mula2 pergi ke desboard---design---edit html....tandakan pada expand widget templates kemudian cari code

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

Kemudian gantikan code yang dicari dengan code di bawah

<center><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><img src='URL GAMBAR ANDA'/></a></center>

Gantikan tulisan URL GAMBAR ANDA dengan url gambar anda ekekek,,

CONTOH

<center><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIXOpGlk1-3WmUIVJT3cHm6YyqmXO9SH3eFqddKxUuhZoXuHCg1QeOZJ0d6spfP-C6zfRwg7DzXt9yVcUsHCs28ve4QIyEPWWRwXJ606uozLffyugKLGKdHpoqI0wxyzdXF6xVBH3wr1iw/s1600/kitikomen.png'/></a></center>

Senangkan..

Nota : masukkan url gambar yang betul... jika error , error, dan error.. cuba pastekan code contoh tu.. kalau code contoh tu x error bermakna ada kesilapan yang anda lakukan.. hehe

Sekian