PASANG FASILITAS CHAT DARI JABBIFY.COM

Satu lagi fasilitas chatting yang dapat anda pasang pada blog kesayangan anda.
Fasilitas chatting ini sangan mudah dipasang pada blog karena disamping kode yang digunakan hanya sedikit, juga registernya dilakukan setelah pemasangan kode pada Template atau setelah widget chatting muncul pada blog anda.
Widget chat ini seperti pada feacebook (begitu kata sumber : F.UF.U. Sebagai contoh, coba anda lihat dibagian kanan bawah blog EPG Studio.

Bagi anda yang ingin memasang fasilitas chat dari Jabbify.com, silahkan ikuti langkah-langkah berikut ini :

• Masuk ke Tata letak kemudian Pilih Edit HTML.
• Cari kode </body>
• Copy kode dibawah ini , kemudian paste tepat diatas kode </body>
  
  <script src="http://jabbify.com/side.js" type="text/javascript"/>
• Simpan Template.
• Selanjutnya lihat Blog anda.
• Setelah blog anda terbuka, widget akan muncul dibagian kanan bawah blog.
• Lakukan sign up terlebih dahulu.
• Setelah selesai sign up, anda harus melakukan activasi account dari email anda.
• Selanjutnya silahkan anda melakukan login untuk dapat menggunakan fasilitas chat tersebut.
• Selesai.

POSTINGAN TAMPIL SECARA ACAK

Kehadiran blog anda di dunia maya, semakin lama postingan akan semakin bertambah sehingga memungkinkan pengunjung akan terlewatkan pada beberapa postingan yang mungkin sedang dicari pengunjung.
Tips yang berasal dari PURPLEMOGGY, merupakan salah satu alternatif yang dapat anda sajikan untuk para pengunjung untuk membaca postingan pada blog anda.
Tips ini menampilkan sebuah link dan juga bisa diganti dengan sebuah sebuah tombol yang apabila diklik akan menampilkan postingan secara acak (Display Random Post).

Cara menampilka Link atau Tombol Display Random Post :

• Masuk ke Blogger kemudian buka Edit HTML.
• Copy kode dibawah ini kemudian paste tepat diatas kode </head>
  
  
  <script type='text/javascript'>
//<![CDATA[

function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
window.location = entry.link[j].href + "#random";
}
}
}

function fetchLuck(luck){
script = document.createElement('script');
script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
function readLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
fetchLuck(luckyNumber);
}
function feelingLucky(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
document.getElementsByTagName('head')[0].appendChild(script);
}

//]]>
</script>
  
  
• Klik tombol Simpan Template.
• Selanjutnya copy kode dibawah ini kemudian paste pada blog anda, bisa diletakan dibawah postingan atau di sidebar
  
  1. Jikan ingin tampilan berupa link, copy paste kode dibawah ini :
     
     
     <a href="javascript:feelingLucky();">View Random Post</a>
     
     View Random Post
  2. Jika ingin tampil dalan bentuk widget, copy paste kode dibawah ini :
     
     
     <input type="button" onclick="feelingLucky();" value="View Random Post"/>
     
     

Cara meletakkan link atau widget dibawah postingan :

• Masuk ke Edit HTML.
• Cari kode <p><data:post.body/></p>
• Copy kode link atau widget diatas kemudian paste tepat dibawahnya.
• Simpan Template
• Lihat Blog anda sekarang.

MENAMPILKAN WIDGET UNTUK MASUK KE BLOGGER

Pada proses biasa, masuk ke dasbor melalui dua tahapan yaltu login dulu ke Blogger baru bisa masuk ke Dasbor.
Jika anda berkenan, cara diatas dapat ditinggalkan karena dengan sekali login, anda sudah bisa masuk ke Dashor tanpa harus login terlebih dahulu ke Blogger, dan yang lebih menarik login tersebut dapat anda lakukan dari blog anda sendiri.
Widget untuk login ke Blogger kapasitas sangat kecil (kurang dari 1kb), sehingga anda tidak perlu khawatir akan membuat blog menjadi berat saat loading.

Tampilan widget untuk login ke Dasbor dapat anda lihat di sidebar paling bawah. Penampilan tersebut kata-katanya dapat anda ubah sesuai dengan keinginan anda.
Caranya sangat mudah, silahkan anda ikuti :

• Masuk ke Blogger.
• pilih Tata Letak.
• pilih Elemen Halaman.
• Klik Tambah Gadget.
• Klik tanda + pada HTML/JavaScrip.
• Copy kode dibawah ini kemudian paste pada kolom yang tersedia.
  Please enter your username and password to enter your Blogger Dasboard page!<br/><br/><form id="start-login" action="https://www.google.com/accounts/ServiceLoginBoxAuth" name="login" onsubmit="onlogin()" method="post"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> Username: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/></div><br/><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"/></form>
  
  Ubahlah tulisan berwarna merah dengan pengganti yang anda sukai.
• Klik tombol Simpan.
• Lihat Blog anda sekarang...!!

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

MENAMBAHKAN JUDUL POSTINGAN PADA READ MORE

Penampilan readmore dapat kita ubah sesuai dengan kehendak kita sebagai pemilik blog. Salah satu cara adalah mengganti kata read more dengan image yang dapat anda pelajari disini
Selain cara diatas kata read more juga dapat anda ubah penampilannya dengan menambahkan judul postingan disamping kata read more tersebut yang dikenal dengan sebutan fasilitas read more diikuti judul postingan. Sebagai contoh, coba anda perhatikan fasilitas read more pada EPG Studio. Disebelah kanannya terdapat judul postingan.

Cara untuk menambahkan judul postingan disamping kata read more sangat mudah sekali. Anda hanya perlu menambah kode judul postingan setelah kata read more.
Yang perlu anda ingat, bahwa postingan ini dikhususkan untuk blog yang telah dipasang fasilitas read more.
Jika blog anda belum dipasang fasilitas read more, silahkan anda pelajari tips dibawah ini :

• CARA MEMBUAT READ MORE VERSI 1
• CARA MEMBUAT READ MORE VERSI 2
• PASANG READ MORE OTOMATIS DENGAN FASILITAS IMAGE THUMBNAIL

Silahkan anda pilih cara yang menurut anda paling mudah dipraktekan pada blog anda.
Setelah fasilitas read more terpasang, ikuti langkah-langkah untuk menampilkan judul postingan pada fasilitas read more dibawah ini :

• Masuk ke Blooger.
• Pilih Elemen Halaman.
• Pilih Edit HTML.
• Kasih contreng pada kotak expand Template Widget.
• Cari kata read more pada template blog anda. Misalnya seperti dibawah ini :
  
  
  <p><data:post.body/></p>
<a expr:href='data:post.url'>Read More...</a>
</b:if>


• Tambahkan kode ini <data:post.title/> setelah kata read more.
• Kode read more akan menjadi seperti ini :
  
  
  <p><data:post.body/></p>
<a expr:href='data:post.url'>Read More...<data:post.title/></a>
</b:if>


• Klik tombol Simpan Template.
• Lihat fasilitas Read More baru blog anda.
• Selain penampilan diatas anda juga dapat menambahkan image berupa anak panah diantara kata read more dengan kode <data:post.title/>

Selamat mencoba, semoga bermafaat...!!!

MENAMBAHKAN FASILITAS SCROLL BAR PADA KOMENTAR

Komentar pengunjung pada sebuah postingan, semakin lama akan semakin bertambah sehingga halaman yang berisi postingan tersebut akan kelihatan memanjang kebawah. Hal itu tentu saja akan mengganggu keindahan penampilan blog.
Untuk mengatasi masalah tersebut, EPG Studio telah memposting artikel yang berjudul : KOMENTAR PENGUNJUNG AKAN TAMPIL JIKA DI KLIK. Berarti tampilan komentar akan selalu tersembunyi jika kata Lihat/Tutup Komentar tidak di klik oleh pengunjung.
Usaha lain yang dapat anda lakukan agar komentar pengunjung tampil tidak memanjang yaitu dengan memanfaatkan fasilitas Scroll Bar pada bagian komentar sebuah blog.

Sebagai contoh, coba anda lihat ke bagian komentar EPG Studio yang telah menggunakan kombinasi dari dua trik yaitu : KOMENTAR PENGUNJUNG AKAN TAMPIL JIKA DI KLIK dan MENAMBAHKAN FASILITAS SCROLLBAR PADA KOMENTAR.
Anda juga dapat melakukan hal yang sama yaitu menggunakan kedua trik tersebut sekaligus atau hanya memilih salah satu diantaranya. Silahkan anda tentukan.
bagi anda yang ingin menggunakan trik MENAMBAH FASILITAS SROLL BAR PADA KOMENTAR, silahkan ikuti langkah-langkahnya :

• Masuk ke Blogger.
• Pilih Tata Letak.
• Pilih Edit HTML
• Cari kode untuk pengaturan komentar seperti di bawah ini :
  
  /* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}


• Copy kode dibawah ini kemudian paste pada bagian kode diatas.
  
  
  
  #comments {
height:300px;
overflow:auto;
}
  
  
  Kode tambahan boleh diletakkan diatas kode #comments h4 { atau dimana saja, asal masih berada dibagian komentar.
• Kode height:300px; boleh anda ganti dengan tinggi scroll bar yang anda inginkan
• Setelah selesai kilk tombol Simpan Template
• Selamat mencoba, semoga berguna...!!!

MEMBUAT TAB MENU HORIZONTAL

Sebuah blog akan menjadi kurang lengkap jika belum dipasang tab menu yang dapat dijadikan pedoman oleh pengunjung untuk melihat menu yang terdapat dalam blog tersebut.
Sebenarnya banyak cara untuk menampilkan menu misalnya : MEMBUAT LABEL BERPUTAR (LABEL CLOUDS) , MENGHEMAT HALAMAN POSTINGAN DENGAN DROPDOWN MENU , MENAMPILKAN LABEL DALAM TAB MENU

Atau dapat juga dengan cara membuat senduru dengan sofware khusus untuk membuat tab menu. Silahkna anda lihat di CARA MEMBUAT TAB MENU atau MEMBUAT TAB MENU DENGAN CSS TAB GENERATOR dan MEMBUAT TAB MENU DENGAN CSS MENU GENERATOR
Semua link diatas merupakan cara untuk menampilkan menu yang terdapat dalam sebuah blog.
Jika anda ingin menampilkan tab menu yang sudah jadi (tab menu yang digunakan EPG Studio), tinggal copy kode dibawah ini kemudian masukan pada blog anda.
Cara memasukkan kode kedalam blog seperti biasa : Masuk ke Blogger, Tata letak, Elemen Halaman, Tambah Gadget, Klik tanda + pada HTML/JavaScript, Paste kode pada kolom yang tersedia, Simpan
Kodenya seperti ini, silahkan anda copy :


<!doctype transitional//en 1.0 -//w3c//dtd public html xhtml>


<style type="text/css">
<!--
/* CSS Tabs */
#navcontainer {
background: #6C82B5;
border-top: 5px solid #32527A;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#navlist {
list-style: none outside none;
margin: 0px;
padding: 0;
}

@media all {
#navlist {
text-align: center
}
}

#navlist li {
bottom: 0px;
display: inline;
line-height: 1.2em;
margin: 0;
padding: 0;
position: relative;
}

html>body #navlist li {
background: #000;
margin: 0 3px 0 0;
padding: 4px 0px 4px 0;
}

#navlist a, #navlist a:link, #navlist a:visited {
background:#999999;
border: 1px solid #FFF;
bottom: 10px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em;
margin: 0;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;
}

#navlist a:hover {
background: #e6e6e6;
bottom: 1px;
color: #FFF;
position: relative;
right: 1px;
}

#navlist a:active {
background: pink;
bottom: 0px;
color: blue;
position: relative;
right: 0px;
}

#navlist li#active {
background:#369 ;
bottom: 1px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}

html>body #navlist li#active {
background: #000;
margin: 0 2px 0 2px;
}

#navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover {
background: #808080;
border-bottom: none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 10;
color: ;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
}

-->
</style>




<div id="navcontainer">
<ul id="navlist">
<!-- CSS Tabs -->
<li><a href="http://epg-studio.blogspot.com/search/label/TUTORIAL%20BLOGGER">TUTORIAL BLOGGER </a></li>
<li><a href=" http://www.blogger.com/profile/14536802221205706514" target="_balnk">PROFIL ADMIN</a></li>
<li><a href="http://bloglambirday.blogspot.com" target="_blank">AYAH BUNDA</a></li>
<li><a href="http://epg-studio.blogspot.com/search/label/FREE%20DOWNLOAD">FREE DOWNLOAD</a></li>
<li><a href="http://epg-studio.blogspot.com/2009/04/berita-bocornya-un-sma-2009.html">TUKERAN LINK</a></li>
<li><a href="http://epg-studio.blogspot.com/search?max-results=999"><blink>DAFTAR ISI</blink></a></li>
<li><a href="http://epg-studio.blogspot.com/2008/07/koleksi-award-epg-studio.html">KOLEKSI AWARD</a></li>
<li><a href="http://epg-studio.blogspot.com/2009/08/buku-tamu.html">BUKU TAMU</a></li></ul>
</div>
</!doctype>

• Gantilah tata warna yang ada sehingga penampilannya berbeda dengan EPG Studio
• Gantilah huruf yang berwarna merah dengan menu pada blog anda