Membuat recent comment dengan efek overlay || jQuery ||

Pujangga Blogs

06 March 2011

Membuat recent comment dengan efek overlay || jQuery ||

recent comment

Mungkin tidak semua orang akan membaca komentar - komentar yang ada pada blog anda. Umumnya pengunjung cukup melihat dan membaca artikel, sedikitnya mungkin memperhatikan komentar terakhir yang di tulisakan pengunjung lewat widget "Recent Comments" yang umumnya di letakan pada sidebar.

Bagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay. Jadi, widget recent comments tersebut akan keluar ditengah halaman blog setelah anda menekan sebuah menu yang telah kita sediakan untuk menerapkan efek overlay. Untuk lebih jelasnya anda bisa lihat contoh nya disini.

jQuery

Langkah pertama untuk menampilkan efek overlay pada widget "Recent Comments" adalah dengan menggunakan plugin jQuery. Silahkan anda masuk ke halaman template. Page Elements » Edit HTML

recent commnet

Letakan jQuery plugin dibawah ini pada bagian bawah tag <head>

<script src='http://pujangga.googlecode.com/files/jquery.tools.min.js' type='text/javascript'></script>

Lalu tekan Save Template dan kembali kehalaman Page Elements.

recent comment

Buat sebuah widget baru dengan cara add a gadget » HTML/Javascript

recent comment

recent comment

letakan kode css dan html ini di dalam nya.

<style type="text/css">
/* style untuk id photos */
#photos { text-align:center; }
#photos img { cursor:pointer; margin:0 0px;
background-color:#fff;
-moz-border-radius:4px;
-webkit-border-radius:4px; }
/* style untuk elemen didalam overlay */
.details { position:absolute; top:15px; right:5px;
font-size:14px; color:#fff; width:200px;
background-color: #333333; }
.details h3 { color:#aba; font-size:15px;
margin:0 0 -10px 0; }
/* the overlayed element */
.simple_overlay { /* place overlay on top of other elements */
z-index:10000;
/* styling */
background-color:#333;
width:300px; border:2px solid #FFFFFF; -moz-border-radius:10px;
/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
height: auto; display: none; color: #FFFFFF;
padding: 10px; }
/* close button positioned on upper right corner */
.simple_overlay .close { background-image:url(http://3.bp.blogspot.com/-D2-EH8Tfd-k/TXFTTenSg5I/AAAAAAAAA_Q/-FujvLx9-w8/s1600/close.png);
position:absolute; right:-15px; top:-15px;
cursor:pointer; height:35px; width:35px; }
/* end overlay styling */
/* get rid of those system borders being generated for A tags */
a:active { outline:none; }
:focus { -moz-outline-style:none; }
</style>

<script type="text/javascript">
$(document).ready(function(){
$("img[rel]").overlay();
});
</script>
<!-- elemen foto -->
<div id="photos" style="position: fixed; bottom: 0; right: 100px; width:100px; font-size: 16px; font-weight:bold;" class="cumi">
<img src="http://3.bp.blogspot.com/-H4CzrduajM4/TXFTL9NYzdI/AAAAAAAAA_I/rNkraXC0dI4/s1600/komentar.png" width="130" height="25" rel="#mies1"></div>
<!-- overlays -->
<div class="simple_overlay" id="mies1"><div class="close"></div>
<script style="text/javascript" src="http://amen24.googlepages.com/showrecentcomments.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://pujangga-adhitya.co.cc/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>


Ganti alamat http://pujangga-adhitya.co.cc dengan milik anda.


Lalu tekan tombol SAVE

recent comment

Selesai.

Semoga bermanfaat .


3 comments:

Mas Fahmy on April 11, 2011 at 6:54 AM said...

thx sob, tutorx kerennn.. aq dah coba nih ,, : ) useful post!

Anonymous said...

There are also other factors that cause people to smoke marijuana including anxiety, depression, and peer pressure.

The mental withdrawal that weed smokers experience can be
difficult to push through but once you get passed this step everything else that follows will be much easier to
get through. If you find it difficult to go on with
the journey without professional help, you can also go through cognitive behavioral therapy that can be done by a professional therapist.



Visit my blog post Quit Marijuana The Complete Guide

Anonymous said...

Thanks a bunch for sharing this with all folks you really understand what you are speaking approximately!
Bookmarked. Kindly also discuss with my website =).
We can have a hyperlink change agreement between us

Also visit my blog post - 24 hour heating and cooling repair 08016


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman.
Membuat Headline Post widget tooltipsHeadline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Membuat Number Page Navigation jQueryUmumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment