Tips And Trick Blog

Cara Membuat Facebook Fans Page dan Memasang Like Box di Blogspot

Pada artikel kali ini saya akan memberikan cara untuk menyembunyikan Facebook Fans Page dengan animasi jQuery. Bagaimana? Anda tertarik untuk mencobanya? Namun sebelumnya anda harus mempunyai Facebook Fans Page terlebih dahulu. Jika Anda belum membuatnya, silakan baca artikel saya sebelumnya yang berjudul "Cara Membuat Facebook Fans Page dan Memasang Like Box di Blogspot".
Nah, sekarang kita langsung praktekkan saja. Ikuti langkah berikut.

1. Seperti biasanya, pertama-tama, Masuk Blogger > Rancangan > Edit HTML.
2. Kedua, cari kode </head> (gunakan Ctrl + F Untuk mempermudah pencarian).
3. Ketiga,Copy Dan paste Kode Di bawah Ini Tepat sebelum kode </head>, Jika Anda sudah pernah memasang jQuery ini, maka langsung ke langkah 5 saja.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

4. Jangan lupa klik Simpan Template.
5. Sekarang ke Rancangan > Elemen Lama > Tambah gadget > Html/JavaScript.
6. Copy script di bawah ini lalu pastekan ke HTML/JavaScript yang Anda buka tadi.
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".sektimlikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.sektimlikebox{background: url("http://www.talesoftalisman.com/2012/images/fb110.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 100px;padding: 0 5px 0 30px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:200px;}
.sektimlikebox div{border:none;position:relative;display:block;}
.sektimlikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.sektimlikebox span a{color: #808080;text-decoration:none;}
.sektimlikebox span a:hover{text-decoration:underline;}
</style><div class="sektimlikebox" style=""><div>

<iframe src="//www.facebook.com/plugins/likebox.php?href=URL-Facebook anda disini &amp;width=245&amp;height=330&amp;colorscheme=dark&amp;show_faces=true&amp;border_color=FFFFFF&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="background:#FFF; border:none; overflow:hidden; width:245px; height:330px;" allowtransparency="true" ></iframe><span><a href="http://sektim-area.blogspot.com/2012/04/cara-membuat-facebook-fans-page.html" target="_blank">Mau widget ini?</a></span></div></div>
7. Dan terakhir , klik Simpan.

 

Cara Menampilkan Widget Hanya Di Halaman Awal

Widget merupakan kelengkapan blog yang sangat diperlukan demi menunjang penampilan dan juga kualitas blog. Ada widget yang bisa menambah pengunjung betah dan berlama-lama di blog, misalnya widget artikel terbaru (recent post) atau artikel populer. Ada widget yang berfungsi menampilkan statistik blog. Dan ada juga widget yang hanya berfungsi sebagai pelengkap/pemanis blog. Dan, penempatan widget yang tepat diperlukan bagi estetika dan performa blog. Ada widget yang hanya cocok ditampilkan di halaman awal (home page) saja, ada yang sebaiknya dipasang di halaman artikel saja, dan ada yang cocok dipasang di semua halaman.

Tutorial berikut akan membahas bagaimana cara menampilkan widget hanya di halaman awal saja. Lihat selengkapnya.

Secara default, setiap widget yang kita tambahkan akan terlihat disemua halaman, baik halaman awal maupun halaman artikel dan halaman statis. Nah bagaimana cara menampilkan widget hanya di halaman awal saja? Berikut tutorialnya.

1.Login ke dashboard blogger
2.Masuk ke tab "Design" (Tata Letak/Rancangan)
3.Pilih "Edit HTML" dan centang "Expand Widget Templates"
4.Cari widget yang akan diedit (CTRL+F), jika widget tersebut diberi judul anda akan lebih mudah menemukannya dengan hanya mengetikkan judul widget tersebut. Misalnya widget feedjit diberi judul "statistik", maka tinggal ketikkan judul tersebut.
5.Jika sudah ketemu, tambahkan kode warna merah seperti berikut :

<b:widget id="HTML1" locked="false" title="" type="statistik">
<b:includable id="main">
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>
<div class="widget-content">
<data:content>
></data:content>
</div>
<b:include name="quickedit">
</b:if>
</b:includable>
</b:widget>

Dengan hanya menampilkan widget di halaman awal saja, halaman artikel anda akan terbebas dari widget yang tidak perlu sehingga loading halaman menjadi lebih cepat. Semoga membantu.

 

 

Cara membuat buku tamu

Seperti yang tertera dijudul, kali ini saya akan menjelaskan bagaimana cara membuat buku tamu yang berada disamping blog yang dapat dibuka tutup, seperti apa sich buku tamu itu, lebih jelasnya lihatlah disamping kanan blog saya coba anda klik maka akan keluar buku tamu nya? Sudah jelaskan sekarang…

Lanjut kang…yukkk mari…
Sebagai tambahan, ini tidak hanya untuk buku tamu saja, anda juga dapat menggantinya dengan yang lain seperti gambar,Profile anda atau lainnya yang anda ingin tampilkan,,
Ya udah, kayaknya udah jelas nieh…
Oke langsung aja ke proses pembuatannya..!!!

Langkah 1
1. Login di blogger dengan ID anda

2. Klik menu Tata Letak/Rancangan

3. Klik Elemen Halaman

Copy Paste Script 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('http://lh4.ggpht.com/_jn57XA2jLxY/

SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.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 KODE BUKU TAMU/SOUTMIX ANDA DISINI]

<br/>

Mau punya buku tamu seperti ini?<br/>

Klik di

<a href="http://anggavoith.blogspot.com/2011/04/cara-membuat-buku-tamu-buka-tutup-di.html">

sini

</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>

4. Klik Get Widget

5. Pilih HTML/JavaScript

6. Copy paste kodenya

Lalu cari tulisan [Masukan Script Kode Buku Tamu/Soutmix Anda Disini] di script kode tadi.
Hapus tulisan itu Lalu Ganti dengan Script kode Buku Tamu anda
Langkah selanjutnya

7. Setelah itu klik Simpan

8. Dan Lihat Hasilnya

 <<== Semoga berhasil….!!! ==>>