Latest Post
Tampilkan postingan dengan label Trik Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Trik Widget. Tampilkan semua postingan

Membuat Widget Jam Kaligrafi Allah


Cara Membuat Widget Jam Kaligrafi Allah

Agar Menu sidebar anda bervariasi dan menarik, salah satunya adalah dengan menambah Jam Islami 
Silahkan anda Copy Paste kode Script di bawah ini : 












<p align="center"><embed src="http://www.widgipedia.com/widgets/orido/Jam-Kaligrafi-ALLAH-shadow-4617-8192_134217728.widget?__install_id=1248336094072&__view=expanded" width="200" height="200" flashvars="&col1=d89b09&col2=7cc034&dayAdd=0&cal=true&gig_lt=1248336103578&gig_pt=1248336182359&gig_g=1&gig_n=blogger" swliveconnect="true" quality="best" loop="false" menu="false" wmode="transparent" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" > </embed></p> 


 Selamat Mencoba .............
 
 

Cara Memasang Buku Tamu Tersembunyi 2

Memasang Buku Tamu Tersembunyi

Kalau kamu ga tau lagi mau taruh buku tamu Shobat di mana, buat aja buku tamu  "tersembunyi", dan kalau diklik akan langsung terlihat.
Contohnya shobat bisa lihat di bagian sebelah kanan layar di Blog saya. dan klik tab
BUKU TAMU  dan buku tamu itu akan bergerak keluar, sehingga yang tadinya tidak kelihatan akan jadi terlihat. Lumayan ngirit lahan Sidebar he3….

Caranya:
  1. Masuk ke account Blogger kamu, pilih "Layout" kemudian "Page Elements",
  2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
  3. Copy-paste kode di bawah ini:

<style type="text/css">
#gb{
position:fixed;
top:2px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:130px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE_nwg6Vf7fkIGKDC8aZMdtxEyq8feFe1kh8eDu_i1bhUFuqBdn1Vunpe-Q_OT4BtvXW2cbAdlMM7Sk265DMUTG6J6QrkADEbft8AFA5pabocBq4SUhlRkckx3AnCkl7jD-lUBLQWdm60/s128/BOOK.png')no-repeat;
}
.gbcontent{
float:left;
border:2px solid #2A0A0A;
background:#610B0B;
padding:5px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="mangabbas" src="http://www5.shoutmix.com/?mangabbas" width="250" height="350" frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?mangabbas">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->


<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://mangabbas.blogspot.com/2011/05/cara-memasang-buku-tamu-tersembunyi.html">
sini (MANG ABBAS)
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[TUTUP]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Keterangan :
Warna Ungu adalah : posisi dimana menurut shobat suka
Warna hijau adalah  : kode buku tamu shobat (silahkan diganti)!!

Selesai……
Simpan…. semoga manfaat..
 

Tips merubah background Sidebar

 Tips merubah background Sidebar

Sidebar biasanya berada disebelah kanan atau kiri postingan artikel. Tidak jauh berbeda dengan merubah background blog, untuk mengganti background sidebar ini kita juga akan meng-utak-atik kode css-nya.

Langkah-langkahnya :
  • Login ke blog anda Klik DISINI, silakan isi email dan password blog anda
  • Pilih ‘TATA LETAK’
  • Klik "Pilih Edit HTML"
  • Silakan anda download terlebih dahulu Template anda klik "Download Template Lengkap" sebelah kanan atas ( menjaga jika template anda kacau dan mengembalikan ke template semula)
  • (gunakan Ctrl + F ) Anda cari kode css seperti di bawah ini atau yang mirip dibawah ini :
#sidebar {
width: 226px;
float: $endSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
  • Jika kita perhatikan kode diatas, kita tidak menemukan kode backgroundnya, Seandainya anda menemukan kode yang seperti diatas, anda perlu menambahkan kode backgroundnya seperti : background-color : #CCCCCC ; dan kode diatas akan berubah seperti :

#sidebar {
width: 226px;
float: $endSide;
background-color : #CCCCCC ;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

  • Silakan Anda ubah Kode warna backgrgroundnya, sesuaikan dengan keinginan anda (untuk kode warna HTML silakan anda lihat DISINI)
  • Kalau warna background sdh sesuai dengan keinginan, klik simpan template 
  • Selesai
  • Semoga sukses.