Cara menambahkan Live Traffic Feed

Cara menambahkan Live Traffic Feed dari situs life.feedjit.com,sangat diperlukan bagi sebuah blog karena berguna untuk mengetahui dari mana datangnya pengunjung ke blog yang kita kelola juga dapat mempercantik bagian bagian pada blog. Terdapat 2 widget utama yang dapat kita tambahkan pada blog, antara lain :
1. keterangan asal pengunjung dan apa yang dikunjunginya disertai dengan gambar bendera negara pengunjung.
2. berupa tampilan peta dengan noktah warna merah pertanda lokasi asal pengunjung. Jika pointer diarahkan ke noktah merah, akan muncul tulisan lokasi asal para pengunjung blog.

Cara menambahkan Live Traffic dari situs life.feedjit.com, ikuti langkah-langkah berikut ini.

• Kunjungi link : http://feedjit.com
• Klik get feedjit setelah anda berada di situs tersebut.
• Klik salah satu pilihan Javascrift widget atau Image Widget.
• Klik Javasrift widget lihat bagian bawah.
• Berikutnya anda akan melihat 4 tampilan untuk widget. pilih salah satunya sesuai dengan selera anda.
• Tampilan warna kalau mau di ubah silahkan dengan mengklik First Costumize it. setelah muncul kotak dialognya, silahkan pilih penampilan warna yang sesuai.
• JikaSelesai mengotak-atik warna, klik Add to your Blogger blog atau Typepad blog.
• Blogger:Menambah Elemen Halaman akan muncul, silahkan anda masukan nama blog serta judul dari widget dan menambahkan kode lainnya, contohl : pada edit konten tambahkan <> pada awal kode HTML dan < /center> pada akhir kode HTML agar widget berada di tengah sidebar.
• Klik menambah widget.
• Silahkan lihat blog anda sekarang

Memang kalau kita ingin menaikkan Page Rank ini bisa menjadi alternatif,karena selain pengunjung suka dengan hiasan-hiasan pada blog, pengunjung juga bisa melihat bagaimana data orang-orang yang melihat blog kita selain asal negara di situ juga tampak nama-nama pengunjung yang datang ke blog.

SEMOGA SUKSES DAN SELAMAT MENCOBA. . . .

By : Bomz Art

~KEEP SPIRIT  FOR YOUR LIFE~

Read more »

Posted in: Widget

Memasang Widget Alexa Rank di Blog

.fullpost{display:inline;}

langsung saja cara membuatnya sebab yang ingin mendapatkan ranking alexa yang bagus untuk memasang alexa widget pada setiap blog atau web yang di milikinya.


Lankah pertama :
1. Klik di sini untuk menuju situs alexa.com
2. Masukan alamat blog anda pada kolom yang tersedia. Contoh :


3. Ada 3 ukuran widget yang bisa anda pilih, copy kode yang ada di sampingnya lalu paste pada notpad atau text editor lainnya. Simpan kode tersebut di komputer anda untuk nanti di masukan ke blog.

Langkah ke dua :
1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Elemen Halaman.
4. Klik Tambah Gadget.
5. Klik tanda Plus (+) di samping tulisan HTML/JavaScript.


6. Paste kode yang tadi ada di notepad kedalam kolom yang muncul.
7. Klik tombol Simpan dan selesai.

Mudah-mudahan dengan di pasangnya widget alexa di blog anda, alexa rank blog anda akan cepat bagus (semakin kecil semakin baik rangkingnya). Ayo segera pasang alexa rank ...

 

SEMOGA SUKSES DAN SELAMAT MENCOBA. . . .

By : Bomz Art

~KEEP SPIRIT  FOR YOUR LIFE~

 

Read more »

Posted in: Widget

Cara mengganti Favicon

Apakah kamu ingin mengganti favicon Blog kamu menjadi favicon yg lucu sesuai dengan yg kamu inginkan ??
Emang favicon apaan seeh ?? pingin tau ? favicon adalah icon kecil di bagian atas yang ada gambarnya itu lho !! yang yang tempat dimana kita menulis alamat situs itu lho,, dah tau kan!!! ea udah tak langsung ke TKP....


Langkah-Langkahnya sebagai berikut :

1. Log In dulu di blog kamu
2. Masuk ke menu tata letak/edit HTML
3. Cari kode </head>
4. Lalu copy script dibawah ini dan paste tepat di bawah kode </head>

<link href="http://Paste link kamu disini.gif" rel="shortcut icon"/>

5. Ganti tulisan yg berwarna biru dengan link gambar kamu
6. Klik Simpan...

SEMOGA SUKSES DAN SELAMAT MENCOBA. . . .

By : Bomz Art

~KEEP SPIRIT  FOR YOUR LIFE~

Read more »

Posted in: Tutorial

Membuat Link Agar Tampak Hidup

Anda tidak perlu dengan susah gimana caranya agar sebuah blog yang anda miliki agar tampak lebih menarik dan keren.Anda hanya perlu melihat dengan detail dan teliti,dengan begitu anda akan mengerti cara memasang kode seperti di bawah ini :
Buka blogger anda -----  masuk ke blog anda ------ke rancangan-----lalu ke edit html
ikuti langkah-langkah seperti di bawah :

1. Cari Kode <head>
   
2. kemudian taruh kode dibawah tepat dibawah kode <head>
   
   <script src='http://anas.ku93.googlepages.com/rainbow.js'>
   </script>
   
3. Kurang lebih jadinya
   
   <head>
   <script src='http://anas.ku93.googlepages.com/rainbow.js'>
   </script>
   
4. Semudian Save dan Lihat hasilnya ok!

SEMOGA SUKSES DAN SELAMAT MENCOBA. . . .

By : Bomz Art

~KEEP SPIRIT  FOR YOUR LIFE~

Read more »

Posted in: Tutorial

MENGUBAH BAGIAN FOOTER MENJADI TIGA KOLOM

UNTUK MENGUBAH BAGIAN FOOTER PADA BLOG ANDA MENJADI 3 KOLOM, 

Perhatikan dan ikuti langkah di bawah ini dengan teliti !!!

1. Masuk ke Blogger.
2. Pilih Rancangan bagian Edit HTML.
3. Kasih tanda cek pada Expand Template Widget.
4. Cari kode ]]></b:skin> , kemudian copy kode dibawah ini dan letakkan tepat diatasnya.
   
   #footer-column-container {
clear:both;
}
.footer-column {
position:relative;
clear:both;
float:center;
padding:10px 0 10px 0;
}

5. Cari kode dibawah ini pada bagian </body> .
   
   <b:section class='footer' id='footer'>
   
6. Ganti kode diatas dengan kode dibawah ini
   
<div id='footer-column-container'>
   <div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
   </div>
   <div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
   </div>
   </div>

7. Klik Simpan Template
8. Selesai. Sekarang anda tinggal mencoba kolom yang baru dibuat tersebut. Tambahkan sesuatu pada blog anda (gambar atau tulisan)

NOTE : Ganti tulisan yang berwarna biru dengan ukuran yang anda inginkan.

SEMOGA SUKSES DAN SELAMAT MENCOBA. . . .
                 

  By : Bomz Art

~KEEP SPIRIT  FOR YOUR LIFE~

Read more »

Posted in: Tutorial

CARA MENGUBAH BACKGROUND BLOG

Pengaturan background sebuah blog dapat kita lakukan dengan mudah dengan syarat harus mengenal terlebih dahulu bagian-bagian dari blog.
Bagian-bagian tersebut diantaranya :

• Body : bagian keseluruhan dari blog.
• Outer Wrapper : bagian yang didalamnya terdapat : Main Wrapper dan Sidebar Wrapper.
• Main Wrapper : tempat kita membuat postingan.
• Sidebar Wrapper : tempat kita meletakan berbagai widget
• Main Widget : bagian dalam dari main wrapper.
• Sidebar widget : bagian dalam dari sidebar.

Setelah mengetahui bagian-bagian blog tersebut, selanjutnya tinggal mengganti warna sesuai dengan pilihan masing-masing.
Kode warna dapat anda lihat pada KODE WARNA VERSI 1 dan KODE WARNA VERSI 2

• Pewarnaan pada bagian Body :
  
  body {
background:#002E3F;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
  
  Perhatikan yang berwarna merah, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.
• Pewarnaan pada bagian Outer Wrapper :
  
  #outer-wrapper {
width: 990px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
background:#1B703A;
}
  
  Perhatikan yang berwarna merah, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.
• Pewarnaan pada bagian Main Wrapper :
  
  #main-wrapper {
width: 470px;
float: $startSide;
background:#80FF00;
border:5px solid
backgroudcolor;white;
padding:15px 15px .25em;
word-wrap: break-word;
overflow: hidden;
}
  
  Perhatikan yang berwarna merah, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.
• Pewarnaan pada bagian Sidebar Wrapper :
  
  #sidebar-wrapper {
width: 230px;
float: $endSide;
background:#78B749;
border:0px solid $bordercolor;white;
padding:5px 5px .25em;
word-wrap: break-word;
overflow: hidden;
margin-bottom:0px;
}
  
  Perhatikan yang berwarna merah, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.
• Pewarnaan pada bagian Main Widget :
  
  .main .widget{
background:#CAF99B;
border:px solid #cccccc;
margin:0 0 0.5em;
padding:;
}
  
  Perhatikan yang berwarna merah, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.
• Pewarnaan pada bagian Sidebar Widget
  
  .sidebar .widget{
background:#CAF99B;
border:2px solid #cccccc;
margin:0 0 0.5em;
padding:0.5em;
}
  
  Perhatikan yang berwarna merah, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

Silahkan anda coba dengan mengganti kode warna pada bagian-bagian blog yang anda kelola.
Selamat mencoba, semoga bermanfaat...!!

Read more: http://epg-studio.blogspot.com/2009/08/cara-mengubah-background-blog.html#ixzz1GQqFlEx1

Read more »

Posted in: Tutorial

MENAMPILKAN POSTINGAN TERBARU DALAM BENTUK SLIDE

Banyak cara untuk menampilkan Post terbaru (Recent Post), anda hanya tinggal memilih tampilan yang paling anda minati. Team Blogger sendiri telah menyiapkan sebuah widget untuk menampilkan Post terbaru tersebut. Silahkan anda kunjungi Pasang Post Terbaru dan Komentar terbaru dari Team Blogger. Satu lagi tips untuk menampilkan Post terbaru yaitu Recent Post dengan Thumbnal Widget dari Kiranthi. Masing-masing tips diatas memiliki kelebihan dan kekurangan, silahkan anda coba untuk melihat kelebihan dan kekurangannya tersebut.
Jika tips diatas kurang menarik minat anda, coba anda terapkan tips dibawah ini yaitu Post Terbaru dengan gaya slide.
Ada dua tips yang dapat anda pilih :

Tips Pertama

Contoh Tampilan :

• Kode yang digunakan :
  
  <script src="https://sites.google.com/site/epgstudiosite/javascript/postbaru.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:95%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:95%px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://lh3.googleusercontent.com/_1j80TgNqd_8/TWM-EhAZ9TI/AAAAAAAABxk/oFVWP0xWtvU/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://epg-studio.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/epgstudiosite/javascript/postbaru2.js' type='text/javascript'></script>
</div>
• Keterangan :
• Kode dengan warna kuning dapat anda ganti dengan dengan tampilan yang anda inginkan.
• Jika belum memahami kode diatas, fokuskan pada kode ini :home_page = "http://epg-studio.blogspot.com/"; ganti urlnya dengan url blog anda.
• Kode : limitspy=4 merupakan jumlah post baru yang ditampilkan dalam slide.
• kode : numposts = 10; merupakan jumlah postingan yang tampil pada slide yang tampilnya secara bergantian.
• Kode lainnya silahkan anda coba sendiri untuk mendapatkan tampilan terbaik.

Tips Kedua.

Contoh Tampilan :

• Kode script yang digunakan :
  
  <style type="text/css">
#rp_plus_img{height:212px;overflow:hidden;border:solid 1px #585858;padding:6px 10px 14px 5px;background-color:#2f2f2f;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#FFF;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#DEDEDE;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:55px;height:55px;}
</style>
<script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/jquery.min.js?revision=3"></script>
<script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/Recentpost.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 250;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
• Keterangan :
• Kode var numposts = 5; merupakan jumlah post yang tampil pada slide
• Kode var numchars = 250; merupakan jumlah karakter/kata yang ditampilkan.

Cara memasukan ke Blog.

1. Masuk ke Blogger.
2. Pilih Rancangan bagian Elemen Halaman.
3. Klik tambah Gadget.
4. Pilih HTML/Javascript.
5. Copy salah satu kode script diatas dan paste pada kolom yang tersedia.
6. Klik tombol Simpan.

Penting :

• File Javascript dari kedua tips diatas merupakan file simpanan EPG Studio, Silahkan anda simpan menjadi milik anda sendiri. Caranya kunjungi : Upload File di Google Sites

Read more: http://epg-studio.blogspot.com/2011/02/menampilkan-postingan-terbaru-dalam.html#ixzz1GJz4P8Br

Read more »

Posted in: Tutorial