Membuat dan Memasang Menu Mac Doc di Blog

Pernahkan kamu melihat tampilan blog yang cantik dengan hiasan berupa menu yang jika disorot akan membesar dengan efek transisi yang halus? 

Kalau pertanyaan itu diberikan pada saya maka saya jawab, iya, bahkan saya sangat tertarik ingin mencobanya. Menu tersebut lebih terkenal dengan istilah Mac Doc, karena mungkin ide awalnya mencontek menu-menu Doc dari tampilan OS Mac.

Kemudian, setelah cukup lama saya mempelajarinya akhirnya hari ini saya pasang juga hasil kreasi unik tersebut disalah satu blog saya. Namun di blog saya tersebut bukan menu-menu profil atau semacamnya yang saya pasang, menu yang saya pasang saya gunakan untuk menampilkan tombol-tombol jejaring sosial, sehingga bagi pengunjung yang ingin berinteraksi lebih lanjut dengan kita melalui jejaring-jejaring sosial tersebut dapat langsung klik melalui menu Doc tersebut.

a. Tampilannya:

Menu yang tersedia disini meliputi: Delicious, Digg, Facebook, Reddit, Technorati, Twitter, Google +, dan bonus untuk menu menuju halaman Kontak, dan juga RSS Feed. Kurang lebih tampilannya sebagai berikut:

Tampilan menu mac doc

b. Cara memasangnya:


Jika anda ingin memasangnya caranya sangat mudah, cukup Copy saja Script kode berikut ini, lalu masukkan ke widget blog anda. 


Memasukkan ke widget juga sangat mudah, dari halaman Design - Element Laman, lalu tambahkan Gadget, pilih HTML/Javascript. Pastekan script berikut didalamnya, lalu Save.

Kodenya Gan:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://wahyuwinoto.googlecode.com/files/tampilan.js"></script> <style> /* social media melayang */ .macsosial { position:fixed; top: 5px; } #dock2 { width: 100%; bottom: 0px; left: 0px; } .dock-container2 { height: 60px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVEm5zdBYd0-2jWiOOOvYlBO1zijgV6wx1Rc59YkSkt9RbgBJEisi4dSs2O1x8VE3ZZ5nY2_Z3NvjMBxe40X15YPyczNZ9og7KzySm6gucGojhhaLlBNvglk_bm4HtzVpw8ls4ESEIZd8/s1600/quote.jpg); 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%; } </style> <div class="macsosial"> <div class="dock" id="dock2"> <div class="dock-container2"> <a class="dock-item2" href="ISI DENGAN URL ANDA"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiku2680WfXCmncmJNdU6YKn0I1a3rzsO_hyXbqpDU71y5Fg58bfUOSHRNHC2tFwnmHw8uaaeMQ7y8dA11obj2k1-eUPkTg0rU-R-bLeDeXF3tTd1ki2_ukwYoGnnEjdlPJMhQ6pXQKv4k/s1600/delicious.png" alt="delicious" />Delicious</a> <a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyJuc9DCdWWtrLpq4zglBtfxv5Sla3tCBFyeweCm75eng047rd7sYbpzGgSixlxJonj8CjnaF6BKyoLdPTv2mlCwcGplynGzoQnZFGBleQhMgIothnjJxI3TtcGDCY0MmEry8l_PAHDgs/s1600/Digg.png" alt="Digg" />Digg</a> <a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbxEYHzkO6vTckgWr_krDmUI9XPmNfv0yFK799wU7yaQ12KSLjuFMynKL_wOS6ZmLtSouQx2BE3kIOgNyl4uJGA9qKx1ryPLM9q3EvljC1IEaNCVkazWX_2LksYrwsrspBr2son-Sekq8/s1600/facebook.png" alt="facebook" />Facebook</a> <a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVzW5r-hpp9oAuc6ZagIf32aMR8s5R73sKAkdCYytNFx28_u_sFxCiJI2xjG0YhAdVpzw1ZJzzgskNmf6r9rWY0A_d869tHYYpoPZGwZD6oLl6e2F_4xp0RwQdM6mYvOkRZQRAMxfXUrY/s1600/reddit.png" alt="reddit" />Reddit</a> <a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvP8VLx91PbtUd9mgxmwkZ2ui_o5b_BAl_s6OnM8tOS-nQSCbyUIcceIzWHT9WQilIH5-eacKnC78MiF83Wjg7Avm1KKtK1CqjaUMPnuF8a3lU9uSJc7cC8YN6E7PQdszi87UMHFqleFg/s1600/Technorati.png" alt="Technorati" />Technorati</a> <a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgju1pZKRUm5gSOyVzZ2w3QRVlD5bqhq13WIcplXc8LF80W0U-pN2gPaA7h9W38yWQLtE24gyULY7iICuJs7RWu01e6E_Blq3i3NvDwkv6cJJbcIVnMfcsETvIm5xIfOWuos4QfWGG2UeE/s1600/twitter.png" alt="twitter" />Twitter</a> <a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrH_jtv2ntH1ySrWszTrEqD7pXM_UQGfZ-AUf0QelUECQWIJQxH97V5vHmAzhSLoGwXfZG86uOtjcRwHaaNTtMr6FiPlB8rs9VEBoYvUZXX80CfzBQfLKbKqc59k8n39nUPKzYhPGO6rw/s1600/googleplus.png" alt="googleplus" />Google +</a> <a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTMKZSOS0l27ejWPpAAiajcDEPkaVOFrtIIf0eTt2AwqfRMQh-BhIqdGtXSXju-AGkB7scDAw7Nql4K1c-M8xvIkuFbJ_ggxqS-iqSRCf89Sm-x_8Vde-Ce8baviIjH79GKyHHi7Ekdk/s1600/email.png" alt="Email" />Kontak</a> <a class="dock-item2" href="ISI DENGAN URL ANDA"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWyAn5HkJOJSYJkdhKasg7COTMrwmnCSB631a4gDJegLRZC49n8V8tcDT2F-VF8tRWEiFpiwMb8p1MvGL80uOLPZnB8V-T1lLTk2wCE94zRzFw0Mk0s7osUFYzSPJGyFwMQTRdErx2l3A/s1600/rss2.png" alt="rss" />RSS</a> </div> </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: 'top', halign : 'center' } ) } ); </script>

c. Modifikasi

Anda dapat juga memodifikasi tampilannya, misal pada bagian :

- valign: 'top', bisa anda ganti dengan valign: 'bottom', jika anda ingin agar Mac Doc tersebut tampil dibawah halaman. 

- Panjang atau lebarnya bisa juga nada sesuaikan tinggal mengganti angka-angka dalam kode diatas.

- Kemudian, misalnya anda kurang suka dengan gambar-gambar dalam menu tersebut dan ingin menggantinya caranyapun sangat mudah, anda tinggal ganti URL gambarnya dengan URL gambar punya anda sendiri, contoh gambar-gambar yang bisa anda gunakan untuk membuat menu Mac Doc cantik misalnya:

Berikut ini contoh gambar menu-menu yang bisa anda jadikan referensi sesuai dengan jenis menu yang ingin anda buat, misal untuk menu Arsip, Menu Kontak, Menu Link, Menu Mobile, Download, Musik, Profil, Foto, RSS dan sebagainya:

Gambar diatas hanya contoh saja, anda bisa nanti menggantinya dengan gambar koleksi sendiri.

Selamat bereksperiment dengan membuat tampilan menu mac doc untuk memperindah tampilan blog anda.

Cara Membuat Link Blog Berkedap-kedip Warna Pelangi

Bagaimana cara membuat Link berkedap-kedip dan berwarna pelangi? caranya sangatlah gampang, tidak sesulit yang kita bayangkan. Ikuti langkah berikut, hanya kita tinggal coppy dan pastekan kode berikut. Paling cuma 5 menit selesai. Ayo buktikan...
Seperti biasa :
1. Log in ke Blog,
2. Klik menu Template,
3. Klik menu Edit Html,
4. Cari kode <head >
5. Copy kode di bawah ini dan pastekan persis dibawah kode <head> 

Kodenya Gan:

<script src='http://www.geocities.com/mailforyay/rainbow.js'/>

7. Klik Terakhir Simpan Template.
Selamat mencoba...

Klo Tidak bisa,
Coba Cara ini :
Pilih Tata Letak >>Page Elemen > Tambah Gadget >> Pilih  HTML/JavaScript >> Paste Kode diatas!!! >> Simpan !!
Selesai.

Cara membuat iklan melayang dengan tombol close

Iklan ? pasti anda sering menjumpai berbagai macam iklan di webisite / blog ? pernahkah terlintas di pikiran anda , bagaimana acara membuatnya ?
Kalau ada yang belum tahu iklan melayang ,
Mungkin rekan blogger pernah melihat tutorial ini, memang setau saya ada yang lebih rumit menggunakan banyak kode, tapi disini saya coba memberikan tips yang lebih mudah dan sangat simple bahkan bagi anda blogger yang baru mengenal pengkodean pasti bisa melakukannya, ok saya akan segera memberikan tutornya, nih ikutin saja langkahnya :

1. Login Ke Blogger.com dengan Akun anda masing-masing Pastinya
2. Masuk ke Tab Tata Letak
3. Pilih Elemen Halaman/Rancangan
4. Tambah Gadget Pilih HTML / JAVASCRIPT
5. Dan Copy kode di bawah ini kedalamnya yah

Kodenya Gan:

&lt;style type=&quot;text/css&quot;&gt; #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:right; border:2px solid #A5BD51; background:#ffffff; padding:10px; } &lt;/style&gt; &lt;script type=&quot;text/javascript&quot;&gt; function showHideGB(){ var gb = document.getElementById(&quot;gb&quot;); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById(&quot;gb&quot;); var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1; var dir = xf&gt;x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.top = x.toString() + &quot;px&quot;; if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);} } &lt;/script&gt; &lt;div id=&quot;gb&quot;&gt; &lt;div class=&quot;gbtab&quot; onclick=&quot;showHideGB()&quot;&gt; &lt;/div&gt; &lt;div class=&quot;gbcontent&quot;&gt; &lt;div style=&quot;text-align:right&quot;&gt; &lt;a href=&quot;javascript:showHideGB()&quot;&gt; .:[Close][Klik 2x]:. &lt;/a&gt; &lt;/div&gt; &lt;center&gt; Masukan Kode iklan atau Gambar yang anda inginkan di sini &lt;/center&gt; &lt;script type=&quot;text/javascript&quot;&gt; var gb = document.getElementById(&quot;gb&quot;); gb.style.center = (30-gb.offsetWidth).toString() + &quot;px&quot;; &lt;/script&gt;&lt;/center&gt;&lt;/div&gt;&lt;/div&gt;

6. Simpan

Semoga BERHASIL :)

dan andapun bisa berbisnis di web anda sendiri dengan iklan melayang ini !!
semoga sukses yah !!

Cara membuat Widget Toolbar Elegan di Blog

Wibiya - salah satu website yang menyediakan fasilitas free toolbar untuk blog Anda, toolbar dari wibiya ini sangat canggih. Fitur dari toolbar wibiya ini diantaranya : pencarian langsung, who's online, live video, translate, timeline, Bermacam-macam Facebook widget, twitter, youtube, Live chat dan foto sharing kamu. Hmmm canggih bukan toolbar ini? Untuk demonya silakan lihat blog ini bagian bawah yang melayang, ada tools yang berisi pencarian, who's online, facebook, live chat dll.

Setelah Anda melihat-lihat apakah Anda ingin memasangnya kedalam Blogger Anda? Nah dibawah ini ulasan cara membuatnya.

* Buka website wibiya.com dan klik tombol "Get It Now"
* Pada Form "Create An Account" isi form sesuai dengan data Anda lalu kik tomblol

"Next"

* Lalu milih tema toolbar Anda pada bagian "Select A Theme" Lalu klik tombol "Next"
* Pada bagian "Application Setting" configurasi account-account Anda kedalam toolbar tersebut, Seletlah itu klik tombol "Next"
* Pada bagian "Add it" atau final installation klik logo "Blogger" atau install on

blogger

* Pastikan Anda sudah Log in blogger untuk memasang widgetnya, setelah Anda klik

logo blogger pada tahap Final, Anda langsung ditujukan pada "Import page elements" blogger

* Select blog yang Anda ingin pasang Toolbarnya, Lalu klik tombol "Add Widget" maka

toolbar akan terpasang otomatis dan melayang di bagian bawah blog Anda.

Nah selesai deh ulasan tentang cara membuat Toolbar canggih wibiya, toolbar ini banyak digunakan oleh para pemilik website untuk mempercanggih websitenya, jadi blog kita jika menggunakan toolbar ini serasa seperti di Facebook.

SELAMAT MENCOBA...
TERIMA KASIH.

Cara Membuat Efek Loading Page Pada Blogger

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ

Cara Membuat Efek Loading Page Pada Blogger. Buat para blogger yang senang dengan efek-efek yang lumayan menarik, nih Saya punya trik yaitu Cara Membuat Efek Loading Page Pada Blogger.


Mau tau previewnya??? ok ok nih contohnya bisa dilihat DISINI

Gimana??? sobat tertarik kah????



klo iya nih langsung aja ya Cara Membuat Efek Loading Page Pada Blogger

• login blog
• buka menu rancangan >> edit HTML
• lalu cari kode </head>
• dan letakkan kode dibawah ini tepat diatas kode </head>

Kodenya Gan:

<!-- Loading Page Script – vikrymadz – http://vikrymadz.blogspot.com --> <style type="text/css"> /* add loading image */ body { background:#4B4B4B url(http://static.int.crazydavinci.net/images/loading.gif) no-repeat fixed center; } /* hide page div */ #page{ display:none; } </style> <script type="text/javascript"> function css(classORid,rules){ try{ var css=document.createElement("style"); css.innerHTML=classORid+"{"+rules+"}" document.body.appendChild(css); } catch(e){} try{ document.styleSheets[document.styleSheets.length-1].addRule(classORid,rules); } catch(e){} } function loaded(){ css("#page","display:block!important"); css("body","background:#000 url()"); } if(window.addEventListener)window.addEventListener("load",loaded,false); else if(window.attachEvent)window.attachEvent("onload",loaded); else if(document.getElementById)window.onload=loaded; </script>

• lalu cari kode <body>
• lalu letakkan kode dibawah ini dibawah kode diatas
<div id="page">
• cari lagi kode </body>
• dan taruh kode </div>  diatas kode </body>
• simpan deh...

Cara Membuat Sliding Login/Register Form Panel di Blog

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ
Cara Membuat Sliding Login/Register Form Panel di Blog . Bagi sobat yang pengen mempercantik blognya dengan menu register buat pengunjung setia-setianya,  kali ini akan share mengenai Cara Membuat Sliding Login/Register Form Panel di Blog.



Register disini maksudnya yaitu agar pengunjung blog sobat bila ingin ikut menuliskan pengetahuan mereka di blog kita agar lebih mudah. Karena klo untuk login di blogger kan tidak semuanya yang memiliki akun di blogger.

untuk screen shootnya dibawah ini sob.

Gimana apakah sobat tertarik???
ya klo tertarik tak share caranya nih, tp klo kagak yaaaa... cari artikel yang lain dulu deh, jangan buru ninggalin blog ini wkwkwkwkwkwkwkw
Cara Membuat Sliding Login/Register Form Panel di Blog
1. login blog
2. buka menu rancangan >> edit HTML (centang "Expand Template Widget")
3. cari kode ]]></b:skin>
4. letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

Kodenya Gan:

***** clearfix *****/ .clear {clear: both;height: 0;line-height: 0;} .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ .clearfix {height: 1%;} .clearfix {display: block;} /* Panel Tab/button */ .tab { background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_b.png) repeat-x 0 0; height: 42px; position: relative; top: 0; z-index: 999; } .tab ul.login { display: block; position: relative; float: right; clear: right; height: 42px; width: auto; font-weight: bold; line-height: 42px; margin: 0; right: 150px; color: white; font-size: 80%; text-align: center; } .tab ul.login li.left { background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_l.png) no-repeat left 0; height: 42px; width: 30px; padding: 0; margin: 0; display: block; float: left; } .tab ul.login li.right { background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_r.png) no-repeat left 0; height: 42px; width: 30px; padding: 0; margin: 0; display: block; float: left; } .tab ul.login li { text-align: left; padding: 0 6px; display: block; float: left; height: 42px; background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_m.png) repeat-x 0 0; } .tab ul.login li a { color: #15ADFF; } .tab ul.login li a:hover { color: white; } .tab .sep {color:#414141} .tab a.open, .tab a.close { height: 20px; line-height: 20px !important; padding-left: 30px !important; cursor: pointer; display: block; width: 100px; position: relative; top: 11px; } .tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left 0;} .tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left 0;} .tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left -19px;} .tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/css/../images/bt_close.png) no-repeat left -19px;} /* sliding panel */ #toppanel { position: absolute; top: 0; width: 100%; z-index: 999; text-align: center; margin-left: auto; margin-right: auto; } #panel { width: 100%; height: 270px; color: #999999; background: #272727; overflow: hidden; position: relative; z-index: 3; display: none; } #panel h1 { font-size: 1.6em; padding: 5px 0 10px; margin: 0; color: white; } #panel h2{ font-size: 1.2em; padding: 10px 0 5px; margin: 0; color: white; } #panel p { margin: 5px 0; padding: 0; } #panel a { text-decoration: none; color: #15ADFF; } #panel a:hover { color: white; } #panel a-lost-pwd { display: block; float: left; } #panel .content { width: 960px; margin: 0 auto; padding-top: 15px; text-align: left; font-size: 0.85em; } #panel .content .left { width: 280px; float: left; padding: 0 15px; border-left: 1px solid #333; } #panel .content .right { border-right: 1px solid #333; } #panel .content form { margin: 0 0 10px 0; } #panel .content label { float: left; padding-top: 8px; clear: both; width: 280px; display: block; } #panel .content input.field { border: 1px #1A1A1A solid; background: #414141; margin-right: 5px; margin-top: 4px; width: 200px; color: white; height: 16px; } #panel .content input:focus.field { background: #545454; } /* BUTTONS */ /* Login and Register buttons */ #panel .content input.bt_login, #panel .content input.bt_register { display: block; float: left; clear: left; height: 24px; text-align: center; cursor: pointer; border: none; font-weight: bold; margin: 10px 0; } #panel .content input.bt_login { width: 74px; background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_login.png) no-repeat 0 0; } #panel .content input.bt_register { width: 94px; color: white; background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_register.png) no-repeat 0 0; } #panel .lost-pwd { display: block; float:left; clear: right; padding: 15px 5px 0; font-size: 0.95em; text-decoration: underline; }

5. lalu letakkan kode dibawah ini tepat dibawah kode ]]></b:skin>

Kodenya Gan:

<script src='http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js' type='text/javascript'/><script style='display:none' type='text/javascript'>$(document).ready(function() { // Expand Panel $(&quot;#open&quot;).click(function(){ $(&quot;div#panel&quot;).slideDown(&quot;slow&quot;); }); // Collapse Panel $(&quot;#close&quot;).click(function(){ $(&quot;div#panel&quot;).slideUp(&quot;slow&quot;); }); // Switch buttons from &quot;Log In | Register&quot; to &quot;Close Panel&quot; on click $(&quot;#toggle a&quot;).click(function () { $(&quot;#toggle a&quot;).toggle(); }); }); </script>

6. lalu cari kode </body>
7. letakkan kode dibawah ini tepat diatasnya

Kodenya Gan:

<!-- Login --> <div id='toppanel'> <div id='panel'> <div class='content clearfix'> <div class='left'> <h1>Welcome In Blogging Is My Life</h1> <h2>Contoh Sliding Login Dengan JQuery</h2> <p class='grey'>Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member</p> <h2>Tutorial Blog</h2> <p class='grey'>Untuk membuatnya Silahkan : <a href='http://vikrymadz.blogspot.com' title='Download'>Klik Disini</a></p> </div> <div class='left'> <form action='#' class='clearfix' method='post'> <h1 class='padlock'>Member Login</h1> <label class='grey' for='log'>Username:</label> <input class='field' id='log' name='log' size='23' type='text' value=''/> <label class='grey' for='pwd'>Password:</label> <input class='field' id='pwd' name='pwd' size='23' type='password'/> <label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Remember me</label> <div class='clear'/> <input class='bt_login' name='submit' type='submit' value='Login'/> <a class='lost-pwd' href='#'>Lost your password?</a> </form> </div> <div class='left right'> <form action='#' method='post'> <h1>Not a member yet? Sign Up!</h1> <label class='grey' for='signup'>Username:</label> <input class='field' id='signup' name='signup' size='23' type='text' value=''/> <label class='grey' for='email'>Email:</label> <input class='field' id='email' name='email' size='23' type='text'/> <label>A password will be e-mailed to you.</label> <input class='bt_register' name='submit' type='submit' value='Register'/> </form> </div> </div> </div> <!-- /login --> <!-- The tab on top --> <div class='tab'> <ul class='login'> <li class='left'/> <li>Halo Semuanya</li> <li class='sep'>|</li> <li id='toggle'> <a class='open' href='#' id='open'>Masuk | Daftar</a> <a class='close' href='#' id='close' style='display: none;'>Tutup Panel</a> </li> <li class='right'/> </ul> </div> <!-- / top --> </div> <!-- panel -->

Sekian dari saya mengenai Cara Membuat Sliding Login/Register Form Panel di Blog. semoga bisa bermanfaat bagi sobat.

Good LUCK ^_^

Cara Membuat Widget Top Artikel / Popular Posts

Widget Top Artikel atau Popular Posts adalah widget yang berfungsi untuk menampilkan daftar artikel yang paling banyak dikomentari oleh pengunjung. 
 Mau?

Berikut Cara Membuat Widget Top Artikel:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML

3. Tambahkan Page Elements dengan HTML/Javascript, lalu paste kode berikut ke dalam kotak content:

Kodenya Gan:

Widget Top Artikel atau Popular Posts adalah widget yang berfungsi untuk menampilkan daftar artikel yang paling banyak dikomentari oleh pengunjung. Cara membuatnya hampir sama mudahnya dengan cara membuat widget top komentator Mau? Berikut Cara Membuat Widget Top Artikel: 1. Login ke akun Blogger anda 2. Plih Layout > Edit HTML 3. Tambahkan Page Elements dengan HTML/Javascript, lalu paste kode berikut ke dalam kotak content: <script type="text/javascript"> function pipeCallback(obj) { document.write('<ol style="text-transform: capitalize;">'); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1a1c6e4e6d4f148e3650fda46910e15f&url=http%3A%2F%2Fmovichreyza.blogspot.com&num=10" type="text/javascript"></script><span style="font-size:9px;"><a href="http://tipsbloggerzacky.blogspot.com">Get this widget!</a></span>

*Keterangan:
- Ganti movichreyza.blogspot.com dengan alamat blog anda tanpa
- Angka 10 menunjukkan jumlah artikel yang tampil pada daftar.

4. Terakhir, klik Save.

Jangan lupa kasih komentar ya...

Mengganti Tulisan Older Post, Newer Post, Home

Tulisan older post, newer post, dan home merupakan navigasi yang muncul di bawah postingan untuk beranjak ke postingan yang baru, lama, dan kembali ke homepage blog. Nha, apa pernah terpikir oleh anda untuk menggantinya dengan sebuah gambar? Saya rasa anda harus melalukannya supaya blog terlihat lebih sempurna dan berbeda dengan blog lainnya. Mau tau caranya?

Berikut Cara Mengganti Navigasi Blog Dengan Gambar:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode berikut:

- <data:newerPageTitle/> ganti dengan
- <data:olderPageTitle/> ganti dengan
- <data:homeMsg/> ganti dengan
Klik disini dan disini untuk men-download gambar / tombol Previous, Next dan Home. Password: TBZ-MBT

5. Terakhir, klik Save Template.

Jangan lupa kasih komentar dan ucapkan terima kasih 

Aplikasi Remote tv dengan HP

Aplikasi ini Hanya Berlaku untuk HP berikut :
LG KS10, Nokia 3250, Nokia 5500, Nokia 5700, Nokia 6110 Navigator, Nokia 6120, Nokia 6121, Nokia 6290, Nokia E50, Nokia E51, Nokia E60, Nokia E61, Nokia E62, Nokia E61i, Nokia E65, Nokia E70, Nokia E90, Nokia N71, Nokia N73, Nokia N75, Nokia N76, Nokia N77, Nokia N80, Nokia N81, Nokia N81 8GB, Nokia N82, Nokia N91, N91 8GB, Nokia N92, Nokia N93, Nokia N93i, Nokia N95, Nokia N95 8GB, Nokia N81, Nokia N96, Samsung i400, Samsung i450, Samsung i520, Samsung i500, Samsung i560.

irRemote mengubah ponsel Anda menjadi sebuah remote control. irRemote memungkinkan penggunaan peralatan audio dan video menggunakan satu perangkat - Symbian smartphone bertindak sebagai port inframerah.

Hal ini sederhana dan intuitif. Cukup pilih perangkat dari daftar dan kontrol menggunakan keypad ponsel. Database yang didukung perangkat disimpan online dan Anda dapat men-download kode baru langsung dari irRemote.

Anda dapat memperluas daftar perangkat yang didukung oleh kode meng-upload untuk mereka melalui online wizard. Kode yang Anda upload dapat didownload langsung dari irRemote dan peringkat oleh pengguna irRemote lainnya.

Cara Menggunkannya Cukup Mudah, Setelah di Download anda hanya membutuhkan Koneksi dari PC ke HP untuk Proses insalisasi lalu HP anda siap menjadi Ponsel Pintar bahkan Menglahkan Kemampuan BB dan Android .

silahkan download disini
password kumpulancaradotcom

Cara Membuat Back to Top Dengan jQuery

Hy semuanya... Masih ingat cara membuat tombol back to top yang telah saya posting dulu? Gimana? Apa anda sudah menggunakannya? Jika sudah atau pun belum, sekarang anda harus baca tips ini dengan baik karena cara membuat back to top kali ini menggunakan jQuery. Di trik lama, gerak back to top yang dihasilkan sangat cepat dan langsung menuju ke atas. Lain halnya dengan jika kita memberi sedikit sentuhan scipt jQuery. Gerak yang dihasilkan akan lebih perlahan dan lembut.

Berikut Cara Membuat Smoothscroll Go to Top

1. Login ke akun Blogger anda

2. Pilih Layout > Edit HTML

3. Cari kode </head> lalu paste kode berikut di atasnya:

Kodenya Gan:

<!-- SCROLLING BACK-TO-TOP --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- jika di template anda sudah terdapat script jQuery 1.3.2, maka anda tidak perlu lagi menambahkan kode ini --> <script type='text/javascript'> $(function(){ $(&#39;a[href*=#top]&#39;).click(function() { if (location.pathname.replace(/^\//,&#39;&#39;) == this.pathname.replace(/^\//,&#39;&#39;) &amp;&amp; location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length &amp;&amp; $target || $(&#39;[name=&#39; + this.hash.slice(1) +&#39;]&#39;); if ($target.length) { var targetOffset = $target.offset().top; $(&#39;html,body&#39;).animate({scrollTop: targetOffset}, 1000); return false; } } }); }); </script> <!-- SCROLLING BACK-TO-TOP END -->

4. Cari kode <body> lalu masukkan atribut id='top' ke dalam tag <body>  maka hasilnya akan seperti <body id='top'>

5. Selanjutnya, cari kode </body> dan paste kode berikut di atasnya:

Kodenya Gan:

<div id='gotop'> <a href='#top' title='Go to Top'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmbmCo5_pwQWjwE5NJqVNuMZQL-7foCuRtbUT4jWASRf8-FygJTS0_rLOqL59Hd-N6RrYJXzu2CE73LzMDLvouc9GAWBglz0zDm_TT8D3Zh8iTGkBTxvv_YtJtawN2g-XHAMKvoPVyGU4/s400/arrow1-blue-32.png' style='right:20px;bottom:20px;position:fixed'/> </a> </div>

Keterangan:
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmbmCo5_pwQWjwE5NJqVNuMZQL-7foCuRtbUT4jWASRf8-FygJTS0_rLOqL59Hd-N6RrYJXzu2CE73LzMDLvouc9GAWBglz0zDm_TT8D3Zh8iTGkBTxvv_YtJtawN2g-XHAMKvoPVyGU4/s400/arrow1-blue-32.png > url gambar
- right:20px; bottom:20px; > posisi gambar pada template adalah 20 pixel dari bawah dan kanan.

info: untuk gambar / tombolnya bisa anda download disini.

6. Terakhir, klik Save Template.

Untuk demonya bisa anda lihat disini.

Social Bookmarking Widget Untuk Homepage

Anda semua tentu sudah paham bahwa saat ini situs-situs social bookmark atau jejaring sosial sangat berperan penting dalam hal meningkatkan trafik blog. Dengan mengirim, membagikan, atau menyimpan link di situs tersebut, kita akan mendapatkan pengunjung yang lebih banyak dan membuat mereka akan selalu mengunjungi blog kita.
Nha, kali ini saya akan menjelaskan cara membuat widget social bookmarking untuk membagikan url homepage blog. Dengan widget ini, kita bisa mengirim url homepage blog kita ke Facebook, Twitter, Digg, Stumbleupon, Linkedin, Yahoo Bookmarks, Google Bookmarks, Reddit, Mixx, Technorati, dan yang terkahir ke Google Buzz. Mau?

Berikut Cara Membuat Social Bookmarking Widget untuk Homepage

1. Login ke akun Blogger anda

2. Pilih Layout > Page Elements

3. Tambahkan Page Elements dengan HTML/Javascript, lalu paste kode di bawah ini ke dalam kotak content.

Kodenya Gan:

<a href="http://twitter.com/home?status=I%20am%20currently%20on:%20Blogger%20Driver%20-%20http://blogger-driver.blogspot.com.%20It's%20a%20great%20blogging%20tips" target="_blank" title="Tweet It!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhofcyxHMEFLr1LdUVXUmutshptzkdZ8-O3OrcjxRHtTHHoBWTvkzhkWZvPulO9cRiFFIEJN1PaeYMPrj4WMQgChu3LHC1TfB4CyaERsgpW4gisAqRkcbpUbbEVC-Jq1lWNZzxxupjcrvA/s400/twitter_32.png" border="0" alt="Twitter" /></a> <a href="javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}" title="Buzz This!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje0UP48zg1bV2vaWQ47CoPEKyqDQtfU-Vr1X8PAvaJBQ1xFe1pDqSmn-7yze5JAC_rJZJikeK1c3eVdKd1rkkow2nrzmdY5v5nea05b4p5xZy77O3rQiijy8CmiFnmqPreVpOHfSuyc6M/s400/googlebuzz.png" border="0" alt="Google Buzz" /></a> <a href="http://del.icio.us/post?url=http://blogger-driver.blogspot.com&title=Blogger%20Driver" target="_blank" title="Bookmark to Delicious"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLGFWmMSSahzbDZybb4r4uAJYexQYg7LmMV2TCdOVfdSQd3MCWP-9jMxmqnFC47Ymxv8yYBxkhuLusDCfS4aKAwbv_1ppEi9GCSCpYQDTPVmTGJuW7JZdku9DozfJwyx5-VRdxSCh099E/s400/delicious_32.png" border="0" alt="Delicious" /></a>

4. Terkahir, klik Save Template.

Untuk demonya bisa anda lihat disini.

Selamat mencoba...

Cara Membuat Label Berputar-putar Di Blog

Salam blogging sobat-sobat ku semua, kali ini saya sedikit share tentang cara membuat label berputar-putar di blog, cara ini sudah banyak di bahas oleh master-master blog terdahulu.

Disini saya hanya mengulas ulang, siapa tahu ada sobat blogger yang belum mengerti, ataupun sudah pernah melihat dan ingin mempraktikkan di blog sobat. Dengan menggunakan cara ini tampilan widget label akan lebih ringkas, dan tidak terlihat terlalu panjang ataupun terlalu lebar, karena lebar dan panjangnya bisa sobat sesuaikan sendiri.
Saya kira cukup sekian saja penjelasan saya, mari kita menuju ke pokok pembahasan yaitu cara membuat label berputar-putar di blog.

Berikut ini langkah-langkah cara membuat label berputar-putar di blog:

1. Seperti biasa sobat harus login dulu di akun blog sobat

2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan

3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

4. Sobat cari kode berikut:

• Untuk template lama cari kode ini: <b:section class='sidebar' id='sidebar' preferred='yes'>

      Untuk template baru cari kode ini:  <b:section-contents id='sidebar-right-1'> 

5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode yang sobat cari tadi

 

Kodenya Gan:

<b:section id='sidebar9' preferred='yes' showaddelement='no'> <b:widget id='Label9' locked='false' title='Label' type='Label'> <b:includable id='main'> <div id='xsnazzy'> <b class='xtop'><b class='xb1'/><b class='xb2'/><b class='xb3'/><b class='xb4'/></b><div class='xboxcontent'&gt; <b:if cond='data:title'> <h2 style='font-family:arial'> Article Categories </h2> </b:if> <div class='widget-content'><center> <script src='http://zuazz.googlecode.com/files/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Blogumulus by <a href='zuazz.blogspot.com/'>Zuaz'Z Creator</a>Distributed by <a href='http://all-trick-blog.blogspot.com/'>Kumpulan trick Blog</a></div> <script type='text/javascript'> var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", " 300 ", " 200 ", "9", " #FFFFFF "); // uncomment next line to enable transparency //so.addParam("wmode", "transparent"); so.addVariable("tcolor", "0x 333333 "); so.addVariable("mode", "tags"); so.addVariable("distr", "true"); so.addVariable("tspeed", "100"); so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style=' 12 '><data:label.name/></a></b:loop></tags>"); so.addParam("allowScriptAccess", "always"); so.write("flashcontent"); </script> <b:include name='quickedit'/> </center></div> </div><!--xboxcontent--> <b class='xbottom'><b class='xb4'/><b class='xb3'/><b class='xb2'/><b class='xb1'/></b> </div><!--end of xsnazzy--> </b:includable> </b:widget>

Keterangan:

• Kode tulisan 300 adalah lebar widget, bisa sobat sesuaikan sediri.
• Kode tulisan 200 adalah tinggi widget, bisa sobat sesuaikan sendiri.

6. Klik save / simpan template

Catatan:

Apabila label belum muncul sobat setting secara manual dahulu seperti gambar di bawah ini.

Demikianlah Cara Membuat Label Berputar-putar Di Blog. Silakan mencoba dan semoga bermanfaat sobat..

Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas

Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.

Kali ini saya akan memposting cara memasang Cbox  auto hiden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.

Saya kira cukup sekian bla bla bla penerangan saya, dan mari kita menuju kepokok pembahasan.

Berikut ini adalah Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas:

1. Seperti biasa sobat harus Login dulu di akun blog sobat
2. Pilih Tata Letak
3. Tambah Gadget HTML/Java Script
4. Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script

Kodenya Gan:

<style type="text/css"> #at{ position:fixed; right:35%; z-index:+1000; } * html #at{position:relative;} .attab{ height:0px; width:0px; float:top; cursor:pointer; background:url(url); } .atcontent{ float:left; border:2px solid #fff; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPjMb7lyrw7FKtTCwB2OCedDH34yKKGhj8Lkqkt3NJBXjdaxlQflk-qbqNNPdYIFDEiCDugfwQ5fyMSJJeC1u8o1W0h6NC___y9YTUIpJg2grJKxE2q31OQwjHlL5upsFH2ieyiSrR34Lf/)#000000 repeat-x bottom center scroll; -moz-border-radius:10px; padding:10px; } .atcontent:hover{ border:2px solid #fff; background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll; } </style> <script type="text/javascript"> function showHideAT(){ var at = document.getElementById("at"); var w = at.offsetWidth; at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0); at.opened = !at.opened; } function moveAT(x0, xf){ var at = document.getElementById("at"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; at.style.bottom = x.toString() + "px"; if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);} } </script> <div id="at"> <div class="attab" onclick="showHideAT()"> </div> <div class="atcontent"> <div align="center"> <div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;"> Strip kode cbox sobat </div> </div> <br /> <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div> </div></div> <script type="text/javascript"> var at = document.getElementById("at"); at.style.bottom = (-200-at.offsetWidth).toString() + "px"; </script>

Klik save / simpan.

Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

1. Tetap login di akun blog sobat
2. Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script

Kodenya Gan:

<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://lh4.ggpht.com/_1j80TgNqd_8/TS3MlHxaygI/AAAAAAAABVo/P36anu_ToeA/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Demikianlah Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas. Semoga bermanfaat bagi sobat semua.

Memasang simbol ©, ® atau ™ pada Title Blog

Saat Blog Walking sering kita jumpai di blog sahabat title blog yang memakai simbol ©, ® atau ™. Cara memasangnya sangat mudah yang penting kita tahu kode ASCII nya.
Kode ASCII untuk :
© adalah &#169;
® adalah &#174;
™ adalah &#153; 

Login ke Blogger.com masuk ke Dashboard - Settings - Basic --> Title. Pada title ketikan kode tersebut misalnya Blog Tutorial™ maka Title Blog akan menjadi Blog Tutorial™.

Terima kasih sudah berkunjung.

Memasang Tombol Like Facebook di Blogspot

Untuk memasang tombol like facebook dibawah setiap postingan caranya adalah sbb :

1. Login ke blogger.com, buka Dashboard - Design - Edit HTML

2. Download Full Template --> untuk berjaga-jaga jika ada trouble

3. Centang Expand Widget Templates

4. Cari kode <data:post.body/>
5. Copy Kode dibawah ini dan letakkan dibawah kode <data:post.body/> 
 

Kodenya Gan:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = &quot;//connect.facebook.net/id_ID/all.js#xfbml=1&quot;; fjs.parentNode.insertBefore(js, fjs); }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script> <div class='fb-like' data-send='false' data-show-faces='false' data-width='300'/> </b:if>

6. Save Template dan Lihat hasilnya.

Semoga Bermanfaat.

Widget Facebook dan Twitter buat blog anda

Fungsi Utama Widget Ini :
Membuat mata pengunjung tertuju pada burung yang sedang terbang di halaman website. Hal ini dilakukan agar pengunjung berpikir sejenak apakah ingin men-Follow Twitter kita atau menjadi Fans di Facebook Kita.

* Untuk Melihat Demonya, Silakan Kunjungi :
Twitter's birds & Facebook's birds (Demo Url)

* Cara Pemasangan Widget Ini :
1. Login ke Akun Blogger Anda
2. KLIK + +
3. Copy & Paste Script Berikut :

Kodenya Gan:

<!-- START Twitter's birds & Facebook's birds --> <script type="text/javascript"> bird_version=3; your_facebook="http://www.facebook.com/USERNAME"; facebook_color=1; //default color 0-6; your_twitter="http://twitter.com/USERNAME"; twitter_color=2; //default color 0-6; view_bird='6'; //input 'no'>>not active & Restart View ; 'yes'>>always active ; number ('1')('2')...('99999') >> number display bird_speed=17; </script> <script type="text/javascript" src="http://blogger_eye_1.xtgem.com/twitter_facebook_birds"></script> <!-- END Twitter's birds & Facebook's birds -->

* Ganti angka 3 pada "bird_version" Menjadi Versi yang Anda Inginkan. Sementara cuma tersedia versi 1, versi 2 dan versi 3. Disarankan Anda mengisi '3'. Untuk melihat perbedaannya silakan kunjungi :
- Perbedaan Feature Versi Sebelum di-Modifikasi & Versi Sesudah Modifikasi

* Ganti http://www.facebook.com/USERNAME Menjadi Alamat Facebook's Page Website/Blog Anda

* Angka 1 pada "facebook_color" adalah warna Facebook's Bird yang akan Keluar
- Warna Default : 0 = Putih || 1 = Merah || 2 = Jingga || 3 = Kuning || 4 = Hijau || 5 = Biru || 6 = Ungu

* Ganti http://twitter.com/USERNAME Menjadi Alamat Twitter Anda

* Angka 2 pada "twitter_color" adalah warna Twitter's Bird yang akan Keluar
- Warna Default : 0 = Putih || 1 = Merah || 2 = Jingga || 3 = Kuning || 4 = Hijau || 5 = Biru || 6 = Ungu

* Angka 6 pada "view_bird" adalah Jumlah tampilan Burung yang akan keluar
- Isikan Total Tampilan Burung (Angka) yang akan keluar / Unik Visitor. Misalnya : 6. Jika "Bird" yang keluar telah mencapai 6X untuk Visitor yang sama, Maka Bird tidak akan keluar untuk pengunjung tersebut.
- Isikan "no" untuk mematikan script "Twitter's Birds & Facebook's Birds"
- Isikan "yes" untuk selalu mengaktifkan script "Twitter's Birds & Facebook's Birds"

*Angka 17 pada "bird_speed" adalah kecepatan Burung. Semakin Tinggi Angka Tersebut, Semakin Cepat

Widget Translator Elegant Untuk Blog

Widget Translator Elegant Untuk Blog - Apakah situs anda sudah mulai dikunjungi wisatawan asing? Butuh translator? jika jawaban Anda adalah ya maka sekarang Anda berada di tempat yang benar. Tidak ada salahnya blog tutorial kali ini akan membahas sebuah gedget yang insya Allah akan bermanfaat bagi Anda dan pengunjung blog kita. dan Saya rasa widget translator ini layak untuk di review karena sedang naik daun. saat mouse di arahkan ke tulisan translate maka akan muncul bendera-bendera negara dan bila di klik akan tertranslate ke bahasa negara tersebut. Terdapat lebih dari 36 bahasa negara Langsung saja cekidot ke situsnya di http://translateth.is/

Tempilan saat tulisan tranlate di sorot

Anda tinggal mecopy codenya memasangkannya di blog sebagai widget /sidebar di tempat yang bagus.

Thanks for attention Elegant Translator Widget for Blogs

 

Kodenya Gan:

<!-- Begin TranslateThis Button --> <div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script> <script type="text/javascript"> TranslateThis(); </script> <!-- End TranslateThis Button -->

Membuat Auto Play Musik Widget Mp3

Cara Auto Play Musik Widget Mp3 -

Hari ini saya akan mengulas sedikit trik bagaimana membuat musik otomatis berputar sendiri dan tidak keliatan playernya.

  bagaimana caranya? sebelumnya silakan perhatikan kode di bawah ini :

Kodenya Gan

<object data="http://static.4shared.com/flash/player.swf?file=Url Musik Berakhiran .mp3&amp;repeat=always&amp;autostart=true" width="0" height="0" type="application/x-shockwave-flash"></object>

itu dia kodenya, lalu bagaimana membuat itu tidak terlihat? ya Saya setting width dan heightnya dengan value "0". Karena nilainya Nol maka tidak akan terlihat wujudnya tapi musiknya akan berputar.

Lalu bagaimana  cara memasukan lagu nya?
cari file musik dengan url berakhiran .mp3 dan simpan menggantikan tulisan warna merah di atas.

Bisakah memutar lebih dari satu lagu?
Sepertinya tidak bisa sob, kecuali kamu menggabunkan dua buah lagu atau lebih ke dalam satu link (satu file) 

Pasang sebagai widget:
Login Blogger > Rancangan > Tambah Widget > HTML/Javascript

Pasang dalam postingan
Entri baru > pillh Edit HTML (disebalah compoese)

Simpan kalau udah beres. dan lihat hasilnya. Oke mudah bukan? semoga cara membuat auto play musik widget mp3 ini bermanfaat.

Cara Membuat Tombol Share Fb, Buzz, Digg, Twitter Di Blogspot

Bagaimana cara membuat tombol share seperti ini :

Membuat Tombol Share

Anda tertarik untuk mencobanya? baiklah kali ini saya akan bagikan salah satu rahasia saya hehe, berhubung ada yang bertanya kepada saya tentang ini,

 seperti yang kita tau tombol share ini merupakan elemen yang sangat penting, sebab dapat mendatangkan pengunjung yang banyak dari luar. ga percaya? coba tengok aja blog terselubung. 

Share atu berbagi saat ini merupakan hal yang penting karena itulah anda wajib memasang tombol share di blog atau web saudara :

Langkah 1

1.  Langsung saja silakan copy kodenya terlebih dahulu:

Kodenya Gan

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:4px 0px 30px 0px;width:100%;float:left;height:20px;'> <div style='float:left;padding-left:0px;font:normal 12px Georgia;font-style:Italic;'> Share this history on : </div> <div style='float:left;padding-left:10px;'> <a name='fb_share' type='button_count'/> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'> </script></div> <div style='float:left;padding-left:10px;'> <a class='google-buzz-button' data-button-style='small-count' href='http://www.google.com/buzz/post' title='Post to Google Buzz'/> <script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/> </div> <div style='float:left;padding-left:10px;'> <a class='DiggThisButton DiggCompact'/> <script type='text/javascript'> (function() { var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0]; s.type = &#39;text/javascript&#39;; s.async = true; s.src = &#39;http://widgets.digg.com/buttons.js&#39;; s1.parentNode.insertBefore(s, s1); })(); </script> </div> <div style='float:left;padding-left:10px;'> <a class='twitter-share-button' data-count='horizontal' data-via='User Name' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </div> </div> </b:if>

*perhatikan pada kode diatas, ada tulisan user name twitter, ganti dengan milik Anda

Langkah 2

• Login ke Blogger » Rancangan » Edit HTML » Centang Expend Widget 
• Cari Kode   <div class='post-body entry-content'>

Tips mencari cepat: tekan ctrl+f dan masukan kode
di atas, atau jika tidak ketemu musukan saja post-body kemudian cari
kode yang mirip dengan yang saya sebutkan tadi di atas!

• Jika sudah ketemu pastekan code yang telah Anda
  copy tadi tepat di atasnya <div
  class='post-body entry-content'>
• Simpan Template dan Lihat hasilnya ! ^_^

Wah Trik kali ini lebih mudah dari yang sebelumnya bukan??

Cara Membuat Animasi Loading Pada Gambar Blog

Membuat Efek Loading Gambar. Trik ini Saya saran kan untuk blog yang banyak menggunakan gambar dalam potingannya. Saya yakin banyak yang sudah bisa membuatnya, karena memang tidak sulit, tapi Sayacoba membuat postingan ini, barang kali ada belum tau :

Cara Membuatnya :

  1. Login akun Blogger anda terlebih dahulu. 

  2. Pilih Layout untuk memulai pengeditan pada Blog yang diinginkan

  3. Pilih Rancangan, Edit HTML, cek/centang Expand Widget Template

  4. Cari kode <body> jika sudah ketemu hapus, ganti dengan script dibawah ini

Kodenya Gan

&lt;body onLoad=&#039;waitPreloadPage();&#039;&gt; &lt;!-- Loading with Image --&gt; &lt;div id=&#039;prepage&#039; style=&#039;display:scroll;position:fixed;top:100px;left:3px&#039;&gt;&lt;img border=&#039;0&#039; src=&#039;http://i811.photobucket.com/albums/zz36/asksalman/loading2.gif&#039;/&gt;&lt;/div&gt; &lt;!-- Ends Loading with Image --&gt;

5. Silakan cari kode </body> Hapus dan ganti dengan kode berikut:

Kodenya Gan

<script language='javascript' src='http://pageprotection.googlecode.com/files/loading.js' type='text/javascript'/></body>

6. Selesai sudah, Simpan Template, mudahkan?

Keterangan :
URL gambar , http://i811.photobucket.com/albums/zz36/asksalman/loading2.gif yang ini.
dapat diganti sesuai dengan selera anda.

Misalnya dengan animasi di bawah ini:

http://i811.photobucket.com/albums/zz36/asksalman/loading1.gif

http://i811.photobucket.com/albums/zz36/asksalman/loading3.gif

Atau anda dapat mencari sendiri di google image search silakan masukan kata kunci loading.gif

Sahabat informasi maya, selamat mencoba trik Membuat animasi loading pada gambar blog.