Membuat Menu Dengan Fungsi Scroll

type='html'>

Bagi blogger pemula seperti saya, membuat menu dengan fungsi scroll ini awalnya saya pikir susah, padahal jika kita mengerti bahasa pemrograman, membuat menu seperti ini sangatlah mudah. Untuk penghematan tempat jika sobat mempunyai daftar menu yang sangat panjang, menu dengan fungsi scroll ini bisa menjadi solusi yang tepat selain menggunakan marquee atau text berjalan.

 

Dan pembuatan menu ini tidak menggunakan kode HTML yang banyak dan ribet, yup hanya sedikit kode HTML, sobat sudah bisa membuat menunya. Menu ini bisa juga sobat menfaatkan dalam menempatkan blogroll yang panjang atau daftar menu postingan yang sobat miliki.

 

Untuk membuat menunya sobat hanya membutuhkan kode HTML seperti ini :

 

 

ISI MENU 

 

 

Keterangan :

• width --> lebar menu
  
  
• height --> tinggi menu
  
  
• padding --> jarak antar tulisan dengan garis pinggir
  
  
• border --> ketebalan garis pinggir

Tinggal sobat kreasikan sendiri sesuai dengan blog sobat.

Contoh kode HTML untuk menu yang saya punya :

 

1. Panduan Membuat Blog 

2. Mengganti Template Blogspot 

3. Cara Membuat Label

4. Upload Gambar ke Dalam Postingan

5. Cara Pasang Banner

6. Tutorial Membuat Text Area

7. Tips Membuat Favicon 

8. Trik Membuat Read More

9. Cara Pasang Search Engine

10. Menyimpan File di Yahoo! Geocities

11. Kode HTML Tampil di Postingan

12. Cara Pasang Meta Tag

13. Daftarkan Blog ke Search Engine

14. Alexa Rank

15. Tips Membuat Efek Marquee

16. Pasang Kode Tukaran Link

17. Backlink

18. Yahoo Emoticons

19. Link Berkelip Warna-Warni

20. Membuat Menu Dropdown

Hasilnya :

1. Panduan Membuat Blog

2. Mengganti Template Blogspot

3. Cara Membuat Label

4. Upload Gambar ke Dalam Postingan

5. Cara Pasang Banner

6. Tutorial Membuat Text Area

7. Tips Membuat Favicon

8. Trik Membuat Read More

9. Cara Pasang Search Engine

10. Menyimpan File di Yahoo! Geocities

11. Kode HTML Tampil di Postingan

12. Cara Pasang Meta Tag

13. Daftarkan Blog ke Search Engine

14. Alexa Rank

15. Tips Membuat Efek Marquee

16. Pasang Kode Tukaran Link

17. Backlink

18. Yahoo Emoticons

19. Link Berkelip Warna-Warni

20. Membuat Menu Dropdown

 

 

 

Sedikit keterangan tentang elemen diatas :

• overflow:auto adalah kode untuk penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
• width:310px adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 310 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).
• height:200px adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 300px.
• padding:10px adalah jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px.
• border:1px solid #eee adalah garis pada pembatas setiap sisinya, #eee untuk kode warna abu-abu.

Selamat Mencoba !!

Mengganti Background Blog Dengan Gambar

type='html'> Sebuah blog yang cantik dan enak dilihat tentu akan sangat membantu dalam meningkatkan traffic blog kita, karena saya sendiri lebih tertarik mengunjungi sebuah blog yang warnanya cerah dan enak dilihat, daripada blog yang warnanya gelap dan bentuknya tidak karuan alias acak kadut. Walaupun postingannya menarik tetapi membuat sakit mata, lebih baik saya pelototi blog saya selama berjam - jam.

Saya akan berbagi tips sedikit yang saya tahu tentang merubah warna background blog atau mengganti background dengan gambar yang sudah sobat upload ke tempat penyimpanan online, misalnya di Google Sites atau Photobucket.

Berikut langkah - langkahnya :

• Login ke Blogger.
  
• Klik Tata Letak --> Edit HTML.
  
• Kemudian cari kode yang mirip seperti ini :

  body { background: #FFFFFF;
  margin:0; color:#000000;
  font:12px trebuchet ms;
  text-align: center }
  

  
  Atau jika bingung silahkan klik Ctrl + F kemudian ketikkan body {, biasanya letaknya diatas.
  

• Untuk mengganti background dengan warna lain tinggal mengganti kode #FFFFFF dengan kode lain, untuk kode warna bisa dilihat disini. Contoh saya mengganti background dengan warna abu - abu, hasilnya akan menjadi seperti berikut :

  body { background: #D8D8D8;
  margin:0; color:#000000;
  font:12px trebuchet ms;
  text-align: justify }
  

• Untuk mengganti background dengan image atau gambar, misalnya gambar yang sudah saya simpan di blogger, kode url-nya seperti ini :
  
  http://lh4.ggpht.com/_7Y9pl24WpQY/StGOm72nY7I/AAAAAAAAB4c/mWg4brKUK4Q/body_thumb%5B4%5D.jpg?imgmax=800
  
• Sehingga hasilnya menjadi seperti berikut ini :
  

  body { background:#FFFFFF url(http://lh4.ggpht.com/_7Y9pl24WpQY/StGOm72nY7I/AAAAAAAAB4c/mWg4brKUK4Q/body_thumb%5B4%5D.jpg?imgmax=800) repeat-x;
  margin:0; color:#000000; font:12px trebuchet ms;
  text-align: justify}
  

• Jika sudah selesai kemudian Simpan Template sobat.

Untuk gambar yang continuous sobat tambahkan repeat-x setelah kode url gambar. Lebih jelasnya sobat bisa baca postingan saya tentang cara mengganti backgroud blog dengan gradient image disini.

 

Selamat mencoba !

Cara Edit Gambar Foto dengan Photoshop atau Online Gratis

type='html'>Cara Edit Gambar Foto dengan Photoshop atau Online Gratis - Mengedit foto atau gambar adalah pekerjaan yang sangat menyenangkan bagi sebagian orang. Saya pun juga senang dalam hal mengedit foto, karena dengan mengedit foto, foto yang semula kurang bagus bisa kita edit sedemikian rupa hingga tampil sangat sempurna. Atau jika kita ingin memberikan efek-efek tertentu pada foto, semisal memberikan tatto, mewarnai rambut, mewarnai lensa mata, mengedit foto hingga seperti sebuah gambar kartun yang lucu dan keren.

Pada artikel ini saya akan memberikan 2 opsi bagi anda yang ingin mengedit sebuah foto, yaitu mengedit menggunakan software aplikasi photoshop atau menggunakan situs edit foto online.

Edit dengan Photoshop

untuk photoshop, anda bisa belajar banyak trik-trik edit foto di website tempat saya belajar, yaitu di ilmugrafis.com, di sana ada banyak sekali artikel-artikel menarik seputar editing foto, mulai dari yang dasar hingga yang tingkatan sangat sulit. jika tertarik untuk belajar, silahkan kunjungi di ilmugrafis.com

Edit Foto dengan Situs Online

Bagi anda yang tidak memiliki software photoshop, saya memiliki alternatif situs edit foto yang memiliki berbagai macam tool serperti halnya photoshop. situs ini menyediakan fitus edit foto online dengan tampilan yang menarik dan sangat ringan dijalankan.

Untuk menggunakan tool edit foto di atas, silahkan anda masuk ke http://pixlr.com/editor/, kemudian anda tentukan, ingin memulai dengan halaman baru atau edit foto yang telah ada di komputer anda.

Tenang, masih ada lagi situs edit foto online untuk anda. Tool kali ini sangat berbeda dengan 2 tool di atas, jika dua tool di atas mengharuskan kita untuk menguasai beberapa peralatan, di sini kita tidak butuh keahlian apapun, cukup pilih efek yang di inginkan, kemudian upload foto anda untuk diproses secara otomatis,

Untuk menggunakan situs edit gambar foto tersebut, silahkan kunjungi http://id.photofunia.com/, anda tinggal pilih efek yang diinginkan, kemudian upload foto anda. Dengan begitu foto anda akan teredit dengan sendirinya sesuai dengan efek yang telah anda pilih sebelumnya.

Oke, terima kasih sudah membaca artikel saya kali ini. semoga artikel ini bisa memberikan inspirasi bagi anda yang ingin belajar mengedit foto baik dengan software maupun aplikasi online | Rating Artikel "Cara Edit Gambar Foto dengan Photoshop atau Online Gratis" : 5

Membuat Label Dengan HTML

type='html'>

Apa kelebihan Membuat Label dengan HTML? Demi membuat valid HTML template, sekaligus membahas SEO Friendly, ternyata label di dalam blog kita mengandung masalah tentunya dengan SEO dan Validnya. Nah untuk menyikapi hal tersebut mari kita optimalkan blog kita dengan membuat label dengan HTML

Nah mari kita bahas satu persatu.

1. SEO

Untuk blogger kaitannya antara SEO dengan Label adalah jauh sekali. Saya baca di blognya juragan, bahwa memasang link label di postingan untuk masalah SEO adalah pekerjaan yang sia-sia. Nah hal ini cukup beralasan, lihat URL label di bawah ini :

http://sejutatrik.blogspot.com/search/label/SEO

di link label SEO di atas tidak akan saling berkaitan, karena label tersebut menggunakan search untuk menampilkan URL. Jika kita memasang url label, akan sia-sia. Maksudnya walaupun kita menaruh puluhan link label ke dalam posting, sampai kiamat gak akan saling berkaitan. Benar bukan?

2. Valid

Ternyata setelah saya cek di validator V3, masalah yang ditimbulkan untuk label adalah eror untuk & dan lain-lain. Coba perhatikan blognya hendro prayitno, deconstruction code, chilarsip, dll. Sebagian besar blog yang valid HTML5 tidak menaruh label dalam sidebar. Dengan kata lain blog yang valid HTML5 menggunakan Template 1 Kolom.

Nah sekarang kita ganti label bawaan blogger dengan HTML. Caranya cukup mudah yaitu mengganti navigasi di bagian Edit HTML menjadi Widget di sidebar.

Caranya cukup mudah, Silakan copas kode yang ada di bawah ini ke dalam Widget atau Add Element blog sobat.

 

• Label 1
 
       
• Label 2
 
       
• Label 3
 
       
• Label 4

DEMO

Jika dirasa sudah berjalan sukses, hapus label bawaan blogspot.

Tidak semua template mendukung cara ini, silakan saja sesuaikan dengan menu di bagian edit HTML sobat masing-masing. Hasil label dengan HTML di atas masih sederhana dan efeknya tergantung bawaan template sobat blogger semua.

Nah semoga dengan membuat label dengan HTML bisa mengurangi error di blog sobat. Selamat berjuang!

Happy Blogging! by. Sejuta Trik Blogger

Content Niche Market Blog tentang Kesehatan dengan Bahasa Inggris

type='html'>

Kendala yang terkadang di alamai ketika ingin membuat blog adalah ketika hendak membuat artikel/content dengan bahasa inggris, yang target pasarnya benar-benar bertarget atau niche content memang agak sulit, terutama yang masih awan bahasa inggris seperti saya. Dan itu merupakan suatu kendala yang sangat serius kalau menurut saya secara pribadi. Tapi bagi yang sudah mahir bahasa inggris nya sih tidak ada kendala.

Bahkan bagi yang sudah mengerti buat artikel/content dengan bahasa inggris terkadang juga agak ada kendala untuk mencari target pasar tentang artikel apa yang benar-benar bertarget alias niche market content. Apalagi jika kita menekuni bisnis google adsense, memang sangat di perlukan suatu kontent blog yang benar-benar bertarget, agar mendapatkan nilai klik yang lumayan tinggi.

Ada yang sebagian orang barangkali tidak jarang menyewa jasa pembuat artikel dengan content bahasa inggris dengan harga yang bervariasi yang di patoknya.

Jika ingin buat blog degan content bahasa inggris dan niche market, ini ada sebuah ebook yang sudah siap dengan berbagai content yang membahas tentang kesehatan atau kerennya dengan category Kesehatan.

Di bawah ini category content  Niche Market yang sudah siap kita pakai buat artikel di blog:

`133 Health Nutrition PLR Articles
`218 Health Food PLR Articles
`182 Health Diet PLR Articles
`194 Natural Health PLR Articles
`162 Health Supplement PLR Articles

jika mungkin kendala seperti yang saya uraikan di atas, sebaiknya silahkan mencobanya agar content blog kita benaar-benar niche market yang nilai kliknya tinggi dan bertarget.

Jika ingin mendapatkan OUTO NICHE BLOG, lihat panduan lengkapnya.

Menghubungkan Blogger Dengan Google+

type='html'>

Setelah Blogger Terhubung dengan Google+ kini saatnya kita menghubungkan Blogger dengan Google+. Menghubungkan Blogger dengan google plus ini ditandai dengan kita menggunakan Profil Blogger yang di ganti dengan Profil Google+

Nah untuk melakukan hal tersebut di atas Sejuta trik blogger punya caranya. Cara ini saya dapat dari mondar mandir saya dari blogger ke bloggerdraf dan sebaliknya. Kok ada pemberitahuan, saya buka browser eh ternyata ada juga yang share juga seperti ini. Ternyata benar Menghubungkan Blogger dengan Google+ sangat mudah. Yuk kita menghubungkan blogger dengan Google+

1. Login ke blogger sobat. Klik link menu Draf Blogger

2. Akan ada pemberitahuan seperti di bawah ini :

3. Klik Get Started dan akan muncul pemberitahuan bahwa anda menyetujui menggunakan profil Google+ di profil blog sobat.

Jika sobat menggunakan profil blog dengan nama Maya atau samaran, maka profil blogger akan otomatis mengikuti akun Google+. bahkan ada sahabat sejuta trik blogger yang bilang kalau mereka gagal menggunakan trik ini karena menggunakan nama samaran. So, yang jelas kalau tidak dicoba siapa tahu? ya tidak?

4. Jika sobat memiliki blog lebih dari 1, maka akan tampil seperti di bawah ini

5. Klik Add blog atau skip untuk menunda.

Jika kita klik add blog, maka blog lain selain blog utama juga akan ikut tampil.

6. Jika sudah draf.blogger akan menutup otomatis dan mengarahkan kita ke profil Google+.

7. Masuk dengan akun sobat.

8. Lihatlah hasil dari kedua akun Blogger dan Google+ sobat!

9. Jika tampilan favicon blog sudah nyangkut di Google+, berarti Cara Menghububungkan Blogger dengan Google+ berarti sukses.

Untuk cara yang lebih mudah silahkan klik Button di bawah ini. Blogger to Google+ untuk menghubungkan dan Google+ to Blogger untuk mengembalikan seperti semula.

Untuk Merubah Tampilan

Untuk Mengembalikan Tampilan

Happy Blogging! by. Sejuta Trik Blogger
Thanks for reading!

Mengganti Profil Blogger Dengan Google+

type='html'>

Sebenarnya trik ini saya sudah tulis di Menghubungkan Blogger dengan Google+. Akan tetapi untuk memperjelasnya sejuta trik blogger akan menulis lagi buat sahabat semua. Mari kita bahas ulang, siapa tahu di posting sebelumnya sahabat semua belum paham Cara Mengganti Profil Blogger dengan Google+.

Caranya mudah sekali sobat, urutan mengganti profil blogger dengan google+ adalah sebagai berikut :

1. Login ke blogger sobat di http://www.blogger.com

2. Jika sudah login, klik draf blogger atau di Blogger in Draf

3. Akan ada pemberitahuan, klik Get Started untuk memulainya.

4. Akan ada pemberitahuan lagi yaitu kita menyetujui persyaratan dari google. 

Persyaratan ini garis bersarnya adalah kita setuju menggunakan semua profil google+ dan akan menghubungkan dengan blogger. Bagi sobat yang menggunakan nama maya atau nama samaran di blogger, nama tersebut akan hilang dan digantikan dengan nama yang terdapat di google+. Dengan kata lain, nama di blogger akan hilang dan digantikan dengan profil google+. Jadi nama profil blogger dan nama google+ seharusnya sama. Ada teman saya yang mencoba dengan nama samaran hasilnya gagal terus. Namun sobat tidak perlu kuwatir, soalnya saya mencoba dan bisa.

5. Klik add blog jika ingin menambahkan blog lain ke profil google+. Jika tidak skip saja. 

6. Bloggerdraf akan menutup browsernya dan mengarahkan kita untuk login ke google+.

7. Setelah login di google+ kita akan melihat blog kita sudah nyangkut di profil Google+. 

Sebaliknya dengan Blogger, akan ada tulisan di bawah foto profil seperti ini 

You're using your Google+ profile [?]  

Untuk profil Blogger jika kita klik View Profil akan menuju ke Profil Google+.

Mudah bukan sahabat? Begitulah cara mengganti profil blogger dengan google+. Semoga membantu! Jika sobat masih kurang jelas, kunjungi di Menghubungkan Blogger dengan Google+. Disana sudah dijelaskan cara mengembalikan dengan mudah. 

Happy Blogging! by. Sejuta Trik Blogger Thanks for reading!

Cara Mudah Posting Dengan Emoticon

type='html'>

Hi sahabat sejuta trik blogger? Posting lagi nih seputar posting blog. Kali ini Cara Mudah Posting Dengan Emoticon. Sudah banyak yang menjelaskan tentang Posting Blog dengan Emoticon. Tapi Sejuta Trik Blogger akan memberikan trik untuk mempermudah sahabat semua untuk posting di blogspot dengan emoticon.

Ada banyak alasan kenapa kita menambah emoticon dan memasukkan ke dalam postingan. Ada yang menganggap kalau posting di blogger dengan emoticon itu mencerminkan mood dari penulisnya. Ada juga manfaat emoticon di posting dapat mengusir jenuh bagi pembaca yang sebagian disuguhi dengan banyaknya tulisan.

Adanya emoticon di posting blogspot akan membuat suasana lebih atraktif dan menyenangkan sehingga pengunjung semakin betah dengan adanya gurauan kecil dari emoticon itu sendiri. Baik untuk lebih cepatnya kita praktik saja.

Sejuta Trik Blogger memberikan tips kecil dan mungkin bermanfaat bagi sahabat semua karena dalam menambah emoticon di setiap posting ini sahabat tidak perlu mengedit html sobat. Apa lagi menginstal add ons firefox. Nah berikut ini caranya :

1. Sahabat tinggal posting seperti biasa.
2. Pergi ke alamat free emoticon di bawah ini.
http://www.emoticonsfree.org/
Klik dan sobat akan menemukan emoticon lucu di sana.
3. Jika sudah memilih emoticon Klik kanan pada gambar tersebut.
4. Copy dan Pastekan pada postingan sobat dalam keadaan Edit HTML.
5. Dari hasil kopi paste tersebut saya ambil contoh kodenya :

6. Hapus kode biru
7. Tambahkan kode :

 height="15px" width="auto" style="border:none"

sebelum kode  '>

sehingga kode akhir menjadi

contoh :

Cara ini memang saya mohon atas kekurangan. jangan beri pada saya agar saya tidak  kalau boleh beri dan akhir kata

Happy Blogging! by. Sejuta Trik Blogger

Modifikasi Link Judul Posting Dengan Keterangan

type='html'>Sebenarnya masih banyak tutorial tentang modifikasi judul link. Tanpa basa basi langsung saja trik modifikasi link judul posting dengan keterangan. 


Klik Rancangan/Design kemudian Edit Html dan klik kotak kecil Expand Template Widget

Cari kode dibawah ini

Silahkan hapus dan ganti dengan kode ini

Lanjut dengan mencari kode dibawah ini

Hapus dan ganti dengan kode ini

Simpan Template. (Contoh : Letakkan kursor mouse sobat di halaman judul di atas. Tunggu beberapa detik maka akan muncul keterangan sesuai judulnya)

Kata para master modifikasi link judul posting dengan keterangan akan memperkuat seo blog kita. Dengan adanya keterangan pada judul posting blog kita tentunya menjadi no 1 di google akan semakin cepat! So, selamat berbloging.

Happy Blogging! by. Sejuta Trik Blogger

Membuat Lightbox Dengan Jquery

type='html'>

Ada sejuta trik blogger untuk mengedit blog khususnya dalam editing tampilan gambar di blogger. Salah satunya dengan membuat lightbox dengan jquery. Trik membuat lightbox itu sendiri sebenarnya sudah lama sekali dibuat oleh master-master blog. Namun akhir-akhir ini banyak website ternama bahkan jejaring sosial Facebook dan Google+ masih menggunakan trik ini.

Sebenarnya apasih lightbox di Blogger itu? Lightbox di blogger bukan diartikan sebagai kotak lampu atau lampion di blogger melainkan menampilkan gambar yang masih dalam halaman posting. Maksudnya menampilkan gambar blogger di halaman posting dengan lebih mengutamakan gambar itu sendiri. Bukan halaman gambar atau alamat gambar. Maka dari itu di luar tampilan gambar agak samar, terarsir, atau bahkan hitam.

Sebagai contoh klik gambar di atas atau yang lebih menarik (lihat Cewek Imut) dan akan terlihat hasilnya seperti saat kita melihat foto di facebook atau google+. Daripada berpanjang lebar malah gak jelas, Mari kita buat lightbox dengan jquery.

1. Login di blogger.

2. Dalam posisi dasboard blog sahabat semua klik Design

3. Klik lagi Edit HTML

4. Centang Expand Template Widget

5. Jangan lupa backup dulu ya sobat

6. Cari kode di bawah ini :

]]></b:skin>

7. Paste di atasnya kode berikut :

/*css lightbox dimulai dari sini*/<br /> /**<br /> * jQuery lightBox plugin<br /> * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)<br /> * and adapted to me for use like a plugin from jQuery.<br /> * @name jquery-lightbox-0.5.css<br /> * @author Leandro Vieira Pinho - http://leandrovieira.com<br /> * @version 0.5<br /> * @date April 11, 2008<br /> * @category jQuery plugin<br /> * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)<br /> * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US<br /> * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin<br /> */<br /> #jquery-overlay {<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> z-index: 90;<br /> width: 100%;<br /> height: 500px;<br /> }<br /> #jquery-lightbox {<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> width: 100%;<br /> z-index: 100;<br /> text-align: center;<br /> line-height: 0;<br /> }<br /> #jquery-lightbox a img { border: none; }<br /> #lightbox-container-image-box {<br /> position: relative;<br /> background-color: #fff;<br /> width: 250px;<br /> height: 250px;<br /> margin: 0 auto;<br /> }<br /> #lightbox-container-image { padding: 10px; }<br /> #lightbox-loading {<br /> position: absolute;<br /> top: 40%;<br /> left: 0%;<br /> height: 25%;<br /> width: 100%;<br /> text-align: center;<br /> line-height: 0;<br /> }<br /> #lightbox-nav {<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> height: 100%;<br /> width: 100%;<br /> z-index: 10;<br /> }<br /> #lightbox-container-image-box > #lightbox-nav { left: 0; }<br /> #lightbox-nav a { outline: none;}<br /> #lightbox-nav-btnPrev, #lightbox-nav-btnNext {<br /> width: 49%;<br /> height: 100%;<br /> zoom: 1;<br /> display: block;<br /> }<br /> #lightbox-nav-btnPrev { <br /> left: 0; <br /> float: left;<br /> }<br /> #lightbox-nav-btnNext { <br /> right: 0; <br /> float: right;<br /> }<br /> #lightbox-container-image-data-box {<br /> font: 10px Verdana, Helvetica, sans-serif;<br /> background-color: #fff;<br /> margin: 0 auto;<br /> line-height: 1.4em;<br /> overflow: auto;<br /> width: 100%;<br /> padding: 0 10px 0;<br /> }<br /> #lightbox-container-image-data {<br /> padding: 0 10px; <br /> color: #666; <br /> }<br /> #lightbox-container-image-data #lightbox-image-details { <br /> width: 70%; <br /> float: left; <br /> text-align: left; <br /> } <br /> #lightbox-image-details-caption { font-weight: bold; }<br /> #lightbox-image-details-currentNumber {<br /> display: block; <br /> clear: left; <br /> padding-bottom: 1.0em; <br /> } <br /> #lightbox-secNav-btnClose {<br /> width: 66px; <br /> float: right;<br /> padding-bottom: 0.7em; <br /> }<br /> /*css lightbox berakhir */

8. Tambahkan di atas kode berikut :

<!--Start lightbox scripts info from http://www.spiceupyourblog.com--><br /> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/><br /> <script src='http://spiceupyourblogextras.googlecode.com/files/jquery.lightbox-0.5.js' type='text/javascript'/><br /> <script type='text/javascript'><br /> $(function() {<br /> $('a.spicebox') .lightBox({<br /> <br /> overlayOpacity: 0.6,<br /> imageLoading: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBtC6dBQAcWM8L2EdfJoXE-PrRnq9sQKVC-pYRJ6lJYXMxOoGk4dJHIiWddRaft0rObqDtgUTYXRNX3_NoRa97tr9CsyOrSfgzJ4K7AF8Cl205MpjgfsVOG94YBM4gl0xNXx19kI4_SS83/s1600/lightbox-ico-loading.gif',<br /> imageBtnClose: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_TQRuUnG70ETxeRnRCPGUu7-5RIGMg1CIFwQXZZfEX_Ox_yIUUKleh1mUlvPOew41EW4wLXTucbzDE80kzPabnXVInOsT5Yig09lJEQCE3q6W5MGlqugdBduOWH0c2GHerPwJL-fUkkUU/s1600/lightbox-btn-close.gif',<br /> imageBtnPrev: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiQBEmqwlU9RnHZ3HifZIV1CxQMuuT55t0TXUmckTkI-AVGPhAziZSWqmPZRFHphak847CLOtAYp0-9ju4dtSnm5Q45ho9sdJt-taMY6iESwN5Ln2ne7-pIJnNrI5-_APqmxKBRfC0Oke0/s1600/lightbox-btn-prev.gif',<br /> imageBtnNext: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAajQG-2XqcpOZ_4-7ejUPF-UCL67Cw3p1ZWFBalpKXspPsWb1KXd55xJkREQwRP5AkqLqmKyQIDbnzzVLlWOwSSekRQSy2to-vSiDAnGJ06IGelWD4Eggm3Eizvk_DihkWRqASY99SLIw/s1600/lightbox-btn-next.gif',<br /> containerResizeSpeed: 350,<br /> txtImage: 'Image',<br /> txtOf: 'Of'<br /> });<br /> });<br /> </script><br /> <!--end lightbox scripts-->

9. Sekarang klik

10. Untuk Uji coba sekarang Posting seperti biasa.

11. Tulis sesuka sobat. Dan Upload Gambar sobat.

12. Setelah Upload gambar. Klik Edit HTML di sebelah kiri Compose. (Dalam keadaan Edit HTML saat posting)

13. Dalam posisi Edit HTML. Gambar akan berubah menjadi kode seperti ini

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW2cJbrS4aJP3lR9AkQSXu7uNscHC-QGNPLLlagDxp-rcS7Bgo-JMwf7Nw1M3WRQeCxvZZ7CUdJ8lHpp8lyJJ-iD48Iu7MBQOuAHpZxOmLCF6XUyEVxfqkI6fr6TZndHmwpYxvVERcV7M8/s1600/blogger_lightbox1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW2cJbrS4aJP3lR9AkQSXu7uNscHC-QGNPLLlagDxp-rcS7Bgo-JMwf7Nw1M3WRQeCxvZZ7CUdJ8lHpp8lyJJ-iD48Iu7MBQOuAHpZxOmLCF6XUyEVxfqkI6fr6TZndHmwpYxvVERcV7M8/s320/blogger_lightbox1.jpg" width="320" /></a></div>

14. Edit kode gambar sahabat dengan menambahkan  class="spicebox" dan title="Judul Gambar" Sehingga ilustrasi kodenya menjadi :

<a class="spicebox" title="judul gambar" href="http://image.jpg"><img src="http://image.jpg"></a>

15. Untuk hasil akhirnya kode gambar no. 13  kurang lebih akan menjadi seperti berikut :

class="spicebox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW2cJbrS4aJP3lR9AkQSXu7uNscHC-QGNPLLlagDxp-rcS7Bgo-JMwf7Nw1M3WRQeCxvZZ7CUdJ8lHpp8lyJJ-iD48Iu7MBQOuAHpZxOmLCF6XUyEVxfqkI6fr6TZndHmwpYxvVERcV7M8/s1600/blogger_lightbox1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Judul Gambar Sahabat ">

16. Klik atau untuk melihatnya. Dan jadilah lightbox dengan jquery.

Jika sahabat tidak menggunakan cara 1 sampai 16. Dengan cara berikut ini sahabat bisa juga membuat lightboxt di blogger dengan jquery dengan script berikut ini.

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script><br /> <script src="http://code.fyglab.com/colorbox/blogger-colorbox-min.js" type="text/javascript"></script>

Copy kode di atas dan pastekan di atas dan simpan. Sahabat tidak perlu susah payah menambah kode setiap postingan. Cukup posting seperti biasa. Namun jika menggunakan cara tersebut, secara tidak langsung menelanjangi kemampuan atau ilmu sahabat dan mematikan kreatifitas sahabat. Sekarang terserah sahabat semua mau bersusah payah sedikit atau yang praktis tanpa tahu bagaimana membuat lightbox di blogger dengan jquery. 

Bagi sahabat yang menggunakan tampilan dasboard baru, berbeda dengan cara di atas. Sahabat bisa membuat lightbox di blogspot dengan alamat di bawah ini :

http://www.bloggerplugins.org/2011/09/official-blogger-light-box.html
http://bloggerfreelayouts.blogspot.com/2011/08/jquery-blogger-image-gallery-blogspot.html

Happy Blogging! by. Sejuta Trik Blogger

Posting Gambar Berdampingan Dengan Teks

type='html'>

Posting Gambar Berdampingan dengan teks dapat dilakukan pada saat upload gambar dalam keadaan 'Edit HTML' saat posting. Tapi bagaimana jika kita mengedit posting yang sudah terlanjur diposting? Apakah harus upload lagi?

Tujuan Posting Gambar Berdampingan dengan teks ini membuat area posting menjadi penuh dan simpel. Jadi untuk menghemat tempat area posting juga. Sebelum kita membuat Posting gambar berdampingan dengan teks berikut ini cara posting untuk gambar berdampingan.

1. Membuat Posting 2 Gambar Berdampingan.

Caranya :

Posisi menulis pada 'edit html' jika belum klik saja. Tambahkan kode ini :

alamat gambar sobat (kode gambar sobat)

alamat gambar sobat (kode gambar sobat)

Jika lebih dari 2 gambar sobat tinggal tambahkan kode alamat gambar sobat (kode gambar sobat) dan seterusnya sebelum

Maka hasilnya adalah sebagai berikut :

2. Posting Gambar Berdampingan Dengan Teks

Caranya :

Upload dulu gambar sobat. Jika sudah, dalam keadaan "Edit HTML" kodenya kurang lebih akan seperti ini :

Jika sudah tambahkan kode di bawah ini sebelum tanda "/> pada akhir kode gambar.

style="float:left;margin:0 10px;"

Penempatan teks berada di setelah "/> atau mungkin juga seperti ini  .

Maka hasilnya :

 <<<< ==== !!!

Gambar di samping adalah logo blogger berwarna hitam. Diupload tanggal 16 September 2011. .............................

........................................................................................

........................................................................................

........................................................................................

....................................................................................dst.

Untuk mengembalikan posisi semula cukup enter saja di belakanang kata terakhir yang dibuat berdampingan. Perlu di ingat bahwa membuat Posting Gambar Berdampingan Dengan Teks ini dalam keadaan "Edit HTML". Jika sudah, klik Preview atau Compose untuk melihat. Jika kurang sesuai klik lagi "edit HTML" hingga sesuai harapan. Happy Blogging!

Cara Mudah Membuat Recent Post Dengan Gambar

type='html'>

Sesuai judulnya Cara mudah membuat recent post dengan gambar, Seperti motto blog ini yaitu belajar mengedit blog dengan menyenangkan. Maksudnya cara membuat recent post dengan gambar, kita tak perlu susah payah mengedit html atau apalah itu. Belum lagi tampilan baru dasboard blogger yang membuat anda harus belajar lagi membuat anda malas edit html. Anda hanya perlu memasukkan data-data yang diperlukan dan pengeditan hanya perlu klik-klik saja.

Tidak percaya? silakan klik tombol dan langsung membuat recent post dengan gambar secara otomatis. Silakan klik gambar di bawah ini (klik kanan dan klik buka Tautan di tab baru/ klik in new tab)

Jika diklik akan muncul seperti tab berikut ini :

Keterangan :

Instructions

Change settings
For a Grid Layout, click the 'Grid Layout' Button, and it will adjust the settings automatically for you
Click 'Add Widget To My Blog' button

instruksi :

mengubah pengaturan 
Untuk Layout Grid, klik Button 'Grid Tata Letak', dan akan menyesuaikan pengaturan secara otomatis untuk Anda

Klik 'Add Widget To My Blog' tombol

Widget Title

Widget Title:

Widget title diisi dengan judul widget sobat

Customize Widget

Blog url: http:///                         (isi dengan url blog sobat)
(You can leave this blank if you are displaying the posts from the same blog to which you are adding the widget) 

(Anda dapat meninggalkan kosong ini jika anda menampilkan posting dari blog yang sama yang Anda menambahkan widget)
 

Number of posts	: (post yang akan tampil)
Maximum title Length	: characters      (Judul yang akan tampil)
Show Thumbnail	: (Tampilkan gambar)
Show Default Thumbnail	:(If image is not present) (Tampilkan Gambar secara default)
Thumbnail Dimension	: px (Dimensi gambar)
Float Thumbnail to	: Left Right None
Thumbnail Margin	: 5px Margin No Margin
Show summary	:
Summary size	: characters
Show post date	:
Show Comment Number	:
Show Read more Link	:
Read More Text	:
Use Full Feed	:

Sorting: published updated

Jika dirasa semua udah beres dan sesuai selera tinggal klik button atau tombol seperti di bawah ini 

 

Reset untuk mengulangi jika anda tidak puas dalam membuat widget

Grid Layout adalah tampilan yang sudah anda buat

Add Widget to My blog adalah tombol membuat widget otomatisnya

Nah gimana sobat, mudah bukan cara mudah membuat recent post dengan gambar? semoga membantu.

Sumber ane di Blogger Widget

Membuat Recent Post dengan Label

type='html'>


Label:

Recent Posts

Widget by:

Info Blog

Slide gambar dengan efek 3D

type='html'>Ini adalah sebuah demonstrasi menggunakan 3D perspective, yang dapat Menciptakan "Slide Carousel". Dengan menggunaan keyframes dan translate3d (x, y, z), Slide Carousel ini dapat Berputar seperti layaknya jari-jari dan dapat "auto-run".

Jika dilihat dari atas, Slide Carousel ini terlihat berputar berlawanan dengan arah jarum jam dan ketika sebuah gambar dari slides mencapai sisi kiri, gambar tersebut akan keluar dari lingkaran slides dan membesar selama beberapa detik, kemudian kembali lagi pada susunannya kedalam "Slide Carousel"

Untuk proses pembuatannya ikuti langkah berikut,

Loggin Blogger > Rancangan > Edit html
Cari kode ]]> dan pastekan kode berikut diatasnya

/* ================================================================

This copyright notice must be untouched at all times.
Copyright (c) Buku Catatan si Ugi. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.carousel {width:750px; margin:0 auto;
-webkit-perspective: 1600px;
-webkit-perspective-origin: 50% -500px;
}
.ring {position:relative; margin:0 0 0 440px; height:120px; width:180px;
-webkit-transform-style: preserve-3d;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration:36s;
-webkit-animation-name: rotateMe;
}
.spoke {position:absolute; height:120px; width:180px;}
.ring img {border:5px solid #fff;
-o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0,0.5);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration:36s;
}
.ring img {display:block; width:180px; height:120px;}
.ring .p1 {-webkit-animation-name: enlargeMe12;}
.ring .p2 {-webkit-animation-name: enlargeMe11;}
.ring .p3 {-webkit-animation-name: enlargeMe10;}
.ring .p4 {-webkit-animation-name: enlargeMe9;}
.ring .p5 {-webkit-animation-name: enlargeMe8;}
.ring .p6 {-webkit-animation-name: enlargeMe7;}
.ring .p7 {-webkit-animation-name: enlargeMe6;}
.ring .p8 {-webkit-animation-name: enlargeMe5;}
.ring .p9 {-webkit-animation-name: enlargeMe4;}
.ring .p10 {-webkit-animation-name: enlargeMe3;}
.ring .p11 {-webkit-animation-name: enlargeMe2;}
.ring .p12 {-webkit-animation-name: enlargeMe1;}
@-webkit-keyframes rotateMe {
0% { -webkit-transform: rotateY(0deg);}
8.33% { -webkit-transform: rotateY(30deg);}
16.66% { -webkit-transform: rotateY(60deg);}
24.99% { -webkit-transform: rotateY(90deg);}
33.33% { -webkit-transform: rotateY(120deg);}
41.66% { -webkit-transform: rotateY(150deg);}
49.99% { -webkit-transform: rotateY(180deg);}
58.33% { -webkit-transform: rotateY(210deg);}
66.66% { -webkit-transform: rotateY(240deg);}
74.99% { -webkit-transform: rotateY(270deg);}
83.33% { -webkit-transform: rotateY(300deg);}
91.66% { -webkit-transform: rotateY(330deg);}
100% { -webkit-transform: rotateY(360deg);}
}
@-webkit-keyframes enlargeMe1 {
0% {-webkit-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
5.33% {-webkit-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
8.33% {-webkit-transform: rotateY(330deg) scale(2) translate3d(-190px, 0, 0);}
11.33% {-webkit-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe2 {
0% {-webkit-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
13.66% {-webkit-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
16.66% { -webkit-transform: rotateY(300deg) scale(2) translate3d(-190px, 0, 0);}
19.66% {-webkit-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe3 {
0% {-webkit-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
21.991% {-webkit-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
24.99% {-webkit-transform: rotateY(270deg) scale(2) translate3d(-190px, 0, 0);}
27.99% {-webkit-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe4 {
0% {-webkit-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
30.33% {-webkit-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
33.33% {-webkit-transform: rotateY(240deg) scale(2) translate3d(-190px, 0, 0);}
36.33% {-webkit-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe5 {
0% {-webkit-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
38.66% {-webkit-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
41.66% {-webkit-transform: rotateY(210deg) scale(2) translate3d(-190px, 0, 0);}
44.66% {-webkit-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe6 {
0% {-webkit-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
46.99% {-webkit-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
49.99% {-webkit-transform: rotateY(180deg) scale(2) translate3d(-190px, 0, 0);}
52.99% {-webkit-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe7 {
0% {-webkit-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
55.33% {-webkit-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
58.33% {-webkit-transform: rotateY(150deg) scale(2) translate3d(-190px, 0, 0);}
61.33% {-webkit-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe8 {
0% {-webkit-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
63.66% {-webkit-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
66.66% {-webkit-transform: rotateY(120deg) scale(2) translate3d(-190px, 0, 0);}
69.66% {-webkit-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe9 {
0% {-webkit-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
71.99% {-webkit-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
74.99% {-webkit-transform: rotateY(90deg) scale(2) translate3d(-190px, 0, 0);}
77.99% {-webkit-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe10 {
0% {-webkit-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
80.33% {-webkit-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
83.33% {-webkit-transform: rotateY(60deg) scale(2) translate3d(-190px, 0, 0);}
86.33% {-webkit-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe11 {
0% {-webkit-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
88.66% {-webkit-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
91.66% {-webkit-transform: rotateY(30deg) scale(2) translate3d(-190px,0, 0);}
94.66% {-webkit-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe12 {
0% {-webkit-transform: rotateY(0deg) scale(2) translate3d(-190px, 0, 0);}
3% {-webkit-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
96.9% {-webkit-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
97% {-webkit-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(0deg) scale(2) translate3d(-190px, 0, 0);}
}
/* for Firefox */
.carousel {
-moz-perspective: 1600px;
-moz-perspective-origin: 50% -500px;
}
.ring {
-moz-transform-style: preserve-3d;
-moz-animation-iteration-count: infinite;
-moz-animation-duration:36s;
-moz-animation-name: rotateMe;
}
.ring img {
-moz-animation-iteration-count: infinite;
-moz-animation-duration:36s;
}
.ring .p1 {-moz-animation-name: enlargeMe12;}
.ring .p2 {-moz-animation-name: enlargeMe11;}
.ring .p3 {-moz-animation-name: enlargeMe10;}
.ring .p4 {-moz-animation-name: enlargeMe9;}
.ring .p5 {-moz-animation-name: enlargeMe8;}
.ring .p6 {-moz-animation-name: enlargeMe7;}
.ring .p7 {-moz-animation-name: enlargeMe6;}
.ring .p8 {-moz-animation-name: enlargeMe5;}
.ring .p9 {-moz-animation-name: enlargeMe4;}
.ring .p10 {-moz-animation-name: enlargeMe3;}
.ring .p11 {-moz-animation-name: enlargeMe2;}
.ring .p12 {-moz-animation-name: enlargeMe1;}
@-moz-keyframes rotateMe {
0% { -moz-transform: rotateY(0deg);}
8.33% { -moz-transform: rotateY(30deg);}
16.66% { -moz-transform: rotateY(60deg);}
24.99% { -moz-transform: rotateY(90deg);}
33.33% { -moz-transform: rotateY(120deg);}
41.66% { -moz-transform: rotateY(150deg);}
49.99% { -moz-transform: rotateY(180deg);}
58.33% { -moz-transform: rotateY(210deg);}
66.66% { -moz-transform: rotateY(240deg);}
74.99% { -moz-transform: rotateY(270deg);}
83.33% { -moz-transform: rotateY(300deg);}
91.66% { -moz-transform: rotateY(330deg);}
100% { -moz-transform: rotateY(360deg);}
}
@-moz-keyframes enlargeMe1 {
0% {-moz-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
5.33% {-moz-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
8.33% {-moz-transform: rotateY(330deg) scale(2) translate3d(-190px, 0, 0);}
11.33% {-moz-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe2 {
0% {-moz-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
13.66% {-moz-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
16.66% { -moz-transform: rotateY(300deg) scale(2) translate3d(-190px, 0, 0);}
19.66% {-moz-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe3 {
0% {-moz-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
21.991% {-moz-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
24.99% {-moz-transform: rotateY(270deg) scale(2) translate3d(-190px, 0, 0);}
27.99% {-moz-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe4 {
0% {-moz-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
30.33% {-moz-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
33.33% {-moz-transform: rotateY(240deg) scale(2) translate3d(-190px, 0, 0);}
36.33% {-moz-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe5 {
0% {-moz-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
38.66% {-moz-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
41.66% {-moz-transform: rotateY(210deg) scale(2) translate3d(-190px, 0, 0);}
44.66% {-moz-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe6 {
0% {-moz-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
46.99% {-moz-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
49.99% {-moz-transform: rotateY(180deg) scale(2) translate3d(-190px, 0, 0);}
52.99% {-moz-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe7 {
0% {-moz-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
55.33% {-moz-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
58.33% {-moz-transform: rotateY(150deg) scale(2) translate3d(-190px, 0, 0);}
61.33% {-moz-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe8 {
0% {-moz-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
63.66% {-moz-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
66.66% {-moz-transform: rotateY(120deg) scale(2) translate3d(-190px, 0, 0);}
69.66% {-moz-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe9 {
0% {-moz-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
71.99% {-moz-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
74.99% {-moz-transform: rotateY(90deg) scale(2) translate3d(-190px, 0, 0);}
77.99% {-moz-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe10 {
0% {-moz-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
80.33% {-moz-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
83.33% {-moz-transform: rotateY(60deg) scale(2) translate3d(-190px, 0, 0);}
86.33% {-moz-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe11 {
0% {-moz-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
88.66% {-moz-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
91.66% {-moz-transform: rotateY(30deg) scale(2) translate3d(-190px,0, 0);}
94.66% {-moz-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe12 {
0% {-moz-transform: rotateY(0deg) scale(2) translate3d(-190px, 0, 0);}
3% {-moz-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
96.9% {-moz-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
97% {-moz-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(0deg) scale(2) translate3d(-190px, 0, 0);}
}

Selanjutnya untuk kode pemanggil anda bisa letakkan dimana saja mau di posting, sidebar dll

Oke cukup itu saja.. Semoga bermanfaat
Sumber : Buku catatan Si ugi

Javascript Popup Window Dengan Animasi

type='html'>

udah berapa hari ya saya gak posting.. hehe soalnya saya gak ada bahan dan sekarang baru dapat oke udah pernah kan klik button yang nantinya keluar popup window yang saya posting kali ini beda tampilannya dengan animasi ini sob, oke kalo mau lihat tinggal klik aja demo berikut. Cekidot

                                                                                   

kalo mau buat tinggal ikuti aja tutor berikut

• Loggin blogger.com > rancangan > edit html
• cari kode lalu pastekan kode berikut diatasnya

Custom Font Dengan Google Web Font Dan Penggunaanya

type='html'>sebenarnya ini udah lama tapi karena banyak request ya share dah.. langsung aja tampa memperpanjang waktu langsung aja ikuti tutor di bawah ini oke

langsung ke sini  google web font

disitu sobat pilih font yang sobat suka lalu klik Quick-use jadi tampilannya akan seperti ini

nak sobat scroll sedikit kebawah dan lihat kodenya

sobat tambahkan / di ujungnya maka akan seperti ini 

letakkan kode tersebut dibawah atau diatas

nah sobat tinggal ganti deh font family sobat dengan font family yang dari google web font

oke jika masih kurang jelas silahkan komen di bawah

Membuat Menu Melayang Dengan Efek Fade Out

type='html'>Malam sobat, ok artikel kali ini berjudul  Membuat Menu Melayang Dengan Efek Fade Out  menu ini mungkin belum banyak di share blog-blog mudah mudahan Cyber-JM yang pertama. Amin hehe menu ini terletak di bagian atas dan tetap. jika di scroll menu ini akan ber efek Fade out ha gimana gimana, mau? oh masih penasaran bentuknya langsung aja lihat demo ya

[DEMO]

udah lihat kan ? mau ? oke ke proses langsung

Loggin blogger.com > Rancangan > Edithtml

Cari kode ]]> dan pastekan kode berikut diatasnya

/*Nav Cyber-JM Start */
#nav{
    height:35px;
    border-bottom:1px solid #ddd;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    background:#fff url() repeat-x center left;
    z-index:999999;
}
#nav ul{
    height:25px;
    list-style:none;
    margin:6px auto 0px auto;
    width:600px;
}
#nav ul li{
    display:inline;
    float:left;
    margin:0px 2px;
}
#nav a{
    font-size:11px;
    font-weight:bold;
    float:left;
    padding: 2px 4px;
    color:#999;
    text-decoration: none;
    border:1px solid #ccc;
    cursor: pointer;
    background:transparent url() repeat-x center left;
    height:16px;
    line-height:16px;
}
#nav a:hover{
    background:#D9D9DA none;
    color: #fff;
}
#nav a.top span, #nav a.bottom span{
    float:left;
    width:16px;
    height:16px;
}
#nav a.top span{
    background:transparent url(http://www.showofthemonth.com/images/top_button.gif) no-repeat center center;
}
#nav a.bottom span{
    background:transparent url(http://cdn1.iconfinder.com/data/icons/bnw/64x64/actions/bottom.png) no-repeat center center;
}
/*Nav Cyber-JM End */ 

Lalu cari kode lalu pastekan kode berikut diatasnya

 

 
• Link 1

  
• Link 2 

  
• Link  3

  
• Link  4

  
• Link  5

   

 
  
     
 

 

Kalo sudah lalu  ya

Semoga Bermanfaat