Wednesday, 5 October 2016

Recent Post dengan Tanggal dan Komentar

VIEW DETAILS
Kali ini Arlina Design akan berbagi tutorial tentang Cara Memasang Widget Recent Post dengan Tanggal dan Komentar di Blog. Widget recent post ini adalah sebuah widget yang berfungsi untuk menampilkan daftar dari postingan terbaru di blog sobat dengan thumbnail dan tambahan keterangan tanggal dan jumlah komentar.

Cara Memasang Widget Recent Post dengan Tanggal dan Komentar

Bagi yang ingin mencobanya, silakan ikuti langkah sederhana berikut ini :

Cara Memasang Widget Recent Post dengan Tanggal dan Komentar
1. Login ke Blogger > Klik Tata Letak > Buat Widget baru kemudian tambahkan semua kode di bawah ini didalamnya

 <style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>

2. Simpan widget dan lihat hasilnya.


 rcp_numposts=5; = Ganti angkan 5 dengan jumlah postingan yang akan ditampilkan.
var rcp_snippet_length=150; = Jumlah karakter isi artikel yang akan ditampilkan saat hover link judul postingan.
rcp_info='yes'; = Ketik no untuk menyembunyikan keterangan tanggal dan jumlah komentar.
rcp_comment='Comments'; = Nama judul tulisan dari jumlah komentar.

Sesuaikan kembali tampilan widget sesuai dengan tema blog yang sobat gunakan.


Demikian tutorial Cara Memasang Widget Recent Post dengan Tanggal dan Komentar. Semoga bermanfaat.

Daftar Isi Sederhana Berdasarkan Label

VIEW DETAILS
Cara Memasang Daftar Isi Sederhana Berdasarkan Label - Kali ini Saya akan berbagi bagaimana cara memasang daftar isi yang ringan dan sederhana berdasarkan label di blog. Walaupun daftar isi ini terlihat sederhana, namun pengunjung akan tetap menyukainya karena memang widget ini cukup ringan alias tanpa ada acara loading lama.

Cara Memasag Daftar Isi Sederhana Berdasarkan Label

Widget ini befungsi menampilkan daftar postingan di blog sobat yang di sortir berdasarkan label yang ada di blog.

Berikut demo dari widget daftar isi ini :


Bagaimana? Apakah setelah melihat demo di atas sobat langsung ingin memasang daftar isi yang akan Saya bagikan ini? Jika iya, silakan ikuti langkah berikut ini :

1. Masuk ke Blogger > Pilih Menu laman > Kemudian buat postingan di laman baru > Di situ ada pilihan tab Compose dan HTML (di sudut kiri atas) > Kemudian Silakan pilih tab HTML dan tambahkan kode di bawah ini didalamnya :

 <div style="background-color:none; max-height:1200px; margin:auto;overflow:auto;padding:3px;text-align:left;width:100%;">
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftsimple.js"></script><script src="/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

2. Publikasikan post dan selesai.


Tidak terlalu sulit bukan? Demikian tutorial tentang Cara Memasang Daftar Isi Sederhana Berdasarkan Label di blog. Semoga bermanfaat.

Mengganti Fungsi Widget Label Menjadi Dropdown

VIEW DETAILS
Mengganti Fungsi Widget Label Menjadi Dropdown - Pada postingan ke tiga hari ini Arlina Design akan berbagi tutorial tentang bagaimana cara Mengganti Fungsi Widget Label Menjadi Dropdown. Seperti yang kita tahu pada setingan Widget label Blogger terdapat dua fungsi dan tampilan, yaitu tampilan widget daftar label dan cloud label.

Mengganti Fungsi Widget Label Menjadi Dropdown

Namun di sini Saya akan memberikan pilihan lain dari widget label yang bisa dibuat dropdown, tampilannya pun sama persis dengan tampilan dropdown yang ada di dalam widget arsip.

Tujuan dari mengganti tampilan widget label ini adalah untuk menghemat tempat di halaman blog jika di blog sobat sudah terdapat banyak label yang membuat blog terlihat sempit karena bukan hanya widget label saja yang ada di blog. Selain itu blog sobat akan terlihat lebih rapi dan profesional.

Bagi yang ingin mecobanya, silakan ikuti tutorial berikut ini :

Mengganti Fungsi Widget Label Menjadi Dropdown


1. Buka Blogger > Template > Kemudian cari kode ini

 <ul>
  <b:loop values='data:labels' var='label'>
    <li>
      <b:if cond='data:blog.url == data:label.url'>
        <data:label.name/>
        <b:else/>
        <a expr:href='data:label.url'>
          <data:label.name/>
        </a>
      </b:if>
      (
      <data:label.count/>)
    </li>
  </b:loop>
</ul>

Ganti semua kode di atas dengan kode ini

<div class="dropmedown">
<select  class="dropdown-select" onchange='location=this.options[this.selectedIndex].value;'>
  <option> Search Category </option>
  <b:loop values='data:labels' var='label'>
    <option expr:value='data:label.url'>
      <data:label.name/> (
      <data:label.count/>)
    </option>
  </b:loop>
</select>
</div>

Ganti tulisan yang ditandai dengan tulisan sobat.

2. Selanjutnya, tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>

 /* Dropdown Label By: www.24templates.blogspot.com */
.dropmedown select{outline:none;cursor:pointer}
.dropmedown{display:inline-block;position:relative;overflow:hidden;width:100%;background:#fff;border:1px solid transparent;border-radius:3px;height:36px;line-height:36px;color:#444}
.dropmedown:before,.dropmedown:after{content:'';position:absolute;z-index:2;top:13px;right:12px;width:0;height:0;line-height:36px;border:4px dashed;border-color:#888 transparent;pointer-events:none}
.dropmedown:before{border-bottom-style:solid;border-top:none}
.dropmedown:after{margin-top:8px;border-top-style:solid;border-bottom:none}
.dropdown-select{position:relative;width:100%;margin:0;padding:6px 8px 6px 10px;height:36px;line-height:18px;font-size:12px;color:#62717a;text-shadow:0 1px #fff;background:#f2f2f2;background:rgba(0,0,0,0)!important;border:0;border-radius:0;-webkit-appearance:none}
.dropdown-select>option{margin:3px;padding:6px 8px;text-shadow:none;background:#f8f8f8;outline:none;border:0;border-radius:3px;cursor:pointer}

3. Simpan template dan lihat hasilnya.

See the Pen Mengganti Fungsi Widget Label Menjadi Dropdown by Arlina Design (@arlinadesign) on CodePen.



Demikian tutorial Mengganti Fungsi Widget Label Menjadi Dropdown, semoga bermanfaat.

Tuesday, 4 October 2016

Cara Memasang Iklan Teks Mirip Google AdSense

VIEW DETAILS
Kali ini Arlina Design akan berbagi sebuah tutorial Cara Memasang Widget Iklan Teks Mirip Google AdSense. Widget ini dibuat khusus mirip dengan widget iklan Google Adsense-nya Google. Cara kerjanya sama yaitu ketika salah satu link iklan di hover, maka muncul isi atau deskripsi dari iklan dengan efek yang halus. Efek yang ditambahkan juga cukup nyaman dilihat dan cukup ringan untuk dipasang di blog sobat.

Cara Memasang Widget Iklan Teks Mirip Google AdSense

Bagi yang ingin mencobanya, silakan ikuti tutorial berikut :

Widget ini menggunakan font awesome, silakan tambahkan link CSS berikut di atas </head>

 <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika link di atas telah sobat pasang, silakan lewati langkah ini.

Cara Memasang Widget Iklan Teks Mirip Google AdSense


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

 /* Iklan Teks GA By: www.24templates.blogspot.com */
.iklan-teks{position:relative;margin:0;padding:10px;max-height:300px;overflow:hidden}
.iklan-teks div{position:relative;background:#FFF;height:120px;padding:8px 0;margin:0;z-index:1;color:#555}
.iklan-teks h2.iklan-header{position:relative;background:#FFF;font-size:18px;color:#0f7dc8;border-top:1px solid #d8d8d8;border-radius:0;padding:8px 0;margin:0;text-transform:none;cursor:pointer}
.iklan-teks h2.iklan-header:first-child{border-top:0}
.iklan-teks h2.iklan-header:before{content:"";width:0;height:0;position:absolute;top:20px;right:15px;border:5px solid transparent;border-color:#b2b2b2 transparent transparent;cursor:pointer}
.isi-iklan span.judul-iklan{font-size:18px;color:#0f7dc8;display:inline-block;cursor:pointer}
.isi-iklan span.url-iklan{font-size:12px;color:#0f7dc8;display:block;margin:8px 0;cursor:pointer}
.isi-iklan span.url-iklan:before{content:"\f0c0";font-family:FontAwesome;margin:0 10px 0 0}
.isi-iklan span.panah-besar{color:#fff;background:#e74c3c;border-radius:50%;height:34px;float:right;width:34px;text-align:center;line-height:34px;cursor:pointer;transition:all .6s}
.isi-iklan span.panah-besar:before{content:"\f054";font-family:FontAwesome;margin:0 0 0 3px;font-size:20px}
.isi-iklan span.panah-besar:hover{background:#34495e;color:#fff}
.isi-iklan p.isi{padding:0;margin:0 40px 0 0;color:#555;font-size:12px;text-align:left}

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

 <script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.hoverTimeout=function(c,e,b,d){return this.each(function(){var f=null,g=a(this);g.hover(function(){clearTimeout(f);f=setTimeout(function(){e.call(g)},c)},function(){clearTimeout(f);f=setTimeout(function(){d.call(g)},b)})})}})(jQuery);(function(b){b.fn.iklanaccordion=function(a){a=jQuery.extend({active:1,hovertimeout:300,sUpSpeed:500,sDownSpeed:500,sUpEasing:null,sDownEasing:null},a);return this.each(function(){var g=b(this),h=g.children("div[data-header]"),f=a.active-1;h.each(function(){b(this).hide().before('<h2 class="iklan-header">'+b(this).data("header")+"</h2>")});g.children("div:eq("+f+")").show().prev().css("margin-top","-47px").addClass("active");g.find(".iklan-header").hoverTimeout(a.hovertimeout,function(){g.children("h2").removeClass("active").animate({marginTop:0});h.slideUp(a.sUpSpeed,a.sUpEasing).animate({marginTop:-47});b(this).addClass("active").next().slideDown(a.sDownSpeed,a.sDownEasing)})})}})(jQuery);$(function(){$(".iklan-teks-sidebar").iklanaccordion();$(".iklan-teks-post-footer").iklanaccordion()});$(".info-icon").hover(function(){$(".info-iklan").animate({right:0},500,"easeInOutExpo")},function(){$(".info-iklan").animate({right:-103},500,"easeInOutExpo")});
//]]>
</script>

Setelah ditambahkan, simpan template.

3. Selanjutnya buka tata letak > Buat widget baru > Kemudian tambahkan kode di bawah ini didalamnya

 <div class='iklan-teks iklan-teks-sidebar' id='iklan-teks'>
    <!-- iklan ke 1 -->
    <div data-header="Pasang Iklan Disini">
      <span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
      <span class='url-iklan' onclick="window.open('/');">url web kalian</span>
      <span class='panah-besar' onclick="window.open('/');"></span>
      <p class='isi'>Pasang Iklan Anda Disini</p>
      </span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header="Pasang Iklan Disini">
      <span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
      <span class='url-iklan' onclick="window.open('/');">url web kalian</span>
      <span class='panah-besar' onclick="window.open('/');"></span>
      <p class='isi'>Pasang Iklan Anda Disini</p>
      </span>
    </div>
    <!-- iklan ke 3 -->
    <div data-header="Pasang Iklan Disini">
      <span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
      <span class='url-iklan' onclick="window.open('/');">url web kalian</span>
      <span class='panah-besar' onclick="window.open('/');"></span>
      <p class='isi'>Pasang Iklan Anda Disini</p>
      </span>
    </div>
    <!-- iklan ke 4 -->
    <div data-header="Pasang Iklan Disini">
      <span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
      <span class='url-iklan' onclick="window.open('/');">url web kalian</span>
      <span class='panah-besar' onclick="window.open('/');"></span>
      <p class='isi'>Pasang Iklan Anda Disini</p>
      </span>
    </div>
    <!-- iklan ke 5 -->
    <div data-header="Pasang Iklan Disini">
      <span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
      <span class='url-iklan' onclick="window.open('/');">url web kalian</span>
      <span class='panah-besar' onclick="window.open('/');"></span>
      <p class='isi'>Pasang Iklan Anda Disini</p>
      </span>
    </div>
  </div>

4. Simpan widget dan lihat hasilnya.



Jika sobat ingin mencoba versi yang lebih sederhana, tambahkan kode di bawah ini di dalam widget

<div id='arlina_ppc'>
  <a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="#" target="_blank" title="Iklan Teks Murah"><strong>Iklan Teks Murah</strong></a>
  <br />
  <span style="font-size:11px">Hanya Rp.60.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!</span>
  <br />
  <a style="font-size: 9px;color:#b0130d;" href="#" target="_blank" title="Iklan Teks Murah">http://www.24templates.blogspot.com</a>
  <br/>
  <br/>
  <a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="#" target="_blank" title="Iklan Teks Murah"><strong>Iklan Teks Murah</strong></a>
  <br />
  <span style="font-size:11px">Hanya Rp.60.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!</span>
  <br />
  <a style="font-size: 9px;color:#b0130d;" href="#" target="_blank" title="Iklan Teks Murah">http://www.24templates.blogspot.com</a>
  <br/>
  <br/>
  <a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="#" target="_blank" title="Iklan Teks Murah"><strong>Iklan Teks Murah</strong></a>
  <br />
  <span style="font-size:11px">Hanya Rp.60.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!</span>
  <br />
  <a style="font-size: 9px;color:#b0130d;" href="#" target="_blank" title="24 Templates">http://www.24templates.blogspot.com</a>
  <br/>
  <br/>
  <a style="text-decoration:none;padding:15;font-size:12px;float:right;color:#b0130d;" href="#" target="_blank" title="Pasang Iklan Murah di Arlina Design"><small>Ads by 24 Templates</small></a>
  <br />
</div>

See the Pen Iklan Teks Sederhana by Arlina Design (@arlinadesign) on CodePen.


Demikian tutorial Cara Memasang Widget Iklan Teks Mirip Google AdSense, semoga bermanfaat.

Cara Memasang Slide Box Rekomendasi di Blog

VIEW DETAILS
Tutorial selanjutnya, 24 Templates 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 Memasang Slide Box Rekomendasi di Blog

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 By: www.24templates.blogspot.com */
#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.


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

Cara Membuat Sticky Widget di Sidebar Blog

VIEW DETAILS
Pada artikel sebelumnya saya pernah berbagi tutorial tentang Memasang Fungsi Sticky Pada Widget Blogger, kali ini saya akan berbagi tutorial dengan fungsi yang sama yaitu untuk membuat widget tertentu menjadi sticky atau melayang mengikuti halaman saat digulirkan ke bawah dan atas. Tutorial ini merupakan perbaikan sekaligus menjawab komentar sobat dari tutorial sebelumnya yang ketika halaman digulir ke bawah sticky widget akan melewati Footer Wrapper dan itu akan sedikit mengganggu karena menghalangi widget yang dipasang di area Footer.

Kode yang akan saya bagikan ini lebih cocok dipasang pada semua konten di Sidebar atau bisa juga dipasang pada salah satu widget tertentu.Bagi sobat yang ingin mencobanya, silakan ikuti tutorial Cara Membuat Sticky Widget di Sidebar Blog.

Cara Membuat Sticky Widget di Sidebar Blog

Cara Membuat Sticky Widget di Sidebar Blog


1. Login ke Blogger > Buka Template editor > Tambahkan kode di bawah ini sebelum </body>

 <script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
    var el = $('#sticky-sidebar');
    var stickyTop = $('#sticky-sidebar').offset().top;
    var stickyHeight = $('#sticky-sidebar').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

Perhatikan kode yang ditandai, ganti kode tersebut dengan ID yang akan dibuat sticky sesuai template yang digunakan

#sticky-sidebar : ID dari konten atau widget yang akan dibuat sticky
#footer-wrapper : Tentukan ID untuk membatasi fungsi sticky

Selanjutnya tambahkan lebar pada konten atau widget yang dibuat sticky dengan CSS. Misalkan di sini saya memberikan 300px untuk lebar sticky, contoh :

 #sticky-sidebar{width:100%;max-width:300px}

Atau

 #HTML1{width:100%;max-width:300px}

Tentukan lebar sesuai dengan lebar sidebar dari template yang sobat gunakan dan juga jangan lupa untuk mengganti lebar pada media query tertentu, contoh :

 @media only screen and (max-width:768px){
#sticky-sidebar{width:100%;max-width:100%}
}

Untuk demo tampilan Sticky Widget, silakan klik tombol di bawah ini :

Demo untuk sticky pada semua konten sidebar


Demo untuk sticky pada widget tertentu


Cukup mudah bukan? Selamat mencoba dan salam sukses.