Flash Animated Label Cloud

Widget Tagcloud Flash Animasi ini sepertinya trinspirasi dan mengadopsi kemampuan dan kinerja tagcloud cumulus. Dibuat lebih praktis dalam penggunaan. Pengguna widget tak lagi perlu memasukkan link menu yang akan ditampilkan satu persatu seperti yang harus dilakukan ketika menggunakan tagcloud cumulus. Anda hanya perlu memasukkan alamat blog dan secara otomatis tagcloud animasi flash ini akan bekerja memanfaatkan data label posting blogger anda. Dengan model baru seperti ini, tagcloud flash animasi yang mirip tagcloud cumulus ini menjadi pilihab alternatif yang cukup menarik bagi siapapun.

Flash Labels by Way2Blogging

Javascript dan xHTML Tagcloud Flash Animasi:

<div id="w2bFlashContent"><p style="display:none;">Flash Labels by <a href="http://www.way2blogging.org/">Way2Blogging</a></p></div>
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
blogurl       : "http://mitrabarayaonline.blogspot.com/", /* ganti dg alamat blog anda */
color          : "000000", /* warna link menu  */
hoverColor     : "f00f00", /* hover link menu */
backgroundColor: "FFFFFF", /*  background */
size           : 10, /* ukuran font */
speed         : 100, /* kecepatan animasi */
width          : 300, /* lebar label cloud animasi */
height         : 300 /* tinggi label cloud animasi */
};
/*]]>*/
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-new-flash-label-cloud.js"></script>

Cara menggunakan label cloud animasi

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Anda akan menjumpai halaman untuk menambah gadget, klik "Add a Gadget/Tambah Gadget".
4. Sebuah window baru akan terlihat dengan beberapa pilihan gadget. Cari dan klik "HTML/Javascript".
   
   • Copy dan paste-kan javascript dan xHTML dalam box HTML/Javascript.
   • Ganti http://mitrabarayaonline.blogspot.com dengan alamat blog anda.
   • Klik "SIMPAN/SAVE".
5. Buka blog dan lihat hasil penambahan widget recent comments.

Catatan/Keterangan :

1. Sesuaikan lebar kolom yang tersedia dengan mengatur lebar widget label cloud (pengaturan lebar di javascript!).
2. Pengaturan warna teks, hover dan beberapa yang lain juga terdapat di javascript.

Sumber :
http://www.way2blogging.org

Cara menambah gadget di blogger

Ini adalah sebuah tutorial blogger sederhana tentang cara menambah gadget blogger. Diharapkan panduan dan tutorial blogger ini dapat memberi manfaat bagi blogger-blogger yang baru memulai menerjuni dunia blogging. Tak terlalu banyak memang yang bisa diberikan melalui tulisan ini, hanya sekedar penambah informasi dan pengenalan blogger baru terhadap blog dan elemen-elemen pembentuknya.

Sebelum membahas lebih lanjut tentang cara menambah sebuah gadget (add a gadget) di blogger, rasanya akan lebih menarik seandainya kita sedikit mendalami apa yang dimaksud dengan gadget. Ini menjadi sangat menarik karena membicarakan tentang gadget tentu tak akan lepas dari istilah lain yang hampir serupa, yaitu "Widget". Beberapa kali penulis telah mencoba untuk memastikan "apakah gadget dan widget ini sama?", namun hingga saat ini tak satupun sebuah panduan atau tutorial yang menjelaskan "gadget dan widget" ini secara gamblang.

Karena berbagai keterbatasan informasi tentang dua istilah ini, penulis akhirnya mencoba untuk menterjemahkan pengertian keduanya berdasarkan apa yang selama ini ketahui.

Widget adalah sekumpulan kode html yang terdiri dari kode CSS, javascript dan xHTML atau slah satu dari ketiga elemen html di atas yang mempunyai fungsi khusus (tertentu) dan diperuntukkan untuk melengkapi fungsi blog/web yang sebelumnya belum ada (terpasang). Ini akan berbeda dengan gadget karena sebuah gadget sekalipun tersusun atas elemen yang sama namum belum tentu menjalankan sebuah fungsi khusus yang sebelumnya belum ada di blog/web. Pemahaman ini didasari atas ketersediaan gadget di blogger, dimana salah satu di antaranya adalah "gadget HTML/Javascript". Gadget ini adalah sebuah kenyataan bahwa "sebuah gadget" belum tentu merupakan kumpulan terpadu kode html dengan fungsi yang langsung dapat bekerja, karena bahkan setiap pemilik blog dapat menambahkan atau menyimpan sembarang kode html di dalam "Add a Gadget HTML/Javascript". Termasuk di dalamnya bahkan kode html yang sama sekali tak berkaitan dengan fungsi-fungsi blog (kode yang tak berguna).

Gadget dan widget banyak yang disediakan oleh blogger (blogger plugin) dan dapat anda akses melalui fitur "Rancangan (Design) | Elemen Laman (Page Elements) | Tambah Gadget (Add a Gadget). Anda dapat memilih dan memasang salah satu atau beberapa gadget sekaligus yang memang dibutuhkan untuk memberikan kenyamanan bagi pengunjung untuk menjelajahi dan menikmati semua posting. Beberapa situs juga menyediakan berbagai widget berbayar atau gratis. Tentu saja banyak diantaranya yang terlihat lebih menarik dan lebih baik jika dibandingkan dengan yang telah disediakan oleh blogger. Jika anda tertarik dan ingin menggunakan widget dari luar yang sudah disediakan blogger, anda bisa memanfaatkan "Gadget HTML/Javascript".

Cara Menambah Gadget Blogger
Klik setiap gambar untuk memperbesar!

1. Langkah pertama yang harus dilakukan tentunya adalah login di blogger karena semua penambahan gadget hanya bisa dilakukan setelah kita masuk di halaman dasbor. Untuk login ke blogger anda bisa klik di sini. Tuliskan alamat email secara lengkap jika anda menggunakan email selain dari google mail (yahoo mail, dll) dan cukup tuliskan user name jika anda gunakan email dari gmail. Tuliskan juga password anda di box yang kedua. Buatlah password yang sama seperti yang digunakan di email agar tak mudah lupa. Setelah semua lengkap dan benar, klik "Sign in".
2. Dasbor (Dasboard).
   Halaman ini akan anda jumpai setelah login. Beberapa fitur blogger tersedia di sini, diantaranya Posting, Comments, Settings, Design, Monetize, Stats, dll. Cari dan klik "Rancangan (Design)".
3. Add and Arrange Page Elements:
   Disinilah semua penambahan gadget/widget bermula. Halaman ini terdiri atas beberapa elemen penyusun blog. Anda bebas untuk menentukan sendiri dimana gadget akan di tambahkan. Elemen yang paling sering digunakan adalah pada bagian sidebar (kiri dan/atau kanan. Untuk gadget yang berfungsi sebagai tab menu horizontal (Link List, Blog List dan Pages) secara khusus ditempatkan di bawah header. Cobalah untuk klik salah satu "Add a Gadget" dan tunggu beberapa saat hingga window baru terbuka.
4. Tambahkan sebuah gadget (Add a Gadget):
   Banyak pilihan gadget yang tersedia, salah satu di antaranya HTML/Javascript. Cobalah dulu dengan gadget yang lain karena "Gadget HTML/Javascript" hanya digunakan untuk menambahkan widget atau kode html yang berasal dari luar blogger. Anda bisa mencobanya dengan menambahkan gadget "Label", kenudian untuk selanjutnya anda bisa mencoba yang lain. Cobalah sebanyak-banyaknya karena anda bisa menghapus widget ini kembali.
5. Klik "SIMPAN (SAVE)".
6. Lihat hasil penambahan gadget dengan membuka blog!

jQuery Auto Hide Box with Controll

jQuery auto hide box with controll merupakan sebuah desain yang berfungsi menampilkan box yang didalamnya berisi berbagai informasi dalam bentuk teks, image atau kode html. Box ini akan terlihat selama beberapa saat setelah blog dibuka. Lama waktu box terlihat serta posisi box dapat diatur melalui javascript, sedang ukuran box diatur dengan kode CSS. Jika dalam blog anda sudah menggunakan jQuery versi 1.3.2 hingga versi 1.7.1, maka anda cuma perlu menambah javascript dan kode css saja, karena dalam satu blog hanya memerlukan 1 buah jQuery. Untuk menghilangkan box dari halaman blog secara manual, jQuery auto hide box with controll dilengkapi dengan sebuah controll. Conroll tersebut terletak di ujung kanan-bawah box. Dengan sekali klik maka box akan menghilang tanpa perlu menunggu auto hide bekerja.

Tutorial :
Back to tutorial

Come up calm, at TV may not mean not may have a party with friend. in a few photo that taken at a online forum, pretty artist Naysila Mirdad, always come up elegant, sweet and polite in every the character at sinetron appear a little dare at several photos.
In these days of g-strings and styles are becoming fashion chain

CLOSE

mitrabarayaonline Auto Hide Box bisa di gunakan untuk menyampaikan pesan, iklan atau bentuk yang lain, dimana materi di dalamnya bisa berupa gabungan teks dan image.
Box akan menghilang setelah 40 detik. Apabila ingin menghilangkannya secara manual silahkan:

CLOSE

Create body background using javascript

Umumnya, membuat atau menambah sebuah background image pada body dilakukan menggunakan kode CSS, namun kali ini kita akan membuatnya menggunakan javascript. Sangat simple dan amat mudah menggunakannya. Letakkan dan simpan javascript di atas kode </body> dan segera buka blog untuk melihat bagaimana javascript ini bekerja. Jika anda tak merubah image yang digunakan sebagai background pada javascript, maka halaman blog anda akan terlihat seperti di blog ini (lihat di sisi kanan dan kiri halaman yang background-nya terlihat seperti dari bahan serat kayu/wood.

Template Tata Letak :

Javascript :

<script type="text/javascript">
if (document.all||document.getElementById)
document.body.style.background="url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_jEff7c7LPmhXMT0ssWC26Fxd-Ze1YNxM2EIbkePziDiUwwC3kWKWMl4mehkmFhZaUKSXV_Oe-_PiBKtH9eebnVgifqxloAp7c4DIz6yZuvYPMXKTTIX9lzUxBSRyWLadanZdjb89OeVy/s128/CRINKLEP.JPG') center repeat"
</script>

Blogger Template Designer :

Javascript :

<script type="text/javascript">
document.write("<style>.body-fauxcolumn-outer .cap-top{z-index:0;opacity:0.0;filter:alpha(opacity=0);</style>");
if (document.all||document.getElementById)
document.body.style.background="url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_jEff7c7LPmhXMT0ssWC26Fxd-Ze1YNxM2EIbkePziDiUwwC3kWKWMl4mehkmFhZaUKSXV_Oe-_PiBKtH9eebnVgifqxloAp7c4DIz6yZuvYPMXKTTIX9lzUxBSRyWLadanZdjb89OeVy/s128/CRINKLEP.JPG') white center repeat"
</script>

Baraya Tutorial :
Back to tutorial

Create heading style with effect using CSS3

Lightbox demo dan tutorial

Link di atas adalah salah satu contoh penggunaan heading style with effect yang dimanfaatkan sebagai sebuah link. Jika anda mengarahkan cursor pada link di atas maka akan terlihat effek yang tercipta berupa opacity effect yang digabungkan dengan css3 transition. Pada dasarnya heading style with effect dapat digunakan tidak hanya sebagai sebuah pembentuk/box bagi judul/title sebuah paragraf saja namun bisa dimanfaatkan untuk banyak hal dalam blog. Termasuk di bawah ini, yang digunakan sebagai sebuah judul/title.

Kode CSS Heading Style with Effect

Kode CSS :

h4.baraYAhead{
        font-family:Times New Roman; 
        font-size:18px; 
        font-weight:bold; 
        padding:5px  0; 
        border-bottom:1px solid #aaa; 
        border-left:30px solid #aaa; 
        opacity:0.7;
        filter:alpha(opacity=70);
        border-top-left-radius:4px;
        border-bottom-left-radius:4px;
}
h4.baraYAhead:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        border-color:#900;
}
h4.baraYAhead,h4.baraYAhead span{
        transition:0.8s linear;
        -o-transition:0.8s linear;
        -moz-transition:0.8s linear;
        -webkit-transition:0.8s linear;
        -ms-transition:0.8s linear;
}
h4.baraYAhead span{
        border-top-right-radius:5px;
        padding:3px 10px;
        margin-left:3px;
        margin-top:-5px;
        display:block;
        color:#900;
        border-top:3px solid #888;
        border-right:2px silid #888;
        background:#555;
}
h4.baraYAhead:hover span{
        color:#orange;
        background:#aaa;
}

Tutorial :

Back to tutorial » Heading style with effect