GISTECHINDO: Trik Blog

Setelah mencari cari.. akhirnya dapet juga yang cocok widget Like Box FB nya. ane dapat dari mbah Google. Sebelumnya jangan lupa siapin kode Like Box FBnya ya :D, kalo mau kasih Tombol Follow Twitter juga jangan lupa siapin itu kodenya.

Like Box Fb Melayang

Berikut ini cara bagaimana membuat fanspage atau like Bok FB melayang diatas postingan, fb merupakan salah satu web yang berpage rank tinggi jadi apa salahnya kita membacklinkan web atau blog ke page rank tinggi. ya ude karena leamaan langsung saja ini dia caranya.

1. Login Blogger >> Layout

2. Add a gadget trus pilih HTML/Javascript

3. Jangan kasih judul ya biar ngga muncul tulisan aneh di pagenya.hehehhe :)

4. Paste kode di bawah ini ke HTML/Javascript tadi

<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -182px;
width:310px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
cursor:pointer;
}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-facebook').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='kotak-facebook'>
<p style=" margin-right:10px; font-size:15px; color:#000000;">Mohon Bantu Saya,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fgistechindo&width&height=290&colorscheme=dark&show_faces=true&header=true&stream=false&show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:290px;" allowtransparency="true"></iframe>

<!-- Selesai --!>
<a class='close' href='#'>×</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="#">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="#">Get This Widget</a></p>
</div>

5. dan yang terahir Simpan dan lihat hasilnya :)

Hai sobat sekalian ketemu lagi dengan ane pada kali ini ane pang share lagi dulu ane perna share tentang Cara membuat scroll pada Blogarchive dan pada kali ane juga masih membahas seputar scroll. Namun kali ini yang ane akan share yaitu tutorial bagaimana cara membuat scroll horizontal dan vertical pada postingan, dengan menggunakan scroll juga dapat menghemat halaman posting juga, jadi tidak memakan banyak tempat.

Berikut ini pengertian dari scroll : Scrollbar adalah sesuatu yang dapat ditarik ke atas dan ke bawah atau digulung kekanan ke kiri atau ke atas ke bawah sehingga kita dapat menemukan isi yang tersembunyi. Scroll merupakan fitur penting ketika memakai komputer. Dengan scroll memudahkan kita untuk menaikkan dan menurunkan halaman pada Window explorer ataupun halaman suatu website.

Mungkin sobat pernah melihat blog yang penuh dengan isinya yang sangat panjang sehingga memperlambat loading blog tersebut. Supaya blog sobat tidak seperti itu, di tips kali ini saya akan menjelaskan cara membuat scrollbar. Dengan begitu kita bisa menghemat pamakaian ruang blog.

Scroll dibagi menjadi 2, yaitu scroll vertikal dan scroll horizontal. Scroll Vertikal yaitu scroll yang bisa atau dapat ditarik ke atas dan ke bawah sedangkan Scroll horizontal merupakan scroll mendatar yang bisa ditarik ke kiri dan ke kanan.

Scroll Vertikal dan Horizontal

Berikut ini merupakan contoh kode dari scrollbar Horizontal

Dengan menggunakan overflow-x, kita dapat membuat scroll bar ketika kontent pada div ini lebih lebar dari pada kotakan yang kita buat. Dengan menyeting paragraf menjadi 250%, maka hal ini akan membuat content lebih lebar 250% daripada kotakannya - akibatnya hal ini akan memaksakan terjadinya overflow ( menyebabkan munculnya scroll bar ).

</p>

</div>

Atau Bisa juga Pakai script dibawah ini

o <div style=”height:150px; width:300px; border:solid 2px orange;overflow:scroll; overflow-y:hidden;overflow-x:scroll;”>

o <p style="width:250%;"> Masukan text sobat <p/>

o </div>

Nb : orange yaitu warna bordernya

Berikut ini adalah contoh dari scroll Horizontal:

Scrollbar adalah sebuah kotak yang dapat digulung kekanan atau ke bawah sehingga kita dapat menemukan isi yang tersembunyi. Mungkin anda pernah melihat blog yang penuh dengan isinya yang sangat panjang sehingga memperlambat loading blog tersebut. Supaya blog anda tidak seperti itu, di tips kali ini saya akan menjelaskan cara menghilangkan sesak tersebut dengan membuat scrollbar. Dengan begitu kita bisa menghemat pamakaian ruang blog. Mau tau caranya? Berikut kode untuk membuat scrollbar: Anda dapat mengatur lebar dan tinggi scrollbar tersebut dengan merubah nilai pada width:80px; height:80px;. Gimana? Sangat mudahkan? Selamat mencoba…

Anda juga bisa mengatur warna kotak, tinggi, serta lebar (Lihat Tulisan berwarna tersebut diatas).

Mudahkan caranya cukup simple kok, kode tersebut sobat pastekan pada postongan sobat pilih tab html jika sudah maka kembali ke tab text lagi. Demikianlah scroll vertical pada postingan selamat berexperiman dan mencoba.

Berikut ini adalah kode scroll Untuk Scroll Vertikal Lihat dibawah ini :

Jika tanpa Setingan "paksaan" di tag paragraf <p>, maka cukup mudah untuk membuat scroll bar vertikal seperti ini.

</div>

Berikut ini contoh dari scroll Vertikal :

Itulah tadi kode dari scroll horizontal atau scroll yang mendatar, scroll horizontal bisa di jadikan alternative scroll jika kita tidak mau menggunakan scroll vertical atau scroll berdiri. Selamat mencobanya semoga berhasil yaa

Demikianlah postingan Tentang Cara Membuat ScrollHorizontal Dan Vertical Pada Postingan Semoga bermanfaat bagi sobat sekalian. Dengan memanfaatkan scroll pada postingan akan lebih menghemat sebuah halaman juga mempercepat loading pada halaman website atau blog. Sehingga blog kita terasa dinamis dan nyaman bagi para pengujung sekalian.

Berakhirlah sudah pada postingan ini akhir kata semoga sobat sukses selalu. Aamiin . . . .

Cara Membuat Like Box Fb Melayang

Posted by Unknown on Mar 24, 2014

cara mengetahui harga dari sebuah blog atau website

Posted by KANG GAWE on Mar 10, 2014

Cara Membuat Scroll Horizontal Dan Vertical Pada Postingan

Posted by KANG GAWE on Feb 10, 2014

Terimakasih sobat masih mau kembali ke blog ane, pada postingan kali ini masih lanjutan dari postingan dulu yaitu tentang Cara Memaksimalkan seo pada blog part 2 jika sobat belum membacanya silahkan klik disini.

CARA MEMAKSIMALKAN SEO PADA BLOG PART 3

Posted by Unknown on Feb 4, 2014

Terimakasih sobat masih mau kembali ke blog ane, pada postingan kali ini masih lanjutan dari postingan dulu yaitu tentang Cara Memaksimalkan seo pada blog part 2 jika sobat belum membacanya silahkan klik disini.