Membuat dan Mengganti Favicon Blogger

Pertama anda harus punya gambaran untuk favicon. Bagi Anda yang menguasai software grafis, Anda boleh membuat sebuah logo dengan Adobe Photoshop, Illustrator, CorelDraw, atau software grafis apapun yang Anda kuasai. Lalu ekspor ke gif, png atau jpg. Jika Anda tidak menguasai software grafis, anda bisa gunakan icon gratis dengan googling atau bahkan foto yang ada di harddisk anda.

Lalu upload file tersebut ke website FavIcon from Pics dengan menekan Browse. Contreng pilihan "Animate Favicon" jika anda menginginkan favicon animasi. Lalu klik "Generate Favicon.ico".


Selanjutnya download favicon yang dihasilkan dengan mengklik tombol "Download Favicon".


Extract file zip yang dihasilkan. Lalu upload favicon.ico dan animated_favicon1.gif (favicon animasi) ke file hosting gratis sepertiGoogle Pages, Photobucket.

Sekarang, login ke Blogger. Pilih Layout -> Edit HTML.

Copy kode di bawah ini:

<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="animated_favicon1.gif" type="image/gif" />

Lalu paste persis di bawah baris kode berikut:

<b:include data="blog" name="all-head-content"/>

Sekarang ubah alamat URL favicon dengan URL tempat anda menyimpan file favicon di file hosting. Lihat gambar di atas, klik untuk melihat lebih besar. Perhatikan, bagian yang dihighlight adalah contoh URL yang telah diubah. Ubah juga alamat URL favicon animasi (animated_favicon1.gif) jika anda memang menginginkannya. Periksa lagi apakah alamat URL sudah benar.

Simpan Template. Lihat hasilnya. Jika favicon belum muncul, refresh browser.

Selamat mencoba!

02.14  AlbertEnsten  No comments

Read More

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 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