SYSTEM OF BLOG

Waktu yang terbatas

noreply@blogger.com (Zhinto) — Tue, 22 Jan 2013 06:01:00 +0000

Sudah deberapa bulan ini saya gak ngeblog, disaat bulan kemaren aku pusing Cari kerja sekarang saya dah dapat kerjaan, alhamdulilah cuman kadang ngeblog kalau pas ke warnet itupun cuman bisa ngeotak atik blog doank hehe.

Dan satu lagi mohon maaf kalau ada komentar yang tidak bisa saya jawab karena keterbatasan waktu. sukses terus buat anda yang selalu mengunjungii blog ini.

OL Lagi | nyoba kerja

noreply@blogger.com (Zhinto) — Thu, 08 Nov 2012 12:16:00 +0000

Setelah sekian lama gak ngeblog sekarang aku bisa ngeblog lagi, tapi untuk sekarang aku gak tau seberapa lama aku bisa ngeblog soalnya status bukan pelajar lagi, kalau dulu masih pelajar aku bisa online tiap hari itupun kalau ada paket i-net murah, kalau gak ada ya gak online. sedangkan untuk sekarang aku bisa online namun ada yang menitik beratkan yaitu kerja.

Setelah lulus SMK aku bingung cari kerja, ini 2 kerjaan yang aku coba

1. Kerja gorengan ( 10 hari kerja pulang lagi )
Aku pulang karena merasa gak cocok dengan orang-orang yang ada disana padahal waktu itu aku targetin 1 bulan malah cuman 10 hari

2. Kerja bata molen ( bata yang di cetak menggunakan mesin )
Saat pertama kerja waduh badanQ rasanya remuk, karena baru pertama kerja berat tapi setelah 2 hari kerja udah agak terbiasa namun ketika ketiga harinya aku kerja, pas jam stengah 12 kan pulang nah sorenya tuh sekitar jam 12:40 berangkat tapi aku gak berangkat karena nenekQ sakit dan minta di jenguk pas juga lagi ada acara khitanan ( sunatan ) di dekat rumahnya nenekQ dan acaranya itu Jaranan ( kuda luping ) aku kan suka banget tuh sama Jaranan jadi aku nonton aja, tuh acaranya. Pas pagi-pagi bangun mau berangkat kerja eh temanku ( teman satu tempat kerja ) nelfon katanya aku di suruh berhenti kerja Bata Molen ufff jadi kehilangan pekerjaan lagi kalau begini dan sekarang entah mau cari kerja pa lagi #bingung.

Temen-temen Dumay sih nyuruh bisnis online tapi aku belum berminat untuk itu :( mungkin ada saran dari temen-temen sekalian..??

Cara mudah menampilkan gambar author dihasil pencarian

noreply@blogger.com (Zhinto) — Sun, 22 Jul 2012 04:43:00 +0000

Pertama tama saya ucapin met berpuasa semuanya bagi yang menjalankan, dan kedua makasih buat bang Dede yang udah ngebantu saya dalam hal ini ( masalah menampilkan author ), dulu pernah saya ingin coba menampilkan gambar author dihasil pencarian Google namun ternyata kabarnya kita harus beralih ke Tampilan Profil yang menggunakan Google Plus ( G+ ), jadi saya urungkan niat untuk menampilkan gambar author dipencarian karena G+ terlalu berat loadnya bagi modem saya, setelah lama kelamaan ada cara yang lebih praktis menurut saya karena kita gak perlu berganti Tampilan Profil kita hanya akan mem_verifikasi email melalui G+ dan memasang kode didalam template dan selesai ok mari kita mulai.

1. Masukan kode dibawah ini diatas kode </head>

<link href='URL G+ Anda' rel='author'/>

Jika anda bingung saya beri contoh, di bawah ini contoh punya saya

<link href='https://plus.google.com/u/0/110318180787041412403' rel='author'/>

Nah mengerti kan ok lanjut.

2. Masuk ke Google Authorship isi email dan klik Button Signup For Authorship

Setelah ada konfirmasi bahwa pesan sudah dikirim ke E-mail yang anda masukan tadi langsung cek email anda lalu klik Button Link tersebut dan setelah anda klik maka akan ada pesan yang menyatakan bahwa email anda sudah di verifikasi nah sekarang kita tinggal mengisi URL pada akun G+ kita.

3. Masuk ke Sini Contributor to section of your profile. setelah itu klik pada area Contributor to

Setelah itu akan muncul PopUp kemudian klik Add custom link pada:
- Label isi dengan nama blog anda
- URL isi dengan URL blog anda
Kemudian klik Button Save Lalu klik Button Done Editing dan selesai, sekarang coba anda masuk di Google Rich Snippet dan masukan URL salah satu postingan anda lalu klik Button Preview jika tampilannya seperti ini

Maka Triknya telah berhasil, tapi jangan heran kalau anda ketik di Google tapi belum muncul foto kita karena Proses ini membutuhkan waktu yang lama tapi gak sampek seminggu, ets jangan lupa ganti foto Profil G+ nya ya biar ganteng / cantik hehehe sekian post kali ini semoga bermanfaat

Blue ribbon dropdown menu

noreply@blogger.com (Zhinto) — Fri, 20 Jul 2012 02:01:00 +0000

Gak mampu berkata - kata jadi langsung aja comot kodenya, bentuknya kayak SS di bawah ini

DEMO

/* Name: Blue ribbon dropdown menu
URL: http://sin1aja.blogspot.com/
Author: SYSTEM OF BLOG
*/
ul#ribMenu {
    width: 912px;
    background: #54AEE0;
    margin: 0 auto 90px;
    list-style-type: none;
    padding: 0;
    position: relative
    }

ul#ribMenu:after {
    content: "";
    visibility: hidden;
    width: 0;
    height: 0;
    display: block;
    clear: both
    }

ul#ribMenu li {
    float: left;
    margin: 0;
    padding: 0;
    border-left: 1px solid #0D589E;
    -moz-box-shadow: -1px 0 0 #76A2FF;
    -webkit-box-shadow: -1px 0 0 #76A2FF;
    box-shadow: -1px 0 0 #76A2FF;
    position: relative
    }

ul#ribMenu li:first-child {
    border-left: 0
    }

ul#ribMenu li ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    width: 300px;
    background: #09d;
    display: none;
    top: 100%
    }

ul#ribMenu li ul li {
    margin: 0;
    padding: 0;
    display: block;
    float: none;
    border: 0;
    border-bottom: 1px solid #02508D;
    z-index: 9999
    }

ul#ribMenu li ul li a {
    display: block
    }

ul#ribMenu li:hover ul {
    display: block
    }

ul#ribMenu li a {
    color: #0029FF;
    padding: 25px 10px;
    display: inline-block;
    background: #08e;
    text-decoration: none;
    font: bold 15px/20px Arial, sans-serif;
    text-transform: uppercase;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear
    }

ul#ribMenu li a:hover {
    background: #1472D8
    }

ul#ribMenu span.ribKiri, ul#ribMenu span.ribKanan {
    position: absolute;
    border: 35px solid;
    top: 100%
    }

ul#ribMenu span.ribKiri {
    border-color: #08569E #08569E transparent transparent;
    left: 0
    }

ul#ribMenu span.ribKanan {
    border-color: #08569E transparent transparent #08569E;
    right: 0
    }

ul#ribMenu span.ribKiri span.ribdalamKiri, ul#ribMenu span.ribKanan span.ribdalamKanan {
    position: absolute;
    border: 35px solid;
    top: -35px;
    width: 50px;
    z-index: -1
    }

ul#ribMenu span.ribKiri span.ribdalamKiri {
    border-color: #1885EB #1885EB #1885EB transparent;
    left: -85px
    }

ul#ribMenu span.ribKanan span.ribdalamKanan {
    border-color: #1885EB transparent #1885EB #1885EB;
    right: -85px
    }

<ul id='ribMenu'>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Drop</a>
<ul>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
</ul>
</li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Drop</a>
<ul>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
</ul>
</li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Drop</a>
<ul>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
</ul>
</li>
<li><a href='#'>Link Satu</a></li>
<li><a href='#'>Link Satu</a></li>
<span class='ribKiri'><span class='ribdalamKiri'></span></span><span class='ribKanan'><span class='ribdalamKanan'></span></span>
</ul>

Maaf ya kalau jelek, sekalian mau ngucapin marhaban ya ramadhan selamat menunaikan ibadah puasa bagi yang udah menunaikan :).

Membuat link eksternal terbuka di tab baru

noreply@blogger.com (Zhinto) — Sun, 08 Jul 2012 03:37:00 +0000

Fungsi javascript kali ini adalah membuat link yang ada di blog kita terbuka di tab baru tapi ets jangan salah, javascript ini di program untuk membaca link selain blog kita artinya begini, misalnya blog saya ini URLnya http://sin1aja.blogspot.com/ nah diblog saya ini saya menyimpan banyak link namun link tersebut adalah link web / blog orang, maka link tersebut di istilahkan link Eksternal. Nah jika anda ingin link Eksternal tersebut terbuka di tab baru Simpan kode di bawah ini diatas </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[ 
$(function(){
$("a").filter(function(){
return this.hostname && this.hostname !== location.hostname;
}).attr('target','_blank');
});
//]]>
</script>

Setelah itu coba deh buka blog anda lalu cek link Eksternal yang ada diblog anda lalu coba klik, semoga berhasil yah :)

Menghitung loading blog anda

noreply@blogger.com (Zhinto) — Sun, 08 Jul 2012 01:46:00 +0000

Kali ini saya akan memposting cara mendapatkan waktu loading blog anda jadi begini jika blog anda terasa berat ataupun ringan dengan Javascript ini kita bisa lihat berapa detik loading blog kita. jika terlalu lama wah harus anda optimasi lagi biar lebih cepat, dan di bawah ini kodenya

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var beforeload = (new Date()).getTime();
function getPageLoadTime() {
    var afterload = (new Date()).getTime();
    seconds = (afterload - beforeload) / 1000;
    $('#waktu_loading').text('Loading Halaman:  ' + seconds + ' Detik');
}
window.onload = getPageLoadTime;
</script>
<div id='waktu_loading'></div>

Kodenya simpan pada Gadget HTML/Javascript ya, jangan lupa yang bergaris bawah itu kode jquerynya jika di blog anda sudah ada kode tersebut jangan di Copy lagi.

Membuat jam klasik dengan jquery

noreply@blogger.com (Zhinto) — Sat, 07 Jul 2012 15:52:00 +0000

Sebelumnya saya pernah posting tentang Pembuatan Jam Digital Menggunakan Css3 Dan Jquery sekarang saya pengen posting mengenai jam lagi tapi jam yang kali ini menggunakan tampilan jam klasik yang bundar itu lo nih screenshotnya

Yah Jadi inget masa lalu kalau liat jam - jam klasik seperti itu :D hemmm baiklah langsung saja anda simpan kode di bawah ini didalam gadget HTML/Javascript

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function () {
    setInterval(function () {
        var seconds = new Date().getSeconds();
        var sdegree = seconds * 6;
        var srotate = 'rotate(' + sdegree + 'deg)';

        $('#sec').css({
            '-moz-transform': srotate,
            '-webkit-transform': srotate
        });
    }, 1000);
    setInterval(function () {
        var hours = new Date().getHours();
        var mins = new Date().getMinutes();
        var hdegree = hours * 30 + (mins / 2);
        var hrotate = 'rotate(' + hdegree + 'deg)';

        $('#hour').css({
            '-moz-transform': hrotate,
            '-webkit-transform': hrotate
        });

    }, 1000);
    setInterval(function () {
        var mins = new Date().getMinutes();
        var mdegree = mins * 6;
        var mrotate = 'rotate(' + mdegree + 'deg)';

        $('#min').css({
            '-moz-transform': mrotate,
            '-webkit-transform': mrotate
        });

    }, 1000);

});
</script>
<style type="text/css">
#clock {
    position: relative;
    width: 80px;
    height: 120px;
    margin: 20px auto 0 auto;
    background: url(http://4.bp.blogspot.com/-siZB9Ud7KF8/T_Z44fZOIJI/AAAAAAAAA78/51vK7CBVD_Y/s1600/clockface+copy.png)no-repeat;
    list-style: none
    }

#sec, #min, #hour {
    position: absolute;
    width: 6px;
    height: 120px;
    top: 2px;
    left: 57px
    }

#sec {
    background: url(http://1.bp.blogspot.com/-vV22j4FT51c/T_Z47n52wjI/AAAAAAAAA8U/4EndE8d8EfU/s1600/sechand.png);
    z-index: 3
    }

#min {
    background: url(http://1.bp.blogspot.com/-TB3BQI9VMcw/T_Z46uK8WkI/AAAAAAAAA8M/Ur4ymXlg83g/s1600/minhand.png);
    z-index: 2
    }

#hour {
    background: url(http://4.bp.blogspot.com/-dU7gzpoayvw/T_Z45nETvGI/AAAAAAAAA8E/mnmuovHTTO0/s1600/hourhand.png);
    z-index: 1
    }
</style>
<ul id="clock"> 
     <li id="sec"></li>
     <li id="hour"></li>
  <li id="min"></li>
 </ul>

Jika kode yang bergaris bawah sudah ada di template anda jangan simpan lagi kode tersebut cukup kode dibawahnya saja :) semoga berguna

Pembahasan Css3 :not

noreply@blogger.com (Zhinto) — Fri, 06 Jul 2012 04:36:00 +0000

Css3 :not biasa dituliskan seperti ini :not(selector) sebagai contoh saya tulis Css seperti ini,

#not :not(p){
background: green;
}

Artinya : didalam div yang ber_ID not akan terseleksi tag HTML yang bukan p dan akan di berikan background hijau hasilnya akan seperti di bawah ini.

Nah didalam tag <div id='not'> tag yang bukan p adalah div jadi div tersebut di berikan background berwarna hijau begitulah fungsi selektor :not ini. sekarang saya beri contoh kedua

Dalam contoh itu selektor :not akan menyeleksi li yang bukan ber_kelas s yang di berikan background hijau. dari pada anda masih bingung mending langsung praktek ini kodenya,

<style>
#not li {
float: left;
padding: 10px 20px;
margin: 0 5px 0 0;
background: #aad
}
#not li:not(.s) {
background: green
}
</style>

<div id='not'>
<li class='s'>1</li>
<li>2</li>
<li>3</li>
<li class='s'>4</li>
<li>3</li>
<li class='s'>4</li>
<li>3</li>
</div>

Masih pusing mau praktek dimana..? langsung saja nih Ke HTML EDITOR

Css3 Circle System Menu

noreply@blogger.com (Zhinto) — Wed, 04 Jul 2012 12:51:00 +0000

Yeah Abis berkreasi lagi kali ini aku buat Css3 Circle System Menu, bentuknya ya persis seperti pada gambar screenshot itu dan disini saya menggunakan css3 :not jadi kalau browser anda support css3 maka menu ini akan terlihat sempurna, untuk belajar Css selector :not Silahkan ke W3school. Jadi Gini Saat tidak anda hover / sentuh bagian menunya, Tepatnya area ul maka menunya akan mengecil dan saat anda hover / sentuh menunya akan membesar dan tulisannya akan muncul ke bawah, dari pada penasaran langsung cek tkp.

DEMO

Hemmm Css3 sungguh Ampuh, segala bentuk model bisa di ikuti dengan css dan sudah banyak banget orang yang ciptain karya - karya keren dengan css Huft kapan yah aku bisa membuat yang keren - keren :D, nah kalau udah liat demonya sekarang anda tinggal baca penggunaannya....

1. Mukan kode css di atas ]]></b:skin>

/* Name : Css3 Circle System Menu 
   Author : SYSTEM OF BLOG
   URL : http://sin1aja.blogspot.com/
*/
.hapus:after {
visibility: hidden;
display: block;
font-size: 0;
line-height: 0;
content: " ";
clear: both;
height: 0;
width: 0;
}
.hapus { display: inline-block; }
* html .hapus { height: 1%; }
.hapus { display: block; }
ul.system-menu {
    margin: 0 auto 10px;
    padding: 0;
    position: relative;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    width: 390px
    }
ul.system-menu li {
    list-style-type: none;
    margin: 0 5px 0 0;
    padding: 0;
    float: left;
    position: relative;
    width: 70px;
    height: 80px;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear
    }
ul.system-menu li a {
    position: absolute;
    margin: -30px 0 0 -43%;
    text-decoration: none;
    font: bold 13px/40px Arial, sans-serif;
    padding: 0;
    background: #21D319;
    color: transparent;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    display: block;
    width: 50px;
    height: 50px;
    text-align: center;
    top: 45%;
    left: 50%;
    outline: none;
    border: 5px inset #F8FBFC;
    -moz-box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
    -webkit-box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
    box-shadow: 0 0 10px 4px #5E5E5E, inset 0 0 20px rgba(0, 0, 0, 0.52);
    -moz-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    -webkit-transition: all 100ms linear;
    transition: all 100ms linear
    }
ul.system-menu li a:hover {
    line-height: 130px;
    color: #000;
    border-color: #C5B386;
    background: #FAC800;
    -moz-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s
    }
ul.system-menu li span.pembuka {
    position: absolute;
    left: 50%;
    margin: 0 0 0 -29%;
    top: 11px;
    width: 25px;
    height: 30px;
    background: #949596;
    -moz-box-shadow: 3px -3px 0 0 #ECECEC;
    -webkit-box-shadow: 3px -3px 0 0 #ECECEC;
    box-shadow: 3px -3px 0 0 #ECECEC
    }
ul.system-menu li span.satu, ul.system-menu li span.dua, ul.system-menu li span.tiga {
    position: absolute;
    background: #F0F0F0;
    padding: 2px;
    width: 15px;
    left: 3px
    }
ul.system-menu li span.satu {
    top: 5px
    }
ul.system-menu li span.dua {
    top: 13px
    }
ul.system-menu li span.tiga {
    top: 22px
    }
.empat, .lima, .enam {
    position: absolute
    }
.empat {
    border: 15px solid;
    border-color: transparent transparent #EEE transparent;
    top: -7px;
    left: 10px
    }
.lima {
    padding: 4px;
    background: #EEE;
    height: 5px;
    top: 22px;
    left: 14px
    }
.enam {
    padding: 4px;
    background: #EEE;
    height: 5px;
    top: 22px;
    left: 28px
    }
.abot, .abit {
    position: absolute;
    left: 15px
    }
.abot {
    width: 20px;
    height: 20px;
    background: #EEE;
    top: 20%;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px
    }
.abit {
    border: 10px solid;
    border-color: transparent transparent #EEE transparent;
    top: 33%
    }
.a, .b, .c, .d {
    position: absolute;
    padding: 5px;
    background: #FFF7F7;
    top: 26%
    }
.a {
    left: 25px;
    background: #39FF13
    }
.b {
    top: 27px;
    left: 13px;
    background: #0070FF
    }
.c {
    left: 25px;
    top: 27px;
    background: #FFE000
    }
.d {
    left: 13px
    }
.e, .f {
    position: absolute
    }
.e {
    width: 15px;
    height: 17px;
    background: rgb(171, 185, 163);
    top: 35%;
    left: 32%;
    border: 2px solid rgb(255, 255, 255)
    }
.f {
    border: 10px solid;
    border-color: transparent transparent rgb(255, 255, 255) transparent;
    top: -2px;
    left: 30%
    }
ul.system-menu:hover li:not(:hover) {
    -moz-transform: rotate(360deg) scale(0.7);
    -ms-transform: rotate(360deg) scale(0.7);
    -o-transform: rotate(360deg) scale(0.7);
    -webkit-transform: rotate(360deg) scale(0.7);
    transform: rotate(360deg) scale(0.7)
    }

2. Masukan kode HTML nya ke Gadget HTML/Javascript

<ul class='system-menu hapus'>
<li><a href="#">
<span class='empat'></span>
<span class='lima'></span>
<span class='enam'></span>Depan</a></li>
<li><a href="#"><span class='pembuka'>
<span class='satu'></span>
<span class='dua'></span>
<span class='tiga'></span></span>Artikel</a></li>
<li><a href="#"><span class='abot'></span><span class='abit'></span>Tentang</a></li>
<li><a href="#">
<span class='a'></span>
<span class='b'></span>
<span class='c'></span>
<span class='d'></span>Kategori</a></li>
<li><a href="#"><span class='e'></span><span class='f'></span>Coretan</a></li>
</ul>

Jadi didalam menu itu bukan gambar itu icon cuman aku buat pake' css cuman iseng pengen belajar juga sih jadi ya gitu jadinya ckckkc kalau mau lebih keren bikin sendiri aja icon - iconnya :D soalnya aku gak terlalu pintar untuk membuat icon - icon :D tapi aku pengen bisa :) semoga aku bisa ya :), sekian posting kali ini moga bermanfaat.

My Css3 Slider System

noreply@blogger.com (Zhinto) — Sun, 01 Jul 2012 04:51:00 +0000

Hemmmm kali ini saya mau berbagi hasil kreasiQ yang aku beri nama Css3 Slider System karena slider ini aku buat dari banyak kode CSS3. Setelah aku membaca cara kerja Slider Tanpa Loncatan Hompimpa walau mengertinya sedikit belum banyak akhirnya saya buat Css3 Slider System ini, namun yang saya buat ini sedikit berbeda karena gak mungkin kita berkreasi dengan ide yang sama, nah pada Css3 Slider System ini saya membuat 7 efek:

Default ( yaitu efek opacity )
gerak-kiri
gerak-kanan
gerak-atas
gerak-bawah
muter
miring

Css3 Slider System ini akan sempurna anda lihat jika browser anda mendukung efek transition jika browser anda tidak mendukung efek transition maka slider ini tidak akan terlihat sempurna, karena perpindahan gambarnya menggunakan efek transition. tapi slider ini tetep bekerja di browser yang tidak support transition cuman efeknya saja yang tidak ada hehehe. langsung saja deh cek demonya :P

DEMO

Setelah anda lihat demonya klik Deh tuh Navigasinya untuk melihat efeknya, dekripsinya juga aku kasi efek muncul dari bawah biar lebih gimana gitu. emm dan di bawah ini source kodenya.

1. Masukan css di bawah ini di atas kode ]]></b:skin>

/* Name: Css3 Slider System
   BY  : System of blog
   URL : http://sin1aja.blogspot.com/
*/
#slider-system {
 padding:0;
 width:550px;
 height:300px;
 margin:0 auto;
 background:#98d url(http://1.bp.blogspot.com/-Mbe5PNnBt-A/T--yHA2TEgI/AAAAAAAACns/IphvsCOZuos/s1600/bg.jpg)no-repeat center;
 position:relative;
 border:4px solid #76C017;
 overflow:hidden;
}
#slider-system .gambar {
 padding:0;
 margin:0 auto;
}
#slider-system .gambar input {
 display:none;
}
#slider-system .gambar li {
 list-style-type:none;
 margin:0;
 padding:0;
}
#slider-system .gambar img {
 width:100%;
 height:100%;
 position:absolute;
 -moz-transition:all 900ms linear;
 -o-transition:all 900ms linear;
 -webkit-transition:all 900ms linear;
 transition:all 900ms linear;
 opacity:0;
 visibility:hidden;
}
#slider-system input:checked ~ img,
#slider-system input:checked ~ img#gerak-kiri,
#slider-system input:checked ~ img#gerak-bawah,
#slider-system input:checked ~ img#gerak-atas,
#slider-system input:checked ~ img#muter,
#slider-system input:checked ~ img#gerak-kanan,
#slider-system input:checked ~ img#miring {
 -moz-transform:rotate(0deg) scale(1);
 -ms-transform:rotate(0deg) scale(1);
 -o-transform:rotate(0deg) scale(1);
 -webkit-transform:rotate(0deg) scale(1);
 transform:rotate(0deg) scale(1);
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter:alpha(opacity=100);
 opacity:1;
 top:0 !important;
 left:0;
 right:0;
 visibility:visible;
}
#slider-system .nav {
 padding:2px;
 background:rgba(0,0,0,0.5);
 color:#09f;
 text-decoration:none;
 margin:0;
 position:absolute;
 top:0;
 left:0;
 right:0;
}
#slider-system label {
 padding:1px 10px;
 background:#8DBB15;
 color:#FFF;
 font:bold 12px/20px Arial,sans-serif;
 text-decoration:none;
 margin:1px 4px 1px 0;
 display:inline-block;
 cursor:pointer;
 position:relative;
}
#slider-system .gambar li .deskripsi {
 position:absolute;
 padding:5px;
 background:rgba(0,0,0,0.8);
 color:#88F325;
 left:0;
 right:0;
 bottom:-1000px;
 font:normal 13px/20px Arial,sans-serif;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter:alpha(opacity=0);
 opacity:0;
 -moz-transition:all 1s ease-in-out;
 -o-transition:all 1s ease-in-out;
 -webkit-transition:all 1s ease-in-out;
 transition:all 1s ease-in-out;
}
#slider-system input:checked ~ .deskripsi {
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 filter:alpha(opacity=100);
 opacity:1;
 bottom:0;
 -moz-transition-delay:0.5s;
 -o-transition-delay:0.5s;
 -webkit-transition-delay:0.5s;
 transition-delay:0.5s;
}
#slider-system .gambar li .deskripsi a,
#slider-system .gambar li .deskripsi a:visited {
 color:#ff0;
 text-decoration:none;
}
#slider-system .gambar img#gerak-kiri,
#slider-system .gambar img#gerak-kanan,
#slider-system .gambar img#gerak-bawah,
#slider-system .gambar img#gerak-atas,
#slider-system .gambar img#muter,
#slider-system .gambar img#miring {
 -moz-transition-delay:0.5s;
 -o-transition-delay:0.5s;
 -webkit-transition-delay:0.5s;
 transition-delay:0.5s;
}
#slider-system .gambar img#gerak-kiri {
 left:-100%;
}
#slider-system .gambar img#gerak-kanan {
 left:100%;
}
#slider-system .gambar img#gerak-bawah {
 top:100%
}
#slider-system .gambar img#gerak-atas {
 top:-100%
}
#slider-system .gambar img#muter {
 -moz-transform:rotate(1230deg) scale(0);
 -ms-transform:rotate(1230deg) scale(0);
 -o-transform:rotate(1230deg) scale(0);
 -webkit-transform:rotate(1230deg) scale(0);
 transform:rotate(1230deg) scale(0);
}
#slider-system .gambar img#miring {
 opacity:0;
 -moz-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
 -ms-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
 -o-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
 -webkit-transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
 transform:matrix(2.373,0,0.085,-0.013,-50.175,12.399);
}

2. Masukan kode HTML nya di bawah ini didalam Gadget HTML/Javascript

<div id="slider-system">
<div class="gambar">
<li><input checked="true" id="a" name="system" type="radio" />
<img id="gerak-kiri" src="URL gambar1.jpg" />
<div class="deskripsi">Disini deskripsi gambar 1</div>
</li>
<li><input id="b" name="system" type="radio" />
<img id="gerak-kanan" src="URL gambar1.jpg" />
<div class="deskripsi">Disini deskripsi gambar 2</div>
</li>
<li><input id="c" name="system" type="radio" />
<img id="gerak-atas" src="URL gambar1.jpg" />
<div class="deskripsi">Disini deskripsi gambar 3</div>
</li>
<li><input id="d" name="system" type="radio" />
<img id="gerak-bawah" src="URL gambar1.jpg" />
<div class="deskripsi">Disini deskripsi gambar 4</div>
</li>
<li><input id="e" name="system" type="radio" />
<img id="muter" src="URL gambar1.jpg" />
<div class='deskripsi'>Disini deskripsi gambar 5</div>
</li>
<li><input id="f" name="system" type="radio" />
<img id="miring" src="URL gambar1.jpg" />
<div class='deskripsi'>Disini deskripsi gambar 6</div>
</li>
<li><input id="g" name="system" type="radio" />
<img src="URL gambar1.jpg" />
<div class='deskripsi'>Disini deskripsi gambar 7</div>
</li>
</div><!--Penutup .gambar-->
<div class='nav'>
<label for='a'>1</label>
<label for='b'>2</label>
<label for='c'>3</label>
<label for='d'>4</label>
<label for='e'>5</label>
<label for='f'>6</label>
<label for='g'>7</label>
</div><!--Penutup .nav-->
</div><!--Penutup #slider-system-->

Jika anda ingin menambah jumlah gambarnya anda tinggal menambah kode seperti ini

<li><input id="a" name="num" type="radio" />
<img id="gerak-kiri" src="URL gambar1.jpg" />
<div class="deskripsi">Disini deskripsi gambar 1</div>
</li>

Tapi harus anda rubah nilai a pada id="a" agar tak ada kesamaan id jangan lupa juga untuk menambahkan html navigasinya yaitu label yang seperti ini.

<label for='a'>1</label>

Perhatikan nilai a pada for='a' nilai a harus sama dengan id yang ada pada pada html input jadi setiap anda menambah gambarnya anda harus perhatikan nilai kode - kode tersebut. sekarang perhatikan pada id="gerak-kiri" dst.. pada kode HTML itu adalah efeknya jadi jika anda ingin menambahkan gambar lalu ingin memberi efek miring maka anda tinggal tambah kode htmlnya seperti saya jelaskan di atas dan ganti nilai id nya dengan nilai miring anda bisa lihat kodenya di Daftar Efek jika anda ingin gunakan efek default yaitu opacity anda tidak perlu menambahkan id pada kode HTML gambarnya jadi kodenya seperti biasa saja contohnya begini.

<li><input id="a" name="num" type="radio" />
<img src="URL gambar1.jpg" />
<div class="deskripsi">Disini deskripsi gambar 1</div>
</li>

Begitu kodenya jadi tidak ada id didalamnya, slider ini juga gak loncat-loncat kayak kodok :D. jika anda bingung langsung saja bertanya.

Skitter slider terkeren part 2

noreply@blogger.com (Zhinto) — Sat, 30 Jun 2012 02:59:00 +0000

E Yow Hello Semua Mister [N] Sister kemarin aq abis jalan-jalan nih dari Sini dan nemu slider ini beuh slider yang kali ini lebih edan lagi Dari Quake Slider yang aku pernah posting sebelumnya slider kali ini bisa di gunakan dalam Mode HTML Dan juga XML tapi yang kita bahas sekarang menggunakan HTML karena aku belum pernah liat kita di blogger menulis kode memakai XML kecuali pihak bloggernya sendiri intinya banyak yang sepesial di slider ini huft dan posting ini juga bakal panjang untuk menjelaskan semuanya ok mari langsung.

1. Simpan script di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src='http://sites.google.com/site/zyztem33/js/skitter.min.js'></script>
<script src='http://sites.google.com/site/zyztem33/js/jquery.animate-colors-min.js'></script>
<script src='http://sites.google.com/site/zyztem33/js/jquery.easing.1.3.js'></script>
<script type='text/javascript'>
 $(function(){
 $('.box_skitter_large').skitter({
 animation : 'random', // Animasi berjalan secara Acak
 controls  : true, // Tombol Kontrol play pause
 controls_position : 'rightBottom', // Posisi Tombol Kontrol play pause
 numbers_align  : 'right', // Posisi nomor urut slider
 hideTools  : true, // Saat kursor meninggalkan area slider maka tombol - tombolnya akan bersembunyi
 focus   : true, // Menampilkan Tombol fokus
 progressbar  : true, // Efek animasi warna memanjang sebagai tanda waktu slider berjalan
 enable_navigation_keys: true // Slidernya juga bisa di gerakan dengan tombol arah panah komputer
});
});
</script>

Jika kode Jquery yang bergaris bawah tersebut sudah ada dalam template maka jangan anda copy lagi cukup kode yang di bawahnya saja.

2. Masukan kode css di bawah ini di atas kode ]]></b:skin>

.box_skitter_large {
  margin: 0 auto;
  padding: 0;
}
.box_skitter {
  position:relative;
  width:800px;
  height:300px;
  background:#090909;
  border: 5px solid #8F8C55
}

.box_skitter img {
  max-width:none;
}

.box_skitter ul {
  display:none;
}

.box_skitter .container_skitter {
  overflow:hidden;
  position:relative;
}

.box_skitter .image {
  overflow:hidden;
}

.box_skitter .image img {
  display:none;
}

.box_skitter .box_clone {
  position:absolute;
  top:0;
  left:0;
  width:100px;
  overflow:hidden;
  display:none;
  z-index:20;
}

.box_skitter .box_clone img {
  position:absolute;
  top:0;
  left:0;
  z-index:20;
}

.box_skitter .prev_button {
  position:absolute;
  top:50%;
  left:35px;
  z-index:100;
  width:42px;
  height:42px;
  overflow:hidden;
  text-indent:-9999em;
  margin-top:-25px;
  background:url(http://1.bp.blogspot.com/-KJHqckdf2uo/T-2k3jlzLkI/AAAAAAAACkw/u-lUaceZgYk/s400/prev.png) no-repeat left top;
}

.box_skitter .next_button {
  position:absolute;
  top:50%;
  right:35px;
  z-index:100;
  width:42px;
  height:42px;
  overflow:hidden;
  text-indent:-9999em;
  margin-top:-25px;
  background:url(http://2.bp.blogspot.com/-KseY-FEigp4/T-2k3nM8WuI/AAAAAAAACk8/w0XAw5wSnXY/s400/next.png) no-repeat left top;
}

.box_skitter .info_slide {
  position:absolute;
  top:15px;
  left:15px;
  z-index:100;
  background: #000;
  color:#fff;
  font:bold 11px arial;
  padding:5px 0 5px 5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  opacity:0.75;
}

.box_skitter .info_slide .image_number {
  background:#333;
  float:left;
  padding:2px 10px;
  margin:0 5px 0 0;
  cursor:pointer;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
}

.box_skitter .info_slide .image_number_select {
  background:#cc0000;
  float:left;
  padding:2px 10px;
  margin:0 5px 0 0;
}

.box_skitter .container_thumbs {
  position:relative;
  overflow:hidden;
  height:50px;
}

.box_skitter .info_slide_thumb {
  height:50px;
  -moz-border-radius:0;
  -webkit-border-radius:0;
  border-radius:0;
  overflow:hidden;
  top:auto;
  top:0;
  left:0;
  padding:0 !important;
  opacity:1.0;
}

.box_skitter .info_slide_thumb .image_number {
  overflow:hidden;
  width:100px;
  height:50px;
  position:relative;
  margin:0 !important;
  padding:0 !important;
  -moz-border-radius:0 !important;
  -webkit-border-radius:0 !important;
  border-radius:0 !important;
}

.box_skitter .info_slide_thumb .image_number img {
  position:absolute;
  top:-30px;
  left:-30px;
  height:100px;
}

.box_skitter .box_scroll_thumbs {
  padding:0;
}

.box_skitter .box_scroll_thumbs .scroll_thumbs {
  position:absolute;
  bottom:60px;
  left:50px;
  background:#ccc;
  background:-moz-linear-gradient(-90deg,#555,#fff);
  background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#fff));
  width:200px;
  height:10px;
  overflow:hidden;
  text-indent:-9999em;
  z-index:101;
  cursor:pointer;
  border:0 solid #333;
}

.box_skitter .info_slide_dots {
  position:absolute;
  bottom:-40px;
  z-index:151;
  padding:5px 0 5px 5px;
  -moz-border-radius:50px;
  -webkit-border-radius:50px;
  border-radius:50px;
}

.box_skitter .info_slide_dots .image_number {
  background:#333;
  float:left;
  margin:0 5px 0 0;
  cursor:pointer;
  -moz-border-radius:50px;
  -webkit-border-radius:50px;
  border-radius:50px;
  width:18px;
  height:18px;
  text-indent:-9999em;
  overflow:hidden;
}

.box_skitter .info_slide_dots .image_number_select {
  background:#cc0000;
  float:left;
  margin:0 5px 0 0;
}

.loading {
  position:absolute;
  top:50%;
  right:50%;
  z-index:10000;
  margin:-16px -16px;
  color:#fff;
  text-indent:-9999em;
  overflow:hidden;
  background:url(http://2.bp.blogspot.com/-Gv_aE8GtHd0/T-hiOWNaf9I/AAAAAAAACjM/yI9ZevW3AoM/s400/loadingQ.gif) no-repeat left top;
  width:48px;
  height:41px;
}

.box_skitter .label_skitter {
  z-index:150;
  position:absolute;
  bottom:0;
  left:0;
  display:none;
}

.box_skitter .label_skitter {
  z-index:150;
  position:absolute;
  bottom:0;
  left:0;
  color:#fff;
  display:none;
  opacity:0.8;
  background:#000;
}

.box_skitter .label_skitter p {
  padding:5px 10px;
  margin:0;
  font:normal 13px/20px Arial,tahoma;
  letter-spacing:0;
  text-align: left
}
.box_skitter .label_skitter p a, .box_skitter .label_skitter p a:visited {
  color: #09f;
  text-decoration: underline
}
.box_skitter .info_slide* {
  font-family:Consolas,arial,tahoma !important;
}

.box_skitter .progressbar {
  background: #CA9D0E;
  position:absolute;
  top:5px;
  left:15px;
  height:5px;
  width:200px;
  z-index:99;
  border-radius:20px;
}

.box_skitter .preview_slide {
  display:none;
  position:absolute;
  z-index:152;
  bottom:30px;
  left:-40px;
  width:100px;
  height:100px;
  background:#fff;
  border:1px solid #222;
  -moz-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;
  -webkit-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;
  box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;
  overflow:hidden;
}

.box_skitter .preview_slide ul {
  height:100px;
  overflow:hidden;
  margin:0;
  list-style:none;
  display:block;
  position:absolute;
  top:0;
  left:0;
}

.box_skitter .preview_slide ul li {
  width:100px;
  height:100px;
  overflow:hidden;
  float:left;
  margin:0;
  padding:0;
  position:relative;
  display:block;
}

.box_skitter .preview_slide ul li img {
  position:absolute;
  top:0;
  left:0;
  height:150px;
  width:auto;
}

#overlay_skitter {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:9998;
  opacity:1;
  background:#000;
}

.box_skitter .focus_button {
  position:absolute;
  top:50%;
  z-index:100;
  width:42px;
  height:42px;
  overflow:hidden;
  text-indent:-9999em;
  margin-top:-25px;
  background:url(http://3.bp.blogspot.com/-XyDMk3fms7I/T-2k33nklvI/AAAAAAAAClI/Wwx-X2kBiqA/s400/focus-button.png) no-repeat left top;
  opacity:0;
}

.box_skitter .play_pause_button {
  position:absolute;
  top:50%;
  z-index:151;
  width:42px;
  height:42px;
  overflow:hidden;
  text-indent:-9999em;
  margin-top:-25px;
  background:url(http://1.bp.blogspot.com/-GvtZsT1nDk8/T-2k4AQNR2I/AAAAAAAAClU/G7HIAujYx5k/s400/pause-button.png) no-repeat left top;
  opacity:0;
}

.box_skitter .play_pause_button.play_button {
  background:url(http://2.bp.blogspot.com/--FEyTz_PsUk/T-2k4s3QkEI/AAAAAAAAClg/02dV0wTJ_ck/s400/play-button.png) no-repeat left top;
}

3. Masukan kode HTML di bawah ini dalam Gadget HTML/Javascript

<div class="box_skitter box_skitter_large">
<ul>

<li>
<a href="URL Anda"><img src="URL Gambar.jpg" /></a>
<div class="label_text">
<p>Disini tulis deskripsi dari gambar anda</p>
</div>
</li>
<li>
<a href="URL Anda"><img src="URL Gambar.jpg" /></a>
<div class="label_text">
<p>Disini tulis deskripsi dari gambar anda</p>
</div>
</li>
<li>
<a href="URL Anda"><img src="URL Gambar.jpg" /></a>
<div class="label_text">
<p>Disini tulis deskripsi dari gambar anda</p>
</div>
</li>

</ul><!--Penutup kode ul -->
</div><!--Penutup kode .box_skitter -->

Jika inign menambah slider gambarnya silahkan tambahkan kode seperti ini sebelum Penutup kode ul

<li>
<a href="URL Anda"><img src="URL Gambar.jpg" /></a>
<div class="label_text">
<p>Disini tulis deskripsi dari gambar anda</p>
</div>
</li>

Option - option Skitter Slider

Option	Description	Default
velocity	Velocity of animation	1
interval	Interval between transitions	2500
animation	Default animation	null or defined in <a> class
numbers	Nomor urut navigasi	true
navigation	Navigasi Arah panah kiri kanan	true
label	Deskripsi gambar	true
easing_default	Easing default	null
animateNumberOut	Warna Number / dots ( tak disentuh kursor )	{backgroundColor:'#333', color:'#fff'}
animateNumberOver	Warna Number / dots ( disentuh kursor )	{backgroundColor:'#000', color:'#fff'}
animateNumberActive	Warna Number / dots ( Saat Aktif )	{backgroundColor:'#cc3333', color:'#fff'}
thumbs	Navigasi sebagai thumbnail	false
hideTools	Menyembunyikan navigasi	false
fullscreen	Fullscreen mode	false
xml	Loading data from XML file	false
dots	Navigasi sebagai dots ( bundar )	false
width_label	Menentukan Lebar deskripsi	null
show_randomly	Randomly sliders	false
onLoad	Callback	null
numbers_align	Posisi dari navigasi number/dots/thumnail	left
preview	Tumbnail Saat Navigasi Dots di sentuh	false
focus	Tombol Fokus	false
focus_position	Posisi dari Tombol Fokus	center
controls	Tombol play/pause	false
controls_position	Positi dari Tombol play/pause	center

Contoh animateNumberOut, animateNumberOver, animateNumberActive

animateNumberOver: {
backgroundColor:'#09f', color:'#FFF'
},
animateNumberOut: {
backgroundColor:'#000', color:'#FFF'
},
animateNumberActive: {
backgroundColor:'#d00', color:'#FFF'
}

Fungsi Option animateNumberOut, animateNumberOver, animateNumberActive ini adalah untuk mengganti warna latar dari Navigasi baik tampilan sebagai Dots maupun Number.

Nama Efek - Efek Skitter Slider

all
cube
cubeRandom
block
cubeStop
cubeHide
cubeSize
horizontal
showBars
showBarsRandom
tube
fade
fadeFour
paralell
blind
blindHeight
blindWidth
directionTop
directionBottom
directionRight
directionLeft
cubeStopRandom
cubeSpread
cubeJelly
glassCube
glassBlock
circles
circlesInside
circlesRotate
cubeShownew
upBarsnew
downBarsnew
random
randomSmart

Jika anda ingin menggunakan salah satu atau beberapa animasi saja maka gunakan
with_animations : ['nama efek'] pada Attribut pemanggilnya dan hapus kode
animation : 'random', Jadi contohnya seperti ini.

<script type='text/javascript'>
 $(function(){
 $('.box_skitter_large').skitter({
 with_animations : ['upBarsnew','downBarsnew'],
 controls  : true,
 controls_position : 'rightBottom',
 numbers_align  : 'right',
 hideTools  : true,
 focus   : true,
 progressbar  : true,
 enable_navigation_keys: true
});
});
</script>

1. Perhatikan lagi kode numbers_align : 'right', itu adalah posisi dari Nomor navigasi atau Dots navigasi pilihannya itu ada 3:

left
center
right

2. Kode controls_position : 'rightBottom', adalah posisi dari button play / pause pilihannya ada 5:

leftTop
center
rightTop
rightBottom
leftBottom

Dan untuk kode yang lain yang nilainya true yang artinya benar / tampil dan jika anda tidak ingin tampilkan anda tinggal ganti nilai true dengan false, Dan jika anda ingin menambah option pada kode jquery pemanggilnya anda tinggal tulis nama option nya lalu pada option anda tinggal tambahkan tanda koma contoh seperti ini.

<script type='text/javascript'>
 $(function(){
 $('.box_skitter_large').skitter({
 with_animations : ['upBarsnew','downBarsnew'],
 controls  : true,
 controls_position : 'rightBottom',
 numbers_align  : 'right',
 hideTools  : true,
 focus   : true,
 progressbar  : true,
 enable_navigation_keys: true,
 fullscreen : false
});
});
</script>

Begitu seterusnya jika anda ingin menambah Option maka pada option kedua dari bawah harus di beri tanda koma dan untuk Option yang bernilai true dan false tidak apa-apa jika tidak di beri tanda quote namun selain nilai true dan false harus di beri tanda quote contohnya 'rightBottom' itukan bukan true dan false maka harus di beri tanda quote. nah di bawah ini sudah saya siapkan demonya mulai dari:

1. Standar
2. Menggunakan Dots
3. Menggunakan Thumbs

With Number
With Dots
With Thumbs

Sekianlah kalau tetep gak mengerti dengan penjelasan saya silahkan langsung saja mampir ke webnya Disini

Masalah tombol hapus pada komentar threaded blogger

noreply@blogger.com (Zhinto) — Fri, 29 Jun 2012 00:41:00 +0000

Sebenarnya masalah Tombol hapus pada threaded comment ini sudah saya posting pada postingan Style komentar threaded comment namun gak begitu spesifik nah sekarang saya buat posting tersendirinya karena ada beberapa temen juga yang bertanya kenapa tombol hapus di blog saya gak muncul itu karena ada 3 baris kode css yang gak muncul pada Css threaded comment, tapi masalah itu sudah saya temukan solusinya berkat Inspect elemen dari Google Chrome.

Untuk memunculkan Tombol hapus pada threaded comment blogger silahkan simpan kode css di bawah ini di atas kode ]]></b:skin>

.item-control {
 display: inline;
}

Setelah itu klik SIMPAN TEMPLATE dan lihat deh tuh tombol hapus pada threaded comment anda sudah muncul atau enggak. selamat mencoba mister - sister semua.

Manipulasi link pada komentar dengan jquery

noreply@blogger.com (Zhinto) — Fri, 29 Jun 2012 00:24:00 +0000

Maksud dari manipulasi link ini adalah jika seseorang berkomentar pada sebuah artikel anda dan orang tersebut menyisipkan link maka link orang tersebut akan berganti dengan link yang sudah kita siapkan didalam kode jquery dan seperti screenshot diatas nama link tersebut tetep sama tapi URL nya yang berbeda begitulah kira - kira.

Kode Jquery nya juga gak terlalu panjang dan gak berat cuman sebaris aja ko'. emmm masih ingat gak dengan postingan saya Menambahkan target='_blank' dan rel='nofollow' pada link ..? kita juga masih menggunakan kode itu untuk memanipulasinya, dan ada beberapa posting juga mengenai area komentar

1. Menghapus link pada komentar dengan css
2. Menghapus link pada komentar dengan jquery

Anda tinggal pilih anda ingin menghapus atau memanipulasi link yang ada pada area komentar, jika anda ingin menghapus silahkan baca saja 2 postingan saya itu pilih saja mau menggunakan Css atau Jquery dan jika anda ingin memanipulasi link saja anda bisa ikuti tutorial ini.

Langkah - langkahnya cukup mudah anda tinggal simpan kode jquery di bawah ini diatas kode </head> dalam template anda.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function(){
$("#comments p a").attr("href","http://sin1aja.blogspot.com/");
});
</script>

Jika kode bergaris bawah sudah ada di template anda jangan mengCopy nya lagi jadi cukup kode yang dibawahnya saja, jangan lupa ganti http://sin1aja.blogspot.com/ dengan URL yang anda kehendaki setelah itu klik SIMPAN TEMPLATE, dan silahkan anda coba komen di blog anda sendiri dengan menggunakan link misalnya link postingan anda maka link tersebut akan berganti dengan link yang sudah kita tulis pada kode jquery. moga bermanfaat wassalam..

Mengganti older post dan newer post dengan judul postingan part ||

noreply@blogger.com (Zhinto) — Thu, 28 Jun 2012 08:51:00 +0000

Hello mister - sister semua masih inget gak postingan saya sebelumnya yang berjudul Mengganti older post dan newer post dengan judul postingan nah sekarang ada part 2 nya, pembuatnya sekarang admin dari Blogger Tune Up lalu apa spesialnya pada part 2 ini...? sepesialnya pada part 2 ini adalah loading lebih ringan mister - sister semua karena pada part 2 ini programnya menggunakan jquery jadi setelah jquery di load maka judul posting pada Older post dan Newer post akan ter_load atau muncul jadi gak seperti versi 1 atau part 1 nya yang memakan loading cukup lama, mari langsung kita coba.

1. Masukan script di bawah ini di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

2. Simpan script pemanggilnya di bawah ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
/*!
 * jQuery Blogger Item Navigation 1.0
 * http://modification-blog.blogspot.com/
 * Copyleft 2012, Blogger Tune-Up
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * Date: Mon May 28 14:54:29 2012 -0500
 */
//<![CDATA[
var JudNav = {};
//Fungsi pengambilan judul artikel melalui feed
function ambilJudNav(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
        var judul = json.feed.entry[i];
        var data = "";
        for (var k = 0; k < judul.link.length; k++) {
            if (judul.link[k].rel == 'alternate') {
                data = judul.link[k].href;
                break
            }
        }
        if (data != "") JudNav[data] = judul.title.$t
    }
}
//Fungsi penulisan sekumpulan judul feed dengan mengambilnya dari fungsi sebelumnya 'ambilJudNav'
document.write('<script type="text/javascript" src="http://' + window.location.hostname + '/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=ambilJudNav"></' + 'script>');
//Fungsi Pengambilan Anchor, Pengecekan URL dan Penggantian beberapa simbol
function JudulURL(anchor) {
    var linkurl = anchor.match(/\/([^\/_]+)(_.*)?\.html/);
    if (linkurl) {
        linkurl = linkurl[1].replace(/-/g, " ");
        linkurl = linkurl[0].toUpperCase() + linkurl.slice(1);
        if (linkurl.length > 28) linkurl = linkurl.replace(/ [^ ]+$/, "...")
    }
    return linkurl
}
//Mengganti 'Posting Lama' dan 'Posting Lebih Baru' dengan fungsi jQuery saat halaman di-load
$(window).load(function () {
    window.setTimeout(function () {
        var anchor = $("a.blog-pager-newer-link").attr("href");
        if (anchor) {
            var judul = JudNav[anchor];
            if (!judul) judul = JudulURL(anchor);
            if (judul) $("a.blog-pager-newer-link").html(judul)
        }
  anchor = $("a.blog-pager-older-link").attr("href");
        if (anchor) {
            var judul = JudNav[anchor];
            if (!judul) judul = JudulURL(anchor);
            if (judul) $("a.blog-pager-older-link").html(judul)
        }
    }, 500)
});
//]]>
</script>
</b:if>

3. Masukan kode css di bawah ini diatas kode ]]></b:skin>

.blog-pager-newer-link {
    background-color: transparent !important;
    padding: 0 !important
    }

.blog-pager-older-link {
    background-color: transparent !important;
    padding: 0 !important
    }

#blog-pager-newer-link {
    padding: 5px;
    font-size: 90%;
    width: 200px;
    text-align: left
    }

#blog-pager-older-link {
    padding: 5px;
    font-size: 90%;
    width: 200px;
    text-align: right
    }

Nah selesailah semuanya anda tinggal buka blog anda dan lihat sudahkah older post dan newer post nya berganti dengan judul postingan seperti pada screenshot / gambar di atas, jika sudah maka berhasilah anda main codingnya mantap semoga bermanfaat Wassalam....

Postingan ini saya update karena posting sebelumnya aku coba belum berhasil kalau yang kali ini di jamin 100% work

Quake slider gambar keren

noreply@blogger.com (Zhinto) — Mon, 25 Jun 2012 00:56:00 +0000

Abis jalan - jalan dari sini langsung posting lagi tentang slider ckckckck soalnya belum nemu trik - trik baru nih jadi ya tentang slider lagi aku bahas, nah pada slider ini efeknya tuh keren abis dan gak kalah kerennya ya Caption nya itu ada 4 macam bisa di sebelah kiri, kanan, atas, bawah, tapi yang saya ambil cuma 2 yaitu di sebelah bawah dan kanan karena jika semuanya di pakai maka banyak juga kode yang anda harus pakai jadi saya ambil 2 saja.

DEMO

1. Masukan css di bawah ini di atas kode ]]></b:skin>

.quake-slider-wrapper {
    margin: 0 auto;
    padding: 5px;
    }

.quake-slider {
    width: 800px;
    height: 350px;
    margin: 0;
    position: relative;
    overflow: hidden;
    -moz-box-shadow: 0 0 8px #90989e;
    -webkit-box-shadow: 0 0 8px #90989e;
    box-shadow: 0 0 8px #90989e;
    background: #EEE url(http://4.bp.blogspot.com/-_XPXpxYDhAo/T-ei-nllZnI/AAAAAAAAChw/AapY8QUu8BE/s1600/loading.gif) no-repeat center
    }

.quake-nav a {
    position: absolute;
    top: 45%;
    text-decoration: none;
    width: 37px;
    height: 38px;
    background-repeat: no-repeat;
    z-index: 10000;
    cursor: pointer;
    text-indent: -9999px;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -khtml-user-select: none
    }

.quake-prev {
    left: 0;
    margin-left: 2px;
    background: url(http://4.bp.blogspot.com/-nlMQszxtWzU/T-ejARVJdrI/AAAAAAAACh4/wHI03WiBjus/s1600/nav.png)
    }

.quake-next {
    right: 0;
    margin-right: 2px;
    background: url(http://4.bp.blogspot.com/-nlMQszxtWzU/T-ejARVJdrI/AAAAAAAACh4/wHI03WiBjus/s1600/nav.png) right
    }
.quake-slider-caption-container-right {
 background-color: #1889F1;
 position: absolute;
 z-index: 101;
 padding: 5px;
 width: 200px;
 right: 0;
 top: 0;
 bottom: 0;
}

.quake-slider-caption-right {
 color: white;
 font: bold 13px/20px Arial,sans-serif;
 width: 200px;
 position: absolute;
 z-index: 102;
 right: 0;
 top: 0;
 bottom: 0;
 padding: 5px;
 margin: 0;
}
.quake-slider-caption-container-bottom {
 background-color: black;
 position: absolute;
 z-index: 101;
 padding: 15px;
 bottom: 0;
 left: 0;
 right: 0;
}

.quake-slider-caption-bottom {
 color: white;
 font: bold 13px/20px Arial,sans-serif;
 position: absolute;
 z-index: 102;
 bottom: 5px;
 padding: 0 10px;
}
.quake-nav-wrapper {
    position: relative;
    z-index: 1000;
    }

.quake-nav-container {
    margin: 10px auto 0;
    }

.quake-nav-control {
    width: 22px;
    height: 22px;
    cursor: pointer;
    display: inline-block;
    background: url(http://4.bp.blogspot.com/-VQyO8ZzV-_E/T-ei73kIM3I/AAAAAAAACho/0nLuvOPjGWg/s1600/circle.png) no-repeat;
    text-indent: -99999px;
    border: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -khtml-user-select: none;
    outline: none
    }

.quake-nav-control.active {
    /*background-position: 0px -22px;*/
    background-image: url(http://4.bp.blogspot.com/-dCs4giZ13Pk/T-ei5ir1CyI/AAAAAAAAChg/LgDEJLiXwwc/s1600/circle-active.png)
    }

.quake-slider-caption a {
    color: Yellow
    }

.quake-link {
    position: absolute;
    z-index: 101
    }

2. Masukan script di bawah ini di atas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://system-svn.googlecode.com/svn/trunk/quake.slider-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
 $('.quake-slider').quake({
 thumbnails     : false,
 captionOpacity : '0.7',
 hasNextPrev    : true,
 frameWidth     : 800,
 frameHeight    : 350,
 captionsSetup  : [{
 "orientation"  : "bottom",
 "slides"       : [0,3],
 "callback": captionAnimateCallback
 }]
 });
 function captionAnimateCallback(captionWrapper, captionContainer, orientation) {
 captionWrapper.css({
 bottom: '-990px'
 }).stop(true, true).animate({
 bottom: 0
 }, 500);
 captionContainer.css({
 left: '-990px'
 }).stop(true, true).animate({
 left: 0
 }, 500);
 }
 });
</script>

3. Masukan kode html di bawah ini dalam Gadget HTML/Javascript

<div class="quake-slider">
<div class="quake-slider-images">
<a target="_blank" href="#"><img src="url1.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="url2.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="url3.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="url4.jpg" alt="judul gambar" /></a>
</div><!-- Kode penutup quake-slider-images -->
<div class="quake-slider-captions">
<div class="quake-slider-caption">Deskripsi gambar 1</div>
<div class="quake-slider-caption">Deskripsi gambar 2 dengan <a href='#'>Link</a></div>
<div class="quake-slider-caption">Deskripsi gambar 3</div>
<div class="quake-slider-caption">Deskripsi gambar 4</div>
</div><!-- Kode penutup quake-slider-captions -->
</div><!-- Kode penutup quake-slider -->

Nah jika gambar anda ada lima atau enam maka deskripsi gambarnya harus anda tambahkan dengan cara menambah kode seperti ini,

<div class="quake-slider-caption">Deskripsi gambar 3</div>

Baris kode seperti itu bisa anda tambahkan sebelum kode penutup quake-slider-captions jadi seperti ini

<div class="quake-slider">
<div class="quake-slider-images">
<a target="_blank" href="#"><img src="1.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="2.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="3.jpg" alt="judul gambar" /></a>
<a target="_blank" href="#"><img src="4.jpg" alt="judul gambar" /></a>
</div><!-- Kode penutup quake-slider-images -->
<div class="quake-slider-captions">
<div class="quake-slider-caption">Deskripsi gambar 1</div>
<div class="quake-slider-caption">Deskripsi gambar 2 dengan <a href='#'>Link</a></div>
<div class="quake-slider-caption">Deskripsi gambar 3</div>
<div class="quake-slider-caption">Deskripsi gambar 4</div>
<div class="quake-slider-caption">Deskripsi gambar 5</div>
</div><!-- Kode penutup quake-slider-captions -->
</div><!-- Kode penutup quake-slider -->

Nah begitu seterusnya, kode gambarnya juga anda bisa tambahkan baris kodenya seperti ini,

<a target="_blank" href="#"><img src="1.jpg" alt="judul gambar" /></a>

Anda bisa tambahkan sebelum kode penutup quake-slider-images.

Pengaturan - pengaturan slider

1. Perhatikan kode width: 800px; Dan height: 350px; pada kode css jika kode tersebut anda ganti maka kode width: 800px; Dan height: 350px; pada kode js juga anda harus ganti jadi harus sesuai.

2. Perhatikan kode "slides" : [0,3], pada kode js, 0,3 artinya gambar nomor 1 dan nomor 4 caption nya atau deskripsi gambarnya akan berada di bawah sedangkan gambar nomor 2 dan 3 akan berada di kanan. gambar di hitung mulai dari 0 jadi gambar nomor 1 adalah 0 dan nomor 2 adalah 1 dan seterusnya, jadi jika anda ingin caption gambar nomor 1,2 dan 3 berada di bawah maka kodenya nya menjadi "slides" : [0,1,2], jadi gambar nomor 4 caption nya akan berada di kanan, bisa juga jika anda ingin acak misalnya slider gambar 1 captionnya di kanan terus gambar 2 captionnya di bawah bisa anda tinggal rubah nomornya saja pada pengaturan "slides".

3. Ukuran gambar, jika anda menggunakan slider ini ukuran gambar harus sama semua, saya ambil contoh dari blog demo, di blog demo tersebut ukuran gambar slidernya 800 x 350 dan semua ukuran gambarnya sama, dan kode width: 800px; Dan height: 350px; pada kode css juga harus sama seperti ukuran gambar pada kode js juga. kenapa seperti itu..? agar slider ini terlihat rapi dan juga keren tentunya, anda pasti gak mau donk kalau slidernya kelihatan berantakan.

Mungkin hanya itu semoga sukses wassalam.......

Chop slider css3 transition

noreply@blogger.com (Zhinto) — Thu, 21 Jun 2012 00:22:00 +0000

Hemm walau internetan jarang tapi sekarang aku mau bagi - bagi slider nemu dari DUMAY nih emm slider ini edan efeknya itu Lo gila banget yah maklum namanya juga Css3 dan jquery dan yang kali ini efeknya menggunakan transition pokoknya kalau browser anda mendukung css3 liat deh sampe puas banyak efek aneh bin ajib.

DEMO

Dalam gambar di atas adalah salah satu efek transitionnya, hemmm pokoknya puas banget aku melihat slider ini bekerja Fyuhhhh mari langsung Comot slidernya.

1. Masukan css di bawah ini di atas ]]></b:skin>

.wrapper {
    position: relative;
    margin: 0 auto 15px;
    width: 600px;
    height: 350px;
    display: block;
    padding: 5px;
    background: #FFF;
    z-index: 2
    }
#slide-prev, #slide-next {
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    padding: 15px;
    bottom: 50%;
    position: absolute;
    z-index: 4
    }
#slide-prev {
    left: 20px;
    background: #FFF url(http://3.bp.blogspot.com/-vjIXs1ktYSs/T-JaYVBdLzI/AAAAAAAACe8/fvZJeayf9ew/s1600/arrow_left.png) no-repeat center
    }
#slide-next {
    right: 20px;
    background: #FFF url(http://3.bp.blogspot.com/-2G1xuDOoAlM/T-JaYnZkpFI/AAAAAAAACfI/-jnzqF3ogS8/s1600/arrow_right.png) no-repeat center
    }

#slider {
    width: 600px;
    height: 350px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
    display: block
    }

#slider img {
    width: 100%;
    height: 100%
    }

.slide {
    display: none
    }

.cs-activeSlide {
    display: block
    }

.slide-descriptions {
    display: none
    }

.caption {
    background: rgba(238, 238, 238, 0.83);
    color: #333;
    display: none;
    padding: 5px 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    z-index: 3;
    font: normal 13px/20px Arial, sans-serif
    }

2. Masukan script di bawah ini di atas </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://system-svn.googlecode.com/svn/trunk/jquery.id.chopslider-2.2.0.free.min.js"></script>
<script src="http://system-svn.googlecode.com/svn/trunk/jquery.id.cstransitions-1.2.min.js"></script>
<script>
jQuery(function(){
    $("#slider").chopSlider({
        slide : ".slide",
        nextTrigger : "a#slide-next",
        prevTrigger : "a#slide-prev",
        hideTriggers : true,
        sliderPagination : ".slider-pagination",
        useCaptions : true,
        everyCaptionIn : ".sl-descr",
        showCaptionIn : ".caption",
        captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)",
        autoplay : true, // slidernya otomatis bermain, "false" jika tidak otomatis
        autoplayDelay : 3000, // waktu penundaan gambar
        t3D : csTransitions['3DFlips']['random'],
     t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ],
        noCSS3 : csTransitions['noCSS3']['random'],
        mobile : csTransitions['mobile']['random'],
        onStart: function(){},
        onEnd: function(){}
    })
})
</script>

3. Masukan kode html di bawah ini dalam Gadget HTML/Javascript

<div class="wrapper">
<a id="slide-next" href="#"></a>
<a id="slide-prev" href="#"></a>
<div id="slider">
<div class="slide cs-activeSlide"><img src="url gambar1.jpg"/></div>
<div class="slide"><img src="url gambar2.jpg"/></div>
<div class="slide"><img src="url gambar3.jpg"/></div>
<div class="slide"><img src="url gambar4.jpg"/></div>
</div>

<div class="slide-descriptions">
<div class="sl-descr">Ini beneran gak ya my Friend...? ngeri juga kalau sampe di caplok</div>
<div class="sl-descr">Walpaper Gothic 1</div>
<div class="sl-descr">Walpaper Gothic 2</div>
<div class="sl-descr">Walpaper Gothic 3</div> 
</div>
<div class="caption"></div>
</div>

Ganti urlnya dengan url gambar anda, jangan lupa ganti juga deskripsinya. untuk pagination yang bundar - bundar itu sengaja gak aku masukan karena penambahan bundar - bundar nya ( pagination ) nya itu secara manual jadi jika gambar anda ada 10 maka anda harus menambah kode paginationnya sebanyak 10 kali. hemmm yah abis itu simpan ya. kalau belum punya URL gambarnya ni aku kasi pinjem url gambar.

http://4.bp.blogspot.com/-uOcdcdbTLOY/T-JX831MqaI/AAAAAAAACeM/zp8aooYZTHk/s1600/chop1.jpg
http://2.bp.blogspot.com/-bRf3jmXcIyQ/T-JX9AQtgCI/AAAAAAAACeY/n9nluDTZToA/s1600/chop2.jpg
http://1.bp.blogspot.com/-WPZp-bC7KnQ/T-JX9rTuu-I/AAAAAAAACek/zCqqcZwPtzc/s1600/chop3.jpg
http://1.bp.blogspot.com/-AcQ1d4DTnbk/T-JX-M-QABI/AAAAAAAACew/X2H-w9iLb6c/s1600/chop4.jpg

Perhatikan .wrapper dan #slider jika pada .wrapper anda rubah kode width atau height nya maka pada #slider juga harus anda rubah agar sesuai dan rapi. nah selamat mencoba

Menambahkan target='_blank' dan rel='nofollow' pada link secara otomatis

noreply@blogger.com (Zhinto) — Thu, 14 Jun 2012 00:14:00 +0000

Disaat ngeblog udah lumayan lama dan masih pengen aktif ngeblog paket internetnya dah isDead dan sekarang adanya paket 49rb/bulan dengan kuota 500mb emm baru beberapa hari dah habis gak tau deh nih kedepannya gimana ngeblognya kayaknya bakal lama aku gak bisa ngeblog.

emmm dan beberapa hari ini juga dasbor baru blogger banyak berubah lagi tapi perubahannya sih memang gak terlalu menonjol ya tapi pasti taulah yang berubah, ok sekarang detik - detik terakhir ngeblog dan aku pengen share cara menambahkan attribut target='_blank' dan rel='nofollow' ke dalam link secara otomatis.

Jadi gambarannya seperti screenshot di atas kodenya itu bakal langsung ada sendiri mantep jadi gak perlu repot - repot lagi, tapi anda harus menentukan dulu ID atau Class dari area yang anda inginkan linknya terbuka di tab baru dan juga ber_Attribut rel='nofollow' nah setelah anda tentukan pasti nanti secara otomatis link yang ada di area yang anda pilih pasti langsung ada tambahan target='_blank' dan rel='nofollow'.

1. Masukan kode script di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script>
$(function(){
$("#postingan a").attr({
'target':'_blank',
'rel':'nofollow'
});
});
</script>

Perhatikan #postingan ganti dengan ID atau class dari area yang anda inginkan linknya terbuka di tab baru dan juga ber_Attribut rel='nofollow' jadi misalnya anda ingin di area postingan anda semua linknya terbuka di tab baru dan dan juga ber_Attribut rel='nofollow' maka ganti #postingan dengan #main-wrapper misalnya begitu juga di bagian sidebar kalau anda ingin link yang berada di sidebar terbuka di tab baru dan dan juga ber_Attribut rel='nofollow' maka ganti #main-wrapper dengan #sidebar-wrapper. Intinya anda harus tau ID dan juga Class dari area yang mempunyai link dan anda ingin tambahkan attribut target='_blank' dan rel='nofollow'.

2. Tambahan kode hanya target='_blank'

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script>
$(function(){
$("#postingan a").attr("target","_blank");
});
</script>

3. Tambahan kode target='_blank' dan rel='dofollow'

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script>
$(function(){
$("#postingan a").attr({
'target':'_blank',
'rel':'dofollow'
});
});
</script>

4. Tambahan kode hanya rel='nofollow'

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script>
$(function(){
$("#postingan a").attr("rel","nofollow");
});
</script>

5. Tambahan kode hanya rel='dofollow'

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script>
$(function(){
$("#postingan a").attr("rel","dofollow");
});
</script>

Anda pilih saja kode yang anda perlukan simpan kodenya juga sama di atas </head> jangan lupa ganti ID atau Class nya, selamat mencoba dan Goodbye ALL kalau ada waktu pasti aku update nih blog :( maaf kalau blog ini banyak kekurangan.

Flux slider css3 dan jquery buat blog

noreply@blogger.com (Zhinto) — Mon, 11 Jun 2012 23:20:00 +0000

Flux slider adalah slider gabungan dari CSS3 Dan Jquery ini slider keren banget menurut saya karena efeknya itu beuh keren banget memang kalau Css3 dan Jquery bertemu semua jadi Luar binasa hahahaha ada Efek 3D nya juga loh slider Flux ini keren dah pokoknya tapi kalau browser anda tidak support Css3 maka akan ada teks peringatan bahwa browser anda tidak support css3.

DEMO

1. Masukan script di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://sites.google.com/site/zyztem33/js/flux.min.js' type='text/javascript'></script>
<script src='http://sites.google.com/site/zyztem33/js/flux.main.js' type='text/javascript'></script>

2. Masukan css di bawah ini di atas kode ]]></b:skin>

#slider {
    padding:5px;
    margin: 0 auto 15px;
}
#slider > .fluxslider {
    margin: 0 auto !important;
    border: 3px solid #999;
    background: #C9C9C9;
    padding: 0 0 10px 0;
    max-width: 99% !important;
    overflow: hidden
    }
#slider .pagination {
    list-style:none outside none;
    padding:5px !important;
}
#slider .pagination li.current {
    background-color: dimGray
    }

#slider .pagination li {
    cursor: pointer;
    display: inline-block;
    margin-left: 0;
    background-color: silver;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    height: 8px;
    text-indent: -10000px;
    width: 8px;
    -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31);
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.31)
    }
#transitions {
    overflow:hidden;
}
#transitions ul {
    float:left;
    list-style:none outside none;
    padding:0;
    width:33%;
}
#transitions ul#trans2D {
    text-align:right;
}
#transitions ul li {
    margin:0 10px;
}
/* Css Teks Warning jika browser anda tidak support css3*/
#warn {
    font-weight:bold;
    text-align:center;
}

3. Masukan kode html di bawah ini dalam Gadget HTML/Javascript

<div id="slider">
<div id='warn'></div>
<a href="URL anda"><img src='Url gambar1.jpg' /></a>
<a href="URL anda"><img src='Url gambar1.jpg' /></a>
<a href="URL anda"><img src='Url gambar1.jpg' /></a>
</div>

Catatan

Jika anda ingin menambahkan gambar usahakan gambarnya itu semuanya berukuran sama misalnya 400 x 200 Maka semua gambar harus berukuran seperti itu agar terlihat lebih rapi karena jika tidak maka slidernya akan terlihat berantakan, dan seperti yang saya bilang slider ini gabungan dari css3 dan jquery jadi jika slidernya diam yah berarti browser anda tidak support css3.

Coin slider untuk blog

noreply@blogger.com (Zhinto) — Mon, 11 Jun 2012 03:12:00 +0000

Coin slider adalah slider dengan efek yang unik begitu kata pemiliknya hehehehe karena efek pergantian gambarnya itu bermacam - macam jadi ya unik kan beberapa hari ini mungkin saya akan posting tentang slider - slider hehee karena lagi demam slider biar pada ngumpul juga di blog ini slider - slider unik ckckkck

DEMO

1. Masukan css di bawah ini di atas kode ]]></b:skin>

/* Slider Coin */
.coin-slider {
overflow: hidden;
zoom: 1;
position: relative
}
.coin-slider a {
text-decoration: none !important;
outline: none;
border: none;
color: white !important
}
.cs-buttons {
font-size: 0;
padding: 10px;
float: left
}
.cs-buttons a {
margin-left: 5px;
height: 10px;
width: 10px;
float: left;
border: 1px solid #B8C4CF;
color: #B8C4CF;
text-indent: -1000px;
display: none
}
.cs-active {
background-color: #B8C4CF;
color: #FFF
}
.cs-title {
padding: 10px;
background-color: #007AFF;
color: #FFF
}
.cs-prev, .cs-next {
background-color: #0692FF;
color: #FFF;
padding: 0 10px
}
.pendamping {
margin: 0 auto;
overflow: hidden;
padding: 0;
width: 420px !important;
height: 200px !important;
border: 4px solid #AAA475;
font: normal 13px/20px Arial,sans-serif !important;
}

2. Masukan script di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://sites.google.com/site/zyztem33/js/Coin%20slider.js' type='text/javascript'></script>

3. Tambahlah Gadget HTML/Javascript dan masukan kode HTML di bawah ini di dalamnya.

<div id='coin-slider' class='pendamping'>
<a href="Link Tujuan"><img src='URL Gambar1.jpg' /></a>
<span>Disini Deskripsi Gambar</span>
<a href="Link Tujuan"><img src='URL Gambar2.jpg' /></a>
<span>Disini Deskripsi Gambar</span>
<a href="Link Tujuan"><img src='URL Gambar3.jpg' /></a>
<span>Disini Deskripsi Gambar</span>
<a href="Link Tujuan"><img src='URL Gambar5.jpg' /></a>
<span>Disini Deskripsi Gambar</span>
</div>

Ganti Link Dengan Link sesuka anda jangan Lupa juga ganti Link Gambar dengan link gambar anda yah Emm Ukuran gambarnya 420px x 200px biar pas gitu nanti ukurannya jadi kan rapi. jika kode jquery yang bergaris bawah sudah ada di blog anda jangan Copy lagi kode tersebut cukup kode yang di bawahnya, ets Ganti juga ya deskripsinya dengan deskripsi gambar anda sendiri.

Slider efek easing

noreply@blogger.com (Zhinto) — Sun, 10 Jun 2012 13:40:00 +0000

Slider efek easing ini adalah slideshow terusan dari postingan saya yang berjudul Slider dengan 25 efek pada postingan saya yang itu Efeknya masih standar nah dengan adanya Tambahan Jquery Easing-1.3 ini maka efeknya semakin okelah pokoknya hhe.

DEMO

1. Masukan script di bawah ini di atas kode </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript" src="http://sites.google.com/site/zyztem33/js/Cycle-all.js"></script>
<script type="text/javascript" src="http://sites.google.com/site/zyztem33/js/easing-1.3.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#content-slider').cycle({ 
    fx:     'scrollLeft,scrollDown,scrollRight,scrollUp,turnDown',
    easing: 'easeOutBounce',
    pause:  'true',
    speed:  '1000', 
    timeout: 5000, 
    next:   '#next2', 
    prev:   '#prev2' 
});
});
</script>

2. Simpan kode css di bawah ini di atas ]]></b:skin>

#konslet {
    position: relative;
    width: 440px;
    height: 200px;
    margin: 0 auto 10px;
    border: 3px solid #09F;
    overflow: hidden
    }

#konslet .nav {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 100;
    overflow: hidden;
    padding: 5px
    }
#konslet > .nav a#prev2, #konslet > .nav a#next2 {
    background: rgba(5, 165, 255, 0.80);
    padding: 5px 20px;
    color: white;
    text-decoration: none;
    font: bold 13px/20px Arial, sans-serif;
    border: 1px solid black;
    margin: 0 0 0 5px;
    }

#content-slider {
   position: relative;
   margin:0 auto;
}
#content-slider img {
   display: block;
   max-width: 100%;
   height: 200px;
}

3. Masukan kode html di bawah ini di dalam Gadget HTML/Javascript

<div id="konslet">
<div id="content-slider">
<a href="#"><img src="url gambar 1.jpg" /></a>
<a href="#"><img src="url gambar 2.jpg" /></a>
<a href="#"><img src="url gambar 3.jpg" /></a>
<a href="#"><img src="url gambar 4.jpg" /></a>
</div>
<div class="nav">
<a id="prev2" href="#">Prev</a>
<a id="next2" href="#">Next</a>
</div>
</div>
<div style='clear: both;'></div>

Jika dalam template anda sudah ada kode jquery yang bergaris bawah tersebut gak usah lagi copy kode itu cukup kode di bawahnya saja, jangan Lupa ganti URL gambarnya dengan URL gambar punya anda, perhatikan kode seperti ini
scrollLeft,scrollDown,scrollRight,scrollUp,turnDown
itu adalah efeknya Jika anda ingin menambah efeknya anda Cukup menambahkan nama efeknya lagi di belakangnya pertama anda lihat dulu Efek - Efeknya di postingan saya ini Lalu setelah itu Pilih nama efek yang akan di tambahkan lalu beri tanda koma (,) lagi di belakang nama efek yang sudah ada misalnya ada pilih efek fade jadi seperti ini nanti kodenya.

scrollLeft,scrollDown,scrollRight,scrollUp,turnDown,fade

Nah seperti itulah caranya menambahkan efeknya lagi kalau masih kurang Modifan slidernya bisa anda modif lagi sesuai selera anda, perhatikan lagi kode easeOutBounce itu adalah efek Mental - Mental kalau kita klik Next atau Prev nah efek Easing itu ada berbagai macam di bawah ini List nya.

linear
swing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

Anda bisa ganti Efek Mental - Mental itu dengan beberapa List di atas jadi jika efek easeOutBounce kurang cocok silahkan ganti dengan salah satu list di atas. jika anda pusing mending gak usah baca lanjutan dari langkah 3 ini mending anda Cukupkan sampai Langkah 3 saja ok selamat mencoba.

Membuat feed news keren

noreply@blogger.com (Zhinto) — Wed, 06 Jun 2012 22:32:00 +0000

Ehemm sebenarnya ini aku pengen posting dah lama cuman baru ada yang request jadi baru aku tulis tapi yang pengen aku tulis agak beda juga sih cuman intinya sama bedanya hanyalah pada tampilan aja. maksud membuat feed news ini adalah kita dapat mengambil RSS feed dari berbagai Web biar gak ketinggalan berita, jadi setiap ada artikel baru anda akan langsung melihatnya pada kotak Rss Feed ini. kotak Rss feed ini aku cuman modif sedikit kontainernya pake css3 dengan desain simpel, ini Screenshotnya.

DEMO

Modelnya kayak begitu slide - slide gitu linknya.

1. Simpan kode css di bawah ini di atas kode ]]></b:skin>

.titlefield {
    text-decoration: none;
    color: #09F
    }
.titlefield:hover {
    text-decoration: underline
    }
.labelfield {
    color: brown;
    font-size: 90%
    }

.datefield {
    color: #333;
    font-size: 90%
    }

#data {
    width: 450px;
    height: 17px;
    border: 3px solid black;
    padding: 5px 5px;
    background-color: #CED0D1;
    margin: 5px auto;
    -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
    position: relative;
    overflow: hidden;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px
    }

#data img {
    display: block;
    margin: 0 auto;
    text-align: center
    }

2. Simpan script di bawah ini di atas kdoe </head>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://system-svn.googlecode.com/svn/trunk/gfeedfetcher.js"></script>
<script type="text/javascript" src="http://system-svn.googlecode.com/svn/trunk/gajaxscroller.js"></script>

3. Masukan kode Script di bawah ini ddalam Gadget HTML/Javascript

<script type="text/javascript">
var cssfeed=new gfeedpausescroller("data", "posting", 2000, "_new")
cssfeed.addFeed("System", "http://sin1aja.blogspot.com/feeds/posts/default")
cssfeed.displayoptions("date")
cssfeed.setentrycontainer("div")
cssfeed.filterfeed(10, "date")
cssfeed.entries_per_page(1)
cssfeed.init()
</script>

Nah simpan deh tuh dan selesai untuk tampilannya atur sendiri jika kurang pas. ets jangan lupa ganti URL nya sama URL anda ya dan jika anda ingin mendapatkan Postingan Update dari blog lain anda Tinggal tambah kode yang seperti ini.

cssfeed.addFeed("System", "http://www.sin1aja.blogspot.com/feeds/posts/default")

Jadi seperti ini nanti kodenya.

<script type="text/javascript">
var cssfeed=new gfeedpausescroller("data", "posting", 2000, "_new")
cssfeed.addFeed("System", "http://sin1aja.blogspot.com/feeds/posts/default")
cssfeed.addFeed("Blogazine", "http://blogazine7.blogspot.com/feeds/posts/default")
cssfeed.displayoptions("date")
cssfeed.setentrycontainer("div")
cssfeed.filterfeed(10, "date")
cssfeed.entries_per_page(1)
cssfeed.init()
</script>

Begitu seterusnya jika anda ingin tambahkan web lainnya lagi, nah perhatikan kode 10 itu adalah jumlah tampilan judul postingnya anda bisa tentukan mau menampilkan berapa banyak judul postingan anda, semoga bermanfaat oh iya JS nya itu gak berat kok biar banyak begitu.

Kumpulan generator css3

noreply@blogger.com (Zhinto) — Wed, 06 Jun 2012 03:24:00 +0000

Emmmm lagi gak ada kerjaan, abis jalan - jalan nemu ide buat posting, dan sekarang aku mau mendokumentasikan generator" css3, sengaja aku kumpulin nih Generator" css3 siapa tau suatu saat lupa kan bisa baca postingan ini lagi hehhehe dan siapa tau ada juga yang pingin bermain css3 silahkan ke web - web berikut.

http://westciv.com/tools/boxshadows/index.html
http://css3gen.com/box-shadow/
http://css3generator.com/
http://css3please.com/
http://gradients.glrzad.com/
http://www.css3.me/
http://border-radius.com/
http://css3button.net/
http://css3.mikeplate.com/
http://www.wordpressthemeshock.com/css-drop-shadow/
http://css3clickchart.com/
http://csscorners.com/
http://csswarp.eleqtriq.com/
http://codefuture.co.uk/css/css3-Transform.php
http://cssround.com/
http://layerstyles.org/builder.html
http://csslayoutgenerator.com/
http://www.webtutorialplus.com/css3-generator.aspx
http://cssarrowplease.com/
http://www.css3shapes.com/
http://www.3dcsstext.com/
http://www.css3d.net/ribbon-generator/
http://cssload.net/
http://www.csstextwrap.com/
http://www.text-image.com/
http://www.joelambert.co.uk/morf/
http://www.imgtocss.com/

Cukup itu aja ntar kalau ketemua lagi aku update lagi nih post, dan kalau ada yang tau generator lain selain itu boleh sisipin di komentar linknya entar aku Add lagi di post ini.

Membuat background flash

noreply@blogger.com (Zhinto) — Sat, 02 Jun 2012 23:24:00 +0000

Ehmmmm Gak kerasa sekarang dah nambah 1 tahun lagi umurQ jadi 19 wahh wah aku kok udah makin tua haduhhhh padahal pengen muda trus wkwkwkwk nah di hari ini aku mau share tentang Cara membuat background flash kalau anda punya File Flash anda yang gambar pemandangan - pemandangan gitu bisa deh ambil buat background tulisan anda.

Mohon sori ya kalau aku gak bisa kasi liat demonya soalnya aku gak punya File Flash jadi gak bisa kasi liat demonya tapi langsung aja sampean cobain aja ya okeh, Anda bisa gunakan ini pada postingan dengan mode Edit HTML dan juga pada sidebar dengan cara menambahkan Gadget HTML/Javascript.

<style>
#flash {
position: relative;
}
#flash .daleman {
position: absolute;
z-index: -999;
}
#flash .daleman embed {
width: 200px;
height: 150px;
}
#flash .konten {
position: relative;
z-index: 2;
}
</style>
<div id="flash">
<div class="daleman">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="movie" value="flashmovie.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="Disini URL Flash Anda.swf" quality="high" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<div class="konten">

Disini Simpan konten anda mas mbak semua.

</div>
</div>

Ini juga kerangka masih standar anda bisa memodifikasinya sendiri nanti, untuk kode
z-index: -999; itu untuk File flashnya agak dia berada di belakang konten dimana kontennya mempunyai z-index: 2; jangan lupa ganti juga ya URL file nya dengan URL File flash anda, ets satu lagi sesuaikan juga ya lebar dan tingginya sesuai dengan areanya, kodenya ada pada width: 200px; ( lebar ) dan height: 150px; ( Tinggi ).

Tulisan anti kopas dengan css part ||

noreply@blogger.com (Zhinto) — Fri, 01 Jun 2012 02:50:00 +0000

Jika sebelumnya saya pernah posting tentang Tulisan anti Copy Dengan Css sekarang aku buat part || nya di karenakan part | nya masih secara manual sekarang yang part || ini secara otomatis. Kodenya juga sama aja kok cuman penempatannya aja yang beda.

1. Cari kode css .post-body {
2. Simpan kode css di bawah ini Sebelum penutup .post-body { yang bertanda seperti ini }

-moz-user-select: none;
-khtml-user-select: none;
-o-user-select:none;
user-select: none;

Setelah itu Simpan Template Dan coba Copy tulisan di postingan anda, Good Luck.

Mengembalikan posting yang terhapus

noreply@blogger.com (Zhinto) — Thu, 31 May 2012 02:04:00 +0000

Wow Wow Wow inilah mungkin salah satu kelebihan blogCepot dia masih mampu mengembalikan postingan yang sudah terhapus, aku dulu sempat pernah jalan - jalan ke suatu web tapi aku lupa web apa yang jelas pada saat itu aku masih ingat betul kata - katanya yang bilang bahwa postingan blog yang terhapus bisa kita dapatkan kembali dan kemarin saat aku ingat bahwa postinganQ terhapus aku ketik - ketik deh tuh di google dan aku nemu web yang membahas tentang itu Disini dan sekarang aku mau posting ulang sebagai dokumentasiku sekalian bagi - bagi trik kalau anda memerlukannya.

1. Pergi ke Google
2. Pada kotak pencarian ketik seperti ini site:namablogAnda.blogspot.com contoh kayak gini

3. Setelah itu anda cari postingan anda yang anda ingin kembalikan dan hover / sentuh tanda panah yang ada di sampingnya contohnya kayak gini.

Maka setelah itu akan muncul tampilan yang seperti ini

Nah klik deh tuh link Chache maka anda akan di bawa ke tampilan seperti ini.

Nah pada saat anda sudah di halaman tersebut klik Kanan pada mouse lalu pilih Lihat sumber laman dalam hal ini saya memakai Browser Chrome jika anda pengguna Firefox biasanya itu kata - katanya View Page Source nah setelah anda klik View Page Source / Lihat Sumber Laman maka anda akan melihat Source dari postingan tersebut modelnya kayak gini.

Nah jika sudah pada tahap itu sekarang anda klik Pada Keyboard CTRL + F atau F3 setelah itu ketik postid

Jika sudah ketik postid maka biasanya akan muncul hasil kode yang seperti ini.

Nah setelah itu silahkan anda Copy ID nya pada contoh di atas ID nya adalah 3181906969316451761 tapi sebelum anda Copy ID nya Copy dulu URL di bawah ini pada Addres bar anda

1. Dasbor baru

http://www.blogger.com/blogger.g?blogID=1240201892460257523#editor/target=post;postID=ID Post

2. Dasbor lama

http://www.blogger.com/post-edit.g?blogID=1240201892460257523&postID=ID Post

Ganti kata ID Post tersebut dengan ID post yang sudah anda Copy tadi lalu klik ENTER

contohnya begini

http://www.blogger.com/post-edit.g?blogID=1240201892460257523&postID=3181906969316451761

Nah jika sudah selesai menulis URL nya sekarang klik ENTER maka anda akan di bawa ke postingan anda itu.