Belajar Bersama, Berbagi Pengetahuan

Selamat datang di Belajar Bersama
__________________________________________________________________________________________________________________________
Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan
Minggu, 02 Juni 2013

Cara Membuat Buku Tamu Melayang di Sisi Kanan Blog

Cara Membuat Buku Tamu Melayang di Sisi Kanan Blog- Membuat buku tamu di blog dapat mempercantik tampilan blog kita. selain itu pengunjung juga dapat berkomentar melalui buku tamu ini. Kita dapat memasang buku tamu dengan berbagai cara. Ada yang memasang buku tamu pada sidebar, ada yang mebuat halaman tersendiri unutk buku tamu, dan ada juga yang membuat buku tamu melayang/ buka tutup di sisi kanan blog. Untuk membuat buku tamu, kita dapat mendaftar di cbox. Setelah mendaftar kita dapat mengatur tampilan buku tamu, dan mendapatkan kode buku tamu tersebut. Kemudian kita dapat memasang buku tamu di blog. Di artikel ini akan dibahas bagaimana cara membuat buku tamu melayang di blog. Untuk yang menginginkan memasang buku tamu melayang di blog dapat mengikuti langkah-langkah berikut.
Cara membuat buku tamu melayang di sisi kanan blog:
1. Daftar di cbox , dan dapatkan kode buku tamu
2. Login ke blogger
3. pilih tata letak
4. Klik tambah gadget
5. pilih HTML/JavaScript
6. Copy dan paste kode dibawah ini

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
 
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikVyGijwlRI1hUsqLuLFZlZ3uRvTrlBAL-ULiNYfrFxXvzOntCUsyUqOVjUDZ8kaF0KMc20jG7bC6ZK4ArCA_9NkodD1gEGaGwzdVBckfFSLcXT1MhaiyUC2q5ZDgIZzDOJj0X7oBgthQ/s1600/Buku+Tamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</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">

>>>MASUKAN SCRIPT CBOX ANDA DISNI<<<

<div style="text-align:right">
[Pasang Widget]
|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

7. Ganti tulisan >>>MASUKAN SCRIPT CBOX ANDA DISNI<<< dengan kode buku tamu anda
8. Simpan dan lihat hasilnya

Semoga artikel ini bermanfaat, terimakasih.- Cara Membuat Buku Tamu Melayang di Sisi Kanan Blog
Jumat, 31 Mei 2013

Cara Mudah Menghilangkan Navbar di Blogger

Cara Mudah Menghilangkan/Menghapus Navbar di Blogger- Jika anda membuat blog dan menggunakan template bawaan dari blogger, pada bagian atas blog anda akan ada navbar. untuk menghilangkan navbar tersebut kita tidak perlu memakai cara yang sulit. Untuk menghilangkan/menghapus navbar dengan mudah ikuti langkah-langkah berikut.

1. Login ke blogger
2. pilih tata letak
3. klik edit pada navbar





4. Kemudian klik off
































5. Klik simpan
6. Buka blog anda dan lihat hasilnya

Semoga bermanfaat-Cara Mudah Menghilangkan Navbar di Blogger
Sabtu, 25 Mei 2013

Cara Membuat Read More Otomatis di Blog

Read More Otomatis
Cara Membuat Read More Otomatis di Blog- Membuat readmore/baca selengkapnya di blogspot/blogger dapat mengurangi penggunaan halaman blog. Selain itu, dengan membuat readmore otomatis blog kita juga terlihat lebih rapi. Dengan memasang readmore otomatis, kita bisa berapa banyak huruf yang akan ditampilkan di halaman depan blog. Jika pengunjung blog membuka baca selengkapnya/readmore, artikel akan terbuka seluruhnya. Untuk membuat readmore otomatis pada blog kalian dapat mengikuti cara berikut.

Langkah-langkah membuat readmore otomatis di blog.

  • Login ke Blogger
  • Klik Template > edit HTML
  • copy semua kode HTML (untuk berjaga jika gagal)
  • Cari kode </head> untuk mempermudah pencarian gunakan CTRL+F
  • Copy&Paste kode di bawah, dan letakkan tepat di bawah kode </head>
    <script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>



  • Kemudian cari kode <data:post.body/> atau <p><data:post.body/></p>
  • jika terdapat dua kode, ganti kode yang pertama dengan kode di bawah


    <b:if cond='data:blog.pageType != "item"'>
    <div expr:id='"summary" + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
    </script>
    <span class='rmlink' style='float:right;padding-top:20px;'>
    <a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>



  • Klik simpan dan lihat hasilnya
Keterangan cara membuat readmore otomatis di blog.

  •  summary_noimg = 430; jika artikel tanpa gambar, akan ada 430 huruf yang tampil di halaman depan blog
  • summary_img = 340; jika artikel dengan gambar, akana ada 340 huruf yang tampil di halaman depan blog
  • img_thumb_height = 100; ukuran tinggi gambar yang tampil di halaman depan blog
  • img_thumb_width = 120; ukuran lebar gambar yang tampil di halaman depan blog
  • Kalian juga dapat merubah icon readmore http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif   dengan url icon yang diinginkan. Selain itu kita juga dapat merubah icon menjadi tulisan ReadMore/Baca Selengkapnya dengan cara menghapus kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> dan menggantinya dengan tulisan.
Semoga artikel ini bermanfaat, terimakasih-Cara Membuat Read More Otomatis di Blog