.

Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai arah

Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.

Kali ini saya akan memposting cara memasang Cbox  auto hiden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.

Saya kira cukup sekian bla bla bla penerangan saya, dan mari kita menuju kepokok pembahasan.

Berikut ini adalah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah:
  1. Seperti biasa sobat harus Login dulu di akun blog sobat
  2. Pilih Tata Letak
  3. Tambah Gadget HTML/Java Script
  4. Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.


<style type="text/css">
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent{
float:left;
border:2px solid #fff;
background:url(http://lh5.ggpht.com/_yF0--u7KSSI/TKgzluISmnI/AAAAAAAAAxE/PC55GBEXvig/kembangApi.gif)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

Strip kode cbox sobat

</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>
</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-200-at.offsetWidth).toString() + "px";
</script>

Klik save / simpan.

Keterangan:
  1. Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
  2. Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
  3. Kode warna putih adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
  4. Texts berwarna hijau adala tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).
Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

  1. Tetap login di akun blog sobat
  2. Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script
<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://lh4.ggpht.com/_1j80TgNqd_8/TS3MlHxaygI/AAAAAAAABVo/P36anu_ToeA/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Keterangan: 
  • Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
  • Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
  • Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog.
Demikianlah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah. Semoga bermanfaat bagi sobat semua. trima kasih jangan lupa koment nya.. ditunggu...bos
Written by: Adam Marchel
Digital Life Style, Updated at: 1:03:00 PM

Cara membuat tombol share sidebar di blog

Buat Tombol Share Sidebar Blog Friendly banyak sekali jenis dan fungsinya untuk blog tujuan dipasangnya tombol share adalah jelas bentuk promosi blog agar bisa dilakukan lebih efektif karena sistem kerja yang otomatis tentu akan mempercepat kinerja tanpa lama. Dengan adanya Tombol Share di Blog akan mempermudah melakukan interaksi secara luas tidak hanya dilingkungan web blog itu sendiri tetapi mencakup media sangat luas seperti jejaring sosial facebook, twitter dan lain-lain guna blog dikenali dan dikehatuhi keberadaannya oleh banyak pihak. Sebelum ini Saya juga ada mempublik tombol share dengan fungsi yang sama tapi beda posisi seperti Tombol Multi Share Melayang, tinggal Anda pilih mana yang cocok untuk keberadannya diblog Anda.

TwitterGoogle PlusFacebookDiggStumbleuponFavoritesMore

Tombol Share Di Lengkapi Dengan Bookmarks

Tidak hanya tombol share yang fungsinya adalah untuk membagikan baik itu Judul blog ataupun judul artikel kebanyak situs yang dituju, akan tetapi tombol share disini Saya lengkapi dengan Bookmarksberfungsi untuk menandai situs tertentu untuk dijadikan favorit disimpan melalui tool bookmars pada browser agar mempermudah ketika Anda ingin membuka kembali situs tersebut tanpa harus mencari di Google atau mengetikkan alamat situs web blog pada address bar browser. Disini Saya akan memberikan 2 opsi untuk Anda, gunakan sesuai yang Anda pikir mudah berdasarkan kebutuhan berikut adalah langkah-langkahnya

Opsi 1.
1. Seperti biasa masuk blogger.com dan masuk pada halaman Edit HTML
2. Sebaiknya lakukan backup template blog Anda terlebih dahulu
3. Cari kode ]]></b:skin> letakkan kode berikut tepat di atasnya
.addthis_toolbox{padding:5px 0 0px 0;text-align:left}
.addthis_toolbox .custom_images a{width:72px;height:32px;margin:5px 3px;padding:0;}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.65}

4. Dilanjutkan dengan mencari kode <div id='sidebar-wrapper'> letakkan kode berikut tepat dibawah kode tersebut
<div class="addthis_toolbox">
<div class="custom_images">
<a class="addthis_button_twitter" href="http://www.blogger.com/blogger.g?blogID=7451311509500276310"><img alt="Twitter" height="35" src="http://2.bp.blogspot.com/-TUTjx0Yc0FY/TXSLKPiLRbI/AAAAAAAAA3U/nI4HkE091Lk/s1600/twitter.png" width="35" /></a>
<a href="https://plus.google.com/" target="_blank"><img alt="Google Plus" height="35" src="http://3.bp.blogspot.com/-NbS3DZVbHU0/To9NnX6odTI/AAAAAAAAEJY/SvIFghHPw-k/s1600/gplus.png" width="35" /></a>
<a class="addthis_button_facebook" href="http://www.blogger.com/blogger.g?blogID=7451311509500276310"><img alt="Facebook" height="35" src="http://1.bp.blogspot.com/-GpYwvZxzuzU/TXSJ0qKwUlI/AAAAAAAAA20/UiLh_RsGsqY/s1600/facebook.png" width="35" /></a>
<a class="addthis_button_digg" href="http://www.blogger.com/blogger.g?blogID=7451311509500276310"><img alt="Digg" height="35" src="http://1.bp.blogspot.com/-JVB0CPHCL1E/TXSJ0ceJsgI/AAAAAAAAA2s/kpyRlPsGJek/s1600/digg.png" width="35" /></a>
<a class="addthis_button_stumbleupon" href="http://www.blogger.com/blogger.g?blogID=7451311509500276310"><img alt="Stumbleupon" height="35" src="http://3.bp.blogspot.com/-7-xCrO8HzH8/TXSLJ2054hI/AAAAAAAAA3M/lV4L-SpptZ0/s1600/stumbleupon.png" width="35" /></a>
<a class="addthis_button_favorites" href="http://www.blogger.com/blogger.g?blogID=7451311509500276310"><img alt="Favorites" height="35" src="http://3.bp.blogspot.com/-le322tlJxbk/TXSJ0tmqaiI/AAAAAAAAA28/qDly1cnZiIk/s1600/favorites.png" width="35" /></a>
<a class="addthis_button_more" href="http://www.blogger.com/blogger.g?blogID=7451311509500276310"><img alt="More" height="35" src="http://1.bp.blogspot.com/-DqjDPRVJc5g/TXSJ04YfobI/AAAAAAAAA3E/7HVFTgWb1dE/s1600/more.png" width="35" /></a>
</div>
<script src="http://s7.addthis.com/js/250/addthis_widget.js" type="text/javascript"> </div>
</script></div>
<div style='clear:both;'/>

5. Simpan template.

Opsi 2.
Cara ini bisa Anda lakukan lebih mudah dan cepat, tanpa harus Edit HTML template Anda. Saya pikir tidak ada perbedaan fungsi disini hanya letaknya saja yang berbeda dilihat dari kodenya juga hanya bermain CSS dan HTML serta sedikit kode JavaScript yang sudah diconvert dalam bentuk link olehs7.addthis.com jadi tidak buat berat blog bisa dilihat Sayapun menggunakannya pilih sesuai keinginan Anda.

Caranya sangat mudah masuk pada halaman Tata letak lalu tambahkan Gadget simpan Script pada no. 4 diatas pada Gadget HTML/ JavaScript.tanpa <div style='clear:both;'/>. Sekian semoga manfaat dan terbantu terima kasih Salam.

Catatan:
CSS Margin margin:5px 3px;padding:0;: Uuntuk mengatur jarak antara objek tombol share satu dengan lainnya disebelah kiri dan kanan objek serta jarak kanan kiri objek padding antara halaman Sidebar dan halaman posting, atur sesuai lebar Sidebar blog Anda.

Written by: Adam Marchel
Digital Life Style, Updated at: 2:48:00 PM

Pasang Info Iklan di bawah posting dengan rapi



Kali ini saya mau posting tentang cara menambah widgat atau info tips di bawah posting setelah readmore di klik, seperti pasang iklan di bawah posting itu loh.... kyak Kang Rohman contohnya anda bisa lihat di bawah posting saya atau dibawah ini
  • Login ke blogger dengan ID sobat
  • Klik Tata Letak
  • Klik Tab Edit HTML
  • Silahkan backup dulu sebelum melakukan editting template dengan klik Download Template Lengkap.
  • Klik kotak kecil disamping tulisan Expand Widget Template.
  • Carilah kode ]]> , lalu copy paste kode di bawah ini persis di atas kode tersebut
.bawahpost{
padding:10px;
margin:10px 0px;
background:#e1f2ff;
border:1px solid #ddd;
line-height:1.6em;
}
  • Sudah ? carilah kode berikut jika ada 2 kode carilah yang paling terakhir, Kemudian copy paste kode di bawah ini persis di bawah kode tersebut




isi dari iklan anda ( adesense camps, kumpul blogger, info produk yang anda tawarkan iklan muncul setelah readmore di klik


  • Klik tombol SIMPAN TEMPLATE jika sudah selesai
  • Klik Pratinjau  jika ingin melihat hasil tampilannya sementara
  • Stage Complet

Diambil dari Free Tutorial Blogger | Blogging Trik | Belajar Ngeblog | BlogKu: Pasang Info Iklan di bawah posting dengan rapi
Url : trikblogku.blogspot.com
Under Creative Commons License: Attribution Non-Commercial
Written by: Adam Marchel
Digital Life Style, Updated at: 9:31:00 PM
experience-adam.net. Powered by Blogger.
Back to top