Cara Membuat Shout Box Auto Hide Pada Blogger. Sebenarnya Shout Box ini sangat berfungsi untuk meramekan web kita dari pengunjung. Ini juga memudahkan pengunjung untuk berinteraksi langsung dengan kita maupun dengan pengunjung-pengunjung yang lain. Ada juga yang langsung memsang shout boxnya pada sisi blognya. Itu memang sudah menjadi selera mereka.
Ada juga yang memasang Shout Box lengkap dengan Auto Hidenya. Dalam tutorial kali ini bukan sembarang Shoutbox Auto hide, yang biasa hanya menampilkan Tombol Hide Unhidenya saja, akan tetapi saya akan mencoba untuk menerangkan cara membuat Shout Box Auto Hide yang tampil hanya seperempat bagian saja, namun ketika kita mengeklik unhidenya akan tampil semua.
mau tahu caranya? ikuti langkah- langkah berikut:
- Buka Dashborad kamu, Blogger
- Kemudian Buka sebuah fasilitas untuk menempatkan Shout Box tersebut., Gadget (Blogger)
- Copy Kode berikut:
<style>
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url(‘http://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png’) no-repeat;
}
.gbcontent{
float:left;
border:5px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>
<script>
function showHideGB(){
var gb = document.getElementById(“gb”);
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 70-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>
<div onclick=”showHideGB()”> </div>
<div>
<!– Begin ShoutMix – http://www.shoutmix.com –>
<iframe title=”ghazir” src=”http://www1.shoutmix.com/?ghazir” width=”290″ height=”400″ frameborder=”0″ scrolling=”auto”>
<a href=”http://www1.shoutmix.com/?ghazir”>View shoutbox</a>
</iframe>
<br /><a href=”http://haririalghazir.com” title=”This WEb!”>Anda dapat Request Sesuatu
Melalui Shout BOX ini</a><br />
<!– End ShoutMix –>
<div style=”text-align:right”>
<a href=”javascript:showHideGB()”>
[close]
</a>
</div>
</div>
</div>
<script>
var gb = document.getElementById(“gb”);
gb.style.right = (30-gb.offsetWidth).toString() + “px”;
</script>
<?php // Do not delete these lines
if (!empty($_SERVER['SCRIPT_FILENAME']) && ‘comments.php’ == basename($_SERVER['SCRIPT_FILENAME']))
die (‘Please do not load this page directly. Thanks!’);
if (!empty($post->post_password)) { // if there’s a password
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn’t match the cookie
?>
<p class=”nocomments”>This post is password protected. Enter the password to view comments.</p>
<?php
return;
}
}
/* This variable is for alternating comment background */
$oddcomment = ‘class=”alt” ‘;
?>
<!– You can start editing here. –>
<?php if ($comments) : ?>
<h2 class=”heading”><span>Article Comments</span><a href=”#comments”><?php comments_number(’0 Comments’, ’1 Comment’, ‘% Comments’ );?></a></h2>
<ul class=”comments”>
<?php foreach ($comments as $comment) : ?>
<li id=”comment-<?php comment_ID() ?>”><div>
<?php echo get_avatar( $comment, 32 ); ?><h3><?php comment_author_link() ?></h3>
<span>Posted on <?php comment_date(‘F jS, Y’) ?> at <?php comment_time() ?><?php edit_comment_link(‘edit’,' ’,”); ?></span>
<div class=”comment”>
<?php if ($comment->comment_approved == ’0′) : ?>
<em>Your comment is awaiting moderation.</em>
<br />
<?php endif; ?>
<?php comment_text() ?>
</div>
<div class=”addc”><a href=”#comment”><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/img/comment_add.gif” alt=”Add Comment” /> Add your comment</a></div>
</div></li>
<?php endforeach; /* end for each comment */ ?>
</ul>
<?php else : // this is displayed if there are no comments so far ?>
<?php if (‘open’ == $post->comment_status) : ?>
<!– If comments are open, but there are no comments. –>
<?php else : // comments are closed ?>
<!– If comments are closed. –>
<p class=”nocomments”>Comments are closed.</p>
<?php endif; ?>
<?php endif; ?>
<?php if (‘open’ == $post->comment_status) : ?>
<h2 class=”heading”>Leave a Comment</h2>
<?php if ( get_option(‘comment_registration’) && !$user_ID ) : ?>
<p>You must be <a href=”<?php echo get_option(‘siteurl’); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>”>logged in</a> to post a comment.</p>
<?php else : ?>
<div class=”commentform”>
<form action=”<?php echo get_option(‘siteurl’); ?>/wp-comments-post.php” method=”post” id=”commentform”>
<?php if ( $user_ID ) : ?>
<p>Logged in as <a href=”<?php echo get_option(‘siteurl’); ?>/wp-admin/profile.php”><?php echo $user_identity; ?></a>. <a href=”<?php echo get_option(‘siteurl’); ?>/wp-login.php?action=logout” title=”Log out of this account”>Log out »</a></p>
<?php else : ?>
<input type=”text” value=”Enter your name” onfocus=”if(this.value==this.defaultValue){this.value=”;}” <?php if ($req) echo “aria-required=’true’”; ?> /><?php if ($req) echo “<span>Required</span>”; ?><br />
<input type=”text” value=”Enter your email” onfocus=”if(this.value==this.defaultValue){this.value=”;}” <?php if ($req) echo “aria-required=’true’”; ?> /><span><?php if ($req) echo “Required”; ?> <span>(Won’t be published)</span></span><br />
<input type=”text” value=”Enter your website” onfocus=”if(this.value==this.defaultValue){this.value=”;}” /><span>Optional</span><br />
<?php endif; ?>
<textarea name=”comment” onfocus=”if(this.value==this.defaultValue){this.value=”;}”>Enter your comment here…</textarea>
<div class=”pleft”>
<a class=”avatar” href=”http://www.gravatar.com/”><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/img/avatar.gif” alt=”Avatar” /></a><div style=”height:5px;”></div><strong class=”blue”>Add your picture!</strong><br />
Join <a href=”http://www.gravatar.com/”>Gravatar</a> and upload your avatar. It’s free!
</div>
<input name=”submit” src=”<?php bloginfo(‘stylesheet_directory’); ?>/img/comment_post.gif” alt=”Post Comment” />
<input type=”hidden” value=”<?php echo $id; ?>” />
<?php do_action(‘comment_form’, $post->ID); ?>
</form>
</div>
<?php endif; // If registration required and not logged in ?>
<?php endif; // if you delete this the sky will fall on your head ?>
Kode yang Tebal dan Miring tersebut gantikan dengan kode Shout Box kamu. Sedangkan angka yang Tebal tersebut (angka 70 yang dicetak tebal) merupakan Nominal yang ditampilkan pada Shoutbox sebelum di klik Unhide, atau merupakan kenampakan dasar pada sebuah Shout Box pada Web atau Blogmu.
Tidak ada komentar:
Posting Komentar