Tutorial Blog Cara Membuat Next - Previous Button di Bawah Artikel Blog
Bagi anda yang baru bergabung dalam dunia blogging, mungkin akan kesulitan untuk menggunakan Syntax-syntax untuk membangun sebuah website. Syntax tersebut digunakan untuk membuat fitur - fitur yang tidak ada di blogger, seperti membuat Next - Previous Button di Bawah Artikel Blog. Fitur tersebut sangat penting untuk membuat website menjadi keren. oleh karena itu saya telah membuat Tutorial Blog Cara Membuat Next - Previous Button di Bawah Artikel Blog
berikut merupakan langkah - langkah membuatnya ;
Langkah - langkah :
1. Hal pertam yang harus anda lakukan adalah Login ke Akun Blogger milik sobat
2. kemudian sobat Pilih Tema atau Template
3. Edit HTML
4. kemudian sobat cari Cari kode ]]</b:skin> atau </style>
anda bisa menggunakan Shortcut CTRL + F untuk mempermudah pencarian sobat
5. Copy kode CSS di bawah ini, kemudian letakkan di atas ]]</b:skin> atau </style>
6. lalu sobat bisa Pasang Font JQUERY di bawah ini tepat di antara tag <head> dan </head>
Atau agar mempermudah, lihat kode yang seperti ini :
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'>
...
...
...
...
</div> <div class='clear'/>
</b:includable>
Silahkan sobat ganti kode tersebut dengan kode di yang ada
bawah ini :
Catatan :
Biasanya kode ini lebih dari satu, pilih yang kedua atau yang ketiga, atau sesuai dengan selera sobat.
9. Copy Script di bawah ini letakkan di bawah <data:post.body/>
10. Kemudian sobat bisa menyimpan temanya
itulah cara Membuat Tombol Selanjutnya dan Sebelumnya di Bawah Artikel Blog, Semoga dengan adanya artikel membantu menjadikan website anda lebih menarik dan menjadi lebih keren.
TERIMA KASIH :)
berikut merupakan langkah - langkah membuatnya ;
Langkah - langkah :
1. Hal pertam yang harus anda lakukan adalah Login ke Akun Blogger milik sobat
2. kemudian sobat Pilih Tema atau Template
3. Edit HTML
4. kemudian sobat cari Cari kode ]]</b:skin> atau </style>
anda bisa menggunakan Shortcut CTRL + F untuk mempermudah pencarian sobat
5. Copy kode CSS di bawah ini, kemudian letakkan di atas ]]</b:skin> atau </style>
/* Next-Previous Design MayCyber-Download */
.pagebutton-nextprevious {margin-bottom: 10px; overflow:hidden; padding:0;margin-right:5px;margin-left:5px;}
.pagebutton-nextprevious li.next { margin:0 -2px 0 0; float: left; border-right:1px solid #ddd; padding:0; background:#fff;color:#444;}
.pagebutton-nextprevious li.next a { padding-left: 15px;text-align:left;padding-bottom:20px}
.pagebutton-nextprevious li.previous {float: right; padding:0; background:#fff; margin:0;color:#444}
.pagebutton-nextprevious li.previous a { padding-right:15px; text-align:right;padding-bottom:20px }
.pagebutton-nextprevious li.next:hover, .pagebutton-nextprevious li.previous:hover {background:#fff;color:#ccc }
.pagebutton-nextprevious li { width: 50%; display: inline; float: left; text-align: center; }
.pagebutton-nextprevious li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
.pagebutton-nextprevious li i { color: #444; font-size: 18px; }
.pagebutton-nextprevious li a strong { display: block; font-size: 20px; color: #444; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
.pagebutton-nextprevious li a span { font-size: 15px; color: #444; font-family:oswald,Helvetica, arial; margin:0;}
.pagebutton-nextprevious li a:hover span,
.pagebutton-nextprevious li a:hover i { color: #c00; }
.pagebutton-nextprevious li.previous i { float:left; margin-top:15%; margin-left:5%; }
.pagebutton-nextprevious li.next i { float: right;margin-top: 15%;margin-right: 5%; }
.pagebutton-nextprevious li.next i, .pagebutton-nextprevious li.previous i ,
.pagebutton-nextprevious li.next, .pagebutton-nextprevious li.previous{transition-duration: 0.4s; transition-timing-function: ease-out; }6. lalu sobat bisa Pasang Font JQUERY di bawah ini tepat di antara tag <head> dan </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>7. Cari lagi kode <b:includable id='nextprev'> Atau agar mempermudah, lihat kode yang seperti ini :
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'>
...
...
...
...
</div> <div class='clear'/>
</b:includable>
Silahkan sobat ganti kode tersebut dengan kode di yang ada
bawah ini :
<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:if>
</b:if>
</b:includable>8. Cari Lagi Kode <data:post.body/>Catatan :
Biasanya kode ini lebih dari satu, pilih yang kedua atau yang ketiga, atau sesuai dengan selera sobat.
9. Copy Script di bawah ini letakkan di bawah <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<ul class='pagebutton-nextprevious'>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='buttonside-left'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' rel='next' title='Artikel Selanjutnya'/>
<b:else/>
<i class='buttonside-left'/><a rel='next'><strong>Next</strong> <span>This is the current newest page</span></a>
</b:if>
</li>
<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='buttonside-right'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' rel='previous' title='Artikel Sebelumnya'/>
<b:else/>
<i class='buttonside-right'/><a rel='previous'><strong>Previous</strong> <span>This is the current oldest page</span></a>
</b:if>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
(function($){
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h1.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h1.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>
</b:if>10. Kemudian sobat bisa menyimpan temanya
itulah cara Membuat Tombol Selanjutnya dan Sebelumnya di Bawah Artikel Blog, Semoga dengan adanya artikel membantu menjadikan website anda lebih menarik dan menjadi lebih keren.
TERIMA KASIH :)
0 Response to "Tutorial Blog Cara Membuat Next - Previous Button di Bawah Artikel Blog"
Post a Comment