Karsono: Trick Blog

Home Generator Arsip Email

Tampilkan postingan dengan label Trick Blog. Tampilkan semua postingan

Tampilkan postingan dengan label Trick Blog. Tampilkan semua postingan

MENAMPILKAN REAL TIME TWITTER STATUS DI BLOGGER 1

Postingan kali ini berkaitan dengan twitter status, dimana hasil yang ingin ditampilkan adalah, update status twitter secara realtime, dengan isi dari status twitter yang berkaitan dengan kata-kata yang telah ditentukan.

misalnya udang dan ikan dimana hasilnya bisa dilihat dari Link DEMO disini.

Untuk cara penerapan di blogger sendiri sangat mudah pertama, masuk ke blogger - Edit HTML
kemudian cari kata

</body>

setelah ketemu, kemudian pastekan kode dibawah ini tepat diatasnya,

<script src='http://daffa.googlecode.com/files/jquery-1.4.2.min.js' type='text/javascript'/>
<script src='http://daffa.googlecode.com/files/jquery.relatedtweets-1.0.min.js' type='text/javascript'/>

proses selanjutnya adalah menambahkan kode Css, Cari kode

]]></b:skin>

lalu copy kode dibawah ini tepat diatasnya

div.rrt-inner{
height:58px;
padding:4px;
overflow:hidden;
}
div.rrt-inner ul{
float:left;
padding:0 0 0 0;
margin:0 0 0 0;
}
div.rrt-inner li{
float:left;
margin:0 0 0 0;
list-style-type:none;
position:relative;
}
div.rrt-inner span.rrt-author-img{
display:block;
width:48px;
height:58px;
margin:0 5px 0 0;
overflow:hidden;
left:0;
position:absolute;
}
div.rrt-inner strong a{
margin-right:5px;
}
div.rrt-inner span.rrt-body {
display:block;
margin-left:55px;
}
div.rrt-inner span.rrt-content{
}
div.rrt-inner span.rrt-meta {
color:#999999;
display:block;
font-size:0.764em;
margin:3px 0 0;
}
div.rrt-inner span.rrt-meta a{
color:#999999;
text-decoration:none;
}
div.rrt-inner span.rrt-meta a:hover{
text-decoration:underline;
}

Setelah itu disimpan...

selanjutnya masuk ke tab menu Page Element - Add Gadget - HTML/Script.
Pada jendela HTML/Script, masukkan kode dibawah ini

Cerita tentang : <a href="http://www.karsono.co.cc" rel="tag">udang</a> dan <a href="http://www.karsono.co.cc" rel="tag">ikan</a><p>
<div class="related-tweets">loading..</div></p>

Yang patut jadi perhatian adalah, sudah pasti link karsono.co.cc ganti sesuai link anda sendiri, sebenarnya link gak begitu pengaruh...
Yang kedua adalah kata rel="tag", nah kode inilah yang mengkondisikan pilihan dari kata-kata yang ingin ditampilkan misalnya kata ikan dan udang.

Maka yang harus dirubah adalah kata udang dan kata ikan

begitu... untuk DEMO-nya bisa dilihat dilink ini

Next ...

PILIHAN TAMPILAN BLOGGER TERBARU 1

Dear Mas Bro, Sory banget nich gara-gara hosting ane ngedrop, banyak file untuk blog ini yang ilang, maklumlah namanya juga cari yang gratisan, tetapi untungnya ane pake blogger, jadi enaknya postingan ane gak ada yang ilang, cuman ya itu file-file yang mendukung terbitnya postingan ane pada ilang semua... jadi yach butuh beberapa waktu untuk mengembalikan link file-file tersebut... dan mohon maklum adanya.

Jadi kesimpulannya... kalau mau yang gratisan, baik dari blognya, hostingannya ataupun domainnya, saya lebih memilih blogger... mantap dah... selain itu banyak sekali pengembangan widget blogger yang mutahkhir, diantaranya yang terbaru adalah dynamic View dari blogger... untuk Demonya coba lihat di http://www.karsono.co.cc/view.

Disitu ada beberapa pilihan tampilan, untuk menampilkan postingan, yang bisa dipilih pada tombol pilihan di pojok kanan atas yaitu :

Flipcard
Mosaic
Sidebar
Snapshot
Timeslide

Dan kondisi diatas berlaku untuk semua blogger, lalu bagaimana caranya supaya kondisi view dynamic diatas bisa tampil di blog... caranya mudah :

Yang pertama pastikan blog anda di publish untuk umum, jadi user tidak perlu login untuk melihat blog anda
Yang kedua pada blogger Tab Setting --> Site Feed, dan pada pilihan Allow Blog Feed pilih Full
Yang ketiga pada blogger Tab Setting --> Formatting. dan pada pilihan Enable Dynamic Views pilih Yes

Setelah semuanya sesuai, langkah selanjutnya adalah ketikkan alamat blog anda ditambah link /view hasilnya : http://alamatbloganda/view dan contohnya untuk blog ini adalah http://www.karsono.co.cc/view

Lihat hasilnya, sedangkan untuk masalah file yang belum diupdate, saat ini sedang di poses

Next ...

MENU ACCORDIAN DENGAN CSS3 6

Untuk membuat menu accordian dengan css3, sistemnya hampir sama dengan postingan membuat sub menu dengan css3,
jadi disini aku gak akan jelasin dari awal, tetapi hanya akan aku tampilkan kode HTML maupun CSS3-nya.

Untuk melihat DEMO-nya bisa dilihat di Link ini.

Hal pertama adalah membuat kode HTML-nya seperti dibawah ini :

<ul id="menuq-wrap">
<li class="menuq">About Me
<ul>
<li><a href="http://id-id.facebook.com/karsono.sajah">Facebook</a></li>
<li><a href="http://twitter.com/#!/karsono">Twitter</a></li>
<li><a href="http://id.linkedin.com/in/karsono">Linkedin</a></li>
</ul>
</li>
<li class="menuq" style="border-top:1px solid #000; border-bottom:1px solid #000">Kategori
<ul>
<li><a href="http://www.karsono.co.cc/search/label/ACCES">Acces</a></li>
<li><a href="http://www.karsono.co.cc/search/label/Curahan%20Hati">Curahan Hati</a></li>
<li><a href="http://www.karsono.co.cc/search/label/Domain%20dan%20Host%20Gratis">Domain dan Host Gratis</a></li>
<li><a href="http://www.karsono.co.cc/search/label/Free%20Template">Free Template</a></li>
<li><a href="http://www.karsono.co.cc/search/label/Generator%20Kode%20HTML">Generator Kode HTML</a></li>
<li><a href="http://www.karsono.co.cc/search/label/Macro%20Excel">Macro Excel</a></li>
<li><a href="http://www.karsono.co.cc/search/label/Tips%20Excel">Tips Excel</a></li>
<li><a href="http://www.karsono.co.cc/search/label/Trick%20Blog">Trick Blog</a></li>
</ul>
</li>
<li class="menuq">Another Blog
<ul>
<li><a href="http://twittin.blogspot.com">Twittin</a></li>
<li><a href="http://forum.karsono.co.cc">Forum</a></li>
<li><a href="http://www.sedulur.co.cc">sedulur</a></li>
</ul>
</li>
</ul>

Selanjutnya, tinggal memasang kostumnya, dengan kode css, seperti dibawah :

#menuq-wrap { background: #F6F5F1; margin: 50px 0 0 0; width: 190px; border:1px solid #ccc; -moz-border-radius: 15px;
border-radius: 15px; padding-bottom:10px; -moz-box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; box-shadow: -5px -5px 5px #888;}
.menuq { padding-left:10px; margin-left:-30px; background: #F6F5F1;overflow: hidden;-webkit-transition: height 1s ease-in-out; font-size: 22px; font-weight: bold; color: #000; cursor: pointer; height: 50px; width: 200px; line-height: 50px;}
.menuq:hover { height: 208px;}
.menuq ul li{list-style: none; margin: 2px 0 0 -50px; }
.menuq ul li a{ background: #8bb2cf; padding-left:10px; display: block; height: 50px; width: 200px; text-decoration: none; font-weight: normal; }
.menuq ul li a:hover{ color:#fff; background:#CC716A; -webkit-transition: padding 1s ease-in-out; padding-left: 50px;}

Selesai, untuk hasil yang memuaskan, bisa dilihat pada browser google chrome... karena pada kode CSS3, aku pake kode transition, jadi akan lebih atraktif bila dilihat pada google chrome... hidup google.

Next ...

MEMBUAT SUB MENU DI BLOGGER 27

Postingan kali ini bercerita tentang sub menu atau dropdown menu dengan menggunakan CSS3, dari beberapa rekan yang baru saat ini bisa saya jawab.
Sebelumnya saya mohon maaf, dikarenakan banyaknya email dan pertanyaan yang masuk, yang mengakibatkan ada beberapa pertanyaan yang belum terjawab, mohon maklum adanya.

Saya akan coba buat dari dasar HTML sampai Customize sub menu-nya.
1. Hal pertama yang harus dilakukan adalah membuat kode HTML seperti dibawah ini.

<ul id="menuq">
    <li><a href="http;//www.karsono.co.cc">Home</a></li>
    <li><a href="#">About Me &gt;</a>
        <ul>
            <li><a href="http://id-id.facebook.com/karsono.sajah" target="_blank">Facebook</a></li>   
            <li><a href="#">Profile &gt;</a>
    <ul>
                    <li><a href="http://id.linkedin.com/in/karsono" target="_blank">Linkedin</a></li>
                    <li><a href="http://www.visualcv.com/p1rx4tg" target="_blank">VisualCV</a></li>
               </ul>
   </li>
            <li><a href="http://twitter.com/#!/karsono" target="_blank">Twitter</a></li>
        </ul>
    </li>
    <li><a href="http://www.karsono.co.cc/2010/06/email-me.html" target="_blank">Email</a></li>
</ul>

dimana hasilnya akan terlihat seperti demo disini.

2. Dalam demo tersebut kondisi dari menu masih berbentuk html standar, lalu saya akan coba tambahkan beberapa kode CSS yang akan menampilkan animasi dengan hover untuk menampilkan atau menyembunyikan list dari menu, kode CSS-nya:

#menuq { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#menuq li ul { display: none; }
#menuq li:hover ul{display: block; }
#menuq li:hover ul li ul{display: none; }
#menuq li ul li:hover ul { position:relative; top:-30px; left:8em; display: block; }
#menuq li ul li{ height: 30px; line-height: 30px; }

dimana hasilnya akan terbentuk seperti Demo ini.

3. Dengan melihat hasil dari demo pada langkah kedua, berarti tinggal dibuat custom warna dari menu supaya menarik, caranya tinggal ditambahkan kode css menu dibawah

#menuq li { float: left; position: relative; padding: 0; line-height: 40px; background: #F6F5F1; }
#menuq li:hover { background-position: 0 -40px; }
#menuq li a { display: block; padding: 0 15px; color: #000; text-decoration: none; }
#menuq li a:hover { background:#CC716A; color: #fff; }
#menuq li ul { opacity: 0; position: absolute; left: 0; width: 8em; background:#CCD5E2; list-style-type: none; padding: 0; margin: 0; }
#menuq li:hover ul { opacity: 1; }
#menuq li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#menuq li:hover ul li { height: 30px; line-height: 30px; }
#menuq li ul li a { background: #F6F5F1; }
#menuq li ul li a:hover { background:#CC716A; }

sampai disini sub menu dengan css3 sudah berhasil dibuat, hasilnya bisa dilihat DEMO disini.

4. Langkah keempat ini berbentuk pilihan, dimana kode CSS3 ini dibuat untuk menghasilkan animasi menu yang lebih menarik lagi, jadi gak dipake juga gak masalah, caranya tinggal ditambahkan saja kode seperti dibawah ini.

#menuq li { -webkit-transition: all 0.2s; }
#menuq li a { -webkit-transition: all 0.5s; }
#menuq li ul { -webkit-transition: all 1s; }
#menuq li ul li { -webkit-transition: height 0.5s; }

hasil dari sub menu ini, secara keseluruhan akan terlihat seperti DEMO disini.

sedangkan untuk kode-nya secara keseluruhan bisa langsung digunakan di blogger, pilih pada menu Design >> Page Elements >> Add a Gadget >> pilih HTML/Script dan pastekan kode dibawah ini tepat dibawah header.
Tentunya untuk penempatan harus disesuaikan dengan design dari template blog itu sendiri, jadi harus di custom lagi supaya letak dan posisinya pas dan sesuai dengan template blog yang ada.

<style type="text/css">
#menuq { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#menuq li ul { display: none; }
#menuq li:hover ul{display: block; }
#menuq li:hover ul li ul{display: none; }
#menuq li ul li:hover ul { position:relative; top:-30px; left:8em; display: block; }
#menuq li ul li{ height: 30px; line-height: 30px; }
#menuq li { float: left; position: relative; padding: 0; line-height: 40px; background: #F6F5F1; }
#menuq li:hover { background-position: 0 -40px; }
#menuq li a { display: block; padding: 0 15px; color: #000; text-decoration: none; }
#menuq li a:hover { background:#CC716A; color: #fff; }
#menuq li ul { opacity: 0; position: absolute; left: 0; width: 8em; background:#CCD5E2; list-style-type: none; padding: 0; margin: 0; }
#menuq li:hover ul { opacity: 1; }
#menuq li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#menuq li:hover ul li { height: 30px; line-height: 30px; }
#menuq li ul li a { background: #F6F5F1; }
#menuq li ul li a:hover { background:#CC716A; }
#menuq li { -webkit-transition: all 0.2s; }
#menuq li a { -webkit-transition: all 0.5s; }
#menuq li ul { -webkit-transition: all 1s; }
#menuq li ul li { -webkit-transition: height 0.5s; }
</style>

<ul id="menuq">
    <li><a href="http;//www.karsono.co.cc">Home</a></li>
    <li><a href="#">About Me &gt;</a>
        <ul>
            <li><a href="http://id-id.facebook.com/karsono.sajah" target="_blank">Facebook</a></li>   
            <li><a href="#">Profile &gt;</a>
    <ul>
                    <li><a href="http://id.linkedin.com/in/karsono" target="_blank">Linkedin</a></li>
                    <li><a href="http://www.visualcv.com/p1rx4tg" target="_blank">VisualCV</a></li>
               </ul>
   </li>
            <li><a href="http://twitter.com/#!/karsono" target="_blank">Twitter</a></li>
        </ul>
    </li>
    <li><a href="http://www.karsono.co.cc/2010/06/email-me.html" target="_blank">Email</a></li>
</ul>

Demikian postingan ini, semoga menjawab beberapa pertanyaan yang belum sempet terbalas.

Next ...

MEMBUAT TOMBOL DONASI DENGAN JQUERY 8

Banyak blog yang menyediakan kata donasi sebagai sumber pemasukan dari blog, Sebenernya aku kurang begitu sreg dengan kata donasi di blog, tetapi apa salahnya jika donasi tersebut diperuntukkan bagi orang-orang yang membutuhkan.

Lalu bagaimana kita membuat donasi itu sendiri ?, banyak sekali caranya, bisa langsung ditampilkan no rekening bank, supaya orang bisa langsung transfer, atau bisa dengan paypal.

Untuk paypal sendiri sebenernya sudah menyediakan code yang menampilkan tombol donasi, linknya bisa dilihat di https://www.paypal.com/cgi-bin/webscr?cmd=_pdn_donate_techview_outside.

Tetapi kali ini berdasarkan, sumber dari flowdrops, saya ingin menampilkan postingan yang membuat user bisa langsung memasukkan nilai donasi sebelum link ke paypal, Contoh DEMO-nya bisa dilihat disini lalu bagaimana caranya.

Cara termudahnya adalah klik tombol blogger dibawah ini, kemudian login dan pilih blog anda.

Atau anda bisa ikuti cara dibawah ini.
1. Anda harus mempunyai account paypal tentunya.
2. Login ke blogger, pilih Menu Design >> Page Elements
3. Klik Add Gadget dan pilih HTML/Script
4. Masukkan kode dibawah ini ke dalamnya.

<script type="text/javascript" src="http://daffa.googlecode.com/files/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://daffa.googlecode.com/files/donate.js"></script>
<style type="text/css">
.red {color:#ff0000;}
.icon_warning {background:transparent url(http://i608.photobucket.com/albums/tt169/karsono29/exclamation.png) left no-repeat;padding:4px;padding-left:20px;}
form#form_paypal input {padding:3px;border:1px solid #ddd;background:#fefefe;}
form#form_paypal input#input_amount {width:50px;}
form#form_paypal .submit {cursor:pointer;border-style:outset;}
</style>
<form id="form_paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="karsono.mail@gmail.com">
<input type="hidden" name="item_name" value="Jumlah Donasi Saya">
<input type="hidden" name="no_shipping" value="0">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="bn" value="PP-DonationsBF">
<label for="">Jumlah (US$) : </label><input style="background:#FFFCEF; border:1px solid #FFE56F" type="text" name="amount" id="input_amount" width="10" class="text" />
<input style="background:url(http://i608.photobucket.com/albums/tt169/karsono29/btn_donate_LG.gif)no-repeat; width:95px; height:30px; border: 0pt none;" type="submit" name="submit" value="" class="submit" />
<div class="clearer"> </div>
<p>
<span id="msg_moreamount" class="icon_warning red" style="display:none;">PayPal mengambil USD 0.35 dari setiap donasi, terima kasih!</span>
<span id="msg_noamount" class="icon_warning red" style="display:none;">Masukkan Jumlah donasi yang diinginkan dan coba lagi.</span>
<span id="msg_activity" style="display:none;"> <img src="http://i608.photobucket.com/albums/tt169/karsono29/loader.gif" align="absmiddle" /> Sedang proses ke PayPal, tunggu sebentar...</span>
</form>

yang patut jadi perhatian adalah kode yang berwarna merah, ganti value tersebut menjadi alamat paypal anda.

Semoga postingan ini bermanfaat bagi semua...

Next ...

MEMBUAT NUMBER PAGE NAVIGATION DI BLOGGER 8

Barusan Pas lihat template Valentine ane ngedapetin image yang ngelink ke imagehack pada ngeblank semua.... permasalahannya karena aku belum register ke imageshack untuk hosting image, jadi yach terpaksa aku update ulang link-nya make photobucket...

Sekalian update link image pada template valentine, aku juga tambahin number page navigation, dimana pada standar blogger secara default hanya akan terlihat link Posting lama dan posting baru yang terletak di bawah postingan, sehingga pengunjung akan susah melihat link postingan sebelumnya, apabila postingannya banyak.

Number page navigation ini dikembangkan oleh Muhammad Rias dari Techie Blogger dan disempurnakan oleh Abu Farhan, dimana hasilnya bisa dilihat pada DEMO Template Valentine.

Hal pertama yang harus dilakukan adalah, backup dulu template blog-nya untuk menghindari hal-hal yang tidak diinginkan.

1. Kemudian Login ke blogger dan pilih menu Setting >> Formmating dan pada pilihan show post pilih 5 post

2. Selanjutnya pilih menu Design >> Edit HTML dan jangan lupa centang Expand Widget Templates.

3. Langkah selanjutnya cari kode

]]></b:skin>

kemudian posisikan kode css dibawah ini tepat diatasnya

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

4. Setelah itu, cari lagi kode,

</body>

dan pastekan kode dibawah ini tepat diatasnya,

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://daffa.googlecode.com/files/page_navigation.txt' type='text/javascript'/>
</b:if>
</b:if>

5. Sekarang kita cari lagi kode link untuk label

'data:label.url'

setelah ketemu ganti kode diatas atau replace saja dengan kode dibawah :

'data:label.url + "?&max-results=5"'

6. Selesai.

Sedikit penjelasan dan yang patut menjadi perhatian adalah kode dibawah ini;

var pageCount=5;

kode ini akan menentukan jumlah posting yang akan ditampilkan per halamannya, dan tentunya juga harus disesuaikan setting show post formatting seperti pada langkah pertama.

var upPageWord ='Previous';
var downPageWord ='Next';

Dan kode diatas tentunya sudah tahu akan bentuk hasilnya dan bisa diganti sesuai keinginan.
Nach begitu saja postingan kali ini, semoga ada manfaatnya.

Next ...

ANIMASI MOBIL AVANZA 2007 DENGAN CSS3 2

Sehubungan ane lagi jualan mobil Avanza 2007, sekalian promosi, ane mo bikin postingan mengenai cara membuat Animasi Mobil Avanza dengan CSS3 murni, contohnya bisa dilihat pada link DEMO ini.

Dimana ketika mouse berada di area mobil avanza tersebut maka mobil akan berjalan ke depan dengan roda yang berputar.

Animasi Mobil ini sebenernya juga bisa dijadikan sebagai banner, tetapiSeperti biasa CSS3 ini hanya support untuk browser Google Chrome, dan firefox 4, dll.

Langsung saja, untuk kode CSS3-nya adalah :

#avanza_back{ margin:0px auto;
height:195px; float:right;
background:url(http://i608.photobucket.com/albums/tt169/karsono29/back3.png) 107px 45px no-repeat}
#avanza{background:url(http://i608.photobucket.com/albums/tt169/karsono29/avanza.gif) center no-repeat;
height:190px; width:425px; border:0px solid red;-webkit-transition:all 0.75s ease-in-out; position:relative; margin:0px auto}
#avanza:hover{-webkit-transform:translate(-26em,0)}
.roda{width:63px;
height:63px;margin:0px auto;
-webkit-transition:all 0.75s ease-in-out;
bottom:0px;left:16px;
position:absolute;
border:0px !important}
.roda2{width:63px;height:63px;
margin:0px auto;
-webkit-transition:all 0.75s ease-in-out;
bottom:0px;right:45px;
position:absolute;
border:0px !important}
#avanza:hover .roda,#avanza:hover .roda2{-webkit-transform:rotate(-360deg)}

Selanjutnya tinggal bikin kode html-nya seperti dibawah ini :

<a href="#"><div id="avanza_back"><div id="avanza">
<img src="http://i608.photobucket.com/albums/tt169/karsono29/roda.png" border="0" class="roda" />
<img src="http://i608.photobucket.com/albums/tt169/karsono29/roda.png" border="0" class="roda2" />
</div></div></a>

Demikian postingan ini berakhir... kalau ada yang berminat jangan sungkan... langsung tancap

Next ...

MEMBUAT BANNER ANIMASI CSS3 DI BLOGGER 9

Apa sich gunanya ngeblog... ga ada untungnya sama sekali...? itu merupakan salah satu kata-kata yang pernah aku terima, kalau dipikir-pikir keuntungan ngeblog sendiri tergantung dari sisi mana orang ngeliatnya.

Kalau secara batin, jelas menguntungkan, karena ngeblog itu sudah bisa dikatakan sebagai hobi, sedangkan kalau dilihat dari sisi keuntungan material, ngeblog itu membutuhkan biaya yang lebih dan proses yang panjang, sehingga keuntungan dari sisi material bisa tercapai, tetapi hal tersebut tergantung juga dari sisi jiwa para bloggernya, apakah matre atau tulus untuk pengetahuan....

Kalau ngomongin masalah itu ribet dah pokoknya, karena sudah berhubungan dengan prinsip seseorang...

Nach... berhubung ngomongin keuntungan ngeblog, berikut ini saya akan coba membuat, salah satu keuntungan dari ngeblog, yaitu dengan memasang iklan banner, dengan sentuhan animasi murni dari kode CSS3, di blogger, contohnya bisa dilihat pada DEMO disini.

Sebelumnya aku juga sudah pernah membuat posting mengenai iklan di tengah postingan, yang mungkin bisa dijadikan referensi.

Cara membuat banner animasi dengan CSS3, sangatlah mudah, dikarenakan seperti postingan saya sebelumnya mengenai CSS3, Kode yang diperlukan sangat murni dari kode CSS3, jadi tidak ada tambahan script yang lain.

Hal pertama yang diperlukan adalah membuat kode CSS3-nya, dimana kode ini penempatannya pada blogger adalah diatas kode

]]></b:skin>

Untuk Animasi Banner CSS3 sendiri, saya buat menjadi beberapa animasi saja, sisanya mungkin bisa dilanjutkan lain kali.

1. Animasi Zooming CSS3 Banner
kode CSS3-nya :

#zoom{position:relative; height:125px;width:125px;}
#zoom img{position:absolute;left:0;-webkit-transition:all 0.5s ease-in-out}
#zoom img.awal{-webkit-transform:scale(0,0);}
#zoom:hover img.awal{-webkit-transform:scale(1,1);-webkit-transform-origin:center}
#zoom:hover img.akhir{-webkit-transform:scale(0,0);-webkit-transform-origin:center}

2. Animasi Rotasi CSS3 Banner
kode CSS3-nya :

#rotasi{ position:relative; height:125px; width:125px;}
#rotasi img{ position:absolute; left:0;-webkit-transition:all 0.5s ease-in-out;}
#rotasi img.awal{-webkit-transform:scale(1,0);}
#rotasi:hover img.awal{-webkit-transform:scale(1,1)}
#rotasi:hover img.akhir{-webkit-transform:rotate(360deg) scale(0,0)}

3. Animasi Slide Horisontal CSS3 Banner
kode CSS3-nya :

#horisontal{ position:relative; height:125px; width:125px; overflow:hidden;}
#horisontal img{ position:absolute; left:0;-webkit-transition:all 0.5s ease-in-out;}
#horisontal:hover img.awal{-webkit-transform:scale(1,1)}
#horisontal:hover img.akhir{-webkit-transform:translate(125px,0)}

4. Animasi Slide Vertikal CSS3 Banner
kode CSS3-nya :

#vertikal{ position:relative; height:125px; width:125px; overflow:hidden;}
#vertikal img{ position:absolute; left:0;-webkit-transition:all 0.5s ease-in-out;}
#vertikal:hover img.awal{-webkit-transform:scale(1,1)}
#vertikal:hover img.akhir{-webkit-transform:translate(0,125px)}

Dan sedikit informasi, kode yang membuat animasi berjalan sesuai dengan perintah intinya adalah yang diberi warna merah.

Setelah itu, kita bikin kode HTMLnya, dimana kode ini bisa diletakkan pada ADD Gadget, sedangkan untuk posisinya, dilihat yang paling pas di sebelah mana.

<table border="0" width="100%" cellpadding="5" cellspacing="5" ><tr><td>
<div id="zoom">
<a href="http://www.karsono.co.cc/2010/06/email-me.html" target="_blank"><img class="awal" src="http://i608.photobucket.com/albums/tt169/karsono29/psgban1_1.gif" width="125" height="125" /></a>
<a href="http://www.karsono.co.cc/2010/06/email-me.html" target="_blank"><img class="akhir" src="http://i608.photobucket.com/albums/tt169/karsono29/psgban2_6.gif" width="125" height="125" /></a>
</div>
</td><td>
<div id="rotasi"><a href="http://eepurl.com/b68VD" target="_blank"><img class="awal" src="http://i608.photobucket.com/albums/tt169/karsono29/mailchimp2_6.gif" width="125" height="125" /></a>
<a href="http://eepurl.com/b68VD" target="_blank"><img class="akhir" src="http://i608.photobucket.com/albums/tt169/karsono29/mailchimp_0.gif" width="125" height="125" /></a>
</div>
</td></tr><tr><td>
<div id="horisontal"><a href="http://a9eb8abdtjznew3fp8w2d5ku2x.hop.clickbank.net/?tid=2TL3LDTB" target="_blank"><img class="awal" src="http://i608.photobucket.com/albums/tt169/karsono29/xl2_5.gif" width="125" height="125" /></a>
<a href="http://a9eb8abdtjznew3fp8w2d5ku2x.hop.clickbank.net/?tid=2TL3LDTB" target="_blank"><img class="akhir" src="http://i608.photobucket.com/albums/tt169/karsono29/xl2.png" width="125" height="125" /></a>
</div>
</td><td>
<div id="vertikal"><a href="http://www.karsono.co.cc/2010/06/email-me.html" target="_blank"><img class="awal" src="http://i608.photobucket.com/albums/tt169/karsono29/psgban2_6.gif" width="125" height="125" /></a>
<a href="http://www.karsono.co.cc/2010/06/email-me.html" target="_blank"><img class="akhir" src="http://i608.photobucket.com/albums/tt169/karsono29/psgban1_1.gif" width="125" height="125" /></a>
</div>
</td></tr></table>

Untuk posisi banner disini saya sesuaikan dengan kondisi banner di blog ini dengan menggunakan table... dan kode html yang membuat banner animasi berfungsi adalah kode yang diberi warna merah...

Demikianlah sehingga keuntungan material dari blogger bisa tercapai, tetapi tidak ada keuntungan yang bisa melebihi dari ucapan terima kasih.

Next ...

MEMBUAT ANIMASI TIAP WIDGET DI SIDEBAR BLOGGER 19

Sehubungan banyaknya permintaan untuk posting mengenai Animasi widget di sidebar yang bisa bergerak-gerak ketika mouse berada diatasnya, seperti halnya contoh widget sidebar blog ini, maka terciptalah postingan ini.

Sebenernya caranya cukup mudah dan kode yang perlu di rehab juga cuman kode CSS-nya saja, yaitu dengan menggunakan kode CSS3, Tetapi ada kekurangannya juga, karena hanya browser terbaru yang support CSS3, coba lihat link tabel di www.findmebyip.com, untuk mengetahui browser apa saja yang support CSS3.

Hal pertama yang harus dilakukan adalah mencari id dari tiap widget, yang ada di sidebar, caranya, buka Blogger --> Design --> Edit HTML, kemudian cari kode :

<div id='sidebar-wrapper'> ini untuk kode css template yang lama atau
<b:section-contents id='sidebar-right-1'> dan kode sebelah ini untuk template baru yang sidebar-nya ada disebelah kanan, pada intinya cari kode yang hampir sama dengan kode tersebut, atau langsung cari kode dibawah.

Setelah ketemu kemudian coba lihat kode dibawahnya, dan cari kode dibawah ini.

<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

Kode diatas merupakan beberapa kode widget yang biasanya selalu ada di sidebar untuk menampilkan widget Follower dan widget Archive.
Untuk melihat id widget diatas coba perhatikan kode yang diberi warna merah, nach kode itulah yang disebut id dari widget.

Untuk lebih memudahkan, saya hanya ambil dua widget saja sebagai contoh.

Setelah mengetahui ID dari tiap widget, tinggal dibuat kode CSS3-nya.

#Followers1{
border:2px solid #fff;
padding:5px;
background:#C2E4F1;
margin:0px 0px 10px 0px;
-webkit-transition:all 0.5s ease-in-out;
-webkit-transform:rotate(-2deg);
}

#BlogArchive1 {
border:2px solid #fff;
padding:5px;
background:#C4C5D7;
margin:0px 0px 10px 0px;
-webkit-transition:all 0.5s ease-in-out;
-webkit-transform:rotate(2deg);
}

#BlogArchive1:hover,#BlogArchive1.hover_effect,
#Followers1:hover,#Followers1.hover_effect{
-webkit-transform:rotate(0deg);
}

Selanjutnya copy kode CSS3 diatas, dan paste-kan tepat diatasnya kode dibawah ini:

]]></b:skin>

Simpan dan lihat hasilnya.

Yang patut jadi perhatian, adalah kode CSS3 yang berwarna merah, nach kode itulah yang membuat animasi dari tiap widget menjadi bergerak.

Sedikit penjelasan :

transition:all 0.5s ease-in-out; --> kode ini untuk mengatur kecepatan pergerakan animasi
transform:rotate(2deg); --> kode ini untuk mengatur rotasi dari area widget
transform:rotate(0deg); --> kode ini untuk mengembalikan rotasi kembali ke awal

Setelah berhasil, coba cari id widget yang lain dan bikin animasinya, dengan menggunakan kode CSS3 seperti diatas, atau cobalah bereksperimen, dengan merubah kode-kode diatas.

Next ...

ANIMASI SCROLL ATAS DAN BAWAH PADA BLOGGER 2

Nach kali ini kembali lagi ke postingan mengenai blogger.. yang berkaitan dengan cara scroll keatas dan kebawah pada blog dengan menggunakan animasi jquery, dengan sekali klik.
Caranya cukup sederhana, tinggal ikutin proses dibawah ini....

Yang pertama harus dilakukan adalah buka Blogger - Design - Edit HTML

Langkah selanjutnya copy kode javascript dibawah ini tepat diatasnya kode </body>

<div style="display:none;" class="atas" id="atas"></div>
<div style="display:none;" class="bawah" id="bawah"></div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script text="text/javascript">
$(function() {
var $elem = $('#outer-wrapper');
$('#atas').fadeIn('slow');
$('#bawah').fadeIn('slow');
$('#bawah').click(
function (e) {$('html, body').animate({scrollTop: $elem.height()}, 800);});
$('#atas').click(
function (e) {$('html, body').animate({scrollTop: '0px'}, 800);});
});
</script>

Alasan kenapa kode script diatas diletakkan paling bawah atau setelah kode </body>, adalah supaya pada saat loading blog pertama kali, tidak terlalu berat.

Sebagai informasi dan patut menjadi perhatian adalah kode outer-wrapper... kode ini merupakan kode css yang biasa ada di template minima, yang menggambarkan area id div setelah body... jadi kode ini bisa diganti sesuai area div setelah body.

Selanjutnya copy kode css dibawah ini, tepat diatasnya kode ]]></b:skin>

#bawah{ padding:7px; background-color:white; border:1px solid #CCC;
position:fixed; background:transparent url(http://img89.imageshack.us/img89/4998/arrowdown.png) no-repeat top left;
background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7;
left:70px; white-space:nowrap; cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
#atas{ padding:7px; background-color:white; border:1px solid #CCC;
position:fixed; background:transparent url(http://img600.imageshack.us/img600/8649/arrowup.png) no-repeat top left;
background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7;
left:30px; white-space:nowrap; cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}

Dan langkah terkahir simpan...

Begitulah sehingga postingan ini berakhir, untuk hasilnya bisa dilihat pada Demo disini.

Next ...

MENAMPILKAN STATUS TWITTER DENGAN DESIGN YANG UNIK DI BLOGGER 5

Akhirnya bisa juga bikin postingan, setelah sekian lama bergelut dengan kerjaan yang gak bisa ditunda, postingan kali ini aku buat untuk menampilkan Twitter Status di blogger, dengan design yang bisa kita atur sendiri, sebagai contoh coba perhatikan Twitter Status disamping.

Terus terang untuk masalah update status di twitter juga baru-baru ini aku mulai sedikit aktif, sebelumnya... kagak pernah... tapi dipikir pikir apa salahnya kalau twitter bisa nambah temen.... jadi sehubungan temen di twitter gak banyak boleh dung kita saling ber twit ria.....

Kelamaan... langsung saja yach... Caranya cukup sederhana yang pertama buka Blogger --> Edit HTML, kemudian cari kode ]]></b:skin>, setelah itu copy kode css dibawah ini tepat diatasnya, kode dibawah inilah yang bisa kita rehap untuk membuat tampilan menjadi menarik :

#twitter { width: 300px; margin: 8px auto;}
#twitter ul {margin-top:-80px; list-style: none; padding: 0 0 0 80px;}
#twitter ul li {padding: 10px; background: rgba(255,255,255,0.1); border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;}
#twitter ul li a { font: italic 10px/20px Georgia, Times, Serif; color: #555b6e;}
#twitter ul li a:hover { color: #1b2f6f; }
#twitter ul li span { font: 10px/20px Helvetica, Arial, Sans-Serif; color: #fff;}
#twitter ul li span a { font: 10px/20px Helvetica, Arial, Sans-Serif;}
.twitteffect img { opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; }
.twitteffect:hover img { opacity:1.0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1; }

Lalu di simpen.....

Selanjutnya beralih ke tab page element dan tambahkan Add Gadget --> HTML/Javascript, dan copy code di bawah ini kedalamnya.

<div id="twitter"><a class='twitteffect' href='http://twitter.com/karsono' target='_blank'><img src="http://img259.imageshack.us/img259/5629/twitter2.gif" border="0" /></a><ul id="twitter_update_list"></ul> </div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script> <script src="http://twitter.com/statuses/user_timeline/karsono.json?callback=twitterCallback2&count=1" type="text/javascript"></script>

Yang perlu diperhatikan adalah kode yang berwarna merah... ganti kode tersebut sesuai dengan id Twitter anda masing-masing.. selesai... dan jangan lupa boleh dung kita bertwiiter ria.

Next ...

MEMBUAT ANIMASI MENU CSS3 DI BLOGGER 20

Setelah seminggu istirahat dan ga bisa megang komputer karena kesenggol angkot, akhirnya sekarang bisa bikin postingan lagi... Alhamdulillah....

Kali ini aku ingin membuat posting mengenai Cara Membuat Menu CSS3 di Blogger, yang hasilnya akan terlihat seperti gambar disamping, sebelumnya aku pernah membuat postingan mengenai Online Generator CSS3 dimana dalam postingan tersebut, kita bisa langsung mengenerate kode CSS3 dari bentuk yang kita inginkan.

Akan tetapi yang patut diingat, tidak semua browser support Menu CSS3 ini, untuk melihat tabel browser mana saja yang support CSS3, bisa dilihat di www.findmebyip.com.

Apabila browser anda support dengan CSS3, maka cobalah bermain dengan DEMO disini.

Nach lalu bagaimana proses diatas bisa sampai terjadi... yang perlu disiapkan adalah kode CSS3 dan HTML seperti di bawah ini.

<style type="text/css">
.menuqu ul li{display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu1:hover, .menuqu2:hover{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
</style>

<div class="menuqu">
<ul>
<li class="menuqu1"><a href='http://www.karsono.co.cc'>Home</a></li>
<li class="menuqu2"><a href='URL 1'>Menu1</a></li>
<li class="menuqu1"><a href='URL 2'>Menu2</a></li>
<li class="menuqu1"><a href='URL 3'>Menu3</a></li>
<li class="menuqu2"><a href='URL 4'>Menu4</a></li>
<li class="menuqu1"><a href='URL 5'>Menu5</a></li>
</ul>
</div>

Langsung saja copy kode diatas di add widget blogger anda.

Yang perlu diperhatikan dari kode diatas adalah kode yang berwarna merah, dan angka yang ada di antaranya.

angka 0.5s disini menandakan waktu perubahan dari animasi
angka 25deg disini menandakan rotasi perputaran dari area menu
angka 0deg disini menandakan bentuk akhir dari rotasi perputaran dari area menu
untuk huruf menuqu1 dan menuqu2 merupakan kode untuk kondisi dari properti yang telah di tentukan pada kode CSS3-nya

Untuk melihat hasil dari perubahan kode yang dilakukan, coba Copy Kode diatas, kemudian klik halaman Bermain Dengan Kode HTML dan pastekan kodenya, kemudian lakukan perubahan kode terutama untuk kode yang diwarnai, dan lihat hasilnya.

Next ...

CURSOR JAM ANALOG DAN TANGGAL DI BLOGGER 7

Postingan ini aku buat didasarkan karena kebingungan nyari kalender yang lenyap dari meja, dan harus tanya kesana kemari, untuk mengetahui tanggal yang akan di cantumkan dalam laporan.

Dan ketika browsing aku menemukan cursor yang diikuti oleh analog jam dan kalender, langsung saja aku bikin, dan aku taruh sebagai wallpaper desktop, tetapi dalam postingan ini aku buat untuk tampilan cursos di blog.

Pembuatan kursor ini aku temukan dari web rainbow scriptmania, tetapi kodenya sudah aku modifikasi sesuai dengan keinginan, dan hasilnya bisa dilihat disini.

Proses pembuatannya, copy saja kode css dibawah ini

.css1{
position:absolute;top:0px;left:0px;
width:16px;height:16px;
font-family:Arial,sans-serif;
font-size:16px;
text-align:center;
font-weight:bold;
}
.css2{
position:absolute;top:0px;left:0px;
width:10px;height:10px;
font-family:Arial,sans-serif;
font-size:10px;
text-align:center;
}

dan taruh atau pastekan saja kode diatas, tepat diatasnya kode dibawah ini:

]]></b:skin>

Selanjutnya untuk kode javascript, sebelum di copy ke blogger, kode javascript harus di parse terlebih dahulu, caranya copy kode javacript dibawah ini, dan buka web www.blogcrowds.com atau klik saja linknya langsung:

<SCRIPT LANGUAGE="JavaScript">

if (document.getElementById&&!document.layers){

dCol='#00ff00';//warna tanggal.
fCol='#000000';//warna angka jam.
sCol='#00ff00';//warna detik.
mCol='#0066FF';//warna menit.
hCol='#FF3300';//warna Jam.
lCol='#cccccc';//nama blog.

del=0.6; //Follow mouse speed.
ref=40; //Run speed (timeout).

var ieType=(typeof window.innerWidth != 'number');
var docComp=(document.compatMode);
var docMod=(docComp && docComp.indexOf("CSS") != -1);
var ieRef=(ieType && docMod)
?document.documentElement:document.body;
theDays=new Array("MINGGU","SENIN","SELASA","RABU","KAMIS","JUM'AT","SABTU");
theMonths=new Array("JANUARI","FEBRUARI","MARET","APRIL","MEI","JUNI","JULI","AGUSTUS","SEPTEMBER","OKTOBER","NOVEMBER","DESEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
tmpdate=" "+theDays[date.getDay()]+" "+ day +" "+theMonths[date.getMonth()]+" "+year;

D=tmpdate.split("");
K='C C - W W W . K A R S O N O . C O .';
K=K.split(" ");
L=K.length;
N='3 4 5 6 7 8 9 10 11 12 1 2';
N=N.split(" ");
F=N.length;
H='...';
H=H.split("");
M='....';
M=M.split("");
S='.....';
S=S.split("");
siz=40;
eqf=360/F;
eql=360/L;
eqd=360/D.length;
han=siz/5.5;
ofy=-7;
ofx=-3;
ofst=70;
tmr=null;
vis=true;
mouseY=0;
mouseX=0;
dy=new Array();
dx=new Array();
zy=new Array();
zx=new Array();
tmps=new Array();
tmpm=new Array();
tmph=new Array();
tmpf=new Array();
tmpl=new Array();
tmpd=new Array();
var sum=parseInt(D.length+L+F+H.length+M.length+S.length)+1;
for (i=0; i < sum; i++){
dy[i]=0;
dx[i]=0;
zy[i]=0;
zx[i]=0;
}

algn=new Array();
for (i=0; i < D.length; i++){
algn[i]=(parseInt(D[i]) || D[i]==0)?10:9;
document.write('<div id="_date'+i+'" class="css2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'</div>');
tmpd[i]=document.getElementById("_date"+i).style;
}
for (i=0; i < L; i++){
document.write('<div id="_gue'+i+'" class="css2" style="color:'+lCol+'">'+K[i]+'</div>');
tmpl[i]=document.getElementById("_gue"+i).style;
}
for (i=0; i < F; i++){
document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'</div>');
tmpf[i]=document.getElementById("_face"+i).style;
}
for (i=0; i < H.length; i++){
document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'</div>');
tmph[i]=document.getElementById("_hours"+i).style;
}
for (i=0; i < M.length; i++){
document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'</div>');
tmpm[i]=document.getElementById("_minutes"+i).style;
}
for (i=0; i < S.length; i++){
document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'</div>');
tmps[i]=document.getElementById("_seconds"+i).style;

}

function mouse(e){
var msy = (!ieType)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
mouseY = e.pageY + ofst - msy;
mouseX = e.pageX + ofst;
}
else{
mouseY = e.clientY + ofst - msy;
mouseX = e.clientX + ofst;
}
if (!vis) kill();
}
document.onmousemove=mouse;

function winDims(){
winH=(ieType)?ieRef.clientHeight:window.innerHeight;
winW=(ieType)?ieRef.clientWidth:window.innerWidth;
}
winDims();
window.onresize=new Function("winDims()");

function ClockAndAssign(){
time = new Date();
secs = time.getSeconds();
sec = Math.PI * (secs-15) / 30;
mins = time.getMinutes();
min = Math.PI * (mins-15) / 30;
hrs = time.getHours();
hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360;

for (i=0; i < S.length; i++){
tmps[i].top=dy[L+D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px";
tmps[i].left=dx[L+D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px";
}
for (i=0; i < M.length; i++){
tmpm[i].top=dy[L+D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px";
tmpm[i].left=dx[L+D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px";
}
for (i=0; i < H.length; i++){
tmph[i].top=dy[L+D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px";
tmph[i].left=dx[L+D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px";
}
for (i=0; i < F; i++){
tmpf[i].top=dy[L+D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px";
tmpf[i].left=dx[L+D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px";
}
for (i=0; i < D.length; i++){
tmpd[i].top=dy[L+i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px";
tmpd[i].left=dx[L+i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px";
}
for (i=0; i < L; i++){
tmpl[i].top=dy[i]+siz*1.9*Math.sin(sec+i*eql*Math.PI/180)+scrollY+"px";
tmpl[i].left=dx[i]+siz*1.9*Math.cos(sec+i*eql*Math.PI/180)+"px";

}
}

buffW=(ieType)?80:90;
function Delay(){
scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset;
if (!vis){
dy[0]=-100;
dx[0]=-100;
}
else{
zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del);
zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del);
}
for (i=1; i < sum; i++){
if (!vis){
dy[i]=-100;
dx[i]=-100;
}
else{
zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);
zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);
}
if (dy[i-1] >= winH-80) dy[i-1]=winH-80;
if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW;
}

tmr=setTimeout('Delay()',ref);
ClockAndAssign();
}
window.onload=Delay;
}
//-->
</script>

Setelah di parse copy hasil parse kode, kemudian taruh atau pastekan, tepat diatasnya kode di bawah ini:

</body>

Sedangkan untuk perubahan, bisa dilihat kode javascript yang berwarna merah, seperti dibawah ini
dCol='#00ff00';//warna tanggal.
fCol='#000000';//warna angka jam.
sCol='#00ff00';//warna detik.
mCol='#0066FF';//warna menit.
hCol='#FF3300';//warna Jam.
lCol='#cccccc';//nama blog.
rubah warna sesuai keinginan, kalau ingin melihat kode warna bisa dilihat di postingan Kode Warna HTML.

Selanjutnya pada kode dibawah ini, rubah sesuai nama blog anda

K='C C - W W W . K A R S O N O . C O .';

Untuk hasilnya bisa dilihat pada demo disini

Next ...

SCROLLING RANDOM POST 10

Sebelumnya aku pernah membuat postingan perihal scrolling Recent Post, ternyata banyak yang minat juga, berdasarkan perhitungan informasi dari google, termasuk diantaranya pertanyaan mengenai bagaimana membuat scrolling Random Post.

Nach untuk di postingan ini, sistem scrolling dari Random Post pada intinya sama saja, yaitu tetap menggunakan marquee, yang berubah hanyalah kode script untuk menampilkan judul Post-nya.

Sedangkan tampilan dari judul postingan akan berubah secara acak, apabila ada loading window, seperti refresh atau ada pilihan pada judul post di random post.
Cara bikinnya, setelah login ke blogger, langsung masuk ke Design --> Page Element --> Add Gadget --> HTML/Script.

Kemudian Copy kode dibawah ini kedalam-nya :

<style type="text/css">
ul { list-style-image: url(http://img375.imageshack.us/img375/2936/flower.png) }
ul a{text-decoration:none;}
ul a:hover {background:#66FF00; text-decoration:none; color: red;"}
</style>
<marquee behavior="scroll" direction="up" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="http://www.karsono.co.cc/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></marquee>

Selanjutnya yang perlu dilakukan perubahan adalah kode yang diberi warna merah.

Ganti numofpost=10 sesuai dengan jumlah post yang ingin ditampilkan.

Dan terakhir ganti link http://www.karsono.co.cc, sesuai dengan link anda sendiri.

Next ...

FISH EYE MENU DI BLOGGER 6

Fish Eye Menu merupakan salah satu bentuk Menu yang sangat artistik, dan terlihat futuristik, yang dibuat dengan kode jquery.

Pertama kali melihatnya ketika browsing, aku langsung tertarik untuk membuatnya di blog, tetapi setelah sekian lama baru kali ini keinginan itu bisa terlaksana, dikarenakan aku memimpikan suatu barang yang tidak bisa aku capai saat ini, sehingga aku buat saja bentuknya di template blog, sehingga aku bisa merasakan seakan menggunakan barang tersebut.

Dan kebetulan menu template blog tersebut sangat cocok menggunakan Fish Eye Menu, menurutku.

Cara membuat di blog-pun cukup mudah karena tinggal copy paste saja kode yang ada di bawah ini dan sedikit melakukan perubahan kode link.

Yang pertama kali dilakukan sudah tentu login ke blog masing-masing, kemudian masuk ke Layout --> Edit HTML.

setelah itu cari kode :

<title><data:blog.pageTitle/></title>

kemudian letakkan kode dibawah ini tepat diatasnya :

<script src='http://daffa.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://daffa.googlecode.com/files/interface.js' type='text/javascript'/>

Proses selanjutnya copy kode dibawah ini tepat diatas kode ]]></b:skin>

/* dock2 - bottom */
#dock2 { width: 100%; bottom: 0px; position: absolute; left: 0px;}
.dock-container2 { position: absolute; height: 50px; padding-left: 20px;}
a.dock-item2 { display: block; font: bold 12px Arial, Helvetica, sans-serif; width: 40px; color: #000; bottom: 0px; position: absolute; text-align: center; text-decoration: none;}
.dock-item2 span { display: none; padding-left: 20px;}
.dock-item2 img { border: none; margin: 5px 10px 0px; width: 100%; }

setelah selesai kemudian simpan.

Dan langkah terakhir adalah buka menu Layout--> Page Element dan tambahkan Add Gadget --> HTML/Javascript di footer, lalu copy kode dibawah ini kedalamnya :

<div class="dock" id="dock2">

<div class="dock-container2">

<a class="dock-item2" href="http://www.karsono.co.cc/" target="_blank">
<span>Home</span><img src="http://img704.imageshack.us/img704/9276/homezb.png" alt="home" /></a>

<a class="dock-item2" href="http://www.karsono.co.cc/" target="_blank">
<span>Contact</span><img src="http://img27.imageshack.us/img27/6289/emailpjo.png" alt="contact" /></a>

<a class="dock-item2" href="http://www.karsono.co.cc/" target="_blank">
<span>Portfolio</span><img src="http://img707.imageshack.us/img707/7933/portfoliok.png" alt="portfolio" /></a>

<a class="dock-item2" href="http://www.karsono.co.cc/" target="_blank">
<span>Music</span><img src="http://img188.imageshack.us/img188/5169/musicvs.png" alt="music" /></a>

<a class="dock-item2" href="http://www.karsono.co.cc/" target="_blank">
<span>Video</span><img src="http://img87.imageshack.us/img87/1214/videobk.png" alt="video" /></a>

<a class="dock-item2" href="http://www.karsono.co.cc/" target="_blank">
<span>History</span><img src="http://img153.imageshack.us/img153/420/historyx.png" alt="history" /></a>

<a class="dock-item2" href="http://www.karsono.co.cc/" target="_blank">
<span>Calendar</span><img src="http://img576.imageshack.us/img576/3306/calendar.png" alt="calendar" /></a>

<a class="dock-item2" href="http://www.karsono.co.cc/" target="_blank"><span>RSS</span>
<img src="http://img69.imageshack.us/img69/7823/rssm.png" alt="rss" /></a>

</div>
</div>

<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>

lalu rubah alamat link sesuai dengan link kepunyaan masing-masing, sampai disini proses telah selesai.

Dan sebagai catatan, lebih baik ganti semua alamat link baik untuk image maupun kode jquery-nya, takutnya tanpa sengaja link tersebut terhapus.

Hasilnya lihat demo disini

Sumber dari Pengetahuan ini adalah dari ndesign-studio

Next ...

FLOAT/FIX POSISI IMAGE/TEKS DI BLOGGER 0

Biasanya dan akan lebih menguntungkan Float/Fix image dan teks ini digunakan untuk menampilkan Iklan, karena area ini akan selalu tampil di monitor tanpa terpengaruh oleh scrolling.

Cara pembuatannyapun tergolong cukup mudah, seperti biasa tinggal copas saja kode dibawah ini :

<style type='text/css'>
#fixme { position: absolute; left: 0px; top: 0px;text-align:left; width: 600px; }
#fixmetoo { position: absolute; left: 0px; bottom: -3px;text-align:left; width:600px; }
div > div#fixme { position: fixed; }
div > div#fixmetoo { position: fixed; }
pre.fixit { overflow:auto;border-left:1px dashed #000;border-right:1px dashed #000;padding-left:2px; }
</style>

Untuk kode yang berwarna merah, sesuaikan dengan lebar blog masing-masing.

Kemudian buka Blogger --> Layout --> Edit HTML dan pastekan kode diatas tepat di bawah kode </head>, kemudian disimpan.

Selanjutnya penentuan posisinya apakah diatas atau dibawah.

Diatas, kodenya

<div id="fixme"><b>Posisi ini akan selalu berada di atas</b></div>
Dibawah, kodenya :

<div id="fixmetoo"><b>Posisi ini akan selalu berada di bawah</b></div>

Setelah Posisi sudah ditentukan, buka Layout --> Page Element dan tambahkan Add Gadget --> HTML/Javascript dibawah header untuk posisi diatas atau footer untuk posisi dibawah.

Selanjutnya pastekan kode fixme diatas sesuai posisi, contohnya bisa dilihat disini demo disini.

Next ...

SCROLL RECENT POST DI BLOG 15

Wuaah ngantuk... di kantor lagi badmood ama kerjaan iseng2 bikin tulisan mengenai scroll Recent Post, atau menurut gue daftar isi berjalan secara otomatis...

Untuk sistem Scroll Recent Post disini adalah dengan menggunakan sistem marquee dari Judul Post.

Caranya cukup sederhana tinggal copy paste kode dibawah ini ke kotak Add Widget HTML/Scrip di blog, dan lakukan beberapa perubahan untuk penyesuaiannya.

<style type="text/css">
ul { list-style-image: url(http://img375.imageshack.us/img375/2936/flower.png) }
ul a{text-decoration:none;}
ul a:hover {background:#66FF00; text-decoration:none; color: red;"}
</style>
<marquee behavior="scroll" direction="up" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">
<script>
function rp(json) {
document.write('<ul>');
for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');
}
</script>

<script>
var numposts = 15;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>

<script src="http://www.karsono.co.cc/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script></marquee>

Nach selanjutnya untuk mengetahui apa saja sich yang harus dilakukan perubahan terhadap perubahan diatas, patut diingat perubahan ini tidak mengikat.. he..he..,
Pada umumnya ada empat kode yang harus dirubah, yaitu :

kode css dibawah ini :

<style type="text/css">

ul { list-style-image: url(http://img375.imageshack.us/img375/2936/flower.png) }
ul a{text-decoration:none;}
ul a:hover {background:#66FF00; text-decoration:none; color: red;"}
</style>

kode ini diperlukan hanya untuk menambahkan background sebagai pengganti nomor atau icon list, dan kode css bisa diganti dengan alamat gambar yang diinginkan, bahkan bisa diedit untuk mempercantik tampilan scroll recent post atau dihilangkan saja, gimana hasilnya? coba saja.
Kemudian untuk kode scrollamount="2" merupakan kode yang mengatur kecepatan scroll, jadi bisa diganti berapa saja sesuai selera.
Kode selanjutnya adalah var numposts = 15;
yang berarti berapa posting yang akan ditampilkan, jadi ganti saja atau biarkan juga ga dilarang koq
Dan terakhir dan yang terpenting adalah kode http://www.karsono.co.cc/feeds/posts/default, kode tersebut harus diganti sesuai dengan alamat url feed masing-masing.

Begitulah sehingga postingan ini berakhir, sumber dari postingan ini bisa dilihat di www.bloggertipandtrick.com, yang sudah tentu kodenya dirubah-rubah terlebih dahulu, agar tampilannya sesuai dengan keinginan.

Next ...

MEMBUAT TOMBOL HIDE DAN SHOW DI BLOGGER 15

Tulisan ini aku buat karena tertarik dengan tombol hide dan show seperti yang ada di kaskus.. udah telat sich... tetapi namanya belajar dan keinginantahuan sudah pasti tidak ada kata telat... betul...?

Tombol Hide dan show ini sangat berguna sekali untuk memangkas ruang halaman, terutama untuk penempatan gambar atau hal-hal yang spesifik lainnya.

Caranya pun cukup mudah... coba perhatikan tombol yang ada dibawah ini, kondisinya bila di klik maka akan tampil box halaman yang berisi kode cara pembuatan tombol hide dan show, dan bila di klik lagi, halaman tersebut akan disembunyikan lagi... cek it dot..

Next ...

MEMBUAT SUB LABEL DI BLOG 5

Tulisan ini aku buat berdasarkan request atau pertanyaan dari salah satu temen, yang menanyakan mengenai pembuatan sub label di blog. Setelah browsing kesana kemari, akhirnya aku menemukan Script yang fungsinya sama dengan sub label, alamatnya ada di Destryodrop

Menu ini untuk tampilannya biasa kita temui seperti windows explorer, dan disebut sebagai menu Dtree.

Untuk prosesnya, login ke blogger, kemudian pilih Layout > Edit HTML, kemudian cari kode, <b:skin><![CDATA[/*, setelah ketemu copy kode javascript dibawah tepat diatasnya,,br>

<script type="text/javascript" src="http://www.yourjavascript.com/20321202212/dtree.js"></script>

langkah kedua cari kode ]]></b:skin>, dan copy kode css dibawah ini tepat diatasnya,

/*--------------------------------------------------
dTree 2.05 www.destroydrop.com/javascript/tree/
---------------------------------------------------
Copyright (c) 2002-2003 Geir Landrö
--------------------------------------------------*/

.dtree {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
width:480px;
color: #000;
white-space: nowrap;
}
.dtree img {
border: 0px;
vertical-align: middle;
}
.dtree a {
color: #333;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;
padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #333;
text-decoration: underline;
}
.dtree a.nodeSel {
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}

selanjutnya simpan.

Langkah ketiga, pilih Page Element, kemudian pilih Add Gadget > HTML/Script, masukkan kode dibawah ini kedalamnya.

<div class="dtree">
<a href="javascript: d.openAll();">open all</a> <a href="javascript: d.closeAll();">close all</a>

<script type="text/javascript">

</script>

Langkah keempat, ganti link sesuai dengan link sendiri, coba lihat kode dibawah :
d = new dTree('d');

d.add(0,-1,'Contoh Menu Dtree');
d.add(1,0,'Node 1','contoh01.html');
d.add(3,1,'Node 1.1','contoh01.html');
d.add(8,1,'Node 1.2','contoh01.html');
d.add(5,3,'Node 1.1.1','contoh01.html');
d.add(6,5,'Node 1.1.1.1','contoh01.html');
d.add(2,0,'Node 2','contoh01.html');
d.add(4,0,'Node 3','contoh01.html');
d.add(7,0,'Node 4','contoh01.html');

Gantilah link contoh01.html sesuai dengan link sendiri.

sedangkan untuk melihat apakah link tersebut termasuk dari sub label atau parentnya dilihat dari dua nomor setelah add, d.add(1,0....

angka pertama merupakan sub label, sedangkan angka kedua merupakan parent dari sublabel.

Memang sich rada membingunkan, tetapi dengan mencobanya, kita akan mengerti mengenai masalah tersebut... so.. tunggu apa lagi

Next ...

Langganan: Postingan (Atom)