Artikel Terbarukan Hari ini:
print this page
    Artikel Terbaru:
    ,

    Membuat Banner Iklan 125x125 dengn Kode CSS3

    Dengan membaca judulnya mungkin sobat blogger kepikiran untuk menampilkan banner iklan 125x125 dengan bentuk kotak (persegi). Namun dalam tips yang akan saya berikan kali ini sebenarnya akan menampilkan animasi budar/bulat. Dimana saat pengunjung blog anda mengarahkan kursor ke banner ini, maka bannernya akan berubah bentuk menjadi kotak (persegi). Cukup menarik kan?. Banner ini sedikit menggunkan sentuhan kode CSS3 yang tentunya akna menghasilkan tampilan yang menarik buat sobat blogger. Untuk pratinjau dari tips ini silahkan lihat di situs kami di bawah ini:
    Nah mungkin sobabt blogger sudah lebih jelas dengan melihat contoh bannernya dalam Demo Situs kami tersebut. Jika sobat blogger memnginginkan banner ini, caranya cukup mudah ko. 
    Berikut cara-cara menampilkan banner iklan 125x125 dengan sentuhan kode CSS3:

    1. Login ke blogger dengan account anda
    2. Pada dasbhoardblog anda, silahkan pilih Template => Edit HTML=> Lanjutkan.
    3. Letakkan kode berikut ini di atas kode ]]></b:skin>
    #kotak-iklan-125x125 {margin: 0px;padding: 5px;text-align: center;}
    #kotak-iklan-125x125 img {margin: 0px 8px 4px 0px;padding: 3px;text-align: center;border: 3px solid #c0c0c0;-webkit-border-radius:70px;-moz-border-radius:70px;-o-border-radius:70px;border-radius:70px;-webkit-transition: all 0.45s ease-out;-moz-transition: all 0.45s ease-out;-o-transition: all 0.45s ease-out;transition: all 0.45s ease-out;}
    #kotak-iklan-125x125 img:hover {margin: 0px 8px 4px 0px;padding: 3px;text-align: center;border: 3px solid #c33f00;-webkit-border-radius:0px;-moz-border-radius:0px;-o-border-radius:0px;border-radius:0px;}
    4. Kemudian Simpan Template blog anda.
    5. Setelah itu untuk mnemapilkan bannernya pada sidebar blog, silahkan beralih pada Tata Letak => Tambah Gadget => HTML/JavaScript.
    6. Letakkan kode CSS berikut kedalam kotak HTML/JavaScript nya
    <div id="kotak-iklan-125x125">

    <a target="_blank" href="http://tips-untuk-blogger.blogspot.com"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>
    <a target="_blank" href="http://tips-untuk-blogger.blogspot.com"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>
    <a target="_blank" href="http://tips-untuk-blogger.blogspot.com"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>
    <a target="_blank" href="http://tips-untuk-blogger.blogspot.com"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>

    </div>
    Note:
    Silahkan ganti tulisan yang berwarna merah dengan alamat URL iklan yang anda pasang pada bannernya.

    Jika sudah selesai, silahkan  Save. Lihat perubhan yang terjadi pad blog anda. Semoga bermanfaat dan mohon maaf jika ada kesalahan. (Jkt/2012)
    Diposkan oleh Karta Jaya Rabu, November 21, 2012 0 komentar
    Label: ,

    Membuat Link Pelangi pada Blog

    Terkadang pengunjung betah untuk berkunjung ke blog kita, karena tampilan blog yang begitu menarik. Nah jika sobat ingin membuat blog anda lebih menarik silahkan berikan effek yang menarik pada link blog anda. Yaitu dengan memberikan effek link pelangi pada blog anda.
    Dimana nantinya jika salah sati link disorot oleh cursor, maka link akan berubah warna seperti warna pelangi.
    Untuk DEMO silahkan lihat Blog Ini. Jika sobat sudah mengerti dengan effek link pelangi ini, silahkan ikuti langkah berikut ini.

    1. Login ke blogger
    2. Pilih Template
    3. Pilih Edit HTML => Lanjutkan
    4. Cari kode seperti ini <head> dan letakkan kode berikut ini tepat di Bawah <head>
    <script src='http://achmad46.googlepages.com/rainbow.js'>
    </script>
    5. Simpan Template
    6. Silahkan lihat blog anda.
    Selesai, semoga bermanfaat dan mohon maaf jika ada kesalahan (Jkt/2012)
    Diposkan oleh Karta Jaya Senin, November 12, 2012 0 komentar
    Label:

    Cara Membuat Background Blog Fullscreen

    Cara membuat background fullscreen sangatlah mudah sobat blogger. Pada tips kali ini saya akan memberikan tips bagaimana cara membuat background blog sobat menjadi fullscreen dan yang pasti gambar (backgroundnya akan tetap jika di scroll. Nah tips kali ini saya berikan kepada sobat blogger karena saya sendiri sudah membuatnya dalam blog ini.
    Jika sobat blogger berniat atau tertarik, silahkan ikuti langkah-langkah berikut ini:

    1. Login ke blogger.com dengan account anda
    2. Pada Dasbhoard blog anda, silahkan pilih Template.
    3. Cari kode attribut dari background blog anda. Seperti ini .body {
    4. Letakkan kode berikut ini dibawah kode tersebut.
     background: url(URL GAMBAR KAMU) no-repeat center center fixed; #fff;
            -webkit-background-size: cover;
            -mckground-size: cover;
            backgoz-background-size: cover;
            -o-baround-size: cover;
    background-attachment:fixed;
    Note:
    Jika blog anda telah memasang attribut background, silahkan ganti sepenuhnya dengan kode tersebut. Dan untuk tulisan yang berwarna ungu, silahkan ganti dengan url gambar kamu.

    5. Jika sudah selesai, Simpan Template
    Silahkan lihat perubahan yang terjadi pada blog sobat. Semoga bermanfaat dan mohon maaf jika ada kesalahan (Jkt/2012)
    Diposkan oleh Karta Jaya Senin, November 12, 2012 0 komentar
    Label:

    Favicon Berbeda antara Homepage dan Postingan

    Sebelumnya mungkin sobat blogger sudah mengerti apa yang dimaksud dengan favicon. Dan saya rasa cara memasang (mengganti) favicon blog mungkin sobat blogger sudah mengerti. Nah jika tidak mengerti dengan kedua hal di atas, silahkan tinggalkan komentar. Memasang favicon blog merupakan sebuah langkah sobat blogger untuk membuat sebuah identitas blog sobat, karena favicon ini akan tampil di address bar browse anda. Kenapa saya mengatakn favicon adalah sebuah identitas blog? Bisa jadi favicon ini adalah objek yang pertama dilihat oleh pengunjung blog anda saat berkunjung ke blog anda.

    Ada berbagai macam desain favicon yang bisa anda buat dengan kreasi anda. Nah pada tips kali ini saya akan memberikan bagaimana cara membuat Favicon Homepage (beranda) berbeda dengan favicon Postingan blog anda. Hal ini bukanlah hal yang sulit untuk kita lakukan. Sekarang yang penting anda mengerti dulu favicon ini seperti apa.
    Perhatikan tanda panah.
    Jika sobat sudah mengerti dengan favicon ini, sekarang kita lanjutkan bagaimana cara membuat tampilan favicon yang berbeda antara homepage dan postingan blog.
    Langkah pertama adalah anda harus membuat gambar favicon 2 (dua) buah yang berbeda. Setelah membuat gambar favicon menjadi dua, untuk menampilkan salah satunya antara hopmepage dan halaman postingan, kita hanya menambahkan script untuk memunculkan hanya pada halaman postingan saja, sama halnya waktu kita membuat tampilan homepage berbeda dengan tampilan halaman postingan, yaitu menambahkan script seperti dibawah ini :
    <b:if cond='data:blog.pageType == "item"'>
    Script Kalian Disini
    </b:if>
    Sehingga kode script nya menjadi seperti ini:
    <link href='url gambar 1' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
    <b:if cond='data:blog.pageType == "item"'>
    <link href='url gambar 2' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
    </b:if>
    Cara memasang favicon ini, anda cukump meletakkan kode di atas tepat dibawah kode ]]></b:skin>  atau diatas kode </head>.

    Jika sudah selesai, silahkan Simpan Template anda dan lihat hasilnya pada blog anda. Semoga berhasil dan mohon maaf jika ada kesalahan.
    Diposkan oleh Karta Jaya Sabtu, November 10, 2012 0 komentar
    Label:
    ,

    Background Warna Transparan pada Post

    Postingan blog merupakan hal yang paling penting dalam sebuah blog. Jika bisa dikatakan tanpa post rasanya blog itu tidak ada gunanya. Karena dalam post lah kita banyak memberikan informasi kepada pengunjung blog kita. Berbicara soal background, pada postingan juga kita dapat memberikan editan yang berbeda-beda sesuai dengan kebutuhan kita. Pada tulisan kali ini saya akan memberikan bagaimana caranya membuat background post itu berwarna trasparan. Selain itu juga sobat bisa berkreasi nantinya sesuai dengan kebutuhan blog sobat.

    Bagaimana cara membuat efek transparan pada background post?.

    Dalam pengkodean warna css dalam template blog, biasa menggunakan kode HEX seperti ini #000000 yang merupakan kode untuk warna hitam, jika kita menggunakan kode hex dalam background tidak akan memberikan warna yang transparan terhadap objek teks. Untuk memberikan efek transparan terhadap objek teks, kita harus merubah pengkodean warna hex dengan warna RGBA, warna hitam untuk rgba adalah (0, 0, 0,), dengan pengkodean warna (0, 0, 0,) tidak akan menghasilkan warna yang transparan, kita harus tambah perintah opacity dibelakang kode, sebagai ilustrasi saya gambarkan seperti dibawah ini :
    background: rgba(0, 0, 0, 0.2);
    Note:
    warna merah merupakan kode rgba untuk warna hitam, sedangkan kode tambahan yang berwarna hijau merupakan kode untuk transparansi.
    Diposkan oleh Karta Jaya Jumat, November 09, 2012 0 komentar
    Label: ,
    ,

    Popular Post Animasi Gambar Berputar

    Banyak animasi yang membuat tampilan popular post blog kelihatan elegant. Pada tips kali ini saya akan memberikan bagaimana cara membuat Animasi Popular Post dengan Gambar Berputar. Fitur blogger ini dapat kita edit dengan memnggunakan kode CSS3  untuk membuatnya sesuai dengan yang kita inginkan, seperti halnya dengan tampilan gamabr berputar.

    Untuk membuat popular post dengan animasi gambar berputar, kita menggabungkan antara popular post default bawaan blogger dengan menambahkan kode CSS3 didalamnya. Widget popular post ini tidak memberatkan loading blog, karena tambahan kode berupa CSS3 bukan javascript. Jika sobat blogger tertarik untuk menampilkannya pada blog sobat, silahkan ikuti langkah-langkah berikut ini:

    1. Login ke blogger dengan account anda sendiri
    2. Pada dasbhoard anda, silahkan pilih Tata Letak.
    3. Pilih Add Gadget atau Tambah Gadget.
    4. Pilih Popular Post (jika anda belum menambahkannya pada blog anda) seperti gambar di bawah ini

    5. Jika sudah, silahkan Save.
    Untuk mengedit tampilannya dengan kode CSS3 sekarang sobat beralih pada Edit HTML blog anda. Dengan cara Template => Edit HTML=> Lanjutkan => Centang Expant Template Widget.

    6. Cari kode ]]></b:skin> dan letakkan kode berikut dibawahnya
    .popular-posts .item-thumbnail {
    float:left;
    }
    .popular-posts ul {
    padding-left:30px;
    }
    .popular-posts ul li {
    list-style-image: none;
    list-style-type: none;
    display:inline;
    }
    .popular-posts ul li img {
    padding:0px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border: 2px solid #CCC;
    }
    .popular-posts ul li img:hover {
    border:2px solid #ccc;
    -moz-transform: scale(1.3) rotate(-360deg);
    -webkit-transform: scale(1.3) rotate(-360deg);
    -o-transform: scale(1.3) rotate(-360deg);
    -ms-transform: scale(1.2) rotate(-360deg);
    transform: scale(1.3) rotate(-360deg);
    }
    7. Kemudian cari kode yang mirip seperti ini:
     <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
    8. Ganti kode di atas dengan kode berikut ini:
     <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
    <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable>
    </b:widget>
    9. Jika sudah selesai, silahkan Simpan Template.
    Semoga berhasil dan mohon maaf jika ada kesalahan(Jkt/2012)
    Diposkan oleh Karta Jaya Kamis, November 08, 2012 0 komentar
    Label: ,

    Membuat Link Download dengan Beragam Style

    Buat sobat blogger yang suka membuat link download pada blog, mungkin anda bosan dengan tampilan link yang begitu-begitu aja alias default, tidak ada kreasi. Kali ini TIPS untuk Blogger kembali memberikan tips yang mungkin kurang menarik biat memperindah penampilan blog. Tapi dengan kreasi link download ini saya rasa dapat membuat semangat anda untuk menulis (mempost) pada blog anda akan semakin meningkat.

    Oke sobat, sekarang akan saya berikan beberapa kode script untuk membuat link download.

    1. Link Download Biasa
    <a href="http://adf.ly/EUFJm"><b>DOWNLOAD</b></a>
    2. Link Download dengan Gambar
    <a href="http://adf.ly/EUFJm" target="_blank"><img alt="Download Button" src="http://2.bp.blogspot.com/-d94UwjQPxh8/T3plWl6fZNI/AAAAAAAAAyw/W_EAtXrMGY0/s1600/download-button.jpg" /></a>
    3. Link Download dengan Mengatur Tinggi dan Lebar Gambar
    <a href="http://adf.ly/EUFJm" title="Download"><img src="http://farm5.static.flickr.com/4042/4278913170_e7973277d8_o.png" width="216" height="74" alt="download" /></a>
    4. Link Download Terbuka di Tab Baru
    <a href="http://adf.ly/EUFJm"target="_blank">DOWNLOAD</a>
    5. Link Download dengan Gambar dan Terbuka di Tab Baru
    <a href="http://adf.ly/EUFJm" target="_blank"><img src="http://i302.photobucket.com/albums/nn113/aburifaie/down.jpg" alt="Download"></a>
    6. Link Download Terbuka di Windows Baru
    <a href="http://adf.ly/EUFJm" target="new">DOWNLOAD</a>
    7. Link Download dengan Gambar dan Terbuka di Windows Baru
    <a href="http://adf.ly/EUFJm" target="new"><img src="http://i302.photobucket.com/albums/nn113/aburifaie/down.jpg" alt="Download"></a>
    Note:
    1. Untuk tulisan yang berwarna MERAH; anda ganti dengan link Download/URL lainnya yang akan anda tuju.
    2. Untuk tulisan berwarna BIRU; anda ganti dengan alamat URL gambar downloadnya
    3. Untuk tulisan berwana HIJAU; anda ganti sesuai tinggi dan lebar gambar download yang anda suka
    4. Untuk DEMO dari semua style, silahkan LIHAT DI SINI.
    Demikian tips membuat link download yang bisa saya berikan. Semoga bermanfaat dan mohon maaf jika ada kesalahan (Jkt/2012)
    Diposkan oleh Karta Jaya Rabu, November 07, 2012 0 komentar
    Label:
    ,

    Cara Membuat Iklan Melayang di Kiri dan Kanan Blog

    Jika sobat mempunyai blog di blogger.com, kali ini saya akan memberikan tips "Cara membuat Iklan Melayang di Kanan dan Kiri" blog sobat. Mungkin saat anda berkunjung pada beberapa blog, banyak sekali iklan yang tampil pada halaman blog mereka. Mulai dari tampilan iklan yang melayang, fixed (tetap) hingga iklan yang melayang tetapi dilengkapi dengan buttom close.

    Nah pada tips kali ini saya akan memberikan tips membuat iklan melayang pada kanan dan kiri blog dengan dilengkapi buttom close yang memungkinkan pengunjung blog anda dapat menutup tampilan iklan anda. Karena sebagian orang tidak senang dengan tampilan iklan-iklan semacam itu. jadi untuk memudahkan pengunjung blog anda untuk berselancar di blog anda, maka anda harus membuatkan buttom close nya.
    Untuk lebih jelas seperti apa tampilan buttom close nya biasa anda lihat di blog kami ini, atau lihat demonya di bawah ini:
    Yupss.... sekarang sudah jelas seperti apa tampilan iklannya. Sekarang saatnya membuat tampilan iklan seperti di atas.

    1. Login ke blogger dengan account anda.
    2. Pada Dashboard blog anda, pilih Tata Letak.
    3. Kemudian pilih Add Gadget (Tambah Gadget)
    4. Pilih HTML/JaavaScript.
    5. Letakkan kode berikut ini kedalam kotak HTML/JavaScript.
         <script type='text/javascript'>
        $(document).ready(function() {
        $('img#closed').click(function(){
        $('#btm_banner').hide(90);
        });
        });
        </script>

        <script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
        </script><script type="text/javascript">
        if (window.jstiming) window.jstiming.load.tick('headEnd');
        </script>

        <!--start: floating ads-->
        <div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">

        <div><a href="#" id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center><img src='http://3.bp.blogspot.com/-gwsFvgzCBDE/UC5jBenZUoI/AAAAAAAACLU/xlY3lJEl2IY/s1600/PhoXo2.png'/></center></a></div>
        <!--Mulai-->
        Masukkan kode Iklan anda disini
        <!--Akhir-->
        </div>
        <!--end: floating ads-->
        <!--start: floating ads-->
        <div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">

        <div><a href="#" id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='http://3.bp.blogspot.com/-gwsFvgzCBDE/UC5jBenZUoI/AAAAAAAACLU/xlY3lJEl2IY/s1600/PhoXo2.png'/></center></a></div>

        <!--Mulai-->
        Masukkan kode iklan anda disini
        <!--Akhir-->

        </div>
        <!--end: floating ads-->
    Note:
    1. Tulisan Masukkan kode Iklan anda disini yang pertama merupakan letak kode iklan anda yang nantinya berada di sebelah kanan blog anda.
    2. Tulisan Masukkan kode Iklan anda disini yang ke-2 merupakan letak kode iklan anda yang nantinya berada di sebelah kiri blog anda.
    6. Terkahir silahkan Save.
    Kemudian lihat hasilnya pada blog sobat. Semoga berhasil dan bermanfaat. Mohon maaf jika ada kesalahan (Jkt/2012)
    Diposkan oleh Karta Jaya Rabu, November 07, 2012 2 komentar
    Label: ,
     
    Home | Contact Us | About Us | Link Exchange
    Copyright © 2011. TIPS untuk Blogger - All Rights Reserved
    Template Created by Creating Website Published by Mas Template
    Proudly powered by Blogger