Cara Membuat Content Pagination di Blogger seperti Wordpress

Content Pagination berfungsi membagi sebuah konten menjadi beberapa halaman dengan menampilkan pager angka sesuai banyak halaman yang dibuat ( umumnya tampilan ini banyak digunakan oleh Template berplatform Wordpress ) sehingga memudahkan navigasi pengunjung untuk melihat konten selanjutnya.

Content Pagination yang diterapkan di blogger ini menggunakan Javascript, tanpa memerlukan jquery library sehingga tidak akan banyak mengganggu loading halaman blog. Ketika pengunjung mengklik pager untuk membaca konten selanjutnya, maka selain konten yang berganti juga otomatis mereload halaman sehingga otomatis konten berikut iklan yang ada di halaman juga ikut berganti.

Jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

Silahkan gunakan ( masukkan ) kode berikut ini pada postingan mode HTML untuk membuat postingan dengan content pagination ini.

 <style>
.button-box{margin:30px 0;text-align:center;}
#page1,#page2,#page3,#page4,#page5{display:none}
#page1.current{display:block}
a.button-pager{height:30px;line-height:30px;padding:0 20px; margin:0 5px 0 0;text-align:center;background:#ddd;color:#333;cursor:pointer;display:inline-block;}
a.button-pager.current{background:#333;color:#fff;}
</style>

<div id='topcontent'></div>

<div id="page1" class="current">
Kontent untuk halaman 1 tulis di sini......
</div>

<div id="page2">
Kontent untuk halaman 2 tulis di sini......
</div>

<div id="page3">
Kontent untuk halaman 3 tulis di sini......
</div>

<div id="page4">
Kontent untuk halaman 4 tulis di sini......
</div>

<div id="page5">
Kontent untuk halaman 5 tulis di sini......
</div>

<div class="button-box">
<a class="button-pager current" id="button1" href="?page1#topcontent">1</a>
<a class="button-pager" id="button2" href="?page2#topcontent">2</a>
<a class="button-pager" id="button3" href="?page3#topcontent">3</a>
<a class="button-pager" id="button4" href="?page4#topcontent">4</a>
<a class="button-pager" id="button5" href="?page5#topcontent">5</a>
</div>

<script>
//<![CDATA[
var p1=document.getElementById("page1"),p2=document.getElementById("page2"),p3=document.getElementById("page3"),p4=document.getElementById("page4"),p5=document.getElementById("page5"),b1=document.getElementById("button1"),b2=document.getElementById("button2"),b3=document.getElementById("button3"),b4=document.getElementById("button4"),b5=document.getElementById("button5");window.location.href.search("page1")>0&&(p1.style.display="block",p1.classList.add("current"),b1.classList.add("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page2")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="block",p2.classList.add("current"),b2.classList.add("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page3")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="block",p3.classList.add("current"),b3.classList.add("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page4")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="block",p4.classList.add("current"),b4.classList.add("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page5")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="block",p5.classList.add("current"),b5.classList.add("current"));
//]]>
</script>

Silahkan sesuaikan pembagian konten halaman dan tombolnya sesuai keinginan. Namun Sobat juga bisa menyimpan style CSS dan javascript-nya pada edit HTML agar lebih simple ketika membuat postingannya.

Semoga bermanfaat.

Cara Mebuat Widget Popularpost Keren di Blog Terbaru

Widget Popularpost default atau bawaan Blogger umumnya kurang keren atau sering dari kita ingin menggantinya namun tidak tahu apa yang harus dilakukan, terutama bagi newbie yang belum begitu mengenal koding. Widget Popularpost yang umum dibagikan pada template template gratis juga kebanyakan dengan tampilan yang kurang menarik.

Demo
Click here

Nah…pada kesempatan kali ini CrepictDGZ coba memberikan tips bagaimana cara mengganti Widget Popularpost bawaan template dengan Widget Popularpost seperti pada gambar diatas...

Cara Mebuat Widget Popularpost Keren di Blog Terbaru

1. Sobat harus memperhatikan syarat berikut ini :

Hapus kode CSS Widget Popularpost yang sebelumnya terpasang pada template Sobat sebelum menggantinya dengan Widget Popularpost dari CrepictDGZ.

2. Setelah menghapus, silahkan ganti dengan CSS Widget Popularpost dibawah ini :

/* CSS Popularposts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
#PopularPosts1{padding:0;}
#PopularPosts1 ul{padding:0;counter-reset:popcount;background: linear-gradient(to right, #2B0C93 0px, #A54098 56%, #F84272 100%) repeat scroll 0% 0% transparent;z-index:999;transition:all .4s ease-in-out;}
#PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0;line-height:1.2em;}
#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}
#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:700;color:#fff}
#PopularPosts1 ul li img { width: 318px;height: auto;}
#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail {margin:0;width:100%;height:180px;overflow:hidden;display:block;}
#PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(45,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(45,62,80,.6);transform:translate(0,0)}
#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff}
#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}
#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s;text-align:justify;}
#PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
#PopularPosts1 ul li:first-child .item-title:before{top:25%}
#PopularPosts1 ul li:first-child .item-title:before{color:#fff}

3. Simpan kode Javascript dibawah ini sebelum kode</body>

<script type='text/javascript'>
//<![CDATA[
// Popular Post
var newidth=295;var neweight=180;$(".popular-posts .item-thumbnail img,ul.recent_posts_arlina img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,130)});
//]]>
</script>

4.Pastikan settingan Widget Popularpost seperti dibawah ini

5.Simpan Template, dan lihat hasilnya

Tentu sedikit banyak akan ada permasalahan dibalik semua tutorial yang saya berikan, dan jika ada pertanyaan seputar tutorial diatas silahkan isi kolom komentar yang sudah saya sediakan dibawah…

Demikian dan dan semoga bermanfaat..

Cara Membuat Breadcrumb dengan Markup Microdata Schema.org Terbaru !

Pada umumnya situs situs atau blog masih banyak yang menggunakan breadcrumb dengan markup data-vocabulary.org. Ketika markup microdata schema.org merupakan markup untuk breadcrumb terbaru yang direkomendasikan oleh google, ada baiknya kitapun mengikuti apa yang direkomendasikan oleh Google .

Google Search menggunakan markup breadcrumb dari sebuah halaman web untuk mengkategorikan informasi dari halaman dalam hasil pencarian. Dengan begitu, pengguna dapat tiba di suatu halaman dan pengguna dapat kembali ke halaman web yang sama dengan kategori yang sama dengan halaman sebelumnya.

Kali ini saya akan membagikan cara membuat breadcrumb untuk Blogger dengan menggunakan markup microdata schema.org dengan menambahkan ikon SVG sebagai separator pada tiap tiap labelnya.

Untuk mengganti atau membuat Membuat Breadcrumb dengan Microdata Schema.org, silahkan ikuti langkahnya berikut ini :

1. Cari kode ]]></b:skin> Jika sebelumnya sudah ada kode CSS yang mirip seperti itu, silahkan ganti dengan kode CSS style dibawah ini :

 /* Breadcrumb */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#666;font-weight:400}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666} 

2. Silahkan cari kode seperti dibawah ini

 <b:includable id='breadcrumb' var='posts'>
.......................
.......................
.......................
</b:includable> 

Jika sudah ketemu, silahkan ganti dengan kode di dibawah ini :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog#pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post#labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema#org/BreadcrumbList'>
<a expr:href='data:blog#homepageUrl' title='Home'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg> <span>Home</span></a>
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label#na#e' itemprop='item' itemscope='itemscope' itemtype='https://schema#org/Thing'>
<span itemprop='name'><data:label.name/></span></a>
<meta expr:content='data:num+1' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
</b:if></b:loop>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable> 

3. Terakhir, simpan template...

Selamat mencoba dan semoga bermanfaat.

Cara Membuat Kotak Kode Script untuk Posting Blog

Tutorial kali ini cocok bagi Sobat Blogger yang suka berbagi kode semacam HTML,CSS,Javascript,jQuery pada posting Blognya. Sebenernya cara yang akan saya berikan ini tidak jauh beda dengan pembuatan Synthax Hightlighter yang sudah umum kita temukan tutorialnya.

Namun kali ini saya membuat kotak kode yang lebih sederhana ( simple precode disertai seleksi ) dan memiliki fungsi yang sama dan tampilan yang tidak kalah menariknya di banding Synthax Hightlighter .

Pada konsepnya simple precode ini sama fungsinya dengan Synthax Hightlighter. Langsung aja kepada tahan dan proses pembuatan simple precode dengan seleksi. Sobat bisa melihat DEMO dibawah ini

Demo
Click here

Cara Membuat Simple precode dengan seleksi

1. Buka Blogger > Template > Klik Edit HTML > Simpan kode CSS di bawah ini sebelum ]]></b:skin>  atau </style>

/* CSS Simple Pre Code */
pre {background: #fff;white-space: pre;word-wrap: break-word;overflow: auto;}
pre.code {margin: 20px 25px;border: 1px solid #d9d9d9;border-radius: 2px;position: relative;box-shadow: 0 1px 1px rgba(0,0,0,.08);}
pre.code label {font-family: sans-serif;font-weight: normal;font-size: 13px;color: #444;position: absolute;left: 1px;top: 16px;text-align: center;width: 60px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;pointer-events: none;}
pre.code code {font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;display: block;margin: 0 0 0 60px;padding: 15px 16px 14px;border-left: 1px solid #d9d9d9;overflow-x: auto;font-size: 13px;line-height: 19px;color: #444;}
pre::after {content: "double click to selection";padding: 0;width: auto;height: auto;position: absolute;right: 18px;top: 14px;font-size: 12px;color: #aaa;line-height: 20px;overflow: hidden;-webkit-backface-visibility: hidden;transition: all 0.3s ease;}
pre:hover::after {opacity: 0;visibility: visible;}
pre.code-css code {color: #0288d1;}
pre.code-html code {color: #558b2f;}
pre.code-javascript code {color: #f57c00;}
pre.code-jquery code {color: #78909c;}

2. Berikutnya simpan script di bawah ini sebelum tag penutup </body>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

Script di atas berfungsi untuk menyeleksi otomatis setiap pengunjung blog Anda  melakukan klik dua kali pada area yang dibungkus tag pre, kbd, dan blockquote.

3. Setelah itu simpan template.

Cara penerapan pada postingan Blog

Silakan tambahkan kode di bawah ini pada tab HTML post

<pre class='code code-html'><label>HTML</label><code>... kode HTML (yang telah diparse) di sini ...</code></pre>
<pre class='code code-css'><label>CSS</label><code>... kode CSS di sini ...</code></pre>
<pre class='code code-javascript'><label>JS</label><code>... kode JavaScript di sini ...</code></pre>
<pre class='code code-jquery'><label>Jquery</label><code>... kode jQuery di sini ...</code></pre>

Demikian Tutorial Cara penerapan Simple Pre Code dengan Seleksi pada Posting Blog.

Dan apabila Sobat mendapati kendala silahkan tulis kendala/problem pada kotak komentar dibawah….

Semoga bermanfaat.