Cara Mudah Membuat Slide Out Rekomendasi Artikel Di Blog

Artikel TerkaitArtikel Rekomedasi


Posting artikel kali ini akan menjelaskan bagaimana cara membuat slide-out rekomendasi artikel di blog. Slide-out rekomendasi artikel ini sebenarnya mirip dengan menu artikel terkait atau related post yang biasanya diletakkan setelah artikel. Yang membedakan adalah, menu slide-out ini diletakkan pada sebuah slide pop-up yang akan muncul ketika pengunjung melakukan scrolling pada sebuah halaman artikel. Dengan slide-out ini, tentunya akan lebih eye-catching, sehingga bisa lebih menarik pengunjung blog untuk mengeklik link artike terkait yang muncul di slide-out.


Rekomendasi artikel dan related post memberikan banyak manfaat untuk blog kita :
  1. Dengan adanya rekomendasi artikel dan related post di blog, akan membuat pengunjung blog kita betah berlama - lama berkunjung. Mereka tidak akan hanya membaca artikel yang mereka termukan di SERP, tapi akan menelusuri beberapa artikel yang relevan yang muncul di rekomendasi artikel atau related post.
  2. Dengan adanya rekomendasi artikel dan related post di blog, akan mengarahkan pengunjung blog untuk membaca posting artikel lama sehingga bisa membantu rating klik posting artikel lama.
  3. Dengan adanya rekomendasi artikel dan related post di blog, bisa membantu mengurangi bounce rate sebuah blog
Bouncing Rate adalah  sebuah istilah dalam Internet Marketing yang digunakan dalam analisis lalu lintas web.  Bounce Rate menggambarkan persentase pengunjung yang memasuki situs dan kemudian pergi ( "bounce" atau "terpental") daripada terus melihat halaman lain dalam situs yang sama. Bounce Rate dihitung dengan menghitung jumlah kunjungan satu halaman dan membaginya dengan total kunjungan.  Bounce Rate direpresentasikan sebagai persentase dari total kunjungan.
(wikipedia.com)
Persentase kunjungan ke situs yang terdiri dari satu tampilan halaman
- alexa.com -
Slide-out artikel rekomendasi biasanya muncul di sebelah kanan bawah layar. Untuk membuat slide-out rekomendadi artikel ini sangat mudah. Kita hanya perlu melakukan bebeapa langkah mudah yang akan dijelaskan di bawah ini. Beberapa istilah yang bisanya dipakai untuk slide rekomendasi artikel ini adalah:

  1. Rekomendasi Artikel
  2. Up Next
  3. Baca Juga Artikel Ini
  4. Recommended For You
  5. Recommended Post
  6. Rekomendasi Untuk Anda
Dan sebagainya sesuai dengan kreasi kamu.
Artikel TerkaitArtikel Rekomedasi

Berikut beberapa langkah mebuat slide-out rekomendasi artikel:

  1. Log in ke Dashboard Blogger
  2. Klik menu Template
  3. Klik Edit HTML
  4. Letakkan kode di bawah ini di atas  ]]></b:skin>. Width merupakan ukuran panjang slide-out dan height merupakan tinggi slide-out. Silakan ganti ukuran sesuai kebutuhan blog kamu.
  5. /* Recommended Post with Slide-Out CSS */ #slidebox{background:#fff;border-top:1px solid #bbb;box-shadow: 0 4px 10px #666;transition:all 0.4s ease-out;width:335px;height:200px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;} .slidebox-title{background:#262626;border-top:1px solid #ddd;color:#00789d;display:block;height:40px;width:100%;font-size:14px;font-family:Castellar, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px} .slidebox-title span a{float:right;height:40px;width:25px;} a#slidebox-close, a#slidebox-close {margin-right:15px;} .slidebox-title > span > h2{font-size:20px!important;font-weight:normal!important;} .slidebox-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;} .slidebox-container{border:none;float:left;width:100%;height:auto;margin:3px} .slidebox-container > div{border:none;height:40px;margin:3px;padding:10px;} .slidebox-container > div > span {font-size:14px;} .slidebox-container img{float:left;margin:3px 5px;width:25px;border:1px solid #ccc;} .show{bottom:200px;} .hide{bottom:-145px;} .related-post {margin:2em auto 0;font:normal normal 11px/1.4 Arial,Sans-Serif;} .related-post h4 {font-size:150%;margin:0 0 .5em;} .related-post-style-2 {border-top:1px solid rgba(0,0,0, 0.2);margin-top:-20px;padding-top:15px;list-style:none;} .related-post-style-2 li {margin-left:-10px;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;background-color:transparent;border:none;padding:0;float:left;margin:2px 10px 0 0;border:1px solid #ccc;} .related-post-style-2 .related-post-item-title {font-weight:bold;font-size:120%;text-transform:capitalize;} a.related-post-item-title {color :#333 !important;} a:hover.related-post-item-title {color :#0491ea !important;text-decoration:none;} .related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;} .related-post-style-2 .related-post-item-more {} /* End CSS Recommended Post with Slide-Out */
  6. Selanjutnya letakkan kode di bawah ini di bawah ini di atas kode </head>
  7. <script type='text/javascript'> $(window).scroll(function(){         if ($(this).scrollTop() &gt; 400) {             $(&#39;#slidebox&#39;).css({&#39;right&#39;:&#39;0px&#39;});         } else {             $(&#39;#slidebox&#39;).css({&#39;right&#39;:&#39;-360px&#39;});         }     }); $(document).ready(function(){  var slidebox      = $(&#39;#slidebox&#39;);     var closed      = $(&#39;#slidebox-close&#39;);     var minimize    = $(&#39;#slidebox-minimize&#39;);     var maximize    = $(&#39;#slidebox-maximize&#39;);     maximize.hide();     closed.click(function(){         slidebox.css({&#39;right&#39;:&#39;-350px&#39;});         slidebox.fadeOut(&#39;slow&#39;);     })     minimize.click(function(){         slidebox.toggleClass(&#39;hide&#39;);         $(this).hide();         maximize.show();     })     maximize.click(function(){         slidebox.toggleClass(&#39;hide&#39;);         $(this).hide();         minimize.show();     }) }); </script>
  8. Yang terakhir, letakkan kode di bawah ini di bawah kode <data:post.body/>  atau di bawah <div class='post-footer'>. Tulisan Artikel Rekomendasi silakan diganti sesuai dengan selera kamu, sedangkan kode numPost: 2 merupaka jumlah posting yang muncul di slide-out rekomendasi artikel, silakan diganti sesuai kebutuhan kamu. Sedangkan thumnailSize mrupakan ukuran gambar thumnail yang terletak di sebelah kanan judul artikel di silde out. 

  9. <!-- Recomended Post with Slide-Out -->  <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='show' id='slidebox>     <div class='slidebox-title slidebox-www'>       <span style='float: left;margin:14px 0 0 15px;'>Artikel Rekomendasi</span>         <span><a href='javascript:void(0);' id='slidebox-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXKODo2dbY8J4ePAqFRPhTMu-vd4cRa2yup8xPS0oQQtlKsq_umiBYdwHWRqP7ZnFjjfV01xUKAfU-u9Uh5cr5L19TEoIdCWsnnfsZwkgnpaGq_j6fwM0NaapW48ZOhgx-PWDfozKl/s1600/close.png' title='close'/></a></span>         <span><a href='javascript:void(0);' id='slidebox-minimize' title='minimize'><img alt='minimize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOANL8uovv9LI5HX58XbrFzBfkpLTNiv2Cdri2uYRfdTZ_qkw1YUpOXvrFF-asONQ4Q5XJCRGvNgMRUECX5KPuLvkXIdz4H_avBc7WfttV-EttYb0U8nAQqoXZ8exZ8XbR-EEHo3VP/s1600/minimize.png' title='minimize'/></a></span>         <span><a href='javascript:void(0);' id='slidebox-maximize' title='maximize'><img alt='maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJThwETYbff4bN6Y0Wu0gIe3IdzXw_PpXRri2ZmDAQWW36HOxIds7JtHnwMOx4RqKzKFbaEKIDS3ED_NsVDLo-TS02kCF1v5-uyuWBcTt8Sh4ptbw_J5KOXUJ-ajkgge42_6d445DL/s1600/maximize.png' title='maximize'/></a></span>     </div>     <div class='slidebox-container'> <b:if cond='data:blog.pageType == &quot;item&quot;'>   <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: false,       moreText: &quot;&quot;,       widgetStyle: 2,       callBack: function() {}   };   </script><script src='<script src="//cdn.rawgit.com/salmanarshad2000/blogger-related-posts-widget/v1.0.4/related-posts.min.js" defer></script>' type='text/javascript'/> </b:if>             </div> </div> </b:if> <!-- Recomended Post Widget End -->
  10. Klik Save Template

Nah demikian cara membuat slide-out rekomendaasi artikel untuk blog kamu. Semoga artikel ini bisa menjadi tips yang memberikan inpsirasi bagi kamu untuk melengkapi blog kamu.
Baca Juga:

0/Post a Comment/Comments

Previous Post Next Post