Membuat Efek Berputar Gambar

Tulisan Share ini bersumber dari efek jalan jalan bil silaturahmi dengan OrdinaryBlog ada postingan lucu nan tidak terlalu musmet banget. Penggunaannya menggunakan CSS tahu kan pa itu CSS ?. Langsung Saja posting ini digunakan sebagai aksesories untuk penambahan perbendaharaan ide yaitu membuat gambar berputar ketika didekati kursor
Expample :

Sudah liat hasilnya kan. Tertarik. Lanjut ke cara pemasangannya.

• Login Blog - menjuju ke Design - Edit HTML
• Cari Scrip ]]></b:skin> ( CTRL + F )
• Tempatkan kode CSS berikut diatas ]]></b:skin>
p#efekberputar img{ /* untuk efek berputar 360deg ketika dilewati cursor dan ditinggal */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p#efekberputar img:hover{ -moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
• Gunakan Scrip Berikut untuk mengaktifkan efek putaran
<p id="efekberputar">
<img border="0" src="Url Gambar" />
</p>

---

Penggunaan Url gambar bisa upload gambar Via Photobucket

Semoga menambah perbendaharaan ide dan menjadikan isnspirasi penciptaan baru

Ide-Inspirasi

Menu Accordion Vertical Part 2

Pernah saya Share mengenai Menu Accordion Vertikal tetapi kesempatan itu menu Accordion masih banyak kekurangan terutama ketika menggunakan browser selain FireFox. Kesempatan ini ternyata ada Menu Accordion Vertikal yang lebih stabil dan bisa diterapkan untuk Browser yang biasa kita gunakan Firefox, Crome dam teman - teman sejenisnya.

• Masuk Dasboard Blog, Design kemudian menuju Edit HTML
• Cari ]]></b:skin> letakan scrip dibawah ini Di atas ]]></b:skin>
/*accordion menu ********************/ .verticalaccordion>ul { margin: 0; padding: 0; list-style:none; width: 280px; } .verticalaccordion>ul>li { display:block; overflow: hidden; margin: 0; padding: 0; list-style:none; height:40px; width: 280px; /* Decorative CSS */ background-color:#f0f0f0; /* CSS3 Transition Effect */ transition: height 0.3s ease-in-out; -moz-transition: height 0.3s ease-in-out; -webkit-transition: height 0.3s ease-in-out; -o-transition: height 0.3s ease-in-out; } .verticalaccordion>ul>li>h3 { display:block; margin: 0; padding:10px; height:19px; /* Decorative CSS */ border-top:#f0f0f0 1px solid; font-family: Flavors, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase; color: red; background: #cccccc; /* CSS3 Gradient Effect */ background: -moz-linear-gradient( top, #999999, #cccccc); background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE 8 */ } .verticalaccordion>ul>li>div { margin:0; overflow: auto; padding:10px; height:220px; } .verticalaccordion>ul>li:hover { height: 280px; } .verticalaccordion:hover>ul>li:hover>h3 { /* Decorative CSS */ color:#fff; background: #000000; /* CSS3 Gradient Effect */ background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */ background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */ } .verticalaccordion>ul>li>h3:hover { cursor:pointer;}
Sesuaikan penggunaan panjang dan lebar pada pengaturan Height dan width
• Tambah Gadget HTML Scrip dan gunakan scrip Berikut
<div class="verticalaccordion"> <ul> <li> <h3>Data 1</h3> <div><center>Isi Data 1</center> </div> </li> <li> <h3>Data 2</h3> <div><center>Isi Data 2</center></div> </li> <li> <h3>Data 3</h3> <div><center>Isi Data 3</center></div> </li> <li> <h3>Data 4</h3> <div><center>Isi Data 4</center></div> </li></ul></div>

Ide-Inspirasi

Now.. ! Aku Seorang Ayah

Syukur Alhamdulillah. Segala Puji kehadirat Allah. Anakku Telah Lahir. Seorang Putri Mungil. Bidadari Kecil ku. Penerus segala cita - cita waktu yang telah terlewati. Posting ini sengaja saya share. Berbagi kesenangan berbagi kebahagiaan sekaligus paling tidak dia punya keluarga di dunia maya dengan ia dikenal oleh agan - agan " kanca e Abie "
Anakku Lahir : Minggu, 15 Januari 2012
Berat Badan : 3 Kg + 3 Gr
Panjang : + 45 Cm
yang insya Allah bernama :

ATTAYA NAELALMUNAYA

Segala do'a kami panjatkan. Ikhtiar pun senantiasa menyertainya. Semoga Putri ku menjadi Anak yang sholeh membawa keberkahan dan kesuksesan di kemudian hari.

Ide-Inspirasi

Kamus Istilah Akuntansi

A

kuntansi merupakan seni pencatatan data keuangan. yang dimulai dari awal sampai akhir dimana datanya saling berkaitan. Dalam penanganan data keuangan terutama penggunaan program yang berorientasi komputer untuk data keuangan semuanya menggunakan bahasa standart akuntansi international baik MYOB Accounting maupun DacEasy Accounting. dalamkesempatan ini punya kesempatan berbagi mengenai istilah terutama penggunaan perkiraan dalam penjurnalan penanganan data transaksi keuangan.

Download Berkas

Ide-Inspirasi

Membuat Link Bergoyang

Beraneka ragam aksesories yang bisa kita terapkan untuk mempercantik blog tapi yang paling penting bahwa aksesiries itu harus lebih banyak mendatangkan kebaikan dari pada cuma menjeng doank. Dalam waktu ini pengen share mengenai link yang bisa bergoyang ketika didekati. Lumayan Mudah dalam penggunaannya.

1. Silahkan Login ke akun blogger anda.
2. Lalu masuk ke design, klik Edit HTML
3. Kemudian cari kode <head>
4. Setelah ketemu silahkan anda copy kan kode di bawah ini tepat di bawah kode <head> atau di atas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;a&#39;).hover(function() { //mouse in $(this).animate({ marginLeft: &#39;12px&#39; }, 400); }, function() { //mouse out $(this).animate({ marginLeft: 0 }, 400); }); });</script>
5. Selesai, Semoga Berhasil

Ide-Inspirasi

Efek Lipatan Di blog ( Page Pell / Page Curl )

Efek Lipatan Di blog. Mungkin yang biasa mainan design grafis tidak lupa dengan yang namanya page Curl atau juga disebut page peel yang merupakan efek lipatan seperti kertas. Aksesories ini cukup ringan jika dipasang di blog dan tentu saja membuat blog lebih menarik.
jika Anda kurang jelas lihat sebelah kanan atas KoerniawanBlog
Langsung saja menuju pokok materi

1. Siapkan terlebih Gambar ( Ukuran 877 x 502 Pixel )
2. Lalu Upload Gambar, Saya Menggunakan Photobucket sebagai hosting picture ArisKoerniawanBlog
3. Silahkan Login ke akun blogger anda.
4. Lalu masuk ke design, klik Edit HTML
5. Kemudian cari kode <head>
6. Setelah ketemu silahkan anda copy kan kode di bawah ini tepat di bawah kode
   <head>
<SCRIPT type='text/javascript'>var tujuan ='http://ariskoerniawan.blogspot.com/'</SCRIPT><SCRIPT src='http://ariskoerniawanbener.googlecode.com/files/ariskoerniawan.js' type='text/javascript'></SCRIPT>
Scrip Kuning adalah alamat blog Anda Scrip Scrip Biru adalah URL java Scrip Anda ( File.Js )

---

Untuk membuat file.Js

1. Anda bisa membaca di artikel sebelumnya Mengenai Hosting JavaScrip Di GoogleCode http://ariskoerniawan.blogspot.com/2012/01/hosting-javascript-gratis.html
2. Download file.js standart digunakan sebagai dasar pembuatan File.Js http://ariskoerniawanbener.googlecode.com/files/ariskoerniawan.js
3. Buka pada notepad File.js (ariskoerniawan.js)
4. Ganti link url gambar yang saya pakai dengan ling url gambar Anda
   
http://i1123.photobucket.com/albums/l541/ariskoerniawan/ARISBLOG-2.jpg
5. Setelah File.js (ariskoerniawan.js) telah diedit sesuai dengan kebutuhan Anda, Upload File.js (ariskoerniawan.js) ke Google.Code
6. Terapkan pada panduan di atas

SEMOGA SUKSES

Ide-Inspirasi

Hosting Javascript Gratis

Kenal dengan Javascript, ? Mungkin kenal ada juga yang baru kenalan seperti saya. Semuanya memang perlu belajar. Permasalahan uatama kalo blogging gratisan seperti kita akan Rempong alias susah kalo harus Meng-Hosting Javascript. Nah ksesempatan ini coba share Meng-Hosting Javascript secara gratis dengan GoogleCode.
GoogleCode merupakan fasilitas yang diberikan Google untuk penanganan Javascrip dan CSs atau pada intinya penggunaan hosting atau penanganan scrip.

Sebelum membahas anda harus mengetahui dulu tentang extensi-extensi file yg akan di upload.

• Kode javascript ber-extensi .js, misalnya
  file_javascript.js
• Kode CSS ber-extensi .css, misalnya
  file_css.css
• Kode gambar ber-extensi
  .png, .jpg, .jpep, .gif dll.

Langkah-langkah meng-host di Googlecode

seperti berikut ini.

1. Buka situs code.google.com
   
2. Sign in menggunakan akun Gmail anda jika belum sign in.
   
3. Lalu pilih
   create new project
4. Isi beberapa data seperti
   project name : Isi dengan nama project anda. Bebas
   project summary : Isi dengan ringkasan project anda. Bebas
   project description : Isi dengan deskripsi project anda. Bebas
   version control system  : Pilih Mercurial
   source code license  :  Pilih Apache license 2.0
   project Labels  :  Isi dengan label, terserah.
   
5. Terakhir klik
   Create project
   

Untuk meng-upload file javascript maupun CSS atau gambar pilih

1. Downloads
2. Pilih lagi pada
   New Download
3. Upload file dari hardisk komputer anda.
   
4. Klik submit file, selesai 
5. Klik pada nama file yang dihasilkan
6. untuk mendapatkan link dari file tersebut, klik pada nama project yg telah di upload, kemudian pada jendela baru klik kanan pada nama file,
   Copy link location
    
   
   
   Link tersebut akan berbentuk seperti ini
   » http://Ariskoerniawan.googlecode.com/files/nama_file.js (  javascript. )
   Atau

   » http://Ariskoerniawan.googlecode.com/files/nama_file.css

Ide-Inspirasi

Slide Out Navigation

Jalan jalan ke Agan Hario Pamungkas eh nemu materi unik yaitu Slide Out Navigation. Contoh menu KoerniawanBlog : Home - About - SiteMap - Login. Lumayan menarik membuat tampilan lebih exentrix. Dalam penggunaannya juga lumayan mudah tinggal penyesuaian dengan template blog kita langsung saja.

• Login Blogger
• Klik Rancangan kemudian Edit HTML lalu cari kode ]]></b:skin>
• Copas script berikut dan letakkan di atas kode ]]></b:skin>

---

/*---------------- Beautiful Slide Out Navigation -------------------------------*/ .headerfixed { width:600px; height:56px; position:absolute; top:50%; left:10px; background:#fff url(title.png) no-repeat top left; } ul#navixed { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 10px; list-style: none; z-index:999999; width:721px; } ul#navixed li { width: 103px; display:inline; float:left; } ul#navixed li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#000; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; text-decoration:none; text-align:center; padding-top:80px; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } ul#navixed li a:hover{ background-color:#000; } ul#navixed li a span{ letter-spacing:2px; font-size:11px; color:#FFF; } ul#navixed .home a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiLNMja-Q5wOfMQoIqtOk5hq3QzbwaAHdT94Wmr8Vaj0Ee_3UfIURJZf6sSJ1OhG8jLKGKN8fDhmNcFmPM2rPaNOjpLOU2PyhsAGRf_9byndS6tHbuhPlN8s0waOeiW0L67Ekrc10Y19I/s1600/home.png); } ul#navixed .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_XfpkNAvpwi4XBF7-DpOR_6yEJOFQLvzq0C4i6uq3zlTGDyVRaP4_V8LTMx1GUsytPK_vqjc1yuGxGOvkWtniCP5c82x5X5jZD7jGlqNMOh14cxxR0ug7wHA8ViJsn4DY-p31x52hXP4/s1600/id_card.png); } ul#navixed .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLWwYGcIIFvZWeMF6NbU294_ZOTdgg8Ruta6KWapAkUgrmwWtOBip2GxHflByDTnog0Cy5LiPt73AgihIuCi33ybtCnQexhEooukcw83xzWG9NT-1C05rPsJzuJvtrJk2Uw1QW4Q6Z3-E/s1600/search.png); } ul#navixed .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicWgu917G9zIlgQyR1P30oyvnXpWj8pgNKrPZPYXRcxXaTcOkHY8tBwlCqGSqU1I0qxptrN1FWEeFkol11P3httuDp2qoPp9X9BCo-UTslvpq_rjRDnt5sIXpzGFtK3jD5JDSCaP87jec/s1600/ipod.png); } ul#navixed .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiFFKNjPO9gJ0K5VsJwLt9EF1z0HTF14nVp3M3J2vKhIUwx_U5ZMuB2FAB6I47UrMvDl6dozvADDguiaqMpLveNpAnhQ0EEyGWBB56lCdeuWd06qktJIX2j13PaSOg2HbPVMfEBpYTack/s1600/rss.png); } ul#navixed .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLk8LyTuKFs8CMgYT3EyTV-coC1Cv0Cj8DVzcGC06O_Y42R2jVYFkNoHfVpca6vCTd8tqefKh3a-HRoqmpIEEQ9ftl83jRXea4iyZgDRLoauOarbtgcWnqIuAEyOvkcdVZEGLjV1mqrdI/s1600/camera.png); } ul#navixed .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFhuunceG0xavgHsbsgWmUNs1-eZ48vMEKeW4XqlFSnGPMC4SNNNgzMsCSgvRDj6P8nt8T-5Gs6Dmrwo8v9k-DFgCGpuc69-lRos_KIBhRbUrG46oncaoD7trWG8cvknAWTyUqVhL5y40/s1600/mail.png); }

---

• Kemudian cari kode </head> dan letakkan script berikut ini di atas kode </head>:

---

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/> <script src='http://kangdadang.googlecode.com/files/jcolor.js'/> <script type='text/javascript'> $(function() { var d=300; $(&#39;#navixed a&#39;).each(function(){ $(this).stop().animate({ &#39;marginTop&#39;:&#39;-80px&#39; },d+=150); }); $(&#39;#navixed &gt; li&#39;).hover( function () { $(&#39;a&#39;,$(this)).stop().animate({ &#39;marginTop&#39;:&#39;-2px&#39; },200); }, function () { $(&#39;a&#39;,$(this)).stop().animate({ &#39;marginTop&#39;:&#39;-80px&#39; },200); } ); }); </script>

---

• Last, cari kode </body> dan letakkan script berikut ini di atas kode </body>

---

<ul id='navixed'> <li class='home'><a href='#'><span>Home</span></a></li> <li class='about'><a href='#'><span>About</span></a></li> <li class='search'><a href='#'><span>Search</span></a></li> <li class='photos'><a href='#'><span>Photos</span></a></li> <li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li> <li class='podcasts'><a href='#'><span>Podcasts</span></a></li> <li class='contact'><a href='#'><span>Contact</span></a></li> </ul>

---

Semoga Berhasil sejauh saya mencoba memang berhasil. Untuk penggunaan gambar anda dapat mengunjungi http://www.iconfinder.com dengan penyesuaian ukuran yang saya gunakan adalah 64 px.
Selata mencoba.....

Ide-Inspirasi

Membuat Tag Cloud

Tag Cloud merupakan aksesories dalam blog yang umumnya digunakan untuk membuat link dari materi yang dibuat oleh bloger secara garis besar untuk daftar isi global. Banyak teman - teman agan yang membuat tag cloud tetapi dengan edit html. kekurangannya ya gtu deh kalau berhubungan dengan edit html cenderung membuat tambah kerjaan jika tidak pandai pandai ngakalinnya. Kesempatan kali ini coba share dengan membuat tag cloud
Example :



Dalam Pembuatannya relatif mudah :

• Klik "Rancangan" dan kemudian pilih "Elemen Laman"
• Tambahkan "Gadget" dengan memilih "HTML/Javascript"
• Kemudian copy-paste kode berikut ini :

<center>
<embed allowscriptaccess="always" bgcolor="#ffffff" flashvars="tcolor=669900&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

&lt;a href='Link Url Label'style='12'&gt;Nama Label&lt;/a&gt;

&lt;a href='Link Url Label'style='12'&gt;Nama Label&lt;/a&gt;

&lt;a href='Link Url Label'style='12'&gt;Nama Label&lt;/a&gt;

&lt;a href='Link Url Label'style='12'&gt;Nama Label&lt;/a&gt;

&lt;a href='Link Url Label'style='12'&gt;Nama Label&lt;/a&gt;

&lt;a href='Link Url Label'style='12'&gt;Nama Label&lt;/a&gt;

&lt;/tags&gt;" height="200&quot; id="tagcloud" name="tagcloud" quality="high" src="http://www.roytanck.com/wp-content/plugins/wp-cumulus/tagcloud.swf" type="application/x-shockwave-flash" width="200&amp;quot;"></embed></center>

Warna Biru Untuk Link URL yang akan dituju
Warna Kuning Untuk Nama Label yang akan ditampilkan

Ide-Inspirasi

Mengganti Subtitle Film

Subtitle atau penggunaan bahasa dalam suatu film biasanya mempengearuhi konsentasi kita dalam mencermati isi film. Film dari luar pastinya, Subtitle sebagian menggunakan bahasa inggris tetapi banyak cara untuk mengakalinya. Dalam kesempatan ini punya kesempatan untuk share mengganti subtitle dari suatu film.
Cara Pertama :

1. Kunjugi www.opensubtitles.org 
2. Tuliskan judul film yang ingin dicari subtitle - nya
3. Download file subtitle - Gunakan

---

Cara Kedua:

1. Buka file subtitle (*.srt) yang akan di edit. Caranya klik kanan file subtitle nya, lalu pilih 'Open With > Notepad' atau kalau gak ada 'Edit With Notepad'.
2. Setelah subtitle nya terbuka, tekan CTRL+A (Select All), kemudian tekan CTRL+C (Copy).
3. Buka Google Translate, pastikan Translate From : English | Translate Into : Indonesian.
4. Paste hasil dari meng-copy tadi atau tekan CTRL+V (Paste) pada kotak yang disediakan Google Translate.
5. Tunggu beberapa saat lalu tekan 'Translate'. Jika masih ada teks yang belum ter-translate, reload/refresh sampai semua teks berubah menjadi bahasa indonesia.
6. Copy hasil dari translate tersebut ke notepad yang terbuka tadi. Tekan CTRL+A terlebih dahulu, baru kemudian tekan CTRL+V untuk mem-paste-nya.
7. Selanjutnya tekan CTRL+H untuk memunculkan jendela replace. Isi 'Find What :' dengan '->' dan isi 'Replace With :' dengan '-->' lalu tekan 'Replace All'.
   
   
8. Jika sudah tekan CTRL+S (Save). Sekarang subtitle nya sudah berubah menjadi bahasa indonesia, walaupun terkadang ada yang ngaco, tapi lumayan kan, kita tahu inti dari ceritanya.

---

Cara Ketiga
Jika cara tersebut ribet dan lama, mungkin cara berikut bisa dicoba.

1. Ubah ekstensi file subtitle nya dari *.srt ke *.txt sehingga file subtitle tersebut menjadi file teks biasa.
2. Buka Google Translate, kemudian klik 'Upload a document' dan klik 'Browse'.
3. Cari subtitle yang akan di translate.
4. Klik Translate (English to Indonesian)
5. Ulangi langkah 6,7,8 pada Cara Pertama diatas.
6. Ubah lagi ekstensi file nya dari *.txt ke *.srt.

---

Cara Keempat :
Cara berikut dengan memanfaatkan software pendukung.

1. Download software Subtitle Edit. Software ini FREE alias gratis. Lalu install.
2. Buka subtitle yang akan di edit dengan Subtitle Edit.
3. Pilih tab 'Source View' lalu tekan CTRL+A (Select All).
4. Buka Google Translate, pastikan Translate From : English | Translate Into : Indonesian.
5. Paste hasil dari meng-copy tadi atau tekan CTRL+V (Paste) pada kotak yang disediakan Google Translate.
6. Tunggu beberapa saat lalu tekan 'Translate'. Jika masih ada teks yang belum ter-translate, reload/refresh sampai semua teks berubah menjadi bahasa indonesia.
7. Copy hasil dari translate tersebut ke tab 'Source View' pada Subtitle Edit yang terbuka tadi. Tekan CTRL+A terlebih dahulu, baru kemudian tekan CTRL+V untuk mem-paste-nya.
8. Lalu klik tab 'List View' untuk melihat hasilnya. Jika berhasil teks nya akan berubah menjadi bahasa Indonesia. Jangan lupa tekan CTRL+S (Save).
   
   

Ide-Inspirasi