BELAJAR MEN DESIGN TEMPLATE BLOG MENJADI KEREN

BELAJAR MEN DESIGN TEMPLATE BLOG MENJADI KEREN

JUN SUSILA SAPTA SIWI

Cara Desain Template atau lebih sering disebut dengan Editing Template sejujurnya bukan pekerjaan yang mudah, apalagi untuk orang yang tidak terlalu menguasai CSS dan HTML seperti saya, ditambah tidak adanya sense of art dalam diri saya ini membuat aktifitas Desain Template sebagai pekerjaan yang cukup membingungkan 'sorry, malah curhat'.

Kita kembali ke topik, meskipun saya masih amatir dalam hal Desain Template ( CSS, HTML dan JS ) tapi paling tidak, ada sedikit (baca : sangat sedikit) ilmu tentang Desain Template yang sudah saya pelajari. Dan rencana disini saya akan membagikannya kepada Anda semua secara gratis.

Secara garis besar, disini nantinya kita akan belajar cara desin template yang berkaitan dengan :

• Pagination
• Social Sharing Widget

Oke cukup dua itu saja, dan saya rasa, template Anda akan menjadi Bagus dan Menarik. Baik saja kita mulai pembahasan pertama mengenai Pagination.

Cara Desain Template Blog dengan Pagination

Ada yang masih asing dengan istilah Pagination ? Pagination ( Page Navigation ) adalah penomoran pada sebuah halaman web, namun pada contoh ini kita tidak sedang memberi nomor yang biasa Anda lihat di Homepage, melainkan disini kita akan mendesain tombol Next dan Previous, yang mempunyai tampilan dasar (pagination default) seperti gambar dibawah ini.

Terlihat biasa saja kan ? dan orang pun tidak terlalu nafsu untuk mengklik-nya. Nah, untuk itu penting sekali untuk kita mengubah desain default dari Pagination tersebut menjadi seperti ini.

Desain Pagination diatas adalah milik MBT ( MyBloggerTrick ) dan disini kita akan menirunya, tenang saja tidak akan dimarahi, karena memang dari sang pemiliknya lah yang sudah membagikannya ke publik.

Baik kita masuk ke cara pembuatan pagination di Blogger.

1. Silahkan masuk ke Menu Template
   
   
   
   
   Saya sarankan untuk membackup Template asli Anda terlebih dahulu
   
   
2. Klik Edit HTML
   
   
   
   
   Cari ]]></b:skin> untuk mempermudah Anda mencari silahkan klik CTRL + F
   
   
3. Silahkan Anda copy semua CSS dibawah ini
   
   
   .mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd;  margin-bottom: 10px;   overflow:hidden; padding:0px;}
   .mbt-pager li.next { float: right; padding:0px; background:none; margin:0px;}
   .mbt-pager li.next a { padding-left: 24px; }
   .mbt-pager li.previous { margin:0px -2px 0px 0px; float: left;  border-right:1px solid #ddd; padding:0px; background:none;
   }
   .mbt-pager li.previous a { padding-right: 24px;  }
   .mbt-pager li.next:hover, .mbt-pager li.previous:hover  {background:#333333; }
   .mbt-pager li { width: 50%; display: inline; float: left; text-align: center; }
   .mbt-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
   .mbt-pager li i { color: #ccc; font-size: 18px; }
   .mbt-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
   .mbt-pager li a span { font-size: 15px; color: #666;  font-family:oswald,Helvetica, arial; margin:0px;}
   .mbt-pager li a:hover span,
   .mbt-pager li a:hover i { color: #ffffff; }
   .mbt-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
   .mbt-pager li.next i { float: right;
   margin-top: 15%;
   margin-right: 5%; }
   .mbt-pager li.next i, .mbt-pager li.previous i ,
   .mbt-pager li.next,  .mbt-pager li.previous{
   -webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
   -moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
   -o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
   transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }
   .fa-chevron-right {padding-right:0px;}
   
   Lalu letakkan CSS tersebut tepat diatas ]]></b:skin>
   
   
4. Tambahkan kode dibawah ini untuk mengubah Font
   
   <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'/>
   
   Kode diatas bisa Anda letakkan diatas kode css </head>
   
   
5. Copy kode dibawah ini
   
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <ul class='mbt-pager'>
           <li class='next'>
   <b:if cond='data:newerPageUrl'>
   <i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next'/>
   <b:else/>
   <i class='fa fa-chevron-right'/><a rel='next'><strong>Next</strong> <span>You are viewing Most Recent Post</span></a>
   </b:if>
   </li>
       <li class='previous'>
   <b:if cond='data:olderPageUrl'>
   <i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous'/>
   <b:else/>
   <i class='fa fa-chevron-left'/><a rel='previous'><strong>Previous</strong> <span>You are viewing Last Post</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 h3.post-title').text()+'</span>');  
       },"html");
       $.get(olderLink.attr('href'), function (data2) {
        olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');  
       },"html");
   })(jQuery);
   //]]>
   </script>
         </b:if></b:if>
   
   Cari <data:post.body/> lalu pastekan kode diatas tepat dibawah kode <data:post.body/>

Dari sini kita sudah selesai membuat Pagination-nya, silahkan Anda cek, jika pagination yang Anda buat tidak muncul Judul-nya, maka Anda perlu mengganti kode .post h3.post-title dengan kode ini .post h2.article-title

Langkah terakhir kita tinggal menghabus Pagination Default dari blogger, caranya cukup mudah, langkah pertama, silahkan Anda Cari <b:includable id='nextprev'> kalau tidak ketemu coba cari id='nextprev maka dibawah <b:includable id='nextprev'> akan terlihat kode orisinil pagination seperti dibawah ini

<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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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'/>

Tugas Anda selanjutnya adalah mengapit kode orisinil pagination diatas dengan kode dibawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

kode orisinil pagination

</b:if></b:if>

Lebih jelasnya silahkan lihat gambar dibawah ini, dimana kode orisinil pagination adalah kode yang saya blok.

Silahkan Anda Save, dan cek lagi. Selamat sebuah Desain Pagination baru yang sangat bagus dan menarik telah terpasang di Template Anda.