Ngeblog Yuk..

Selasa, 07 Februari 2012

Membuat Widget Jam Kaligrafi Allah

in on 07.58.00 1 Comment
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

in on 07.57.00 No Comments
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/AVvXsEiZ3Jd6UO-fTRKtYQb3rnLaEhsVSjnW-IUPxM3FYfOmJyUtixXnjNR1VqsefkIjGyOYTKD3vzZAq3DjCv-VE7peVgVPSxqj07cY8rpj1hCXE_fF9lMNbElaxvTIZyaijfbeyZyIxjfa2yI/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..

Cara menghilangkan Atribut Bloger

in on 07.07.00 No Comments
Cara menghilangkan Atribut Bloger

Cara menghilangkan Atribut Bloger (Didukung oleh Blogger)


Apabila anda menggunakan template yang disediakan oleh blogger ,maka dibagian widget atribut akan ikut terindek atau terlihat ,,?? apakah anda tidak senang atau tidak mau terlihat dan menghilangkan atribut blogger pada template ..?? cukup mudah  melakukannya ,,??


Mau tau caranya,,,,???
1. Yang pertama2 anda login ke dasbor blogger anda,
2.  Klik rancangan >>> klik  edt halaman
3.  Cari kode ]]></b:skin> dan letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>
4.  Kode CSS

#Attribution1 {
height:0px;
visibility:hidden;
display:none
}

5.  Klik simpan template.

Langsung Di Tes Gan .....>>>>>>>


Selasa, 31 Januari 2012

CARA MEMBUAT MENU MULTI TAB DI BLOG

in on 17.10.00 No Comments
CARA MEMBUAT MENU MULTI TAB DI BLOG

CARA MEMBUAT MENU MULTI TAB DI BLOG...
...Menu Multi Tab ini biasanya digunakan pada blog yang kontennya sudah padat.. jadi bisa menghemat ruang .. 3 in 1 widget jadinya...tinggal klik tabnya saja untuk berpindah-pindah ke isi menu tab berikutnya... didalam widget multi tab ini pada tiap-tiap tab-nya bisa kamu sematkan kode script Buku Tamu (Tab 1), Kode script Daftar isi (Tab 2), dan Kode Script Blogroll (Tab 3) atau terserahlah sesuai keinginan Shobat...
.... Pahami langkah-langkah cara membuatnya berikut ini ;

A. Menyisipkan Kode Script Menu Multi Tab di Kode HTML Template Blog

1. Seperti biasa.. Login ke Blogger > Rancangan > Edit HTML ( Biasakan centang expand template widget )..
2. Lalu Copy kode script dibawah ini...

/*----MULTItab----*/
div.TabView div.Tabs
{
height: 35px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
background-color: #56FCFA;
-moz-border-radius:10px 0px 0px 0px;
width: 125px;
text-align: center;
height: 35px;
padding-top: 3px;
vertical-align: middle;
border: 0px solid #999999;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #56FCFA;
text-shadow: 4px 4px 4px #aaa;
font-size:12px;
}
div.TabView div.Pages
{
clear: both;
border: 0px solid #999999;
-moz-border-radius:0px 0px 0px 10px;
text-shadow: 4px 4px 4px #aaa;
font-size:14px;
overflow: hidden;
background-color: #56FCFA;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
/*----end----*/
3. Dan Paste kan sebelum kode ]]></b:skin> ...seperti contoh dibawah ini...

/*----MULTItab----*/
div.TabView div.Tabs
{
height: 35px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
background-color: #56FCFA;
-moz-border-radius:10px 0px 0px 0px;
width: 125px;
text-align: center;
height: 35px;
padding-top: 3px;
vertical-align: middle;
border: 0px solid #999999;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #56FCFA;
text-shadow: 4px 4px 4px #aaa;
font-size:12px;
}
div.TabView div.Pages
{
clear: both;
border: 0px solid #999999;
-moz-border-radius:0px 0px 0px 10px;
text-shadow: 4px 4px 4px #aaa;
font-size:14px;
overflow: hidden;
background-color: #56FCFA;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
/*----end----*/

]]></b:skin>


4. Kembali ke Wigdet Edit HTML... Copy lagi kode dibawah ini...

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

5. Paste kan lagi sebelum kode </head>
    Maka akan menjadi ...seperti contoh dibawah ini...


<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

</head>
6. Jika sudah selesai dan benar, sesuai dengan langkah-langkah diatas.. maka klik Simpan Template...

B. Menambahkan Widget Menu Multi Tab di Elemen Halaman Blog
1. Blogger > Rancangan > Elemen Halaman > Tambah Gadget > HTML/Javascript... ( Silahkan letakan widget Menu Multi Tab ini di bagian halaman blog yang kamu inginkan )...
2. Lalu Copy kode script dibawah ini...
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 80;text-shadow: 4px 4px 4px #aaa;font-size: 12px;">
<a>GANTILAH NAMA MENU TAB 1 INI</a>
<a>GANTILAH NAMA MENU TAB 2 INI</a>
<a>GANTILAH NAMA MENU TAB 3 INI</a>
</div>
<div class="Pages" style="width: 465px; height: 250px;">

<div class="Page">
<div class="Pad">
ISI MENU TAB 1 - PASTE KODE SCRIPT BUKU TAMU ATAU DAFTAR ISI ATAU BLOGROLL DISINI YA..
</div>
</div>

<div class="Page">
<div class="Pad">
ISI MENU TAB 2 - PASTE KODE SCRIPT BUKU TAMU ATAU DAFTAR ISI ATAU BLOGROLL DISINI YA..
</div>
</div>

<div class="Page">
<div class="Pad">
ISI MENU TAB 3 - PASTE KODE SCRIPT BUKU TAMU ATAU DAFTAR ISI ATAU BLOGROLL DISINI YA..
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>
3. Jika sudah.. Simpan  blog Shobat  dan lihatlah hasilnya...

Tips merubah background Sidebar

in on 17.08.00 No Comments
 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.