Cara Memasang Lagu Pada Blog

Cara Memasang Lagu Langsung Nyala Otomatis (AutoPlay) - Kali ini saya akan membagikan kepada teman - teman bagaimana Cara Memasang Lagu Langsung Nyala Otomatis (AutoPlay). Banyak orang ingin membuat blognya tampil lebih menarik dan keren mulai dari membuat buku tamu melayang, membuat header yang unik dan bahkan ada yang menambahkan lagu pada blognya. Nah, kalau kita memasang lagu pada blog kita nanti pengunjung juga akan merasa lebih nyaman.. tapi kalau lagunya gak enak di dengar, ya.. kasian juga nanti pengunjungnya.. hehe :)

Berikut Cara Memasang Lagu Langsung Nyala Otomatis (AutoPlay) :

1. Kunjungi Situs SoundCloud, disini >> http://soundcloud.com

2. Pilih menu Sign Up.

3. Lalu akan muncul pop up yang melayang ditengah - tengah web tersebut, silahkan isi datanya seperti email, password dll. Lalu Klik Sign Up.

4. Lalu akan muncul halaman baru. Silahkan tuliskan nama yang akan ditampilkan, gambar, nama anda, tempat tinggal anda dll. Klik Done.

5. Silahkan buka dan cek email anda yang tadi didaftarkan, buka pesan yang dikirim oleh Situs SoundCloud, lalu Klik Confrim your email address.

6. Bila sudah, lalu klik Upload untuk mengupload lagu yang ingin anda tampilkan pada blog anda.

7. Klik Choose files untuk memasukkan lagu dari komputer anda.

8. Bila sudah diupload, silahkan anda menunggu hingga proses uploadnya selesai.

9. Lalu anda atur sendiri tampilan lagunya, lalu klik Save dibagian bawah.

10. Klik Share.

11. Klik Edit your Widget.

12. Centang pada "Play automatically"

13. Copy kodenya.

14. Masuk ke Akun Blogger anda

15. Pilih Layout => Add a Gadget => HTML/JavaScript => Paste kode yang telah dicopy tadi

16. Klik Save.

17. Selesai.



Semoga bermanfaat..!!

Cara Memasang Lagu Langsung Nyala Otomatis (AutoPlay) - Kali ini saya akan membagikan kepada teman - teman bagaimana Cara Memasang Lagu Langsung Nyala Otomatis (AutoPlay). Banyak orang ingin membuat blognya tampil lebih menarik dan keren mulai dari membuat buku tamu melayang, membuat header yang unik dan bahkan ada yang menambahkan lagu pada blognya. Nah, kalau kita memasang lagu pada blog kita nanti pengunjung juga akan merasa lebih nyaman.. tapi kalau lagunya gak enak di dengar, ya.. kasian juga nanti pengunjungnya.. hehe :)

Berikut Cara Memasang Lagu Langsung Nyala Otomatis (AutoPlay) :

1. Kunjungi Situs SoundCloud, disini >> http://soundcloud.com

2. Pilih menu Sign Up.

3. Lalu akan muncul pop up yang melayang ditengah - tengah web tersebut, silahkan isi datanya seperti email, password dll. Lalu Klik Sign Up.

4. Lalu akan muncul halaman baru. Silahkan tuliskan nama yang akan ditampilkan, gambar, nama anda, tempat tinggal anda dll. Klik Done.

5. Silahkan buka dan cek email anda yang tadi didaftarkan, buka pesan yang dikirim oleh Situs SoundCloud, lalu Klik Confrim your email address.

6. Bila sudah, lalu klik Upload untuk mengupload lagu yang ingin anda tampilkan pada blog anda.

7. Klik Choose files untuk memasukkan lagu dari komputer anda.

8. Bila sudah diupload, silahkan anda menunggu hingga proses uploadnya selesai.

9. Lalu anda atur sendiri tampilan lagunya, lalu klik Save dibagian bawah.

10. Klik Share.

11. Klik Edit your Widget.

12. Centang pada "Play automatically"

13. Copy kodenya.

14. Masuk ke Akun Blogger anda

15. Pilih Layout => Add a Gadget => HTML/JavaScript => Paste kode yang telah dicopy tadi

16. Klik Save.

17. Selesai.



Semoga bermanfaat..!!

21.36  AlbertEnsten  No comments

Read More

Cara Membuat Like Facebook Melayang

Salam Blogger, like facebook untuk blog memang sudah menjadi hal yang wajib ada pada sebuah situs web. Kali ini dan detik ini juga saya punya trik blogger terbaru yaitu membuat like facebook melayang pada blog. Like facebook melayang maksudnya adalah Like box tersebut akan muncul seperti pop up dan akan selalu muncul ketika pengunjung membuka halaman baru di blog kita. Nah dengan menggunakan cara ini kemungkinan untuk like blog kita semakin besar kan.

Like facebook bertujuan untuk mempromosikan blog kita lewat facebook, karena sekarang facebook lagi rame-ramenya. Nah dengan itu sobat bisa mendapatkan pengikut blog yang merupakan potensi visitor blog sobat semua nantinya. Dengan mendapatkan banyak jempoler dari fb maka otomatis posisi blog kalian akan lebih keren karena kita dapat update ke facebook dan dibaca oleh para pengikut blog sobat. Cara membuat like box melayang ini juga gak sulit-sulit amat koq, langsung aja ke tips dan trik nya.

Berikut langkah-langkah membuat like facebook melayang :

1. Login ke account blogger sobat
2. klik menu tata letak lalu
3. lalu tambah gadget dan pilih html/javascript
4. kemudian copy paste kode di bawah ini
   
   <style type="text/css">
   #topbar{
   position:absolute;
   padding-left:260px;
   background-color: transparancy;
   width: 300px;
   visibility: hidden;
   z-index: 100;}
   </style>
   <script type="text/javascript">
   var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
   var startX = 30 //set x offset of bar in pixels
   var startY = 5 //set y offset of bar in pixels
   var verticalpos="fromtop" //enter "fromtop" or "frombottom"
   function iecompattest(){
   return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
   function get_cookie(Name) {
   var search = Name + "="
   var returnvalue = "";
   if (document.cookie.length > 0) {
   offset = document.cookie.indexOf(search)
   if (offset != -1) {
   offset += search.length
   end = document.cookie.indexOf(";", offset);
   if (end == -1) end = document.cookie.length;
   returnvalue=unescape(document.cookie.substring(offset, end))}}
   return returnvalue;}
   function closebar(){
   if (persistclose)
   document.cookie="remainclosed=1"
   document.getElementById("topbar").style.visibility="hidden"}
   function staticbar(){
   barheight=document.getElementById("topbar").offsetHeight
   var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
   var d = document;
   function ml(id){
   var el=d.getElementById(id);
   if (!persistclose || persistclose && get_cookie("remainclosed")=="")
   el.style.visibility="visible"
   if(d.layers)el.style=el;
   el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
   el.x = startX;
   if (verticalpos=="fromtop")
   el.y = startY;
   else{
   el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
   el.y -= startY;}
   return el;}
   window.stayTopLeft=function(){
   if (verticalpos=="fromtop"){
   var pY = ns ? pageYOffset : iecompattest().scrollTop;
   ftlObj.y += (pY + startY - ftlObj.y)/8;}
   else{
   var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
   ftlObj.y += (pY - startY - ftlObj.y)/8;}
   ftlObj.sP(ftlObj.x, ftlObj.y);
   setTimeout("stayTopLeft()", 10);}
   ftlObj = ml("topbar");
   stayTopLeft();}
   if (window.addEventListener)
   window.addEventListener("load", staticbar, false)
   else if (window.attachEvent)
   window.attachEvent("onload", staticbar)
   else if (document.getElementById)
   window.onload=staticbar
   </script><br />
   <div class="clear"></div>
   <div id="topbar">
   <div style="text-align: right;">
   <a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3FCYntN7lWSf36nREZcT-p2V7AlEAgaaaZsbrxOd-yMeOGpTNRql4qjQRbQJhC1BED5U1_tS9qZHA3nN0z8eYuCDe3MQRzVHvhLuBBZBTntDqetO5ywepYCUjPLipqWQDg9MQKlwRgWIA/s1600/close3.png" /></a></div>
   <center>
   <div style="background: #fff;"><iframe src="//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2Ffarixin&amp;layout=standard&amp;show_faces=true&amp;colorscheme=light&amp;font=arial&amp;width=170&amp;appId=399405956817133" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:170px;" allowtransparency="true"></iframe></div></center></div>
    
5.  Ingat kode yang berwarna merah adalah kode buku like box saya,ganti dengan kode like box punya sobat. Jika sobat belum punya klik disini.
    
6. kemudian simpan gadget
   
   Selamat mencoba dan semoga bermanfaat

23.16  AlbertEnsten  No comments

Read More

Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah

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 Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah:

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.

Klik show untuk melihat

<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/AVvXsEgPDKcO1C1bjGENk8CLFyRXwX4W_lXz3ZnUxf08zJpDqSZK-9i7NCsn-h3q-me3xhhNZXM7Nfr0yykgt0nNJFnJI8YNUuZd7_GIKSzdZwJrW6tyzyKNz0JazfWXZURL43lArdK32U8ofOrw/)#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.

Keterangan:

1. Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
2. Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
3. Kode warna putih adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
4. Texts berwarna hijau adala tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).

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

<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifBt1m62lQaiIuG-wQSFX5Yg7NVVph1JEB0oBhcfYqK0EzLrP9OG9GsCjf5eq7VC20lGvUwbTZGf1qRq-nxUjM39LXXcsgt7vpA0n1IShCW_jWJy9ymC_4P-1oRD3sH9qn9HAIhvZntjJe/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Keterangan: 

• Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
• Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
• Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog.

Demikianlah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah. Semoga bermanfaat bagi sobat semua.

22.45  AlbertEnsten  No comments

Read More

Cara Membuat Widget Menu TAB View Pada Blog

Loading yang ringan pada blog merupakan salah satu cara untuk membuat orang senang berkunjung di blog kita, apalagi ditambah artikel-artikel yang keren, pastinya pengunjung akan membanjiri blog sobat. Cara agar loading blog kita cepat (tidak lemoet) adalah dengan memperingkas tampilan dan tidak terlalu banyak widget, salah satu caranya adalah dengan membuat widget Menu TAB View.

Menu TAB view merupakan widget tambahan berbentuk tab. Dengan cara menggunakan tab view kita dapat menghemat sidebar pada blog kita sehingga kita tidak perlu menambahkan banyak widget yang akhirnya akan memberatkan loading pada blog kita.

Untuk tampilan tab view ini lebih trendi dan menarik, tapi ini bukan berarti tampilan untuk tab view yang lama buruk. Nah, mari kita langsung ke bagaimana cara untuk membuat tab view pada blog.

1. Silahkan Login ke blog sobat
2. Masuk ke tab Perancangan lalu pilih edit HTML
3. Seperti biasa centang "Expand widget templates" untuk menghindaran apabila terjadi kesalahan.
4. Silahkan cari kode ]]></b:skin> Tekan CTRL+F untuk mengeluarkan kotak pencarian
5. Setelah ketemu kode diatas silahkan letakkan kode dibawah ini di atas kode ]]></b:skin>

/* tab model 2 ateonsoft.com */ div.Tabateonsoft div.TFs {height: 30px; overflow: hidden;} div.Tabateonsoft div.TFs a {float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em; background:#f0f0f0; color: #333; border-top:1px solid #CCCCCC; border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #cccccc; -moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 0px; } div.Tabateonsoft div.TFs a:hover { background: #E8E8E8; border-top:1px solid #999999; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; border-left:1px solid #999999;} div.Tabateonsoft div.TFs a.Active { background: #333; color: #000000; border-top:1px solid #999999; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; border-left:1px solid #999999; font-weight:bold; color: #ffffff;} div.Tabateonsoft div.Pages { clear: both; overflow: hidden; height:333px; border:1px solid #EFF0F1; padding:0;background: #222222; -moz-border-radius:5px;} div.Tabateonsoft div.Pages div.Page {height: 100%;padding: 0px; overflow: hidden; } div.Tabateonsoft div.Pages div.Page div.floor { font-size:12px;padding: 3px 5px; text-align:left;}

5. Letakkan kode dibawah ini diatas kode </head>

<script src='http://zuazz.googlecode.com/files/ateonsoft_tab.js' type='text/javascript'/>

6. Save template
7. Masuk ke tab Elemen laman
8. Tambahkan widget HTML/JavaScript
9. Silahkan letakkan kode dibawah ini di dalam widget HTML/JavaScript

<form action="tabateonsoft.html" method="get"> <div class="Tabateonsoft" id="Tabateonsoft"> <div class="TFs"> <a>tab1</a> <a>tab2</a> <a>tab3</a> <a>tab4</a> </div> <div class="Pages"> <div class="Page"> <!-- Tab --> <div class="floor"> Disini letakkan kode untuk tab 1 anda </div> </div> <!-- end Tab --> <div class="Page"> <!-- Tab --> Disini letakkan kode untuk tab 2 anda </div> <!-- end Tab --> <div class="Page"> <!-- Tab --> <div class="floor"> Disini letakkan kode untuk tab 3 anda </div> </div> <!-- end Tab --> <div class="Page"> <!-- Tab --> <div class="floor"> Disini letakkan kode untuk tab 4 anda </div> </div> <!-- end Tab --> </div> </div> </form> <script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

Setelah itu simpan dan lihat hasilnya.

22.40  AlbertEnsten  1 comment

Read More