Home » Archives for January 2017

Praktek Penerapan dan Cara Mengatur Form Search Responsive pada Blog dengan Mudah

Berbicara mengenai search box atau kotak pencarian adalah hal yang biasa-biasa saja, setiap kita mengunjungi suatu situs pasti telah menyediakan layanan pencarian, karna begitu pentingnya banyak yang mendesain form search atau kotak pencarian mereka dengan berbagai gaya dengan desain yang  betul-betul menarik perhatian pengunjung untuk menggunakannya.
Saya tidak akan menjelaskan secara terperinci karna saya yakin anda sudah mengetahui fungsi dari search box tersebut. Namun perlu anda ketahui, bahwa Praktek/tutorial kali ini akan menggunakan desain yang menurut saya sangat sederhana minimalis namun menarik perhatian, gambar di atas adalah hasil dari kreasi saya dalam menerapkannya di blog ini:
Saya yakin anda bisa bereksperimen lebih dari pada saya sehingga hasilnya bisa jauh lebih menarik.
Bagaimana cara penerapan dan pemasanganya? Berikut prakteknya bisa anda ikuti step by step.
1. Masuk ke Dashboard.
2. Lalu pilih template.
3. Selanjutnya pilih Edit HTML.
4. Lalu cari kode aside (Gunakan CTRL + F agar pencarian lebih mudah).
5. Lalu pastekan kode HTML di bawah ini tepat di bawah kode <aside id

HTML :
    <div id='search-box'>
    <form action='/search' id='search-form' method='get' target='_top'>
    <input id='search-text' name='q' placeholder='Seacrh Here...' type='text'/>
    <button id='search-button' type='submit'><span><i aria-hidden='true' class='fa fa-search'/> Search</span></button></form></div>
Ket : Anda bisa mengganti teks warna biru sesuai dengan keinginan anda. Warna hijau bisa anda hilangkan atau anda ganti dengan icon lain. Warna ungu bisa anda ubah kedalam bahasa lain misalkan CARI DISINI, CARI ARTIKEL dan sebagainya.
6. Lanjut dengan mencari  </head>  Jika sudah ketemu letakkan CCS berikut di atasnya

<style>
#search-box{position:relative;top:20px;margin:10px auto;border:1px solid #ccc;padding:5px;}#search-form{height:35px;background-color:#fff;overflow:hidden}#search-text{font-size:12px;color:#ddd;border-width:0;background:transparent;line-height:15px}#search-box input[type=&quot;text&quot;]{width:90%;padding:10px 0 5px 1em;color:#333;outline:none}
#search-button{position:absolute;top:5px;right:5px;height:35px;width:80px;font-size:12px;color:#fff;text-align:center;border-width:0;background-color:#ff5848;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}#search-button:hover{background:#333}
</style>
Ket : Sesuaikan dengan template anda text warna merah di atas adalah pengaturan letaknya, untuk yang warna kuning adalah ukuran huruf, wana biru adalah untuk mengatur lengkungan pada sudut search. Jika ada yang kurang jelas silahkan berkomeentar atau melalui email pada bagian Kontak.
7. Save template anda dan lihat hasilnya.

Itulah cara penerapan kolom pencarian yang menurut saya cukup praktis dan mudah diterapkan pada blog anda.
Baca Selengkapnya

Praktek Penerapan, Postingan Terkait atau Related Post Dengan Gambar Thumbnail Responsive


Tema pada kali ini adalah Postingan Terkait atau  Related Post Responsive, begitulah kira-kira dengan judul Praktek Penerapan, Widget Postingan Terkait atau  Related Post di Blogger Dengan Gambar Thumbnail Responsive.
Ok, mari kita mulai praktek kali ini dengen menghapus terlebih dahulu semua kode related post yang ada di template anda jika sudah pernah menerapkannya dan merasa kurang puas dengan tampilan related post atau artikel terkait yang anda miliki sekaran.
Tetapi kalau anda belum pernah memasang artikel terkait atau related post di blog anda, lewati langkah di atas dan mulai ke tahap berikutnya.
  1. Seperti biasa pilih Template kemudian Edit HTML. Bagi pemula jika kurang jelas lihat gambar berikut : 
    Bagi anda yang sudah paham abaikan gambar di atas dan lanjut ketahap selanjutnya.
  2. Pasang kode CSS dan JavaScript Related Post Gambar Thumbnail Responsive berikut di atas kode </head>
    <!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    #related-post {margin:0 auto;padding:0;}
    #related-post h4{position:relative;overflow:hidden;margin:10px 0 20px 0;font-size:120%;font-weight:700}
    #related-post h4:after{position:absolute;top:51%;overflow:hidden;width:78.3%;height:1px;
    content:&#39;a0&#39;;background-color:#ccc}
    #related-post h4 span{position:relative;display:inline-block;margin:0 10px 0 0}
    .relhead {font-size:100%;font-weight:normal;line-height:150%;overflow:hidden;padding:10px 0;}
    #related-summary .news-text {display:none;}
    ul#related-summary{margin:0 auto;padding:0;list-style:none;word-wrap:break-word}
    ul#related-summary li{position:relative;float:left;list-style:none outside none;padding:0;overflow:hidden;margin:0 10px 0 0;width:100%;max-width:175px;height:170px;transition:opacity .2s ease}
    ul#related-summary li a {display:block;}
    ul#related-summary li img{background-color:#fafafa;display:block;width:100%;height:auto;max-width:100%;max-height:100px;vertical-align:middle;overflow:hidden;margin:0 0 10px;transition:all 1s ease-out}
    ul#related-summary li:hover img {opacity:0.96;}
    ul#related-summary li a.relinkjdulx{background-image:none;color:#444;display:block;font-size:13px;font-weight:700;line-height:normal;overflow:hidden;padding:0;text-align:left;text-transform:none}
    ul#related-summary li a.relinkjdulx:hover{color:#c00;}
    @media only screen and (max-width:640px){
    ul#related-summary li {float:left;list-style:none;overflow:hidden;width:100%;border-bottom:1px solid #e6e6e6;padding:10px 0;max-width:100%;height:auto;}
    ul#related-summary li:last-child{border-bottom:none;}
    ul#related-summary li img{max-width:72px;float:left;margin:0 10px 0 0;}
    ul#related-summary li a.relinkjdulx {display:block;font-size:15px;font-weight:700;line-height:normal;overflow:hidden;padding:0 10px 10px 0;}}
    @media screen and (max-width:384px){
    ul#related-summary li img{display:none}}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    //Related Post
    var relnojudul = 0;
    var relmaxtampil = 6;
    var numchars = 120;
    var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
    //]]>
    </script>
    <script type='text/javascript'>
    $(&quot;ul#related-summary li img&quot;).each(function(){$(this).attr(&quot;src&quot;,$(this).attr(&quot;src&quot;).replace(//s[0-9]+(-c)?//,&quot;/w175-h100-c/&quot;))});
    </script>
    </b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->
  3. Langkah terahir pemasangan kode HTML di bawah kode <data:post.body/> yang kedua atau ketiga, bisa juga di bawah kode <div class='post-footer'> atau <div class='post-footer-line post-footer-line-2'> atau <div class='post-footer-line post-footer-line-3'> berikut kodenya :
    <!-- Related Posts with Thumbnails Code Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-post'>
    <div class='relhead'>
      <h4><span>Related Posts</span></h4>
    <div class='clear'/>
              <b:loop values='data:post.labels' var='label'>
                   <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;' type='text/javascript'/>
              </b:loop>
              <ul id='related-summary'>
                   <script type='text/javascript'>artikelterkait();</script>
              </ul>
         </div>
    </div>
    <div class='clear'/>
    </b:if>
    <!-- Related Posts with Thumbnails Code End-->

  4. Save Template!
CATATAN : Jika ada masalah lebar gambar, bisa diatur pada kode CSS (bagian width), caranya cari kode berikut: max-width:175px;height:170px;transition:opacity .2s ease dan sesuaikan dengan lebar postingan anda dengan mengganti 175px sesuai lebar postingan anda.
Praktek ini di adopsi dari Contoh Blog Sebagai sumber dari admin.
Baca Selengkapnya

Praktek Penerapan Kotak seleksi Kode Script HTML/CCS/Javascript di Dalam Posting Blog

Kali ini admin DGP akan memberikan praktek penerapan kotak seleksi kode Script HTML/CCS/Javascript di Dalam Posting Blog.
Artikel-artikel yang biasanya kita temui biasa adalah artikel tutorial yang menyajikan script sebagai tutorial, tujuannya bukan hanya untuk menambah kerapian postingan artikel tetapi juga sangan memudahkan pembaca untuk  mencopy paste script tersebut supaya mudah dipraktekkan saat ingin diterapkan oleh pengunjung.
Bagi para blogger atau mereka yang sudah terbiasa mendesain blog/webs tentu hal ini bukanlah hal yang baru dan luar biasa karna sudah familiar dengan tampilan tutorial yang seperti ini, namun bagi para pemula hal ini bukanlah sesuatu yang mudah, oleh karena itu postingan ini khusus dedikasikan hanya untuk blogger pemula yang ingin belajar oleh admin DGP.
Untuk lebih jelasnya berikut sedikit gambaran dari praktik ini:


Atau liahat demonya di SINI
Untuk penerapannya mari kita mulai dengan masuk ke blog anda pilih Template kemudian Edid HTML lihat gambar berikut:


Selanjutnya cari kode ]]></b:skin> atau </style> jika sudah ketemu sisipkan CCS berikut sebelum ]]></b:skin> atau </style> lihat gambar berikut :

Sebelum ]]></b:skin> atau di atasnya sudah saya kasi kotak, nantinya disitulah posisi CCS berikut disisipkan ;



Selanjutnya, sisipkan kode script berikut sebelum atau di atas body </body>



Setelah langkah di atas selesai save template anda, kemudia cobalah membuat suatu postingan seperti biasanya pada mode Compose, namun ketika anda ingin memasukkan sebuah CCS/JS pilih mode HTML, lihat gambar berikut :


Paste kode berikut pada mode HTML seperti pada gambar di atas:


Saat postingannya selesai pratinjau dan lihat hasilnya, selesai.

Baca Selengkapnya

Praktek Penerapan Header Responsive Dengan Menu Navigasi Dan Search

Kali ini kita akan mempraktekkan penerapan header responsive dengan menu navigasi dan kotak search pada blog, untuk lebih jelasnya berikut screnshoot setelah penerapannya :


Bagaimana praktek penerapannya?
Berikut langkah-langkah penerapan header responsive dengan menu navigasi dan search pada blog.
Pertama : Sisipkan scritp berikut di atas <body>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
    <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'/>

Script di atas bisa anda abaikan jika sudah terpasang pada blog anda, jadi sebaiknya di cek dulu, jika sudah selesai, kita ketahap selanjutnya bagian,
Kedua : Terapkan  HTML berikut Pada header atau ganti bagian header dengan HTML berikut:
 <div>
        <div class='header-blue'>
            <nav class='navbar navbar-default navigation-clean-search'>
                <div class='container'>
                    <div class='navbar-header'><a class='navbar-brand navbar-link' href='#'>Cara Cara</a>
                        <button class='navbar-toggle collapsed' data-target='#navcol-1' data-toggle='collapse'><span class='sr-only'>Toggle navigation</span><span class='icon-bar'/><span class='icon-bar'/><span class='icon-bar'/></button>
                    </div>
                    <div class='collapse navbar-collapse' id='navcol-1'>
                        <ul class='nav navbar-nav'>

                            <li class='dropdown'><a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#'>Kontak <span class='caret'/></a>
                                <ul class='dropdown-menu' role='menu'>
                                    <li role='presentation'><a href='#'>First Item</a></li>
                                    <li role='presentation'><a href='#'>Second Item</a></li>
                                    <li role='presentation'><a href='#'>Third Item</a></li>
                                </ul>
                            </li>
                        </ul>
                        <form class='navbar-form navbar-left' target='_self'>
                            <div class='form-group'>
                                <label class='control-label' for='search-field'><i class='glyphicon glyphicon-search'/></label>
                                <input class='form-control search-field' id='search-field' name='search' type='search'/>
                            </div>
                        </form>
                    </div>
                </div>
            </nav>
            </div>
        </div>
Bagian ketiag Sisipkan CCS berikut di bawah <head>
<style>
.header-blue{
  background:linear-gradient(135deg, #172a74, #21a9af);
  background-color:#184e8e;
  padding-bottom:80px;
  font-family:&#39;Source Sans Pro&#39;, sans-serif;
}
@media (max-width:767px) {
  .header-blue{
    padding-bottom:30px;
  }
}
.header-blue .navbar{
  background:transparent;
  padding-top:12px;
  padding-bottom:10px;
  color:#fff;
  border-radius:0;
  box-shadow:none;
  border:none;
}
@media (max-width:767px) {
  .header-blue .navbar{
    padding-top:0;
    padding-bottom:0;
  }
}
@media (max-width:767px) {
  .header-blue .navbar .navbar-header{
    padding-top:10px;
    padding-bottom:10px;
  }
}
@media (max-width:767px) {
  .header-blue .navbar .navbar-right{
    margin-bottom:20px;
  }
}
.header-blue .navbar .navbar-brand{
  font-weight:bold;
  color:inherit;
}
.header-blue .navbar .navbar-brand:hover{
  color:#f0f0f0;
}
.header-blue .navbar .navbar-brand img{
  height:100%;
  display:inline-block;
  margin-right:10px;
  width:auto;
}
.header-blue .navbar .navbar-toggle{
  border-color:rgba(255,255,255,0.3);
}
.header-blue .navbar .navbar-toggle:hover, .header-blue .navbar-toggle:focus{
  background:none;
}
.header-blue .navbar .navbar-toggle .icon-bar{
  background-color:#eee;
}
.header-blue .navbar .navbar-collapse, .header-blue .navbar .navbar-form{
  border-color:rgba(255,255,255,0.3);
}
.header-blue .navbar .navbar-nav &gt; .active &gt; a, .header-blue .navbar .navbar-nav &gt; .open &gt; a{
  background:none;
  box-shadow:none;
}
.header-blue .navbar.navbar-default .navbar-nav &gt; .active &gt; a, .header-blue .navbar.navbar-default .navbar-nav &gt; .active &gt; a:focus, .header-blue .navbar.navbar-default .navbar-nav &gt; .active &gt; a:hover{
  color:rgba(255,255,255,0.3);
  box-shadow:none;
  background:none;
  pointer-events:none;
}
.header-blue .navbar.navbar .navbar-nav &gt; li &gt; a{
  padding-left:18px;
  padding-right:18px;
}
.header-blue .navbar.navbar-default .navbar-nav &gt; li &gt; a{
  color:#d9d9d9;
}
.header-blue .navbar.navbar-default .navbar-nav &gt; li &gt; a:focus, .header-blue .navbar.navbar-default .navbar-nav &gt; li &gt; a:hover{
  color:#fcfeff !important;
  background-color:transparent;
}
.header-blue .navbar .navbar-nav &gt; li &gt; .dropdown-menu{
  margin-top:-5px;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
  background-color:#fff;
  border-radius:2px;
}
.header-blue .navbar .dropdown-menu &gt; li &gt; a:focus, .header-blue .navbar .dropdown-menu &gt; li &gt; a{
  line-height:2;
  font-size:14px;
  color:#37434d;
}
.header-blue .navbar .dropdown-menu &gt; li &gt; a:focus, .header-blue .navbar .dropdown-menu &gt; li &gt; a:hover{
  background:#ebeff1;
}
@media (max-width:767px) {
  .header-blue .navbar .navbar-nav .open .dropdown-menu{
    box-shadow:none;
    background:none;
    color:#fff;
  }
}
@media (max-width:767px) {
  .header-blue .navbar .navbar-nav .open .dropdown-menu &gt; li &gt; a{
    color:#fdfeff;
    padding-top:12px;
    padding-bottom:12px;
    line-height:1;
  }
}
.header-blue .action-button, .header-blue .action-button:active{
  border:1px solid rgba(255,255,255,0.7);
  border-radius:20px;
  color:#ebeff1;
  box-shadow:none;
  text-shadow:none;
  padding:6px 15px;
  background:transparent;
  transition:background-color 0.25s;
  outline:none;
}
.header-blue .action-button:hover{
  color:#fff;
}
.header-blue .action-button.btn-lg{
  padding:7px 18px;
}
.header-blue .navbar .navbar-form label{
  color:#ccc;
}
.header-blue .navbar .navbar-form .search-field{
  background:none;
  border:none;
  border-bottom:1px solid transparent;
  border-radius:0;
  color:#ccc;
  box-shadow:none;
  color:inherit;
  transition:border-bottom-color 0.3s;
}
@media (max-width:767px) {
  .header-blue .navbar .navbar-form .search-field{
    display:inline-block;
    width:80%;
  }
}
.header-blue .navbar .navbar-form .search-field:focus{
  border-bottom:1px solid #ccc;
}
</style>
 Selesai, untuk lebih jelas anda bisa cek hasil penerapannya  pada mode DEMO
Baca Selengkapnya

PRAKTEK VERIFIKASI KEPEMILIKAN BLOG PENTING BUAT BLOGGER PEMULA


Berbicara masalah verifikasi sangatlah penting karna sesuatu yang anda miliki namun tidak mengklaim dan menferivikasinya bahwa itu milik anda maka akan sia-sia, karna bisa saja ada pihak lain yang mengklaimnya.
Lalu apa itu ferivikasi? berikut sedikit pengertian ferivikasi.
Verifikasi adalah suatu penilaian terhadap sumber-sumber. Penilaian yang dimaksud sangat berkaitan dengan dua aspek yakni aspek ekstern dan aspek intern. Aspek esktern ini mempersoalkan sumbernya sedangkan aspek intern ini mempersoalkan apakah sumber tersebut dapat memberikan suatu informasi yang dibutuhkan. Umumnya proses verifikasi ini dibutuhkan untuk menilai beberapa naskah dokumen penting ataupun surat.
Verifikasi adalah proses pembuktian bahwa Anda adalah pemilik situs atau aplikasi yang diklaim sebagai milik anda.
Blog yang anda buat dengan artikel-artikel yang anda buat akan percuma tanpa anda menverifikasi bahwa itu adalah hasil karya anda yang anda publikasikan melalui blog anda.
Lalu bagaimana cara menverifikasi blog anda?
Berikut  prektek yang bisa anda terapkan untuk menferivikasi kepemilikan blog anda.
Pertama :
Masuk ke blog anda pilih setelan berikut gambarannya : 

 Selanjutnya pilih preferensi penelusuran seperti pada gambar berikut :
Lanjut perhatikan tanda panah, pas disamping GOOGLE SEARCH CONSOLE pilih edit
Secara otomatis anda akan ditujukan pada tab baru pada browser anda menuju beranda search console
perhatikan gambar berikut :
Selanjutnya anda bisa menambahkan properti atau blog anda dengan memasukkan url blog anda, jika sudah selesai pilih kelola properti dan verifikasi properti  perhatikan gambar tandah panah di atas.
Selanjutnya anda akan menuju pada halaman seperti pada gambar berikut:
copy semua yang telah saya tandai seperti pada gambar di atas, selanjutnya kembali ke blog anda pilih template kemudian pilih edit html, seperti pada gambar berikut :
Paste atau tempatkan meta tag yang tadi anda copy di bawah <head> lihat gambar berikut :

Saatnya save templat anda.
Kemudian kembali ke tab halaman ferivikasi di mana anda tadi mengambil meta tag yang anda copy ke dalam template blog anda, dan pilih ferivikasi, berikut gambarnya
Selesai anda akan ditujukan ke halaman seperti gambar berikut :
Itulah praktek ferivikasi blog ke search console, semoga bermanfaat.
Baca Selengkapnya

Praktek Penerapan Tombol Next and Previous di Bawah Postingan Blog

Praktek ini akan membahas penerapan tombol NEXT and PREVIOUS, tombol ini biasanya berada di bawah artikel, tombol ini terkadang hanya berupa tombol NEXT and PREVIOUS saja, ada juga yang menyertakan judul artikel yang menjadi tujuan tombol tersebut seperti pada gambar berikut :


Itulah sekilas gambaran praktek yang akan kita terapkan di blog anda, jika anda sudah paham mari simak praktek berikut step by step :

Pertama : Masuk ke Blogger > Template
Kedua : Backup template anda terlebih dahulu untuk menghindari kekeliruan saat penerapan
Ketiga : Pilih (Edit HTML)

Keempat : Copy kata berikut ]]> </ b: skin>  kemudian Tekan Ctrl + F dan tekan kontrol Ctrl V dan tekan Enter
kalau sudah ketemu sisipkan kode di bawah ini di atas kode yang kita cari tadi yaitu ]]></:skin>  :

    .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;}

Kelima : Tambahkan font Oswald. Cari  kode <head> dan sisipkan kode berikut tepat di bawahnya :

    <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'/>


Catatan : Jika template anda sudah terpasang kode di atas lewatkan saja. 

Keenam: kita akan menambahkan kode HTML yang akan menempatkan posisi halaman di bagian bawah posting blog anda, caranya cari kode <data:post.body/> dan paste kode HTML berikut tepat di bawahnya : 


    <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>

Terahir : Save dan lihat hasilnya.
sekian praktek kali ini semoga bermanfaat.
Baca Selengkapnya
Subscribe to: Posts (Atom)