percobaan

Tutorial selanjutnya, Arlina Design akan berbagi tutorial Cara Memasang Slide Box Rekomendasi di Blog.

Memasang widget slide box rekomendasi berdasarkan label yang akan muncul di sebelah kanan blog memang sangat mudah dan cocok untuk blog yang bertemakan berita atau bisa juga dipasang di blog pribadi. Selain itu dengan memasang widget ini akan memberikan pilihan kepada pengunjung untuk membuka artikel lain yang menurutnya menarik dan bermanfaat.

Cara kerja dari widget ini hampir sama dengan widget related post yang biasa terpasang di bawah artikel blog, yang akan memunculkan beberapa postingan terkait berdasarkan label.

Bagi sobat yang ingin memasang widget slide box rekomendasi ini, silakan simak tutorial Cara Memasang Slide Box Rekomendasi di Blog di bawah ini :

Cara Memasang Slide Box Rekomendasi di Blog

1. Login ke Blogger > Buka Template > Tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>

/* Widget Rekomendasi */
#chslidingbox{background:#fff;width:100%;max-width:355px;height:185px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:99;text-align:left;box-shadow:0 1px 0 0 rgba(0,0,0,0.03);transition:all .4s ease-out}
.chslidingbox-title{background:#9eb2c0;color:#fff;display:block;height:45px;line-height:45px;width:100%;font-size:14px;text-transform:capitalize;font-weight:700;letter-spacing:.5px}
.chslidingbox-title span a{font-family:initial;float:right;height:40px;margin:0 0 0 15px;text-align:center;color:#fff;font-size:20px}
a#chslidingbox-close,a#chslidingbox-close{margin-right:15px}
.chslidingbox-title >span >h2{font-size:20px!important;font-weight:normal!important}
.chslidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.chslidingbox-container >div{border:none;margin:3px 0;padding:10px 0}
.chslidingbox-container >div >span{font-size:14px}
.show{bottom:84px}
.hide{bottom:-145px}
.related-post{font-size:70%}
.related-post h4{font-size:150%;margin:0 0 .5em}
.related-post-style-2{margin-top:-20px;padding-top:15px;list-style:none}
.related-post-style-2 li{padding:0 10px 10px 10px;overflow:hidden}
.related-post-style-2 li:first-child{border-top:none}
.related-post-style-2 .related-post-item-thumbnail{width:45px;height:45px;max-width:none;max-height:none;border:0;padding:0;border-radius:3px;float:left;margin:2px 10px 0 0}
.related-post-style-2 .related-post-item-title{font-weight:700;font-size:130%;line-height:normal}
a.related-post-item-title{color:#95a5a6;transition:all .4s ease-out}
a:hover.related-post-item-title{color:#2ecc71;text-decoration:none}
.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}

2. Kemudian salin kode di bawah ini sebelum </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){$("#chslidingbox").css($(this).scrollTop()>400?{right:"0px"}:{right:"-360px"})}),$(document).ready(function(){var i=$("#chslidingbox"),s=$("#chslidingbox-close"),o=$("#chslidingbox-minimize"),l=$("#chslidingbox-maximize");l.hide(),s.click(function(){i.css({right:"-350px"}),i.fadeOut("slow")}),o.click(function(){i.toggleClass("hide"),$(this).hide(),l.show()}),l.click(function(){i.toggleClass("hide"),$(this).hide(),o.show()})});
//]]>
</script>
</b:if>

3. Selanjutnya cari kode <data:post.body/> dan tambahkan kode di bawah ini tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='chslidingbox'>
    <div class='chslidingbox-title chslidingbox-www'>
      <span style='float:left;margin:0 15px;'>Rekomendasi Untuk Anda</span>
        <span><a href='javascript:void(0);' id='chslidingbox-close' title='close'>&#x00D7;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-minimize' title='minimize'>&#x2212;</a></span>
        <span><a href='javascript:void(0);' id='chslidingbox-maximize' title='maximize'>&#x2b;</a></span>
    </div>
    <div class='chslidingbox-container'>
<div class='related-post' id='sliding-tab'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,numPosts: 2,summaryLength: 0,
titleLength: &quot;auto&quot;,thumbnailSize: 45,noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId: &quot;sliding-tab&quot;,newTabLink: true,moreText: &quot;&quot;,widgetStyle: 2,callBack: function() {}};
</script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/sliderekomendasi.js' type='text/javascript'/>         
</div>
</div>
</b:if>

Atau bisa juga ditambahkan di atas kode </b:includable> post seperti ini :

<b:includable id='post' var='post'>
...
...
...
<-- LETAKKAN KODE DI SINI -->
</b:includable>

numPosts: 2 : Jumlah pos yang akan ditampilan, jika menambahkan post sobat juga harus mengatur tinggi widget slide boxnya

4. Simpan template dan lihat hasilnya.

Result

Demikian tutorial Cara Memasang Slide Box Rekomendasi di Blog, semoga bermanfaat.

Tools ini mampu menyembunyikan berbagai jenis Javascript bahkan juga mampu menyembunyikan tulisan biasa seperti Link yang pastinya orang lain akan kesulitan untuk mengedit Javascript yang anda bagikan kepada mereka.

Petunjuk Penggunaan Encrypt

1. Copy dulu script yang ingin kamu Sembunyikan
2. Pastekan kedalam kotak pertama dengan cara CTRL+V
3. Lalu klik tombol Encrypt
4. Setelah itu klik tombol Select And Copy lalu tekan CTRL+C

Update..!!

Script ini telah diperbaharui.
Terimakasih saya ucapkan kepada pengunjung yang telah berpartisipasi dalam memantau kinerja blog. Sebelumnya saya sempat terkejut ketika mendapat protes dari salah satu pengunjung yang mengklaim alat ini tidak bekerja dengan semestinya.

Kemudian saya coba buka dan memang benar, script ini sudah tidak bisa digunakan lagi.

Namun, kini sudah saya perbaiki beberapa kesalahan yang tak terduga. Sekaligus dengan penambahan fitur. Yakni, Anda tidak perlu menambahkan kode script pembuka dan penutup karena script tersebut sudah otomatis menempel pada hasil akhir.

Contoh HTML untuk di Encrypt

1. <script src="http://nama-domain.com/script.js" type="text/javascript"></script>

2. <link href="http://nama-domain.com/style.css" type="text/css"/>

3. <div>KODE ANDA DISINI</div>

Review Overview

Harga

Spesifikasi

Performa

Fitur/Kelengkapan

Summary : Asus N550JX

User Rating: Be the first one !

Source : turiswangamers22gtr.blogspot.com

Authors : *2RI$1* TURISWAN

Ok sobat seocips.com pada kesempatan ini seocips akan membagikan trik bagaimana cara menampilkan navigasi next previous dengan judul posingan halaman selanjutnya dibawah postingan Blog Blogger Blogspot.

Kegunaan memasang navigasi ini adalah agar pengunjung blog dapat melihat postingan sebelum dan sesudah postingan yang sedang dibacanya, tentusaja untuk menambah daya tarik kepada pengunjung agar membaca artikel selanjutnya.

Postingan ini merupakan lanjutan artikel sebelumnya dimana juga telah dijelaskan bagaimana mengganti navigasi next dan previous denga judul, tapi karena di artikel sebelumnya hanya mengganti navigasinya bukan menambahkan jadi saya menulisnya kembali disini.

Ok sobat berikut adalah Cara Membuat Navigasi Next Prev Dibawah Postingan dan tentu saja dengan judul postingan dihalaman sebelum atau halaman selanjutnya.

Navigasi Next Prev Dengan Judul Dibawah Postingan

LIVE DEMO

Di demonya mungkin sedikit berbeda karena warna backgroundnya telah saya ganti, anda bisa mengganti warna backgroundnya sesuai dengan warna template yang anda gunakan.

Cara Membuat Navigasi Next Prev:

Buka Telmplate > Edit HTML.
Letakkan kode Css di bawah ini tepat di atas ]]></b:skin>.

.pagebutton-nextprevious {background:#FD4848;margin-bottom: 10px; overflow:hidden; padding:0;}
.pagebutton-nextprevious li.next { margin:0 -2px 0 0; float: left; border-right:1px solid #ddd; padding:0; background:#FD4848;color:#ffffff;}
.pagebutton-nextprevious li.next a { padding-left: 15px;text-align:left;padding-bottom:20px}
.pagebutton-nextprevious li.previous {float: right; padding:0; background:#FD4848F; margin:0;color:#ffffff}
.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:#188DFF;color:#ffffff }
.pagebutton-nextprevious li { width: 50%; display: inline; float: left; text-align: center; }
.pagebutton-nextprevious li a { position: relative; min-height: 55px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
.pagebutton-nextprevious li i { color: #ffffff; font-size: 18px; }
.pagebutton-nextprevious li a strong { display: block; font-size: 20px; color: #ffffff; 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: #ffffff; font-family:oswald,Helvetica, arial; margin:0;transition:all 400ms ease-in-out}
.pagebutton-nextprevious li a:hover span,
.pagebutton-nextprevious li a:hover i { color: #fff; }
.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:all 400ms ease-in-out}

selanjutnya letakan kode dibawah ini dibawah postingan, kalau di demo saya meletakannya diatas related post, atau atau lebih mudahnya lagi letakan saja kode dibawah ini diatas relatedpost dibawah postingan. Contohnya diatas kode <div id='related-posts'> .

<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='Newer Post'/>
<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='Older Post'/>
<b:else/>
<i class='buttonside-right'/><a rel='previous'><strong>Previous</strong> <span>This is the current oldest page</span></a>
</b:if>
</li>
<div style='margin-left:0px;text-align:center;font-size:5px'>
Widget by : <a class='creditlink2' href='http://www.seocips.com' id='creditlink2' target='blank'>seocips</a>
</div>
</ul>
<script src='https://sites.google.com/site/seocips/seocips-script/pagebuttonnextprevious.js' type='text/javascript'>
</script>
</b:if>

Simpan template dan lihat hasilnya.

Menyembunyikan Navigasi Next Prev Bawaan Blog

Setelah semuanya selesai, kemungkinan di blog kamu masih ada blog pager bawaan blogger template kamu. letaknya berada setelah komentar. Nah untuk selanjutnya anda dapat menyembunyikannya dan tidak memunculkannya di postingan dengan menambahkan tag kondisional untuk menyembunyikannya di postingan. Biasanya kodenya ada dibawah <b:includable id='nextprev'> kemudian tag kondisional yang saya maksudkan adalah:

<b:if cond='data:blog.pageType != "item"'>
dan penutupnya
</b:if>

Ok sobat sekian postingan untuk saat ini dan semoga artikel mengenai Cara Membuat Navigasi Next Prev dengan Judul halaman sebelum dan judul halaman selanjutnya Dibawah Postingan ini bermanfaat dan mudah dipahami. Terimakasih.