♣ FEBRY'S BLOG ♣

Sabtu, 10 Maret 2012

Menghilangkan Attribute Powered by Blogger

Kalau kita memakai template bawaan Blogger akan ada widget attribute di bagian footer template yang bertuliskan powered by blogger . kalau sobat pengen menghilangkan atribute tersebut ikuti langkah - langkah berikut

Cara menghilangkan attribute blog powered by blogger adalah sebagai berikut:
1. Masuk blog sobat
2. Pilih Rancangan, lalu edit html.
3.Cari kode ]]></b:skin>
4. Kemudian letakkan kode berikut ini tepat di atas ]]></b:skin>

#Attribution1 {

height:0px;

visibility:hidden;

display:none

}

5. Klik save, dan selesai.

Slideshow Image Background

Kali ini saya buat postigan cara membuat background blog berganti secara otomatis alias Slideshow sobat, Demonya sedang sobat lihat pada background dipostingan ini, kalau kurang puas cek demonya pada link dibawah iniLangkah pemasangannya : 1. Login Keblog Sobat
2. Masuk Rancangan Klik Edit HTML
3. Letakkan CSS berikut diatas kode ]]></b:skin>

.sleding, img.coX {
        height: 768px; // bisa diganti : 100%, auto //
        width: 1024px;
        position: fixed;
        top: 0;
        left: 0;
        z-index:-9999;
}

4. Letakkan Script dibawah ini diatas kode </head>

5. Letakkan kode HTML berikut dibawah kode </head>
<div class="sleding">
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/oren.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/bego.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/ichigo-in-orange.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/orange1.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/Ultimate_RED_by_mikil.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/bejo.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/ijo.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/Lucky_Orange.jpg" class="coX"/>
<img src="http://i1206.photobucket.com/albums/bb455/binkbenk/jembut.jpg" class="coX"/>
</div>

Magnify Image Zoom

Langsung aja Sobat Arahkan Cursornya ke sebelah kiri ,Untuk Demo yang atas dengan mouse scroll sedangkan yang bawah tanpa mouse scrool,Untuk Kode Script dan CSS yang berwarna biru silahkan sobat utak-atik nilai-nilai Variabelnya, karena pada kode tersebut adalah kode dimana yang akan menghasilkan besar-kecil, efek dan ukuran Zoomnya.

Kodenya :

box-shadow: 0 0 20px #000;

-webkit-box-shadow: 0 0 20px #000;

-moz-box-shadow: 0 0 20px #000;

filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);

background: white;

}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/cuerosbhelat/image-zoom.jz.js">
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#gambar1').addimagezoom({

zoomrange: [3, 10],

magnifiersize: [400,400],

magnifierpos: 'right',

cursorshade: true,

cursorshadeborder: '1px dashed red',
largeimage: 'http://i1206.photobucket.com/albums/bb455/binkbenk/miyabi1.jpg'
})
$('#gambar2').addimagezoom({

zoomrange: [5, 5],

magnifiersize: [600,400],

magnifierpos: 'right',

cursorshade: true,

cursorshadecolor: 'blue', cursorshadeopacity: 0.3,

cursorshadeborder: '1px dashed red',

largeimage: 'http://i1206.photobucket.com/albums/bb455/binkbenk/ichigo-in-orange.jpg'
})
})
</script>
<img id="gambar1" border="0" src="http://i1206.photobucket.com/albums/bb455/binkbenk/miyabi1.jpg" />
<img id="gambar2" border="0" src="http://i1206.photobucket.com/albums/bb455/binkbenk/ichigo-in-orange.jpg" style="width:300px;height:225px" />

Selamat Mencoba

Expand Image Script

Kodenya :

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

border: 2px dotted #fff;

box-shadow: 0 0 10px #000;

-webkit-box-shadow: 0 0 10px #000;

-moz-box-shadow: 0 0 10px #000;

vertical-align: top;

}
</style>
<script src="https://sites.google.com/site/cuerosbhelat/expanserang.js" type="text/javascript">
</script>
<img border="0" class="expanserang" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCzeLzxlYxJfLxf5OQCtagxOhzJHyaG2boV65t7U7hNCLO92JNdmQpZNn0m6G3IOKnzt7R3XLX6ZR0KKiL2Bei9gOmvAksR4V3yfll4hCezNqGidND1qL5su4Tyk_CL5pg2TinaPU0IGU/s1600/7487_469_thumb.jpg" width="100" />
<img border="0" class="expanserang" height="66" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifjn29MRqzd-tKfcYEMO49utaAw2yY3KilAQF6uitCLH_FFw7YXwU3RjW1hXmXvGLevSUtSK9o0K08v_qg8SdgPFnx8LANQeltYQ5fe9mZVXLfcYhpe56Zh27C29OV_oMWlxlNyhjR8Fo/s1600/7481_469_thumb.jpg" width="100" />
<img border="0" class="expanserang" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIpV6rHmBPdpRJiMyuMzfjCL21_-7ip3ti-FiBOG7yqctwcekUphEzBLAlUHYWNPTAvsS73xYDKS_yxhHkfd5WD4iGc21hj02GwUdnw8DFmeR_i_RApcDM1WfJW6_oFeeSNv_GUaAqJ5Nx/s1600/keeley-hazell7.jpg" width="100" />

Selamat mencoba

Mengintip Design HTML Template Blog

Selamat beraktifitas sobat....
Kali ini saya mau berbagi caranya melihat format/fitur/formasi HTML template Blog milik orang lain Caranya sangat mudah Sobat , kita bisa melihat HTML blog tersebut mulai dari atas sampai bawah ,Nah disitu kita juga bisa Contek Desain blognya he..he..he..Coba aja Buka blog teman Sobat atau pada Blog ini setelah terbuka dan loading telah selesai tekan CTRL+U pada keyboard Pc Sobat
Nah benerkan ....

Selamat mencoba semoga bermanfaat

Membuat Efek Bersinar di Sekitar Elemen

Untuk memberi efek ini mungkin setiap template blog sedikit berbeda, namun untuk kode yang digunakan dalam membuat efek ini sama saja , Coba arahkan cursor sobat ke area Sidebar atau area posting diblog ini , maka akan mengeluarkan efek sinar yang berwarna merah

Seperti itulah efek yang saya maksud, Untuk warna efeknya sobat bisa ganti kodenya dengan warna kesukaan sobat Kode warnanya bisa lihat disini

Untuk kode 70px juga bisa sobat rubah itu menunjukkan lebar efeknya

Langsung aja Sobat kita menuju TKP ;

Login keakun Blog Sobat
Klik Rancangan pilh Edit HTML
Lalu cari kode ]]></b:skin>
Lalu letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

Untuk memberi efek disekitar area sidebar kodenya dibawah ini

.sidebar .widget :hover{-moz-box-shadow:0 0 70px #F80505;-webkit-box-shadow:0 0 70px #F80505;box-shadow:0 0 40px #F80505}

Kalau tidak berhasil pakai kode yang ini

.sidebar :hover{-moz-box-shadow:0 0 70px #F80505;-webkit-box-shadow:0 0 70px #F80505;box-shadow:0 0 40px #F80505}

Kalau untuk area postingan kodenya dibawah ini

.post :hover{-moz-box-shadow:0 0 70px #F80505;-webkit-box-shadow:0 0 70px #F80505;box-shadow:0 0 40px #F80505}

Atau sobat juga bisa pakai kode yang ini

.main :hover{-moz-box-shadow:0 0 70px #F80505;-webkit-box-shadow:0 0 70px #F80505;box-shadow:0 0 40px #F80505}

Selamat mencoba semoga berhasil

Jumat, 09 Maret 2012

JS Page Peel Effect

Membuat Efek melipat pada sudut atas body blog dengan menggunakan perpaduan JS dan swf file, Langsung aja deh sob Lihat dulu contohnya, Nanti kalo udah dipasang dalam template blog letaknya efeknya disudut atas, ini hanya sekedar demo. Jika Sobat berminat berikut Scriptnya

Scriptnya

Cara pemasangannya :

Masuk ke Edit HTML
Letakkan Scriptnya bawah kode <head> atau diatas kode </head>

Kodenya

Catatan :

Untuk kode yang berwarna Biru [650, 550] adalah penyesuaian lebar dan tinggi gambar yang dipakai.
Sedangkan kode margin-right: 500px adalah jarak tombol kembali dan tombol lanjut
Kode yang berwarna Kuning adalah alamat gambarnya
Pemasangan lebih gampang didalam postingan atau ditaruh dalam gadget HTML/Javascript

CSS Transform Text Shadow

Disini Sobat Demonya Arahkan Cursornya Kesini
Selamat Beraktifitas Sobat Semoga Dalam Keadaan Sehat-sehat Semua
Masih Tentang CSS Yang Saya Share kali ini Nah Sebagai Contohnya Arahkan Cursor Sobat Pada Teks yang sedang Sobat baca ini
Bagaimana Sobat Lucu ya...????

Langsung Aja Berikut Kode CSSnya Silahkan diutak-atik biar lebih cantik

Kodenya

<div style="color: black; font-family: Kristen ITC; font-size: 20px; text-align: center; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;">TEKS SOBAT DISINI</div>

Hasilnya

TEKS SOBAT DISINI

Kodenya

<div style="color: #b45f04; font-family: Matura MT Script Capitals; text-shadow: 4px 4px 4px #FF0000;">TEKS SOBAT DISINI</div>

Hasilnya

TEKS SOBAT DISINI

Apabila Sobat pengen membuat efek hover atau teks tersebut hanya berubah Saat di Cursor Seperti demo paling atas tambahakan kode seperti ini

Hasilnya arahkan Cursor disini

LETAKKAN ARTIKEL ATAU TEKSNYA DISINI SOBAT

Nah untuk membuatnya lebih menarik Sobat utak-atik mulai dari kode warnanya, font teksnya, font size dan juga Sobat bisa tambahkan background pada kode CSSnya

Untuk Background Kode Warnanya disini
Bisa Juga pakai Url gambar
Untuk Efek text Shadow lainnya Lihat disini

Untuk mengetahui font teks /model tulisan Silahkan Buka Aplikasi Microsoft Office, Sobat bisa Lihat Macam-macam model tulisan disana
Untuk membuatnya Miring kekanan pada kode (-5deg) ganti dengan (5deg)

Cara Membuat Link Bergoyang Bila di Cursor

Langkah-Langkah Berikut :

Login Ke Blog Anda
Pada Dasbor Pilih >>Rancangan-->Kemudian EDIT HTML
Cari Kode </head> Dan Letakan Kode Script Berikut Tepat Diatas Kode </head>

4.Klik Simpan Templatenya
5.Lihat Hasilnya

Kode Warna

Get it

Kalau sobat pengen melihat kode warna silahkan Klik warna yang anda pilih dan nanti kodenya akan muncul dikotak kecil.

Macam - macam Border

Inilah macem moder Border yang saat ini saya bisa ,,,,Buat yang belum tahu silahkan baca dan bagi yang udah tahu jangan dibaca lewati aja hehehehe.....Mungkin aja ini bisa sedikit membantu sobat buat ngedandanin Blognya biar Makin Caem

Langsung aja Sobat perhatikan penulisan kode-kode dibawah ini dan Lihat hasilnya

<div style="background-color: none; border : 2px solid #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">ISINYA DISINI </div>

ISINYA DISINI

<div style="background-color: none; border : 4px double #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">ISINYA DISINI </div>

ISINYA DISINI

<div style="background-color: none; border : 4px inset #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">ISINYA DISINI </div>

ISINYA DISINI

<div style="background-color: none; border : 4px outset #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">ISINYA DISINI </div>

ISINYA DISINI

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px;-o-border-radius: 10px; background-color: none; border : 2px solid #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">ISINYA DISINI </div>

ISINYA DISINI

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px;-o-border-radius: 10px; background-color: none; border : 4px double #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">ISINYA DISINI </div>

ISINYA DISINI

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px;-o-border-radius: 10px; background-color: none; border : 4px inset #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">ISINYA DISINI </div>

ISINYA DISINI

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px;-o-border-radius: 10px; background-color: none; border : 4px outset #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">ISINYA DISINI </div>

ISINYA DISINI

<div style="-moz-border-radius: 20px 0px 20px 0px;; -webkit-border-radius: 20px 0px 20px 0px;-o-border-radius: 20px 0px 20px 0px; background-color: none; border : 4px outset #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">ISINYA DISINI </div>

ISINYA DISINI

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px;-o-border-radius: 10px; background-color: none; border-bottom: 2px solid #ff0000; border-left: 15px solid #ff0000; border-right: 15px solid #ff0000; border-top: 2px solid #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">ISINYA DISINI </div>

ISINYA DISINI

<div style="background-color: none; border-bottom: 2px solid #ff0000; border-left: 15px solid #ff0000; border-right: 15px solid #ff0000; border-top: 2px solid #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">ISINYA DISINI </div>

ISINYA DISINI

<div style="background-color: none; border: 6px dotted #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
ISINYA DISINI</div>

ISINYA DISINI

<div style="background-color: none; border: 4px dashed #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
ISINYA DISINI</div>

ISINYA DISINI

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px;-o-border-radius: 10px; background-color: none; border: 6px dotted #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
ISINYA DISINI</div>

ISINYA DISINI

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px;-o-border-radius: 10px; background-color: none; border: 4px dashed #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
ISINYA DISINI</div>

ISINYA DISINI

<div style="background-color: none; border: 6px groove #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
ISINYA DISINI</div>

ISINYA DISINI

<div style="background-color: none; border: 6px ridge #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
ISINYA DISINI</div>

ISINYA DISINI

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px;-o-border-radius: 10px; background-color: none; border: 6px groove #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
ISINYA DISINI</div>

ISINYA DISINI

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px;-o-border-radius: 10px;background-color: none; border: 6px ridge #ff0000; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
ISINYA DISINI</div>

ISINYA DISINI

Utak atik kode-kodenya Sobat mulai background color & border colornya ,biar tampilan Lebih menarik
Semoga bermanfaat

Mempercepat Loading Blog Dengan Script

Banyak cara dilakukan agar loading blog itu tidak lama , misalnya aja dengan meminimalkan widget,tidak mempostingkan gambar dengan ukuran yang gede.. dan kali ini saya akan Ngeshare Trik mempercepat loading blog dengan Script.
Kalau yang lalu saya ngeposting Cara mempercepat loading blog dengan compress CSS
Kali ini saya akan bagikan cara mempercepat loading blog dengan lazy load script.
Script Lazy Load akan melipat gambar dalam artian tidak membaca gambar dimana akan mempercepat loading dan meringankan beban server.
Sekarang ikuti langkah berikut ;

Klik Rancangan

Klik Edit HTML

Masukkan kode berikut di atas kode </head>

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://cuerosb.googlecode.com/files/cueros%20-lazyload.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$("img").lazyload({placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuHS805a5gvKmE8wqxboVlO4j450_b3DF2TGk0VRoLx-lwE2jCtLCEcKyAzXbsO1iue4CVWKpWLwV4Pnw229FZXzCDs55c31W3E0Nr6xUOufGYo5NuSKz3Z9sJCFOiNuTb3hnLdmTCh_I/",threshold : 200});
});
</script>