Cara Membuat Scroll Pada Widget

Kamis, 30 Mei 2013

Cara membuat scroll widget dari  Blogspot :

• Klik Desain
• Klik Template
• Klik Edit HTML
• Kemudian Pastekan Kode dibawah ini di atas kode ]]>

#BlogArchive1 .widget-content{

height:200px;

width:auto;

overflow:auto;

}

• Klik Simpan.

Catatan :
height:200px; silahkan atur sesuai dengan selera.
Itu adalah wideget Blog Archive yang akan kita buat scroll , Bagaimana jika widget Blogpspot yang lainnya. Cukup mengganti Kode BlogArchive1, dengan nama widget lain yang akan dibuat scroll, misal : label.

Masuk ke dalam edit HTML template, Cari kode yang akan kita buat scroll, biasanya ada di paling bawah halaman template.
Perhatikan warna yang saya beri tanda merah.

<b:widget id='Followers1' locked='false' title='♥♥ Sahabat ♥♥' type='Followers'/>

<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>

<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>

<b:widget id='Label1' locked='false' title='Kategori' type='Label'/>

<b:widget id='HTML5' locked='false' title='Statistik Blog Ini' type='HTML'/>

Kode warna merahlah yang kita sematkan atau digunakan.
Jadi jika label yang akan di buat scrol kodenya menjadi :

#Label1 .widget-content{

height:200px;

width:auto;

overflow:auto;

}

Cara Membuat Scroll Widget dari pihak ketiga :

Cara ini sangat  gampang dan mudah sekali ,karena tidak harus masuk ke edit template. Cukup dengan menambahkan kode widget yang akan dibuat scroll.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #eee;">

Kode yang akan dibuat scroll

</div>

width : ukuran lebar kota 100% akan secara otomatis mengikuti lebar sidebar.
height : ukuran panjang kotak kebawah
solid     #eee :warna garis luarnya

Misal kode widget feedjit :

• Klik Desain
• Klik Tata Letak
• Cari Feedjit
• Tambahkan atau sisipkan kode diatas, misal nya :

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #eee;">

Kode Feedjit

</div>

• Klik Simpan dan lihat hasilnya.

Read more »

Cara Membuat Buku Tamu

Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse ), silahkan masukkan kode berikut di HTML/Javascript blog sobat.

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">
<center>

<!-- BEGIN CBOX - www.cbox.ws - v001 -->

<div id="cboxdiv" style="text-align: center; line-height: 0">

<div><iframe frameborder="0" width="300" height="275" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4100717" style="border:#FFFFFF 1px solid;" id="cboxmain4-4100717"></iframe></div>

<div><iframe frameborder="0" width="300" height="75" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4100717" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform4-4100717"></iframe></div>

</div>

<!-- END CBOX -->

<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-buku-tamu-auto-hide-di.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>
 

Caranya :

1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. Masukkan kodenya di kotak yang di sediakan.
3. Klik Save 

Tambahan :
Ganti kode yang berwara biru dengan kode buku tamu milik sobat. Sobat yang belum punya buku tamu silahkan buat terlebih dahulu di cbox ( seperti blog ini) , fibox, shoutchamp atau pada penyedia chatbox gratisan lainnya.

Read more »

Cara Membuat Tombol Share Keren

Sabtu, 18 Mei 2013

Dengan membuat tombol share ini, blog agar tampil lebih menarik/keren, semoga membuat tombol share ini, dapat bermanfaat bagi kita, 

Berikut langkah-langkah  membuat Tombol Share Keren di Blog :

* Log in ke Blogger

* Masuk ke Tata Letak

* Tambahkan Gadget

* Pilih HTML/JavaScript

Read more »

Cara Membuat Blog Gratis

Selasa, 14 Mei 2013

Blog itu sendiri bisa digunakan sebagai media penghubung, menjembatani antara si penulis dan pembaca, jadi si pembaca blog paham dan mengerti dengan maksud dan tujuan yang ditulis oleh penulis itu sendiri. bisa juga menjadi penghubung antara si penjual dan pembeli (dalam hal ini blog yang digunakan sebagai sebuah ladang usaha menjual produk. sebutan populernya Toko Online).

Membuat blog itu sebenarnya tidak terlalu susah, yang terpenting sobat cermat dalam langkah-langkah awalnya. dan mengenai cara membuat blog gratisan ada banyak layanan yang menyediakan blog gratis, beberapa diantaranya yang paling sering dipakai adalah:

Read more »

Cara Memasang Widget Jam Digital Di Blog

Minggu, 12 Mei 2013

Widget Jam Digital adalah salah satu widget yang bisa digunakan untuk mempercantik Blog sobat...
Oke ikutin langkah-langkah dibawah ini yang udah ane susun sedemikian rupa :

1.Sobat harus masuk ke Website Penyedia layanan Widget Jam Super Unik dengan Cara Klik JAM
2.Nanti Sobat akan dibawa ke Halaman yang tampilannya seperti Gambar Di bawah ini :

Read more »

Memasang Widget Google Translate Dilengkapi Bendera

Panduan blogger yang akan menjelaskan, membahas serta membantu sobat blogger semua khususnya yang "dibilang" masih awam ataupun masih pemula dalam dunia blogger tentang "Panduan Cara Memasang Widget Google Translate Dilengkapi Bendera di Blog".jika sobat ingin memiliki sebuah widget translate dengan atribut bendera. Sebenarnya widget translate/translator fungsinya sama saja baik dilengkapi bendera maupun tanpa atribut bendera. Namun widget google translate yang dilengkapi bendera terlihat lebih menarik.

      

      

Read more »

Cara Membuat / Memasang Burung Twitter Terbang di Blog

Kali ini aku akan berbagi bagaimana cara memasang burung twitter terbang atau melayang - layang atau mondar - mandir di blog sobat. Bagi sobat yang tertarik untuk memasang burung twitter terbang atau melayang - layang ini, silahkan ikut tutorial berikut .

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> Pilih HTML/Javascript

Masukkan Script berikut ke dalam kotak yang telah di sediakan.

Read more »

Cara Membuat Read More Otomatis di Blog

Sabtu, 11 Mei 2013

Cara membuat Read More otomatis di Blogspot dengan menambahkan kode javascript pada template blog. Kali ini yang akan saya bahas mengenai cara membuat read more di blogspot atau blogger.
Langkah-langkahnya sebagai berikut :

• Login ke Blog anda
• Buka halaman design > Edit HTML > centang Expand template widget
• Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
• Paste kode berikut tepat dibawah </head>

Read more »