Floating Widget Code

    • by
  • Perantau Senja
    • Macam mana nak letak widget terapung atau sentiasa di bahagian atas atau dibawah pada blog/website anda? contoh seperti widget  Verify Partner PSENJA.COM


    code dibawah adalah cara untuk membuat floating widget, ada boleh meletakan code berikut pada HTML/JAVASCRIPT widget di blogspot

    Bahagian atas penjuru kiri.
    <div style="position: fixed; top: 0px; left: 0px;">Code Widget Disini</div>

    Bahagian atas penjuru kanan.
    <div style="position: fixed; top: 0px; right: 0px;">Code Widget Disini</div>

    Bahagian bawah penjuru kiri.
    <div style="position: fixed; bottom: 0px; left: 0px;">Code Widget Disini</div>

    Bahagian bawah penjuru kanan.
    <div style="position: fixed; bottom: 0px; right: 0px;">Code Widget Disini</div>
    Continue Reading →

    Cara buat button online dengan Online Button Maker

    • by
  • Perantau Senja
    • Assalamualaiikum kepada semua blogger blogger di malaysia khasnya dan umum kepada luarnya.tinggal beberapa hari lagi kita bakal menyambut Tahun baru,dikesempatan ini PSENJA.COM mengucapkan selamat tahun baru kepada semua yang sentiasa meyokong perkembangan PSENJA.COM.

    Hari ini admin kongsikan bagaimana membuat button seperti dibawah:
    Sangat Mudah dan button seperti ini mudah digunakan untuk penukaran banner sesama blogger,dengan saiz yang kecil ia juga menarik untuk diletakan pada blog anda.

    Cara membuat dengan button online maker:
    pergi ke http://tools.dynamicdrive.com/button/

    Rujuk gambar dibawah:

    custom button mengikut kesesuaian anda dan click update button sebelah image untuk preview. setelah selesai, pergi ke gambar button anda dan right click,untuk memudahkan anda, save kan dengan nama button.png save as type pilih all file, rujuk gambar dibawah:


    Selamat mencuba ya. :)
    Continue Reading →

    Html Scroll BoX

    • by
  • Perantau Senja
    • Live Demo dibawah:
    JANGAN GELAK!
    Samdol pergi ke sebuah pekan untuk membeli buah durian... lalu dia menghampiri seorang penjual buah durian yang merupakan orang asli tempatan...
    Samdol : "Bang harga durian ini berapa?"
    Org Asli : "yang ini.. sepopit sebiji"
    Samdol kebingungan mendengar jawapan dalam bahasa orang asli itu kerana dia tidak memahami berapa nilainya sepopit itu.. lalu Samdol buat2 tahu dan cuba menawarinya..
    Samdol : "Bang.. Boleh kurang sikit tak"?
    Orang Asli : "Boleh aje, nak kurang berape?
    Samdol : "Lahupa.. boleh ya!"
    Penjual orang asli itu kebingungan.. lalu bertanya pada Samdol..
    Orang Asli : "Lahupa itu berapa?"
    Samdol : "Cakap dulu.. Sepopit itu berapa?"

    Scroll box kebanyakan diguna blogger untuk meletakan code html atau penukaran banner di blog mereka.diatas adalah contoh HTML scroll box. untuk membuat html scroll box seperti diatas, sila copy code dibawah dan letakan pada widget anda.

    code:
    <div style="border: 2px solid #ccc; height: 120px; overflow: auto; width: 500px;"> masukan text atau widget anda disini </div>

    Tukar lebar dan tinggi mengikut kesesuaian anda.
    Continue Reading →

    Cara letak Share this widget tanpa register (fix)

    • by
  • Perantau Senja
    • Share This Widget sangat berguna untuk blogger,kerana ianya menyediakan satu  system untuk pelawat berkongsi artikel anda di laman sosial seperti facebook,twitter,pinterest dan banyak lagi.
    Kali ini Perantau Senja official di pm menerusi facebook mesej untuk menyelesaikan masalah ralat yang berlaku ketika pemasangan widget secara automatik diblog.

    Kadang kadang fungsi auto installed diblog tidak berfungsi dengan baik,kita mesti mengatur sesuatu widget atau code code dengan cara manual.Untuk entri kali ini, PSENJA.COM berkongsi bagaimana untuk memasang Share This widget secara manual dan tidak perlu register.

    DEMO LIHAT DISINI

    1.pergi ke blogger, Template, dan click edit html ( tick pada kotak expand widget template )
    2. cari perkataan </head> dan masukan code dibawah ini selepas perkataan </head>

    <script type="text/javascript">var switchTo5x=true;</script>
    <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
    <script type="text/javascript">stLight.options({publisher: "86162a42-e5cb-48b3-9d4b-3f1aa2c01d0c"});</script>

    Langkah seterusnya cari perkataan <div class='post-footer-line post-footer-line-3'>
    dan masukan code dibawah ini selepas perkataan <div class='post-footer-line post-footer-line-3'> itu tadi

    <center><span class='st_sharethis_vcount' displayText='ShareThis'></span>
    <span class='st_facebook_vcount' displayText='Facebook'></span>
    <span class='st_twitter_vcount' displayText='Tweet'></span>
    <span class='st_linkedin_vcount' displayText='LinkedIn'></span>
    <span class='st_pinterest_vcount' displayText='Pinterest'></span></center>

    Sekarang masalah pemasang widget share this anda selesai. selamat mencuba.
    Continue Reading →

    Basic Html Link

    • by
  • Perantau Senja
    • Basic Html link adalah bagaimana cara untuk membuat link text pada post html atau widget di blog/website anda

    1. Text Link
    2.Text Link Open In New Tab
    3.Link dengan gambar
    4.Link Dengan gambar Open in Newtab
    5.Add Link Title


    Code:
    1 Text Link
    Tekan Sini
    <a href='http://www.psenja.com'/>Tekan Sini</a>

    2.Tekan Sini
    <a href='http://www.psenja.com' target='_blank'/>Tekan Sini</a>

    3.
    <a href='http://www.psenja.com'><img src='http://i.imgur.com/u5RDC.png'/></a>

    4.
    <a href='http://www.psenja.com' target='_blank'/><img src='http://i.imgur.com/u5RDC.png'/></a>

    5. Tambah title Link
    Tekan Sini

    <a href='http://www.psenja.com' title='Tutorial blog'>Tekan Sini</a>
    <a href='http://www.psenja.com' title='Tutorial blog'><img src='http://i.imgur.com/u5RDC.png'/></a>


    Tukar perkataan bewarna merah kepada link url anda
    Tukar perkataan bewarna biru kepada link gambar anda
    tukar perkataan Tutorial blog kepada title anda
    Continue Reading →

    Cara Buat Demo & Download Button default untuk setiap posting

    • by
  • Perantau Senja
    • Demo sahaja
    VIEW DOWNLOAD

    BAGAIMANA MEMBUAT BUTTON SEPERTI DIATAS UNTUK SETIAP POSTING ATAU ARTIKEL?
    kebiasaan, button button diatas digunakan pada blog blog yang menyediakan perkhidmatan download template,movie,filem dan sebagainya. bagaimana untuk tetap kan button seperti diatas untuk setiap entri?
    sebelum ini Psenja.com pernah mengeluarkan artikel membuat css button seperti diatas, Rujuk entri DISINI

    untuk meletakan button tersebut pada setiap artikel, sila ke setting, - Post and Commnets - cari perkataan POST TEMPLATE dan click add+

    kemudaian masukan code dibawah:

    <center>
    <a class="medium button orange" href="Link Demo">VIEW</a> <a class="medium button green" href="Link Download">DOWNLOAD</a></center>

    lihat seperti gambar dibawah:


    kemudian click save setting. selesai, anda hanya perlu mengubah url link tersebut sahaja.
    Kini psenja.com tidak mempunyai masa untuk megemaskini blog ini,kerana admin sibuk untuk 2-3 hari, kepada yang request tutorial, sila tinggalkan DISINI, admin akan cuba untuk mencari jalan penyelesaian anda . Terima Kasih Diatas sokongan terhadap blog ini.

    -PerantauSenja.
    Continue Reading →

    Cara buang border facebook like box di blog

    • by
  • Perantau Senja
    • Bagaimana membuang facebook border fanpage diblog?
    Untuk membuang border di facebook fanpage di blog atau website anda,Hanya memerlukan beberapa kod css untuk dimasukan pada template untuk fungsi tertentu.
    Lihat seperti gambar dibawah:

    Diatas adalah hasil setelah dimasukan code css pada template blogspot. Lihat live demo Disini.

    1. cari perkataan ]]></b:skin> dan gantikan cdengan code dibawah:

    .facebook-like-box
    {
    width: 250px;
    height: 250px;
    overflow: hidden;
    position: relative; /* For IE7 Compatibility */
    }

    .facebook-like-box .inner
    {
    margin: -2px 0 0 -2px;
    }
    ]]></b:skin>


    untuk meletakan widget facebook fanpage diblog tanpa border,sila masukan code dibawah pada Html/Javascript widget

    <div class="facebook-like-box">
    <div class="inner">
    <!-- Facebook Plugin Code --->
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
    <fb:like-box href="http://www.facebook.com/perantausenja.inc"
    width="250" height="250"
    colorscheme="light" show_faces="true"
    stream="false" header="false"></fb:like-box>
    <!-- End Facebook Plugin Code -->
    </div>
    </div>

    Tukar perkataan bewarna merah kepada link fanpage anda, Dan sila suaikan saiz lebar dan panjang mengikut selera masing masing

    .Selamat mencuba.

    Continue Reading →

    6 Background sempoi untuk blog

    • by
  • Perantau Senja
    • Cara Tukar background blogspot dengan gambar Pattern yang sempoi dan simple tetapi kemas
    1. pergi ke blogger
    2. Template Edit Html
    3. cari perkataan body

     contoh:
    body {
    background:#F7F7F7 ;
    color:#333333;
    font-size:9px;
    font-family:Arial,Georgia,Times New Roman,serif;
    }

    Sekarang tambah perkataan url(link gambar) selepas code warna background, lihat demo Dibawah:
    body {
    background:#F7F7F7 url(http://i.imgur.com/ZzToU.jpg);
    color:#333333;
    font-size:9px;
    font-family:Arial,Georgia,Times New Roman,serif;
    }

    dibawah terdapat 6 jenis background untuk blog, Sila tukar code bewarna merah mengikut gambar yang dikehendaki.

    Code: (http://i.imgur.com/ZzToU.jpg)



    code: (http://i.imgur.com/8lYao.jpg)


    code: (http://i.imgur.com/unAm7.jpg)


    code: (http://i.imgur.com/vSAnJ.jpg)


    code: (http://i.imgur.com/Cw0iQ.jpg)


    code: (http://i.imgur.com/Lbz9V.jpg)


    Kebiasaan background ini digunakan kebanyak blog dari Wordpress
    Continue Reading →

    Css google button,Cara Buat button macam google

    • by
  • Perantau Senja







    • bagaimana membuat button seperti google button?
    Dengan mengikuti beberapa cara mudah anda boleh meletakan button seperti diatas di blog anda.
    Ikuti tutorial step by step dibawah

    1.pergi ke blogger - Template dan click button Edit Html
    2 Cari Perkataan ]]</b:skin>
    3. copy code dibawah diatas perkataan ]]</b:skin> itu tadi

    code:
    /*------------------------------------*\
    $WRAPPER
    \*------------------------------------*/
    .buttons {/* Style as you wish (toolbar) */
    }
    /* The Magnificent CLEARFIX */
    .buttons:before, .buttons:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
    }
    .buttons:after {
    clear: both;
    }
    .buttons {
    zoom: 1;
    }
    /* ------------------------ */


    /*------------------------------------*\
    $BUTTON
    \*------------------------------------*/
    button {
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    font: bold 11px Helvetica, Arial, sans-serif;
    color: #444;
    line-height: 17px;
    height: 18px;
    display: inline-block;
    float: left;
    margin: 5px;
    padding: 5px 6px 4px 6px;
    background: #F3F3F3;
    border: solid 1px #D9D9D9;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-transition: border-color .20s;
    -moz-transition: border-color .20s;
    -o-transition: border-color .20s;
    transition: border-color .20s;
    height: 29px !important;
    cursor: pointer;
    }
    button:hover {
    background: #F4F4F4;
    border-color: #C0C0C0;
    color: #333;
    }
    button:active {
    border-color: #4D90FE;
    color: #4D90FE;
    -moz-box-shadow:inset 0 0 10px #D4D4D4;
    -webkit-box-shadow:inset 0 0 10px #D4D4D4;
    box-shadow:inset 0 0 10px #D4D4D4;
    }
    button.bluebtn {
    border: 1px solid #3079ED !important;
    background: #4B8DF8;
    background: -webkit-linear-gradient(top, #4C8FFD, #4787ED);
    background: -moz-linear-gradient(top, #4C8FFD, #4787ED);
    background: -ms-linear-gradient(top, #4C8FFD, #4787ED);
    background: -o-linear-gradient(top, #4C8FFD, #4787ED);
    -webkit-transition: border .20s;
    -moz-transition: border .20s;
    -o-transition: border .20s;
    transition: border .20s;
    }
    button.bluebtn:hover {
    border: 1px solid #2F5BB7 !important;
    background: #3F83F1;
    background: -webkit-linear-gradient(top, #4D90FE, #357AE8);
    background: -moz-linear-gradient(top, #4D90FE, #357AE8);
    background: -ms-linear-gradient(top, #4D90FE, #357AE8);
    background: -o-linear-gradient(top, #4D90FE, #357AE8);
    }
    button.greenbtn {
    border: 1px solid #29691D !important;
    background: #3A8E00;
    background: -webkit-linear-gradient(top, #3C9300, #398A00);
    background: -moz-linear-gradient(top, #3C9300, #398A00);
    background: -ms-linear-gradient(top, #3C9300, #398A00);
    background: -o-linear-gradient(top, #3C9300, #398A00);
    -webkit-transition: border .20s;
    -moz-transition: border .20s;
    -o-transition: border .20s;
    transition: border .20s;
    }
    button.greenbtn:hover {
    border: 1px solid #2D6200 !important;
    background: #3F83F1;
    background: -webkit-linear-gradient(top, #3C9300, #368200);
    background: -moz-linear-gradient(top, #3C9300, #368200);
    background: -ms-linear-gradient(top, #3C9300, #368200);
    background: -o-linear-gradient(top, #3C9300, #368200);
    }
    button.redbtn {
    border: 1px solid #D14836 !important;
    background: #D64937;
    background: -webkit-linear-gradient(top, #DC4A38, #D14836);
    background: -moz-linear-gradient(top, #DC4A38, #D14836);
    background: -ms-linear-gradient(top, #DC4A38, #D14836);
    background: -o-linear-gradient(top, #DC4A38, #D14836);
    -webkit-transition: border .20s;
    -moz-transition: border .20s;
    -o-transition: border .20s;
    transition: border .20s;
    }
    button.redbtn:hover {
    border: 1px solid #B0281A !important;
    background: #D14130;
    background: -webkit-linear-gradient(top, #DC4A38, #C53727);
    background: -moz-linear-gradient(top, #DC4A38, #C53727);
    background: -ms-linear-gradient(top, #DC4A38, #C53727);
    background: -o-linear-gradient(top, #DC4A38, #C53727);
    }
    button.action:hover {
    -moz-box-shadow: 0 1px 0px #DDD;
    -webkit-box-shadow: 0 1px 0px #DDD;
    box-shadow:iset 0 1px 0px #DDD;
    }
    button.action:active {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-color: #C6C6C6 !important;
    }
    button.bluebtn:active {
    border-color: #2F5BB7 !important;
    }
    button.greenbtn:active {
    border-color: #2D6200 !important;
    }
    button.redbtn:active {
    border-color: #B0281A !important;
    }
    /*------------------------------------*\
    $BUTTON LABEL
    \*------------------------------------*/
    button span.label {
    display: inline-block;
    float: left;
    line-height: 17px;
    height: 18px;
    padding: 0 1px;
    overflow: hidden;
    color: #444;
    -webkit-transition: color .20s;
    -moz-transition: color .20s;
    -o-transition: color .20s;
    transition: color .20s;
    }
    button span.label {
    line-height: 15px !important;
    }
    button:hover .label.bluebtn {
    color: #7090C8;
    }
    button:hover .label.greenbtn {
    color: #42B449;
    }
    button:hover .label.yellow {
    color: #F7CB38;
    }
    button.bluebtn .label {
    color: #FFF !important;
    text-shadow: 0 1px 0 #2F5BB7 !important;
    }
    button.greenbtn .label {
    color: #FFF !important;
    text-shadow: 0 1px 0 #2D6200 !important;
    }
    button.redbtn .label {
    color: #FFF !important;
    text-shadow: 0 1px 0 #B0281A !important;
    }
    button.action .label {
    padding: 0 17px !important;
    }
    button.action:active .label {
    color: #333 !important;
    }
    button.bluebtn:active .label, button.greenbtn:active .label, button.redbtn:active .label {
    color: #FFF !important;
    }

    Untuk code button lihat dibawah:
    <button class="action bluebtn"><span class="label">Google button1</span></button>
    <button class="action redbtn"><span class="label">Google Button 2</span></button>
    <button class="action greenbtn"><span class="label">Google Button 3</span></button>
    <button class="action"><span class="label">Google Button 4</span></button>
    selamat mencuba.
    Continue Reading →
     
    Copyright (c) 2010 Psenja.Com by Perantau Senja
    I work for : GilerMedia, Ask Me Here : Ask.fm/perantausenja