Cara Menambahkan Emoticons YM Di Komentar Blogspot

Posted by Gani Mugni Jumat, 29 April 2011 0 komentar
Ingin Tahu Cara Menambahka Emoticons YM (Yahoo Messenger) Di Komentar Blogspot, Silahkan Baca Tutorial Ini Sampai Selesai, Namun Saya Ingin Berterima Kasih Buat Agan Yang Sudah Request.
Oy Untuk Apa sih Memasang Emoticons Di Atas Komentar,, Menurut Saya Sih Ini Faslitas Untuk Para Pengunjung Blog Kita Untuk Mempermudah Mereka Untuk Menunjukkan Ekspresinya, Dengan Gambar Emoticons Yang Lucu - Lucu ini ,Agar Lebih Menarik Aja..


Download movie,single/album mp3,software full  version,artikel,tutorial,blogspot,blogger,news atau berita indonesia

Kita Mulai Saja Yah.... :

1. Seperti Biasa Masuk Dulu Ke akun Blogger Anda.
2. Di Dashboard Klik Desaign -> Edit HTML
3. Centang  Expand Widget Template
4.  Lalu Cari Kode </body> (Ctrl + F)
5. Lihat Kode Di Bawah Ini, Lalu Pastekan Di Atas Kode </body>
<script src='http://js-rezdown7.googlecode.com/files/y-emot.js' type='text/javascript'/>
6. Kalau Proses Di Atas Telah Selesai, Silahkan Cari Kode <p class='comment-footer'> Atau Kalau Tidak Ketemu Cari Saja Yang Mirip-Mirip Seperti Kode Tersebut, Dan Jika Terdapat 2 Kode Yang Sama,Gunakan Kode Yang Bagian Bawah.
7. Jika Telah Ketemu Kode Di Atas, Silahkan Copy Kode Beikut Di Bawah Kode Di Atas


<b>
<img border='0' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S1USd83ybAI/AAAAAAAAB5A/13r9iaeHXNg/t4belajarblogger1.gif'/>:10
<img border='0' src='http://lh6.ggpht.com/_RVpTV2JOOxA/S1USdxjBn_I/AAAAAAAAB5E/sOVky4ztSmE/t4belajarblogger2.gif'/>:11
<img border='0' src='http://lh5.ggpht.com/_RVpTV2JOOxA/S1USeB9HOII/AAAAAAAAB5I/uLlq8RkH02w/t4belajarblogger3.gif'/>:12
<img border='0' src='http://lh4.ggpht.com/_RVpTV2JOOxA/S1USeEAy9oI/AAAAAAAAB5M/Pdtu657x6B4/t4belajarblogger4.gif'/>:13
<img border='0' src='http://lh6.ggpht.com/_RVpTV2JOOxA/S1USeXGXZDI/AAAAAAAAB5Q/df2fX4Zm6Fc/t4belajarblogger5.gif'/>:14
<img border='0' src='http://lh5.ggpht.com/_RVpTV2JOOxA/S1USoU5-AmI/AAAAAAAAB5U/oqgoLQYphfc/t4belajarblogger6.gif'/>:15
<img border='0' src='http://lh4.ggpht.com/_RVpTV2JOOxA/S1USobLRNhI/AAAAAAAAB5Y/PurdKOLrEtI/t4belajarblogger7.gif'/>:16
<img border='0' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S1USopWPsQI/AAAAAAAAB5c/PICwwHbC-YI/t4belajarblogger8.gif'/>:17
<br/>
<img border='0' src='http://lh4.ggpht.com/_RVpTV2JOOxA/S1USo-bTLFI/AAAAAAAAB5g/VYHVfW_ZYb0/t4belajarblogger9.gif'/>:18
<img border='0' src='http://lh5.ggpht.com/_RVpTV2JOOxA/S1USo9-0ljI/AAAAAAAAB5k/FY997izdhnc/t4belajarblogger10.gif'/>:19
<img border='0' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S1USw-_uwmI/AAAAAAAAB5o/EswqD9d5-9o/t4belajarblogger11.gif'/>:20
<img border='0' src='http://lh5.ggpht.com/_RVpTV2JOOxA/S1USw8gsZ-I/AAAAAAAAB5s/l9DtLFkSI64/t4belajarblogger12.gif'/>:21
<img border='0' src='http://lh5.ggpht.com/_RVpTV2JOOxA/S1USxKVziXI/AAAAAAAAB5w/pRx5aEvoI60/t4belajarblogger13.gif'/>:22
<img border='0' src='http://lh4.ggpht.com/_RVpTV2JOOxA/S1USxNWa6rI/AAAAAAAAB50/duzweRPvZ6M/t4belajarblogger14.gif'/>:23
<img border='0' src='http://lh5.ggpht.com/_RVpTV2JOOxA/S1USxUNayfI/AAAAAAAAB54/CsG2VYOApaI/t4belajarblogger15.gif'/>:24
<img border='0' src='http://lh6.ggpht.com/_RVpTV2JOOxA/S1US6HDAllI/AAAAAAAAB58/KG3m03xig6Q/t4belajarblogger16.gif'/>:25
<br/>
<img border='0' src='http://lh4.ggpht.com/_RVpTV2JOOxA/S1US6PmKUZI/AAAAAAAAB6A/PYCSAXW0ApQ/t4belajarblogger17.gif'/>:26
<img border='0' src='http://lh6.ggpht.com/_RVpTV2JOOxA/S1US6NaYjGI/AAAAAAAAB6E/UsqF7FrOBGs/t4belajarblogger18.gif'/>:27
<img border='0' src='http://lh5.ggpht.com/_RVpTV2JOOxA/S1US6XGijiI/AAAAAAAAB6I/vcKBhgFSWGM/t4belajarblogger19.gif'/>:28
<img border='0' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S1US6WXsh3I/AAAAAAAAB6M/l_OMwToORbA/t4belajarblogger20.gif'/>:29
<img border='0' src='http://lh5.ggpht.com/_RVpTV2JOOxA/S1UTGwa0TKI/AAAAAAAAB6Q/KnmJ49U2WJI/t4belajarblogger21.gif'/>:30
<img border='0' src='http://lh6.ggpht.com/_RVpTV2JOOxA/S1UTG9ixupI/AAAAAAAAB6U/QNNEQkykP80/t4belajarblogger22.gif'/>:31
<img border='0' src='http://lh4.ggpht.com/_RVpTV2JOOxA/S1UTHWyJdTI/AAAAAAAAB6Y/2Pv4W2ncs8I/t4belajarblogger23.gif'/>:32
<img border='0' src='http://lh4.ggpht.com/_RVpTV2JOOxA/S1UTHQWhPpI/AAAAAAAAB6c/LSND5-0lrx0/t4belajarblogger24.gif'/>:33
<br/>
<img border='0' src='http://lh6.ggpht.com/_RVpTV2JOOxA/S1UTIDxYkvI/AAAAAAAAB6g/yrPsAbfaWvA/t4belajarblogger25.gif'/>:34
<img border='0' src='http://lh6.ggpht.com/_RVpTV2JOOxA/S1UTQZirpuI/AAAAAAAAB6k/BbDSlfK8XRQ/t4belajarblogger26.gif'/>:35
<img border='0' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S1UTQvNLmkI/AAAAAAAAB6o/gEpNyGG50vs/t4belajarblogger27.gif'/>:36
<img border='0' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S1UTQtoLCwI/AAAAAAAAB6s/E5EVnTZ6Ubk/t4belajarblogger28.gif'/>:37
<img border='0' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S1UTQl7nF4I/AAAAAAAAB6w/0MyWP5A3naY/t4belajarblogger29.gif'/>:38
<img border='0' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S1UTQ1qCo9I/AAAAAAAAB60/JtoZligr2LM/t4belajarblogger30.gif'/>:39
</b>
8. Klik Save Template Dan Lihat Hasilnya

Sekian Dulu Dari Saya
Lebih dan Kurangnya Tolong Di Maafkan,hehe Jika Terdapat Kesalahan Silahkan Di Laporkan
Terima Kasih..t

Baca Selengkapnya ....

Membuat Tombol Next Page Dengan Angka

Posted by Gani Mugni 0 komentar
Cara Membuat Tombol Next Page Dengan Angka 1,2,3,4 dst.
Assalamualaikum dan selamat malam semua para sahabat blogger,,oy pada kesempatan lalu saya baru saja memposting tentang bagaimana cara Membuat Tombol Prev , Home dan Next di Blogspot dan pada kesempatan kali ini saya akan membagikan cara memasang next page dengan angka,,sebenarnya antara (Membuat Tombol Prev , Home dan Next di Blogspot) dan (Memasang Next Page Dengan Angka) kegunaan dan tujuan sama,, yang berbeda hanyalah tampilan dan pastinya cara pemasangannya,, untuk contoh silahkan lihat gambar di bawah ini :



Okey sobat,,kita langsung saja masuk ke cara membuatnya.
1. Masuk dulu ke akun blogger anda
2. Setelah berada di Dashboard Klik Design --> Edit HTML
3. Backup Dulu Template anda dengan mengKlik Download Full Template
(Terserah anda Ya atau Tidak.tapi lebih baik Ya)
3. Centang Expand Template Widget
4. Cari Kode ]]></b:skin>
5. Copy kode di bawah lalu paste di atas kode ]]></b:skin>



.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
.showpage a:hover {text-decoration:none;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}
6.  Setelah itu cari kode </body>
7. Copy lalu paste kode di bawah ini tepat si atas kode </body>

<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord=&#39;Previous&#39;;
var downPageWord=&#39;Next&#39;;
</script>
<script src='http://js-rezdown7.googlecode.com/files/rd7page.js' type='text/javascript'/>
8. Save Template Dan Lihat Hasilnya



Sekian Dulu Dari Saya
Lebih dan Kurangnya Tolong Di Maafkan,hehe Jika Terdapat Kesalahan Silahkan Di Laporkan
Terima Kasih.

Baca Selengkapnya ....

Mengganti Tulisan Poskan Komentar Di Blog

Posted by Gani Mugni 0 komentar
Assalamualaikum...
Pada kesempatan ini saya akan membagikan artikel tentang bagaimana cara Mengganti Tulisan Poskan Komentar Di Blog, bagi sobat blogger semua pasti sudah tau di mana biasanya tulisan Poskan Komentar berada, bagi yang belum tau "Kasian Deh Loe...." hehehe,masa sih belum tau itu loh.. tulisan yang biasanya berada di atas form komentar/kolom untuk membuat komentar.


Caranya cukup mudah yaitu...

1. Masuk dulu ke akun blogger anda
2. Setelah berada di Dashboard Klik Design --> Edit HTML
3. Backup Dulu Template anda dengan mengKlik Download Full Template
(Terserah anda Ya atau Tidak.tapi lebih baik Ya)
3. Centang Expand Template Widget
4. Cari Kode <data:postCommentMsg/> , Biasanya Terdapat 2 kode yang sama, pilih yang pertama, atau keduanya pun tidak masalah,soalnya saya sudah mencobanya dan tidak ada reaksi yang terjadi :)
5. Setelah ketemu kode di atas, silahkan ganti dengan kata yang anda telah siapkan.
6. Save Template dan Lihat Hasilnya

Tambahan:
Jika anda inging menggantinya dengan gambar ganti kode <data:postCommentMsg/> dengan kode gambar anda, contoh :
<img src='http://i783.photobucket.com/albums/yy114/rrezkijitawwa/PK.png' alt='Tempel Komentar'/>
Kode yang berwarna Biru bisa anda ganti dengan URL/Alamat gambar anda sendiri.


Contoh pemakain gambar:


Sekian Dulu Dari Saya
Lebih dan Kurangnya Tolong Di Maafkan,hehe Jika Terdapat Kesalahan Silahkan Di Laporkan
Terima Kasih.

Baca Selengkapnya ....

Cara Membuat Chat Room

Posted by Gani Mugni Rabu, 27 April 2011 0 komentar
Sebelumnya terimakasih kepada trik-tipsblog yang memberi inspirasi .Simple sudah membuat chat room dengan flash kalau mau chat silahkan di sini...






Get your own Chat Box! Go Large!





Silahkan chat di sini . .. :inlove:kalau pengen ngambil kodenya klik saja ambil code.

gw tuh kurang apa sie. .

Baca Selengkapnya ....

Membuat text area pada postingan blogspot

Posted by Gani Mugni Minggu, 24 April 2011 0 komentar
cara pasang text area pada postingan?, gampang ngakusah repot2 keliling kesana kemari, langsung ada aja deh to the poin nya bro!
 copas code yang dibawah ini




Keterangan: rows= menunjukkan tinggi text area, cols= menunjukkan lebar dari text area. Silahkan sesuaikan sendiri angka-angka tersebut dengan keinginan anda!

Baca Selengkapnya ....

Cara Membuat recent comment dan recent post

Posted by Gani Mugni Sabtu, 23 April 2011 0 komentar
Pada artkel kali ini saya akan menjelaskan bagaimana Cara Membuat recent comment dan recent post
Yg harus kalian lakukan hanya menambahkan kode di bawah ini:

<div><style type="text/css">
    div.TabView div.Tabs
    {height: 30px;overflow: hidden}
    div.TabView div.Tabs a {float:left; display:block; width: 99px; /* Lebar Menu Utama Atas */
    text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
    padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
    border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
    font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #333333; /* Warna background Menu Utama Atas */ }
    div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#333333; /* Warna background Kotak Utama */ }
    div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
    div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    function tabview_aux(TabViewId, id)
    {
      var TabView = document.getElementById(TabViewId);
      // ----- Tabs -----
      var Tabs = TabView.firstChild;
      while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
      var Tab = Tabs.firstChild;
      var i   = 0;
      do
      {
        if (Tab.tagName == "A")
        {
          i++;
          Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
          Tab.className = (i == id) ? "Active" : "";
          Tab.blur();
        }
      }
      while (Tab = Tab.nextSibling);
      // ----- Pages -----
      var Pages = TabView.firstChild;
      while (Pages.className != 'Pages') Pages = Pages.nextSibling;
      var Page = Pages.firstChild;
      var i    = 0;
      do
      {
        if (Page.className == 'Page')
        {
          i++;
          if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
          Page.style.overflow = "auto";
          Page.style.display  = (i == id) ? 'block' : 'none';
        }
      }
      while (Page = Page.nextSibling);
    }
    // ----- Functions -------------------------------------------------------------
    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
    function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
    //]]>
    </script>
    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 240px;" class="Tabs">
    <a>Terbaru</a>
    <a>Komentar</a>

    </div>
    <div style="width:240px; height:300px; " class="Pages">
    <div class="Page">
    <div class="Pad">
 
<script style="text/javascript" src="http://duniaanda.googlepages.com/typoxp-recentposts.js">
</script>
<script style="text/javascript">
var numposts = 10;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://tejahtc.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script>
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
<script style="”text/javascript”" src="http://duniaanda.googlepages.com/typoxp-recentcomments2.js">
</script>
<script style="text/javascript">
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://tejahtc.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
       </div>
    </div>

    <div class="Page">
    <div class="Pad">
   <script src="http://kumpulblogger.com/sca.php?b=6024" type="text/javascript"></script>
    </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script><div></div></div>

caranya adalah SBGB:


1. Login ke akun Blogger Anda
2. Klik Tata Letak/Rancangan
3.Add Gadget
4.Pilih HTML/Java Script
5.lalu copas(copy paste) kode/script yg diatas
6.Simpan
CATATAN: ubah kode yg berwarna merah dengan alamt url anda sendiri
                    ubah juga kode yg berwarna biru sesuai dengan ukuran Gadget anda
~SELAMAT MENCOBA~

Baca Selengkapnya ....

Cara Mengganti Icon Kursor blog

Posted by Gani Mugni Jumat, 22 April 2011 0 komentar



Apakah anda ingin kursor blog anda menjadi seperti diatas? jika ingin mari ikuti Langkah Berikut:


1. Login ke akun Blogger Anda
2. Klik Tata Letak/Layout

3.add gadget/ tambah gadget




4.Pilih HTML

5.Copas(copy paste) kode Berikut:
<style type="text/css">body {cursor:url("http://i1237.photobucket.com/albums/ff473/muhammadsuteja/Sais-icon.png"),default}</style>
6.Simpan


CATATAN: 
jika kalian ingin icon yg lain/inign icon pilihan anda sendiri..ubah saja url yg berwarna biru menjadi alamat url gambar anda sendiri......

Kunjungi alamat dibawah ini untuk mendapatkan lebih banyak icon

Baca Selengkapnya ....

Menghilangkan Garis Bintik-bintik Jejak Link

Posted by Gani Mugni 0 komentar
Pada Tutorial Blog Sebelumnya Blog Sharing Ilmu Pengetahuan , Sudah Menjelaskan Pada Sobat Tentang Bagaimana Cara Memabuat Efek Animasi Blur Otomatis Di Blog.Dan Pada Tutorial Blog Kali Ini Juga Saya Akan Menjelaskan Pada Sobat Semua Tentang Bagaimana Cara Menghilangkan Garis Bintik-bintik Jejak Link. Artikel Ini Bertujuan Agar Jejak Link Pada Blog/Web Yg Berupa Bintik-bintik Dan Juga Border,Menghilang Di Blog/Web Sobat .Dan Artikel Ini Untuk Memperindah Blog Sobat Semua.

Maksud Jejak Link Iyalah Ketika Sobat Mengklik Salah Satu Link Yg Ada Di Blog/Web Menimbulkan Jejak Berupa Bintik-bintik.Contohnya Adalah Di Blog Sobat Yg Belum Di Beri Css Yg Digunakan Untuk Menghilangkan Jejak Bintik-bintik Tersebut, Pasti Akan Menimbulkan Garis Bintik-bintik Seperti Border Dotted.
Cara Menghilangkan Garis Bintik-Bintik Jejak Link,Ialah Dengan Cara Menambahkan Beberapa Css...

Y Udah Sob Saya Akan Memulai Langkah Langkahnya:



  1. Login Ke Akun Blog Sobat
  2. Pilih Rancangan -->Edit HTML 
  3. Copas Kode Berikut Tepat Diatas Kode ]]></b:skin> 
a:active{text-decoration:none;color:#ffffff;border:0px;-moz-outline-style:none;}
a:focus{outline:none;-moz-outline-style:none;}

    4.Simpan Templatenya

Baca Selengkapnya ....

Membuat Pesan Pembuka dan Penutup Pada Blog

Posted by Gani Mugni 0 komentar
Anda tentu sering menemukan saat membuka sebuah blog kemudian tampil sebuah pesan pada layar baik itu ucapan selamat datang ataupun hanya sekedar pesan dari pemilik blog. Mungkin sebagian dari anda akan mengatakan bahwa trik ini sudah cukup basi, tapi tidak ada salahnya kalau saya tulis kembali sekedar untuk catatan pribadi dan mungkin akan bermanfaat bagi anda yang belum tahu cara membuatnya.

Lalu bagaimana triknya, ikuti saja langkah-langkah berikut:
Login ke akun Blogger anda, klik Layout-Edit HTML lalu pada bagian atas cari kode <head> dan masukan script berikut ini dibawahnya.


<script type='text/javascript'>
alert("Selamat datang di blog saya..Jangan lupa komen ya..")
</script>

Ada ucapan selamat datang pasti ada ucapan selamat tinggal, lalu bagaimana menampilkan pesan jika halaman blog ditutup untuk meninggalkan pesan bagi pengunjung, berikut triknya:

Masih dalam mode Edit HTML dan dengan cara yang sama seperti diatas hanya scriptnya yang berbeda, masukan script berikut dibawah kode atau dibawah script pesan pembuka tadi.

<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert(&#39;Hayoo mau kemana??..Besok mampir lagi yaa.. &#39;);
}
parent.window.onunload=goodbye;
</script>

Text yang berwarna Hijau bisa anda ganti sesuai keinginan anda, lik pratinjau atau preview sebelum menyimpannya. Kalau anda sudah berhasil, silahkan di simpan pekerjaan anda. Bagaimana, mudah bukan? Anda cukup menambahkan sedikit kode Java script pada halaman blog anda dan anda sudah tampil beda. Selamat mencoba..

Baca Selengkapnya ....

Membuat Kursor Bertabur Bintang

Posted by Gani Mugni 0 komentar


Jumat, 22 April 2011

Artikel kali ini Saya akan menjelaskan tentang cara Membuat Kursor Bertabur Bintang.
Langsung Aja kita mulai langkah demi langkahnaya:
1. Login ke akun Blogger Anda
2. Klik Tata Letak/Rancangan
3.Add Gadget/Tambah Gadget
4.Pilih HTML/Java Script
5.Masukan kode/script di bawah ini
<script src='http://muhammadsuteja.googlecode.com/files/bintang.putih.js' type="text/javascript"></script>
6.Simpan
Catatan:
Anda bisa Merubah warna bintangnya sesuai dengan keinginan anda, dengan cara mengubah kode yg berwarna Merah dengan warna Pilihan anda Misal: Hijau,kuningMerah......

Baca Selengkapnya ....

Cara Menyisipkan Gambar Pada Judul Posting Blog

Posted by Gani Mugni 0 komentar
Pada Tips Mempercanrik Blog Sebelumnya Saya Sudah Menjelaskan tentang bagaimana cara memberi backgground pada judul posting dan pada artikel kali ini saya akan menjelaskan pada sobat tentang bagaimana cara menyisipkan gambar pada judul posting blog.Seperti judul posting saya,saya sudah sisipkan sebuah image untuk memperindahnya.
jika sobat ingin seperti itu sobat bisa mengikuti langakah-langkah berikut:
1.Login ke akun Blog Sobat
2.Pilih Rancangan/Tata letak kemudian Pilih "EDIT HTML" Dan jangan lupa untuk centang kolom expand template widget
3.Cari Kode seperti ini
<a expr:href='data:post.url'>
<data:post.title/></a>

4.Letakan Kode dibawah ini Tepat Diantara kedua kode tersebut
<img src="http://4.bp.blogspot.com/_O84nraTVNhw/TTVqQ9DH7uI/AAAAAAAAALw/9fRW5i7cCzI/s1600/writing.jpeg" width="45" hight="45" border="0"></img>
Sehingga Menghasilkan Seperti Ini:
<a expr:href='data:post.url'>
<img src="http://4.bp.blogspot.com/_O84nraTVNhw/TTVqQ9DH7uI/AAAAAAAAALw/9fRW5i7cCzI/s1600/writing.jpeg" width="45" hight="45" border="0"></img>
<data:post.title/></a>
<b:else/>
5.Simpan Templtenya Danlihat Hasilnya

Baca Selengkapnya ....

Cara membuat link berkedip warna warni

Posted by Gani Mugni 0 komentar


Anda ingin link ada menjadi seperti itu...ketika di sorot mouse! mari ikuti langkah berikut:


1. Login ke akun Blogger Anda
2. Klik Tata Letak/Rancangan
3. Klik Edit HTML
4. Cari Kode </head> , Untuk memudahkan cari dengan tool pecari denagn menekan ctrl F atau F3.
5. Pasang kode sript dibawah ini dibawah kode </head> atau disamping kode </head>


<script src='http://muhammadsuteja.googlecode.com/files/rainbow.js'></script>
sehingga menghasilkan seperti ini:
</head><script src='http://muhammadsuteja.googlecode.com/files/rainbow.js'></script>


6.Simpan dan lihat hasilnya

Baca Selengkapnya ....

Membuat kursor mouse Diikuti Teks

Posted by Gani Mugni 0 komentar

Dalam Tutorial Blog kali ini saya akan menjelaskan tentang Cara membuat kursor mouse diikuti teks.
membuat kursor diikuti oleh teks sangatlah mudah...sobat hanya menambahkan kode/script Dibawah ini.



<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #FF0000;



/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = "Nama  sobat";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();

</script>

Cara Menambakannya adalah Sbgb:
1.Masuk ke akun blog anda
2.Pilih Tata Letak/Rancangan--->Kemudian Pilih HTML/Java Script
3.Masukan kode/Script Diatas
4.Ubah kode yg berwarna hijau sesuai keinginan sobat
5.Simpan
~SELAMAT MENCOBA~

Baca Selengkapnya ....

Membuat Footer 3 kolom Dengan Background

Posted by Gani Mugni 0 komentar
Pada tips Mmepercantik Blog kali ini saya akan menjelaskan cara Membuat Footer 3 Kolom Dengan Background,Baik saya akan memulai langkah-langkahnya


  1. Login ke blogger dan masuk ke Dasbor.
  2. Klik Rancangan, lalu pilih menu Edit HTML (Jangan Centang "Expand Template Widget")
  3. Cari kode ]]></b:skin>
  4. Letakkan kode CSS berikut ini diatas ]]></b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
background:#444 url(http://i1237.photobucket.com/albums/ff473/muhammadsuteja/footerbawah.jpg) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff
}
 

5.Cari Kode <!-- end content-wrapper --> dan letakkan kode dibawah ini tepat diatasnya
<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>
 

6.Simpan Template

Baca Selengkapnya ....

Efek Pelangi Pada Link

Posted by Gani Mugni Kamis, 21 April 2011 0 komentar
Efek Pelangi Pada LinkMembuat efek pelangi pada link akan membuat tampilan blog kita lebih menarik dan lebih enak untuk dilihat, nantinya link tersebut bila disorot mouse akan berwarna pelangi untuk lebih jelasnya coba sorot salah satu link yang ada diblog saya, gimana bagus bukan….?? Penggunaan efek pelangi pada link menggunakan java script seperti Penggunaan Efek Salju Pada Blog..
Cara memasangnya sebagai berikut :


1. Pilih Rancangan

2. Edit HTML, beri tanda centang pada Expand Template Widget

3. Cari kode berikut </head>

4. Copy kode dibawah ini dan pastekan diatas kode </head>



<script src='http://h1.ripway.com/pendi05/rainbow.js' type='text/javascript'>
</script>



5. Untuk melihat hasilnya klik pratinjau terlebih dahulu, jika sudah berhasil klik simpan.

Selamat Mencoba...

Baca Selengkapnya ....

Cara Membuat Menu Tab View

Posted by Gani Mugni 0 komentar
Cara Membuat  Menu Tab View
Kali ini saya akan memposting bagaimana Cara Membuat Menu Tab View. Menu Tab View adalah sebuah widget yang digunakan untuk menaruh beberapa konten dalam sebuah kotak atau area. Konten akan terlihat apabila kita meng-klik salah satu dari tab, dengan adanya Menu Tab View ini dapat menghemat ruang pada template blog kita. Script Tab View ini saya dapat dari ateonsoft.com


Berikut langkah-langkahnya

1.Login ke blogger dengan ID anda

2.Lalu Klik Menu Templates

3.Klik Sub Menu Edit HTML

4.Pada Kotak Edit HTML cari Kode ]]></b:skin>

5.Lalu Copy Kode berikut dan Pastekan diatas 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: 10px;

}

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: #E8E8E8;

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

div.Tabateonsoft div.Pages

{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -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:11px;padding: 3px 5px; text-align:left;}  



6.Lalu letakkan kode berikut dibawah kode <head>



<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>



7.Save Template

8.Pergi ke halaman Element Halaman

9.Klik Add Widget Element

10.Pilih Menu HTML/Java Script

11.Lalu Copy kode berikut



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






Selamat Mencoba...

Baca Selengkapnya ....

Berbagai Trik Penulisan Pesan Pada Cbox

Posted by Gani Mugni 0 komentar
Assalamualaikum... Apakah kamu pernah melihat pesan di Cbox berjalan bolak balik serta pesan dgn warna berbeda dgn pesan yg lainnya di Cbox Kamu ?? Hemm.. Pasti Kamu bertanya-tanya gimana ya cara membuatnya... iya kan ?? Sebenarnya jika Kamu meluangkan waktu untuk mencari tahu gimana cara membuatnya pasti kamu bisa dan gak penasaran lagi..! Tapi tenang.. Saya akan Berbagi Tips yaitu Berbagai Trik Penulisan Pesan Pada Cbox. Dengan membuat pesan pada cbox lebih menarik akan membuat orang mengunjungi blog kamu.



Berikut ini Macam-macam Trik Penulisan Pesan Pada Cbox :

Cara Membuat Teks Miring
Gunakan tag  [i] dan [/i]
Contoh: [i]teks[/i] hasilnya teks miring

Cara Membuat Teks Tebal
Gunakan tag [b] dan [/b]
Contoh: [b]teks[/b] hasilnya teks

Cara Membuat Teks Bergaris Bawah
Gunakan tag [u] dan [/u]
Contoh: [u]teks bergaris bawah[/u] hasilnya teks bergaris bawah

Cara Membuat Teks Bergaris Tengah
Gunakan tag [s] dan [/s]
Contoh: [s]teks[/s] hasilnya teks dicoret

Cara Membuat Teks Berukuran Besar
Gunakan tag [big] dan [/big]
Contoh: [big]teks[/big] hasilnya teks

Cara Membuat Tulisan Berukuran Kecil
Gunakan tag [small] dan [/small]
Contoh: [small]tulisan kecil[/small] hasilnya tulisan kecil

Cara Membuat Tulisan Rata Tengah
Gunakan tag [center] dan [/center]
Contoh: [center]rata tengah[/center]

Cara Membuat Tulisan Berwarna (Color)
 Gunakan tag [color=warna] dan [/color]
Contoh: [color=blue]teks biru[/color] hasilnya teks biru

Kode-kode warna:
[color=red] [/color]
[color=blue] [/color]
[color=green] [/color]
[color=yellow] [/color]
[color=pink] [/color]
[color=purple] [/color]
[color=brown] [/color]
[color=bronze] [/color]
[color=orange] [/color]
[color=black] [/color]
[color=white] [/color]
[color=gold] [/color]
[color=silver] [/color]
[color=violet] [/color]
[color=hotpink] [/color]
[color=navyblue] [/color]
[color=tan] [/color]
[color=aqua] [/color]
[color=teal] [/color]
[color=lime] [/color]


Cara Membuat Teks Berjalan (Marquee)
Gunakan tag [scroll] dan [/scroll]
Contoh: [scroll]teks[/scroll]

Cara Membuat Teks Ber Link
Gunakan tag [url=alamattujuan] dan [/url]
Contoh: [url=http://pendiari.blogspot.com]Blog Tutorial And Islam Religion[/url]
hasilnya adalah Blog Tutorial And Islam Religion

kamu juga bisa menggabungkan beberapa kode sekaligus untuk membuat pesan lebih menarik
contoh : [scroll][[big]teks[/big][/scroll]

Selamat mencoba semoga bermanfaat...

Baca Selengkapnya ....

Cara Membuat Cursor Bertabur Bintang

Posted by Gani Mugni Sabtu, 16 April 2011 0 komentar
Kemarin ada salah satu pengunjung website ini yang menanyakan lewat chat with me tentang script cursor bertabur bintang (kak mo tanya script yang buat cursor bisa bertabur bintang apa ya kak)emang benar mempercantik atau memperindah tampilan Blog adalah naluri dari setiap blogger, dan jikalau tampilan blog seorang blogger telah mencapai tahap yang paling indah nantinya juga sang pemilik akan bangga terhadap blognya, hehehe jangan kaya tampilan blog el_JOE CREATIONS ini yang terlihat semprawut hehehe ... nah ... dalam postingan kali ini el_JOE CREATIONS akan menjawab dan menjelaskan tentang bagaimana Cara Membuat Cursor Bertabur Bintang. Cursor yang bertabur bintang adalah salah satu cara untuk mempercantik tampilan blog, karena saat cursor di geser kursor tersebut akan mengeluarkan bintang - bintang.
Setelah melihat Contohnya Tertarik tidak sobat untuk membuatnya? jika tertarik silahkan ikuti tutorial Cara Membuat Cursor Bertabur Bintang di bawah ini untuk Membuat Cursor Bertabur Bintang.

1. Login ke blogger.

2. Klik Tatat Letak.

3. Klik Tambah Gadget.

4. Pilih HTML/javascript.

5. Pilih lalu Copy dan paste kode di bawah ini ke dalah kotak HTML/javascript tadi .

Bintang Biru

<script src="http://denisahlan.netau.net/bintang.biru.js" type="text/javascript"></script>


Bintang Hijau

<script src="http://denisahlan.netau.net/bintang.hijau.js" type="text/javascript"></script>


Bintang Merah

<script src="http://denisahlan.netau.net/bintang.merah.js" type="text/javascript"></script>


Bintang Putih

<script src="http://denisahlan.netau.net/bintang.putih.js" type="text/javascript"></script>


Bintang Ungu

<script src="http://denisahlan.netau.net/bintang.ungu.js" type="text/javascript"></script>


6. Kalo sudah selesai jangan lupa klik SIMPAN...

7. Selanjutnya silahkan sobat lihat hasilnya ...Cara Membuat Cursor Bertabur Bintang semoga bermanfaat bagi anda .

Baca Selengkapnya ....

Mengubah background judul postingan

Posted by Gani Mugni Jumat, 15 April 2011 0 komentar
Setelah lebih kurang 3 jam mengotak-atik template, akhirnya dapat juga mengganti background pada judul postingan. Sebenarnya cara itu sangat mudah apabila tahu kode yang harus diubah atau ditambah.
Anda tidak perlu melakukan hal yang sama berjam-jam duduk didepan komputer hanya untuk mencari cara agar bacground judul postingan pada blog anda bisa diganti dengan warna pilihan yang cocok dengan tata warna blog anda, karena EPG Studio telah mendapat cara yang dapat anda ikuti.
Simak caranya...!!!

  • Masuk ke Blogger dengan ID anda
  • Pilih Tata Letak
  • Pilih Edit HTML
  • Backup dulu template anda kalau takut gagal
  • Kotak padaExpand Template Widget tidak perlu dikasih tanda contreng
  • Cari kode ini :

    .post h3 {
    margin:.25em 0 0;
    padding:0 0 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.4em;
    color:$titlecolor;
    }
  • Ganti kode tadi dengan kode dibawah ini :

    .post h3 {
    margin:.25em 0 0;
    padding:4px 4px 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.4em;
    color:$titlecolor;
    background:#0066CC;
    border:3px solid #C3D9FF;

    }

    Gunakan ----{ CTRL + F }---- Untuk Mencari Artikel

    Dari kode diatas menunjukan background postingan berwarna biru tua dan border berwarna biru muda. Ganti kode warna dengan warna kesukaan anda dan border pasang di angka 0 jika anda tidak menginginkan adanya border.
  • Setelah anda selesai melakukan perubahan yang diperlukan, klik tombol simpan template
  • Lihat Blog anda sekarang.

By : FULLka --> Ðot™

Baca Selengkapnya ....

Cara Membuat Judul blog Berjalan

Posted by Gani Mugni 0 komentar
Ini adalah salah satu ilmu yang saya terapkan diblog ini, yaitu membuat judul blog berjalan.

judul blog akan terlihat berjalan pada Title bar browser..
berikut cara membuatnya :

1. Setelah login ke Blogger pilih Tata letak ==> Edit HTML
2. Cari kode berikut
  
    <title><data:blog.pageTitle/></title>

3. Ganti kode diatas dengan kode dibawah ini

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


    <script language='JavaScript'>
    var txt="<data:blog.pageTitle/>";
    var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
    txt=txt.substring(1,txt.length)+txt.charAt(0);
    segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
    </script

4. Klik Pratinjau untuk melihat hasilnya
5. Apabila berhasil Simpan Template

Note : Angka 100 berwarna biru diatas merupakan kecepatan pergerakannya, untuk mempercepat pergerakannya kurangi angka tersebut, untuk memperlambatnya tambah angka tersebut.

"Selamat mencoba"

Baca Selengkapnya ....

Show/hide Cbox pada posisi bawah [+Fire Background]

Posted by Gani Mugni 0 komentar
Hmmmm...akhir-akhir ini postingan saya tidak jauh-jauh dari Cbox nih, tapi tak apalah yang penting Cbox (hehehe..Cbox lagi). Setelah otak-atik kode akhirnya saya menemukannya nih bagiamana cara membuat Cbox Show/Hide pada Posisi bawah dengan fasilitas Background(Background dapat diganti). Mungkin saja sobat bosan dengan Cbox Show/Hide disebelah kiri atau kanan blog (*Patut dicoba nih).

Caranya mudah kok, baiklah...mau tau caranya?? yuk ikuti langkah berikut :

1. Pastinya login Blogger dulu
2. Pilih Rancangan>>Elemen laman
3. Tambahkan Gadget HTML/Java Script (Jangan diberi judul)
4. Copas kode berikut :
<style type="text/css">
#cb{
position:fixed;
bottom:150px;
z-index:+1000;
}
* html #cb{position:relative;}
.cbtab{
height:30px;
width:150px;
float:top;
cursor:pointer;
background:url('http://lh3.ggpht.com/_yF0--u7KSSI/TKQjhw7n0fI/AAAAAAAAAuY/Kn2pdAIOzcA/BUkuTamu.png') no-repeat;
}
.cbcontent{
float:left;
border:2px solid #676767;
background:url(http://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:30px;
-moz-border-radius-bottomleft:30px;
-moz-border-radius-bottomright:5px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideCB(){
var cb = document.getElementById("cb");
var w = cb.offsetWidth;
cb.opened ? moveCB(0, 30-w) : moveCB(20-w, 0);
cb.opened = !cb.opened;
}
function moveCB(x0, xf){
var cb = document.getElementById("cb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
cb.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveCB("+x+", "+xf+")", 10);}
}
</script>
<div id="cb">
<div class="cbtab" onclick="showHideCB()"> </div>
<div class="cbcontent">

<!-- GANTI DENGAN KODE CBOX - v001 -->

<div style="text-align: right;">
<a href="javascript:showHideCB()">
[Tutup]
</a></div>
<font size="2"><a href="http://www.berbagidisini.com/2010/09/showhide-cbox-pada-posisi-bawah-fire.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By enda fiVers</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var cb = document.getElementById("cb");
cb.style.bottom = (30-cb.offsetWidth).toString() + "px";
</script>

5. Ganti Kode yang berwarna merah dengan kode cbox
Note : Kode diatas digunakan untuk ukuran Cbox berikut (lihat Contoh berikut) :
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: left; line-height: 0">
<div><iframe frameborder="0" width="270" height="130" src="http://www6.cbox.ws/box/?boxid=558049&amp;boxtag=b5gcdz&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 0px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="270" height="80" src="http://www6.cbox.ws/box/?boxid=558049&amp;boxtag=b5gcdz&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 0px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->

-Silahkan ubah ukuran Cbox sesuai text berwarna biru diatas.
-Jika menggunakan Cbox yang ukuran tingginya melebihi ketentuan diatas silahkan ubah kode yang diberi background kuning (30) menjadi -100 (min 100), merubah kedua kode tersebut harus sama angkanya, Kalau belum pas silahkan ubah angka tersebut hingga menemukan hasilnya (*Jangan bosan-bosan mencoba)


6. Save & Lihat Blog..... jeng..jeng..jeng....
Nah... Cukup segitu caranya.
"Silahkan dikembangkan sendiri untuk tampilan lebih menarik lagi"
"Jika ingin
Copas tulisan ini jangan lupa beri sumbernya yaa (*kode etik blogger) "
 thx....

Baca Selengkapnya ....

Memasang Widget Follow - Show/hide

Posted by Gani Mugni 0 komentar

Follow...follow...mungkin tak asing lagi kata-kata ini bagi sobat-sobat blogger, tapi trik yang satu ini mungkin masih jarang ditemukan...hohoho..mungkin yaa...

Baiklaah...kali ini akan saya share bagaimana cara membuat widget follower melayang dengan mode show/hide. Postingan ini merupakan permintaan dari beberepa sobat blogger (hehehe..sebenarnya saya sudah berniat memposting sebelumnya).

Trik ini merupakan pengembangan dari Script untuk membuat show/hide Cbox, hehe..Cbox lagi Cbox lagi,,yasudahlah yang penting Follownya bisa show/hide. Mau tau caranya?? mari ikuti langka langkah berikut :

1. Pastinya login Blogger terlebih dahulu
2. Masuk ke Perancangan>>Elemen Laman
3. Tambahkan Gadget Html/Java Script
4. Copas kode berikut :
<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(http://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">


Kode Widget Follow Disini


<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://rizkyariff.blogspot.com/2011/04/memasang-widget-follow-showhide.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By Fullka Dot</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

Eits..jangan disave dulu, mari lanjut ke langkah selanjutnya

6. untuk mengambil kode widget follownya silahkan masuk ke link ini [http://www.google.com/friendconnect]

7. Lihat Gambar dibawah


-[1] Pilih blog sobat yang akan dipasang widget follownya
-[2] Klik "Tambahkan gadget anggota"
-[3] Silahkan diatur ukuran, warna  dll nya..
-[4] Klik "Buat kode"
-[5] Silahkan Copy kodenya, dan ikuti langkah selanjutnya

8. Paste kode Widget Follow tadi pada kode nomor 4 (*Gantikan kode yang berwarna merah dengan kode Widget Follow yang sudah dicopy tadi)

9. Save..
hohoho...ternyata tidak cukup sampai disini, masih ada 1km perjalanan lagi

10. Untuk memasang tombol Navigasinya, silahkan masuk ke :
Perancangan>>Edit HTML.

11. Cari kode <body> dan paste code brikut tepat diatas kode <body>

<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:5px;left:5px;' title='Follow'><img src='http://lh6.ggpht.com/_yF0--u7KSSI/TN6RD4JoCmI/AAAAAAAABG0/bkYV2RML-qk/Follow-.png'/></a>

12. Simpan template
lihat hasilnya... "Semoga Berhasil"

hmmm,,,akhirnya sempe juga....

Baca Selengkapnya ....
Panduan blog dan SEO support Jual Online Baju Wanita - Original design by Bamz | Copyright of Azhara Blog.