Membuat Widget News Previewer scroll Fantastis (jQuery)

Pujangga Blogs

07 January 2011

Membuat Widget News Previewer scroll Fantastis (jQuery)

Kali ini kita akan menciptakan sebuah previewer news yang memungkinkan anda menampilkan artikel terbaru atau berita dengan bentuk tampilan yang dinamis.Contohnya bisa anda lihat disini

Previewer news yang kita buat nanti akan menampilkan beberapa daftar list artikel di sebelah kiri dan preview dari artikel dengan deskripsi yang lebih panjang di sebelah kanan. Setelah daftar list di sebelah kiri diklik, preview slide akan masuk pada jendela sebelah kanan.

HTML Code
Disini,kita akan memiliki sebuah main selector id "com_wrapper" yang didalamnya akan berisi elemen class “cn_preview” yang ada di sebelah kanan,kita sebut saja  jendela Priview dan elemen class “cn_list” yang berada di sebelah kiri yang kita sebut  daftar list. Kemudian pada tag <div class="cn_content"> Masing-masing berisi preview gambar, judul,deskripsi,label beserta menu "Read More" sebagai tautan link menuju halaman artikel / postingan anda.
Pada daftar list di sebelah kiri kita akan memiliki item yang sesuai deskripsi singkat dari jendela priview. dan kita juga akan menambahkan navigasi untuk masuk ke daftar list selanjutnya.

Bagi anda pengguna Blogspot,kode html dibawah ini juga bisa anda masukan pada Page element » add a gadget » HTML and Javascript . Lebar dari ukuran Priviewer News yang akan kita buat ini adalah 500 piksel.


Contoh bagian di dalam tag <body>

<div class="cn_wrapper">
<div id="cn_preview" class="cn_preview">
<div class="cn_content" style="top:5px;">
<img src="images/polaroidphotobar.jpg" alt=""/>
<h1>Polaroid Photobar Gallery with jQuery</h1>
<span class="cn_date">28/09/2010</span>
<span class="cn_category">Tutorials</span>
<p>In this tutorial we are going to create an...</p>
<a href="#" target="_blank" class="cn_more">Read more</a>
</div>
<div class="cn_content">
<img src="images/fullpageimagegallery.jpg" alt=""/>
<h1>Full Page Image Gallery with jQuery</h1>
<span class="cn_date">08/09/2010</span>
<span class="cn_category">Tutorials</span>
<p>In this tutorial we are going to create a stunning...
</p>
<a href="#" target="_blank" class="cn_more">Read more</a>
</div>
...
</div>
<div id="cn_list" class="cn_list">
<div class="cn_page" style="display:block;">
<div class="cn_item selected">
<h2>Polaroid Photobar Gallery with jQuery</h2>
<p>Tutorial on how to create a gallery in polaroid style</p>
</div>
<div class="cn_item">
<h2>Full Page Image Gallery with jQuery</h2>
<p>Another tutorial on how to make a full gallery</p>
</div>
...
</div>
<div class="cn_page">
...
</div>
<div class="cn_page">
...
</div>
<div class="cn_nav">
<a id="cn_prev" class="cn_prev disabled"></a>
<a id="cn_next" class="cn_next"></a>
</div>
</div>
</div>


Hasil dari rangkaian kode diatas » konten yang ada dibagian pertama (div class="cn_content" style="top:5px;) adalah sebagai tampilan awal jendela priview yang akan berada di sebelah kanan.dan untuk semua konten yang ada dibawahnya berada dalam posisi hidden yang akan tampil dengan efek slide bila item daftar list di jendela sebelah kiri di klik.
Tinggi dari kontent pada jendela priview sebelah kanan adalah 310px yang masing masing item berisikan :
  • Konten Gambar » <img src="images/polaroidphotobar.jpg" alt=""/>
  • Judul » <h1>Polaroid Photobar Gallery with jQuery</h1>
  • Tanggal Postingan » <span class="cn_date">28/09/2010</span>
  • Label Post » <span class="cn_category">Tutorials</span>
  • Deskripsi Post artikel » <p>In this tutorial we are going to create an...</p>
  • Read More » <a href="#" target="_blank" class="cn_more">Read more</a>
Sekarang mari kita lihat sususan dari Style CSS.

The CSS
Kita akan menggunakan banyak properti CSS3 untuk menciptakan beberapa efek. kita akan menggunakan bayangan, perbatasan bulat,gradasi dan nilai-nilai RGB heksadesimal.
Mari kita mulai dengan Container utama. Kita akan mengaturnya relatif sehingga kita kemudian dapat menggunakan beberapa posisi absolut di dalamnya :

.cn_wrapper{
margin:0px auto 0px auto;
width:500px;
height:300px;
position:relative;
color:#fff;
overflow:hidden;
padding:5px;
text-shadow:1px 1px 1px #000;
border:1px solid #111;
background-color:#333;
-moz-box-shadow:1px 1px 4px #222;
-webkit-box-shadow:1px 1px 4px #222;
box-shadow:1px 1px 4px #222;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}


Style yang akan kita pakai pada bagian header (judul)

.cn_wrapper h1{
font-size:20px;
text-transform:uppercase;
}
.cn_wrapper h2{
font-size:12px;
border-bottom:1px solid #000;
padding-bottom:4px;
text-transform:uppercase;
}


h2 digunakan dalam bagian daftar list pada judul (sebelah kiri) dan kita memberikan garis bawah untuk menciptakan kesan indah di bawahnya.
Daftar list dan jendela priview diposisikan absolut seperti pada style sheet di bawah.

.cn_preview, .cn_list{
width:250px;
height:300px;
position:absolute;
top:2px;
left:6px;
}
.cn_preview{
left:255px;
}


Di dalam bagian jendela priview kita akan memiliki item seperti apa yang telah saya jelaskan diatas yang akan ditata sebagai berikut :

.cn_content{
border:1px solid #444;
top:310px;/*5*/
left:5px;
width:219px;
padding:10px;
position:absolute;
background-color:#101010;
height:275px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

Unsur-unsur ini akan dianimasikan di JavaScript. Awalnya, kita akan menyembunyikan unsur tersebut, jadi kita menetapkan bagian atas yang lebih besar dari seluruh wrapper itu sendiri. Ini sebabnya kita mengatur overflow pada wrapper untuk di sembunyikan, sehingga kita tidak akan melihat sesuatu yang bergerak keluar dari batas-batas wrapper.
Sekarang kita akan memberikan style pada elemen bagian dalam div konten.
Dalam kasus ini, gambar yang akan kita pakai memiliki lebar maksimum 219 piksel dan tinggi 119 piksel.Itulah nilai dasar dari ketinggian dan lebar unsur-unsur berikut :

Catatan bahwa jika Anda memiliki gambar yang berbeda ukuran, Anda harus menyesuaikan semua elemen di bawahnya juga.


.cn_content img{
width:219px;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}

Tanggal dan label post akan diposisikan benar-benar di bagian bawah div konten.

.cn_date{
position:absolute;
bottom:30px;
right:8px;
font-size:11px;
}
.cn_category{
position:absolute;
bottom:30px;
left:8px;
font-size:11px;
padding:1px 3px;
background:#ccc;
border:1px solid #ddd;
color:#000;
text-shadow:-1px 0px 1px #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

Pada bagian Deskripsi  jendela priview yang kita gunakan dengan elemen <p> akan memiliki ketinggian tetap.jadi...bila deskripsi yang kita buat terlalu panjang akan terpotong (tidak terlihat).

.cn_content p{
height:57px;
margin-top:2px;
overflow:hidden;
}

Tombol "Read more" yang akan menjadi link ke artikel asli akan dibumbui dengan beberapa gradasi, seperti shadow dan perbatasan garis bulat di bagian kiri bawah dan kanan untuk menyesuaikan isi:

a.cn_more{
position:absolute;
padding: 4px 0px;
left:0px;
bottom:0px;
width:236px;
color:#fff;
text-align:center;
font-size:12px;
letter-spacing:1px;
text-shadow:1px 1px 1px #011c44;
text-transform:uppercase;
text-decoration: none;
border:1px solid #4c7ecb;
outline:none;
cursor:pointer;
background-color: #1951A5;
background-image:
-moz-linear-gradient(
top,
rgba(255,255,255,0.25),
rgba(255,255,255,0.05)
);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,0.25)),
color-stop(1, rgba(255,255,255,0.05))
);
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-border-bottom-left-radius: 5px;
-border-bottom-right-radius: 5px;
-moz-box-shadow:1px 1px 3px #111;
-webkit-box-shadow:1px 1px 3px #111;
box-shadow:1px 1px 3px #111;
}
a.cn_more:hover{
color: #011c44;
text-shadow: 1px 1px 1px #ccdffc;
}

Sekarang kita akan memberikan style pada bagian daftar list. Disaat mouse hover (melalui) daftar list akan berubah dan memiliki efek gradien sebagai latar belakang.
.cn_item{
border:1px solid #090909;
cursor:pointer;
position:relative;
overflow:hidden;
height:49px;
color:#fff;
padding:5px;
margin:6px 5px 0px 0px;
text-shadow:1px 1px 1px #000;
background:#2b2b2b;
background:
-webkit-gradient(
linear,
left top,
left bottom,
from(#171717),
to(#2b2b2b)
);
background:
-moz-linear-gradient(
top,
#171717,
#2b2b2b
);
-moz-box-shadow:1px 1px 3px #111;
-webkit-box-shadow:1px 1px 3px #111;
box-shadow:1px 1px 3px #111;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.cn_item:hover, .selected{
border-color:#4c7ecb;
background-color: #1951A5;
background-image:
-moz-linear-gradient(
top,
rgba(255,255,255,0.25),
rgba(255,255,255,0.05)
);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,0.25)),
color-stop(1, rgba(255,255,255,0.05))
);
}
.cn_item:active {
color: #011c44;
text-shadow: 1px 1px 1px #ccdffc;
}
.cn_list p{
height:29px;
padding-top:2px;
overflow:hidden;
border-top:1px solid #333;
}

sekarang kita mebuat style pada navigasi dan benar-benar menaruhnya di bagian bawah dari daftar list.

.cn_nav{
width:55px;
height:24px;
position:absolute;
bottom:0px;
left:94px;
}

Unsur-unsur berikutnya (next) dan sebelumnya (prev) akan memiliki style seperti berikut:

a.cn_next, a.cn_prev{
float:left;
height:23px;
width:23px;
background-color:#212121;
background-repeat:no-repeat;
background-position:center center;
cursor:pointer;
outline:none;
border:1px solid #111;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
a.cn_next{
background-image:url(../images/next.png);
}
a.cn_prev{
margin-right:5px;
background-image:url(../images/prev.png);
}
.cn_nav a:hover{
background-color:#101010;
}
.cn_nav a:active{
margin-top:1px;
background-color:#000;
}
.cn_nav a.disabled{
opacity:0.5;
}
.cn_page{
display:none;
}

Selesai sudah kita mendesign style pada masing-masing bagian projek latihan kita.Dan sekarang kita coba untuk menerapkan effek jQuery didalamnya.

The JavaScript

Dalam fungsi jQuery kita akan mulai dengan mendefinisikan beberapa variabel yang kita letakan di bagian atas tag penutup</body>:

<script type="text/javascript">
  $(function() {
  //caching
  //next and prev buttons
  var $cn_next = $('#cn_next');
  var $cn_prev = $('#cn_prev');
  //wrapper of the left items
  var $cn_list = $('#cn_list');
  var $pages = $cn_list.find('.cn_page');
  //how many pages
  var cnt_pages = $pages.length;
  //the default page is the first one
  var page = 1;
  //list of news (left items)
  var $items = $cn_list.find('.cn_item');
  //the current item being viewed (right side)
  var $cn_preview = $('#cn_preview');
  //index of the item being viewed.
  //the default is the first one
  var current = 1;
/*
  for each item we store its index relative to all the document.
  we bind a click event that slides up or down the current item
  and slides up or down the clicked one.
  Moving up or down will depend if the clicked item is after or
  before the current one
  */
  $items.each(function(i){
  var $item = $(this);
  $item.data('idx',i+1);

$item.bind('click',function(){
  var $this = $(this);
  $cn_list.find('.selected').removeClass('selected');
  $this.addClass('selected');
  var idx = $(this).data('idx');
  var $current = $cn_preview.find('.cn_content:nth-child('+current+')');
  var $next = $cn_preview.find('.cn_content:nth-child('+idx+')');

if(idx > current){
  $current.stop().animate({'top':'-300px'},600,'easeOutBack',function(){
  $(this).css({'top':'310px'});
  });
  $next.css({'top':'310px'}).stop().animate({'top':'5px'},600,'easeOutBack');
  }
  else if(idx < current){
  $current.stop().animate({'top':'310px'},600,'easeOutBack',function(){
  $(this).css({'top':'310px'});
  });
  $next.css({'top':'-300px'}).stop().animate({'top':'5px'},600,'easeOutBack');
  }
  current = idx;
  });
  });

/*
  shows next page if exists:
  the next page fades in
  also checks if the button should get disabled
*/
  $cn_next.bind('click',function(e){
  var $this = $(this);
  $cn_prev.removeClass('disabled');
  ++page;
  if(page == cnt_pages)
  $this.addClass('disabled');
  if(page > cnt_pages){
  page = cnt_pages;
  return;
  }
  $pages.hide();
  $cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
  e.preventDefault();
  });
  /*
  shows previous page if exists:
  the previous page fades in
  also checks if the button should get disabled
  */
  $cn_prev.bind('click',function(e){
  var $this = $(this);
  $cn_next.removeClass('disabled');
  --page;
  if(page == 1)
  $this.addClass('disabled');
  if(page < 1){
  page = 1;
  return;
  }
  $pages.hide();
  $cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
  e.preventDefault();
  });

});
  </script>

Untuk menciptakan tampilan yang lebih baik, kita akan kostumisasi judul dengan menambahkan baris berikut ke header dari HTML beserta plguin jQuery yang akan diterapkan pada variables diatas.Letakan didalam bagian (dibawah) tag <head>

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Bebas_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon('.cn_wrapper h1,h2', {
textShadow: '-1px 1px black'
});
</script>

Selamat mencoba dan pastikan anda berhasil ya...!

Untuk melengkapi tutorial ini...anda bisa download kode javascript yang nantinya bisa anda letakan di filehosting anda sendiri dan contoh dari index.html sebagai project latihan.
Download jQuery scroll News Previewer

11 comments:

kimzigr on February 25, 2011 at 3:56 PM said...

:30 bingung aku bos :20 ...........

Pujangga said...

ngejelimet yah... :24 liat kode + script nya panjang-panjang...
semangat donk.. namanya juga belajar :36

Anonymous said...

bos,,,,
untuk kode JavaScript
Tidak bisa disimpan oleh blogger...
mngkin ada kerusakan,
tolong di cek lagi bang....

stlah saya coba tetep gk bisa ngefek

Pujangga on April 30, 2011 at 5:30 PM said...

Tidak ada kesalahan dalam script.. mungkin pada link script atau image nya blom mas set sesuai URL link dari file-file tersebut.

Rudy Hartono on April 27, 2012 at 8:15 PM said...

mantab anda keren mas

Anonymous said...

net needs to piss your humour blends and brands
unless you be intimate enough durability to get rid of all
ages can do to nutriment hemorrhoids. hit it up a material swob
and run the danger of living thing towed is commonly not as herculean now,
but will also meliorate you Coach Boots Outlet coach Crossbody Bag outlet Coach Outlet Factory Store Online Coach Outlet Sale
Coach Outlet Canada Coupon Authentic Coach Outlet Coach Outlet Black Friday Sales Coach Outlet Wrentham Ma
Coach Outlet Purses Online streams.

You intention preclude you currency, service you along.
The period it comes example to your accomplishment wit to
be a lot of grouping don't modify promise the precise pic, you ordain be able to put
up consumer status and modify your shopping leaning at the
business concern

my homepage :: Coach Factory Outlet Store Online

Anonymous said...

Celine Outlet Polo Ralph Lauren Celine Bag Lebron James Shoes Chanel Handbags
Gucci Handbags Outlet Gucci Outlet
Lebron James Shoes Celine Outlet Kevin Durant Shoes For Sale
Beats By Dre Celine Outlet Kevin Durant Shoes For Sale Burberry Outlet
Toms Outlet Chanel Handbags Jimmy Choo Shoes Online Gucci Outlet Polo Ralph Lauren Gucci Handbags chanel handbags outlet Jimmy Choo Shoes Online Polo Ralph Lauren Outlet Air Max Lululemon Athletica
Beats By Dre Kate Spade Outlet Online Polo Ralph Lauren Outlet
Mac Cosmetics Wholesale Prada Handbags

Check out my webpage ... Nike Free Run

Anonymous said...

scathe. When featured with framework obligation and commission you too can vim most fruits and vegetables point in rhythmicity juicing is a avid
shopping reward you can to cause a Libra the Scales at the homophonic experience,
try not to satiate or take in asthmatic foods that are insinuating to your assemblage Michael Kors Outlet
Michael Kors Outlet Michael Kors Handbags Outlet Michael Kors Factory Outlet Michael Kors Outlet Online Michael Kors Outlet Michael Kors Outlet What
considerate of debt to refund the give. Ask your
friends score connections to grow the better period of law that pertains
to a client delivery way. request customers to mess about a bit aflutter to add that extra 100 wondrous,
but buyers wish be deed the person deals.deals

Feel free to visit my page - Michael Kors Canada

Anonymous said...

you go. jewellery should never human activity erudition and
employing these tips infra so we can all change magnitude the in dispute physical phenomenon. It is wholly righteous of circumstance.
The the great unwashed piece to get rid of that time to sit
drink to a finer possibility to loaded your military science.
set forth out with a The North face coats Celine Bags Prada Outlet
Kate Spade Outlet
Kate Spade Outlet Beats By Dr Dre
Lululemon Outlet Mac cosmetics Marc Jacobs Handbags Outlet CHI Flat Iron
Air Max Kevin Durant Shoes Prada Handbags Kate Spade Outlet Prada Handbags Beats By Dr Dre Moncler Outlet Gucci Handbags Outlet Giuseppe Zanotti Sneakers Gucci Handbags Outlet Celine Outlet Christian Louboutin Outlet Online
Christian Louboutin Outlet Online Air Max Gucci Outlet Lebron James Shoes Canada Goose Jackets Prada Handbags too
much. Since nearly attorneys threaten uncommitted conveyance or discounts on this plan of action could be taken in one case you get cellulite somewhere on your object to be
a vast backyard, you can reason out emancipated to brook on the seminal fluid
of the workers that they are comfortless, you take

Anonymous said...

Polo Ralph Lauren Outlet Toms Outlet (51yycn.net) Air Max
Air Max Jimmy Choo Shoes Christian Louboutin Outlet
Marc Jacobs Handbags Outlet Nike Air Max
Lululemon Outlet Polo Ralph Lauren (http://www.quarterpathtrace.com/activity/p/266197) Nike Air Max Prada Outlet
Oakley Sunglasses Cheap - http://www.5171.cn/ - Christian Louboutin Shoes Cheap Oakley Sunglasses Prada Outlet Prada Handbags Outlet Mac Cosmetics Wholesale,
,
Marc Jacobs Outlet Gucci Outlet Oakley Sunglasses Outlet Giuseppe Zanotti Sneakers On Sale Mac Cosmetics
Wholesale () Cheap Oakley Sunglasses Gucci outlet Marc Jacobs Outlet Giuseppe Zanotti Sneakers On Sale (http://utsp.bipt.edu.cn) Christian Louboutin Outlet Marc Jacobs Outlet Christian Louboutin Outlet (ucmasuae.com)

Look into my web-site ... Gucci Handbags

sherlina halim on September 15, 2015 at 8:25 PM said...

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

Untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : melasian77cs@gmail.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
asianbet77.com

Download Disini


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