Halaman Gallery Responsive Dengan Tombol Previous Next

Halaman Gallery Responsive Dengan Tombol Previous Next Halloo Sobat, Mungkin Sobat sudah pernah berkunjung pada sebuah Blog yang mempunyai tampilan Halaman Grid atau Galerry pada Homepage atau tampilan pada Halaman postingan.

Demo   CODE

Anda pun sanggup menciptakannya mengubah tampilan Gird atau Galerry pada halaman postingan Anda, kabar baiknya pada Halaman Gallery ini Responsive dan dilengkapi dengan tombol Previous-Next dan Anda juga sanggup mengaturnya sesuai kehendak Anda . Bagaimana Anda tertarik, berikut ini caranya :


Buka Editor Template, kemusian Anda cari kode ]]></b:skin>, lalu salin aba-aba dibawah ini dan pasangkan diatasnya atau sebelumnya .

/*Gallery Responsive*/
.main-wrapper {
    margin-bottom: 50px;
}
h1.page-header {
    color: white;
}
.thumbnail {
    margin-bottom: 10px;
    border-radius: 0;
    background: transparent;
    border: 0;
    padding: 0;
}
.thumbnail .thumbnail-img-wrapper {
    position: relative;
    z-index: 10;
}
.thumbnail .thumbnail-img {
    min-height: 250px;
    display: block;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    cursor: pointer;
}
.thumbnail .author-info {
    display: table-row;
}
.thumbnail .author-info .avatar{
    display: table-cell;
    margin-bottom: 9px;
    vertical-align: middle;
    width: 70px;
}
.thumbnail h4 {
    display: table-cell;
    padding: 9px;
    vertical-align: middle;
}
.thumbnail .info-box {
    width: 100%;
    background: rgb(0, 0, 0); /* The Fallback */
    background: rgba(0,0,0,0.7);
    color: white;
    position: absolute;
    bottom: 0;
}
.thumbnail .info-box > p{
    display: inline-block;
    vertical-align: middle;
    padding: 9px;
    margin: 0;
}
.thumbnail .dribble-url {
    position: absolute;
    font-size: 30px;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -25px;
    -webkit-animation: fadeIn 0.7s;
    -moz-animation: fadeIn 0.7s;
    -ms-animation: fadeIn 0.7s;
    animation: fadeIn 0.7s;
    color: #2D2D2D;
}
.thumbnail .dribble-url.ng-hide {
    -webkit-animation: fadeOut 0.7s;
    -moz-animation: fadeOut 0.7s;
    -ms-animation: fadeOut 0.7s;
    animation: fadeOut 0.7s;
}
.thumbnail .dribble-url .glyphicon {
    background: rgb(240,240,240);
    background: rgba(240,240,240, 0.8);
 border: 1x solid grey;
 padding:10px;
  display: inline-block;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 60px;
  -moz-box-shadow: 0px 0px 2px #888;
  -webkit-box-shadow: 0px 0px 2px #888;
  box-shadow: 0px 0px 2px #888;
}
.thumbnail .dribble-url .glyphicon:hover {
    background: rgb(255,255,255);
    background: rgba(255,255,255, 0.8);
}
.thumbnail .caption {
    -webkit-animation: fadeInDown 0.7s;
    -moz-animation: fadeInDown 0.7s;
    -ms-animation: fadeInDown 0.7s;
    animation: fadeInDown 0.7s;
    background: #fff;
}
.thumbnail .caption.ng-hide {
    -webkit-animation: fadeOutUp 0.7s;
    -moz-animation: fadeOutUp 0.7s;
    -ms-animation: fadeOutUp 0.7s;
    animation: fadeOutUp 0.7s;
}
.fixed-footer {
    position: fixed;
    z-index: 11;
    bottom: 0;
    width: 100%;
    text-align: center;
    background: #fff;
    box-shadow: 0 8px 8px 8px #696868;
}
.fixed-footer .pagination {
    margin: 10px 0 5px;
}
.deckgrid[deckgrid]::before {
    content: '3 .column.column-1-3';
    font-size: 0;
    visibility: hidden;
}
.deckgrid .column {
    float: left;
    padding: 5px;
}
.deckgrid .column-1-3 {
    width: 33.33333333333%;
}
@media screen and (max-width: 992px) {
    .deckgrid[deckgrid]::before {
        content: '2 .column.column-1-2';
    }
    .deckgrid .column-1-2 {
        width: 50%;
    }
}
@media screen and (max-width: 768px){
    .deckgrid[deckgrid]::before {
        content: '1 .column.column-1-1';
    }
    .deckgrid .column-1-1 {
        width: 100%;
    }
}

Selnjutnya Anda cari aba-aba </head> lalu copy aba-aba dibawah ini dan pasangkan diatasnya .

<link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
<link href='http://daneden.github.io/animate.css/animate.min.css' rel='stylesheet' type='text/css'/>
<script src='http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js' type='text/javascript'/>
<script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js' type='text/javascript'/>

Catatan : Apabila pada salah satu aba-aba diatas sudah terdapat pada Template Anda, Anda lewati langkah tersebut .


Selanjutnya Pemasangan HTML, silahkan Anda menuju Entri gres dan salin aba-aba dibawah ini pasangkan pada Mode HTML .

<div class='ng-scope' ng-app='desafioApp' ng-controller='MainCtrl'>
        <div class='container main-wrapper'>
<div class='deckgrid ng-isolate-scope' deckgrid='' source='shots'>
<!-- ngRepeat: column in columns --><div class='column column-1-3' data-ng-repeat='column in columns'>
<!-- ngRepeat: card in column --><!-- ngInclude: cardTemplate --><div class='ng-scope' data-ng-include='cardTemplate' data-ng-repeat='card in column'>
<div class='thumbnail ng-scope'>
                        <div class='thumbnail-img-wrapper'>
                          <img class='thumbnail-img' ng-click='showDetails = !showDetails' ng-src='URL Gambar' src='URL Gambar'/>
<div class='info-box'>
                            <div class='text-left ng-binding'>
Judul Artikel</div>
<div class='pull-right ng-binding'>
<span aria-hidden='true' class='glyphicon glyphicon-eye-open'/> Masukkan angka page vieuw</div>
</div>
<a class='dribble-url ng-hide' href='URL link' ng-show='showDetails' target='_blank' title='Look on Dribble.com'><span aria-hidden='true' class='glyphicon glyphicon-new-window '/></a>
</div>
<div class='caption animate-show ng-hide' ng-show='showDetails'>
                            <div class='author-info'>
                                <img class='avatar img-circle' ng-src='URL Gambar' src='URL Gambar'/>
<h4 class='ng-binding'>
UENO. (via Haraldur Thorleifsson)</h4>
</div>
<div class='ng-binding' ng-bind-html='card.description'>

Masukkan deskripsi singkat Anda disini

 <a href='URL link' rel='nofollow'>Judul Artikel</a></div>
</div>
</div>
</div>
<!-- end ngRepeat: card in column --><!-- ngInclude: cardTemplate --><div class='ng-scope' data-ng-include='cardTemplate' data-ng-repeat='card in column'>
<div class='thumbnail ng-scope'>
                        <div class='thumbnail-img-wrapper'>
                          <img class='thumbnail-img' ng-click='showDetails = !showDetails' ng-src='URL Gambar' src='URL Gambar'/>
<div class='info-box'>
                            <div class='text-left ng-binding'>
Judul Artikel</div>
<div class='pull-right ng-binding'>
<span aria-hidden='true' class='glyphicon glyphicon-eye-open'/> Masukkan angka page vieuw</div>
</div>
<a class='dribble-url ng-hide' href='URL link' ng-show='showDetails' target='_blank' title='Titel Anda'><span aria-hidden='true' class='glyphicon glyphicon-new-window '/></a>
</div>
<div class='caption animate-show ng-hide' ng-show='showDetails'>
                            <div class='author-info'>
                                <img class='avatar img-circle' ng-src='URL Gambar' src='URL Gambar'/>
<h4 class='ng-binding'>
Judul Artikel</h4>
</div>
<div class='ng-binding' ng-bind-html='card.description'>
</div>
</div>
</div>
</div>
<!-- end ngRepeat: card in column --><!-- ngInclude: cardTemplate --><div class='ng-scope' data-ng-include='cardTemplate' data-ng-repeat='card in column'>
<div class='thumbnail ng-scope'>
                        <div class='thumbnail-img-wrapper'>
                          <img class='thumbnail-img' ng-click='showDetails = !showDetails' ng-src='URL Gambar' src='URL Gambar'/>
<div class='info-box'>
                            <div class='text-left ng-binding'>
Judul Artikel</div>
<div class='pull-right ng-binding'>
<span aria-hidden='true' class='glyphicon glyphicon-eye-open'/> Masukkan angka page vieuw</div>
</div>
<a class='dribble-url ng-hide' href='URL link' ng-show='showDetails' target='_blank' title='title Anda'><span aria-hidden='true' class='glyphicon glyphicon-new-window '/></a>
</div>
<div class='caption animate-show ng-hide' ng-show='showDetails'>
                            <div class='author-info'>
                                <img class='avatar img-circle' ng-src='URL Gambar' src='URL Gambar'/>
<h4 class='ng-binding'>
Judul Artikel</h4>
</div>
<div class='ng-binding' ng-bind-html='card.description'>

Masukkan deskripsi singkat Anda disini

 <a href='URL link' rel='nofollow'>Judul Artikel</a> Masukkan deskripsi singkat Anda disini
</div>
</div>
</div>
</div>
<!-- end ngRepeat: card in column --><!-- ngInclude: cardTemplate --><div class='ng-scope' data-ng-include='cardTemplate' data-ng-repeat='card in column'>
<div class='thumbnail ng-scope'>
                        <div class='thumbnail-img-wrapper'>
                          <img class='thumbnail-img' ng-click='showDetails = !showDetails' ng-src='URL Gambar' src='URL Gambar'/>
<div class='info-box'>
                            <div class='text-left ng-binding'>
Judul Artikel</div>
<div class='pull-right ng-binding'>
<span aria-hidden='true' class='glyphicon glyphicon-eye-open'/> Masukkan angka page vieuw</div>
</div>
<a class='dribble-url ng-hide' href='URL link' ng-show='showDetails' target='_blank' title='totel Anda'><span aria-hidden='true' class='glyphicon glyphicon-new-window '/></a>
</div>
<div class='caption animate-show ng-hide' ng-show='showDetails'>
                            <div class='author-info'>
                                <img class='avatar img-circle' ng-src='URL Gambar' src='URL gambar'/>
<h4 class='ng-binding'>
Judul Artikel</h4>
</div>
<div class='ng-binding' ng-bind-html='card.description'>

Tuliskan deskripsi singkat Anda disini

</div>
</div>
</div>
</div>
<!-- end ngRepeat: card in column --><!-- ngInclude: cardTemplate --><div class='ng-scope' data-ng-include='cardTemplate' data-ng-repeat='card in column'>
<div class='thumbnail ng-scope'>
                        <div class='thumbnail-img-wrapper'>
                          <img class='thumbnail-img' ng-click='showDetails = !showDetails' ng-src='URL gambar' src='URL Gambar'/>
<div class='info-box'>
                            <div class='text-left ng-binding'>
Judul Artikel</div>
<div class='pull-right ng-binding'>
<span aria-hidden='true' class='glyphicon glyphicon-eye-open'/> Masukkan angka page vieuw</div>
</div>
<a class='dribble-url ng-hide' href='URL link' ng-show='showDetails' target='_blank' title='titel Anda disini'><span aria-hidden='true' class='glyphicon glyphicon-new-window '/></a>
</div>
<div class='caption animate-show ng-hide' ng-show='showDetails'>
                            <div class='author-info'>
                                <img class='avatar img-circle' ng-src='URL Gambar' src='URL gambar'/>
<h4 class='ng-binding'>
Judul Artikel</h4>
</div>
<div class='ng-binding' ng-bind-html='card.description'>

Masukan deskripsi singkat Anda disi

 <a href='URL link Anda' rel='nofollow'>behance</a>!</div>
</div>
</div>
</div>
<!-- end ngRepeat: card in column --></div>
<!-- end ngRepeat: column in columns --><div class='column column-1-3' data-ng-repeat='column in columns'>
<!-- ngRepeat: card in column --><!-- ngInclude: cardTemplate --><div class='ng-scope' data-ng-include='cardTemplate' data-ng-repeat='card in column'>
<div class='thumbnail ng-scope'>
                        <div class='thumbnail-img-wrapper'>
                          <img class='thumbnail-img' ng-click='showDetails = !showDetails' ng-src='URL Gambar' src='URL Gambar'/>
<div class='info-box'>
                            <div class='text-left ng-binding'>
Judul Artikel</div>
<div class='pull-right ng-binding'>
<span aria-hidden='true' class='glyphicon glyphicon-eye-open'/> Masukkan angka page vieuw</div>
</div>
<a class='dribble-url ng-hide' href='URL link' ng-show='showDetails' target='_blank' title='Titel Anda'><span aria-hidden='true' class='glyphicon glyphicon-new-window '/></a>
</div>
<div class='caption animate-show ng-hide' ng-show='showDetails'>
                            <div class='author-info'>
                                <img class='avatar img-circle' ng-src='URL Gambar' src='URL Gambar'/>
<h4 class='ng-binding'>
Judul artikel</h4>
</div>
<div class='ng-binding' ng-bind-html='card.description'>
</div>
</div>
</div>
</div>
<!-- end ngRepeat: card in column --><!-- ngInclude: cardTemplate --><div class='ng-scope' data-ng-include='cardTemplate' data-ng-repeat='card in column'>
<div class='thumbnail ng-scope'>
                        <div class='thumbnail-img-wrapper'>
                          <img class='thumbnail-img' ng-click='showDetails = !showDetails' ng-src='URL Gambar' src='URL Gambar'/>
<div class='info-box'>
                            <div class='text-left ng-binding'>
Judul Artikel</div>
<div class='pull-right ng-binding'>
<span aria-hidden='true' class='glyphicon glyphicon-eye-open'/> Masukkan angka page vieuw</div>
</div>
<a class='dribble-url ng-hide' href='URL linkt' ng-show='showDetails' target='_blank' title='titel Anda'><span aria-hidden='true' class='glyphicon glyphicon-new-window '/></a>
</div>
<div class='caption animate-show ng-hide' ng-show='showDetails'>
                            <div class='author-info'>
                                <img class='avatar img-circle' ng-src='URL Gambar' src='URL Gambar'/>
<h4 class='ng-binding'>
Judul Artikel</h4>
</div>
<div class='ng-binding' ng-bind-html='card.description'>

Masukkan Deskripsi Singkat Anda disini

</div>
</div>
</div>
</div>
<!-- end ngRepeat: card in column --><!-- ngInclude: cardTemplate --><div class='ng-scope' data-ng-include='cardTemplate' data-ng-repeat='card in column'>
<div class='thumbnail ng-scope'>
                        <div class='thumbnail-img-wrapper'>
                          <img class='thumbnail-img' ng-click='showDetails = !showDetails' ng-src='URL Gambar' src='URL gambar'/>
<div class='info-box'>
                            <div class='text-left ng-binding'>
Judul Artikel</div>
<div class='pull-right ng-binding'>
<span aria-hidden='true' class='glyphicon glyphicon-eye-open'/> Masukkan angka page vieuw</div>
</div>
<a class='dribble-url' href='URL link' ng-show='showDetails' target='_blank' title='Titel Anda'><span aria-hidden='true' class='glyphicon glyphicon-new-window '/></a>
</div>
<div class='caption animate-show' ng-show='showDetails'>
                            <div class='author-info'>
                                <img class='avatar img-circle' ng-src='URL Gambar' src='URL Gambar'/>
<h4 class='ng-binding'>
Judul Artikel</h4>
</div>
<div class='ng-binding' ng-bind-html='card.description'>

Masukkan deskripsi singkat Anda disini

<strong>Any feedback or points added, please let me know.</strong></div>
</div>
</div>
</div>
<!-- end ngRepeat: card in column --><!-- ngInclude: cardTemplate --><div class='ng-scope' data-ng-include='cardTemplate' data-ng-repeat='card in column'>
<div class='thumbnail ng-scope'>
                        <div class='thumbnail-img-wrapper'>
                          <img class='thumbnail-img' ng-click='showDetails = !showDetails' ng-src='URL Gambar' src='URL Gambar'/>
<div class='info-box'>
                            <div class='text-left ng-binding'>
Judul Artikel</div>
<div class='pull-right ng-binding'>
<span aria-hidden='true' class='glyphicon glyphicon-eye-open'/> Masukkan angka page vieuw</div>
</div>
<a class='dribble-url ng-hide' href='URL link' ng-show='showDetails' target='_blank' title='titel Anda'><span aria-hidden='true' class='glyphicon glyphicon-new-window '/></a>
</div>
<div class='caption animate-show ng-hide' ng-show='showDetails'>
                            <div class='author-info'>
                                <img class='avatar img-circle' ng-src='URL Gambar' src='URL Gambar'/>
<h4 class='ng-binding'>
Judul artikel</h4>
</div>
<div class='ng-binding' ng-bind-html='card.description'>

Masukkan deskripsi singkat Anda disini

</div>
</div>
</div>
</div>
<!-- end ngRepeat: card in column --><!-- ngInclude: cardTemplate --><div class='ng-scope' data-ng-include='cardTemplate' data-ng-repeat='card in column'>
<div class='thumbnail ng-scope'>
                        <div class='thumbnail-img-wrapper'>
                          <img class='thumbnail-img' ng-click='showDetails = !showDetails' ng-src='URL Gambar' src='URL Gambar'/>
<div class='info-box'>
                            <div class='text-left ng-binding'>
Judul Artikel</div>
<div class='pull-right ng-binding'>
<span aria-hidden='true' class='glyphicon glyphicon-eye-open'/> Masukkan angka page vieuw</div>
</div>
<a class='dribble-url ng-hide' href='URL Link' ng-show='showDetails' target='_blank' title='Titel Anda'><span aria-hidden='true' class='glyphicon glyphicon-new-window '/></a>
</div>
<div class='caption animate-show ng-hide' ng-show='showDetails'>
                            <div class='author-info'>
                                <img class='avatar img-circle' ng-src='URL Gambar' src='URL Gambar'/>
<h4 class='ng-binding'>
Judul Artikel</h4>
</div>
<div class='ng-binding' ng-bind-html='card.description'>

Tuliskan deskripsi singkat Anda disini

<a href='URL link' rel='nofollow'>Judul Artikel</a>

<a href='URL link' rel='nofollow'>Judul Artikel</a>

<a href='URL link' rel='nofollow'>Judl Artikel</a>

</div>
</div>
</div>
<!-- end ngRepeat: card in column --></div>
<!-- end ngRepeat: column in columns --><div class='column column-1-3' data-ng-repeat='column in columns'>
<!-- ngRepeat: card in column --><!-- ngInclude: cardTemplate --><div class='ng-scope' data-ng-include='cardTemplate' data-ng-repeat='card in column'>
<div class='thumbnail ng-scope'>
                        <div class='thumbnail-img-wrapper'>
                          <img class='thumbnail-img' ng-click='showDetails = !showDetails' ng-src='URL Gambar' src='URL Gambar'/>
<div class='info-box'>
                            <div class='text-left ng-binding'>
Judul Artikel</div>
<div class='pull-right ng-binding'>
<span aria-hidden='true' class='glyphicon glyphicon-eye-open'/> Masukkan angka page vieuw/div>
</div>
<a class='dribble-url ng-hide' href='URL link' ng-show='showDetails' target='_blank' title='Look on Dribble.com'><span aria-hidden='true' class='glyphicon glyphicon-new-window '/></a>
</div>
<div class='caption animate-show ng-hide' ng-show='showDetails'>
                            <div class='author-info'>
                                <img class='avatar img-circle' ng-src='URL Gambar'/>
<h4 class='ng-binding'>
Judul Anda</h4>
</div>
<div class='ng-binding' ng-bind-html='card.description'>

Masukkan deskripsi singkan Anda disini

 <a href='URL link' rel='nofollow'>download it for free</a></div>
</div>
</div>
</div>
<!-- end ngRepeat: card in column --><!-- ngInclude: cardTemplate --><div class='ng-scope' data-ng-include='cardTemplate' data-ng-repeat='card in column'>
<div class='thumbnail ng-scope'>
                        <div class='thumbnail-img-wrapper'>
                          <img class='thumbnail-img' ng-click='showDetails = !showDetails' ng-src='URL Gambar' src='URL gambar'/>
<div class='info-box'>
                            <div class='text-left ng-binding'>
Judul Artikel</div>
<div class='pull-right ng-binding'>
<span aria-hidden='true' class='glyphicon glyphicon-eye-open'/> Masukkan angka page vieuw</div>
</div>
<a class='dribble-url ng-hide' href='URL link' ng-show='showDetails' target='_blank' title='Titel Anda'><span aria-hidden='true' class='glyphicon glyphicon-new-window '/></a>
</div>
<div class='caption animate-show ng-hide' ng-show='showDetails'>
                            <div class='author-info'>
                                <img class='avatar img-circle' ng-src='URL Gambar' src='URL Gambar'/>
<h4 class='ng-binding'>
Judul Artikel </h4>
</div>
<div class='ng-binding' ng-bind-html='card.description'>
Masukkan deskripsi singkat Anda disini.</div>
</div>
</div>
</div>
<!-- end ngRepeat: card in column --><!-- ngInclude: cardTemplate --><div class='ng-scope' data-ng-include='cardTemplate' data-ng-repeat='card in column'>
<div class='thumbnail ng-scope'>
                        <div class='thumbnail-img-wrapper'>
                          <img class='thumbnail-img' ng-click='showDetails = !showDetails' ng-src='URL gambar' src='URL gambar'/>
<div class='info-box'>
                            <div class='text-left ng-binding'>
Judul Artikel</div>
<div class='pull-right ng-binding'>
<span aria-hidden='true' class='glyphicon glyphicon-eye-open'/> Masukkan angka page vieuw</div>
</div>
<a class='dribble-url ng-hide' href='hURL link' ng-show='showDetails' target='_blank' title='Titel Anda'><span aria-hidden='true' class='glyphicon glyphicon-new-window '/></a>
</div>
<div class='caption animate-show ng-hide' ng-show='showDetails'>
                            <div class='author-info'>
                                <img class='avatar img-circle' ng-src='URL Gambar' src='URL Gambar'/>
<h4 class='ng-binding'>
Ben Mingo</h4>
</div>
<div class='ng-binding' ng-bind-html='card.description'>

Tuliskan deskripsi singkat Artikel Anda disini

</div>
</div>
</div>
</div>
<!-- end ngRepeat: card in column --><!-- ngInclude: cardTemplate --><div class='ng-scope' data-ng-include='cardTemplate' data-ng-repeat='card in column'>
<div class='thumbnail ng-scope'>
                        <div class='thumbnail-img-wrapper'>
                          <img class='thumbnail-img' ng-click='showDetails = !showDetails' ng-src='URL Gambar' src='URL Gambar'/>
<div class='info-box'>
                            <div class='text-left ng-binding'>
Judul Artikel</div>
<div class='pull-right ng-binding'>
<span aria-hidden='true' class='glyphicon glyphicon-eye-open'/> Masukkan angka page vieuw</div>
</div>
<a class='dribble-url ng-hide' href='URL link' ng-show='showDetails' target='_blank' title='Look on Dribble.com'><span aria-hidden='true' class='glyphicon glyphicon-new-window '/></a>
</div>
<div class='caption animate-show ng-hide' ng-show='showDetails'>
                            <div class='author-info'>
                                <img class='avatar img-circle' ng-src='URL Gambar' src='URL Gambar'/>
<h4 class='ng-binding'>
Kyril Ku</h4>
</div>
<div class='ng-binding' ng-bind-html='card.description'>
Minimal dashboard for an upcoming project.  <a href='URL link' rel='nofollow'>Real pixels</a> attached.

Press L if you like it!</div>
</div>
</div>
</div>
<!-- end ngRepeat: card in column --><!-- ngInclude: cardTemplate --><div class='ng-scope' data-ng-include='cardTemplate' data-ng-repeat='card in column'>
<div class='thumbnail ng-scope'>
                        <div class='thumbnail-img-wrapper'>
                          <img class='thumbnail-img' ng-click='showDetails = !showDetails' ng-src='URL Gambar' src='URL Gambar'/>
<div class='info-box'>
                            <div class='text-left ng-binding'>
Judul Artikel</div>
<div class='pull-right ng-binding'>
<span aria-hidden='true' class='glyphicon glyphicon-eye-open'/> Masukan Angak Page View</div>
</div>
<a class='dribble-url ng-hide' href='URL Link' ng-show='showDetails' target='_blank' title='Look on Dribble.com'><span aria-hidden='true' class='glyphicon glyphicon-new-window '/></a>
</div>
<div class='caption animate-show ng-hide' ng-show='showDetails'>
                            <div class='author-info'>
                                <img class='avatar img-circle' ng-src='URL Gambar' src='URL Gambar'/>
<h4 class='ng-binding'>
Jan Losert</h4>
</div>
<div class='ng-binding' ng-bind-html='card.description'>
Masukkan deskripsi artikel Anda disini

<strong>Masukkan deskripsi artikel Anda disini</strong>

Masukkan deskripsi artikel Anda disini</div>
</div>
</div>
</div>
<!-- end ngRepeat: card in column --></div>
<!-- end ngRepeat: column in columns --></div>
</div>
<div class='fixed-footer'>
            <ul boundary-links='true' class='pagination ng-isolate-scope ng-pristine ng-valid' items-per-page='itemsPerPage' max-size='maxSize' ng-change='pageChanged()' ng-model='currentPage' num-pages='numPages' rotate='false' total-items='totalItems'><!-- ngIf: boundaryLinks -->
<li class='ng-scope disabled' ng-class='{disabled: noPrevious()}' ng-if='boundaryLinks'><a class='ng-binding' href='#' ng-click='selectPage(1)'>First</a></li>
<!-- end ngIf: boundaryLinks -->   <!-- ngIf: directionLinks -->
<li class='ng-scope disabled' ng-class='{disabled: noPrevious()}' ng-if='directionLinks'><a class='ng-binding' href='#' ng-click='selectPage(page - 1)'>Previous</a></li>
<!-- end ngIf: directionLinks -->   <!-- ngRepeat: page in pages track by $index -->
<li class='ng-scope active' ng-class='{active: page.active}' ng-repeat='page in pages track by $index'><a class='ng-binding' href='#' ng-click='selectPage(page.number)'>1</a></li>
<!-- end ngRepeat: page in pages track by $index -->
<li class='ng-scope' ng-class='{active: page.active}' ng-repeat='page in pages track by $index'><a class='ng-binding' href='#' ng-click='selectPage(page.number)'>2</a></li>
<!-- end ngRepeat: page in pages track by $index -->
<li class='ng-scope' ng-class='{active: page.active}' ng-repeat='page in pages track by $index'><a class='ng-binding' href='#' ng-click='selectPage(page.number)'>3</a></li>
<!-- end ngRepeat: page in pages track by $index -->
<li class='ng-scope' ng-class='{active: page.active}' ng-repeat='page in pages track by $index'><a class='ng-binding' href='#' ng-click='selectPage(page.number)'>4</a></li>
<!-- end ngRepeat: page in pages track by $index -->
<li class='ng-scope' ng-class='{active: page.active}' ng-repeat='page in pages track by $index'><a class='ng-binding' href='#' ng-click='selectPage(page.number)'>5</a></li>
<!-- end ngRepeat: page in pages track by $index -->
<li class='ng-scope' ng-class='{active: page.active}' ng-repeat='page in pages track by $index'><a class='ng-binding' href='#' ng-click='selectPage(page.number)'>...</a></li>
<!-- end ngRepeat: page in pages track by $index -->   <!-- ngIf: directionLinks -->
<li class='ng-scope' ng-class='{disabled: noNext()}' ng-if='directionLinks'><a class='ng-binding' href='#' ng-click='selectPage(page + 1)'>Next</a></li>
<!-- end ngIf: directionLinks -->   <!-- ngIf: boundaryLinks -->
<li class='ng-scope' ng-class='{disabled: noNext()}' ng-if='boundaryLinks'><a class='ng-binding' href='#' ng-click='selectPage(totalPages)'>Last</a></li>
<!-- end ngIf: boundaryLinks --> </ul>
</div>
</div>

Perhatikan pada aba-aba yang sudah aku beri tanda, silahkan Anda ganti dengan URL Gambar atau URL tujuan sesuai yang Anda kehendaki.

Selamat belajar!




Sumber http://www.websiteedukasi.com/