Membuat Slide Box Rekomendasi di Blogger

Kali ini Mimin Share Cara membuat Slide Box Rekomendasi di Blogger, Kotak ini berfungsi menampilkan postingan / artikel terkait dengan label post yang sedang dibuka. Langsung saja Simak Tutorialnya ya : D

Tutorial :

1. Login ke Blogger
2. Pilih Template
3. Pilih Edit as HTML

4. Letakkan Kode dibawah ini ke bagian atas kode   ]]></b:skin> Atau </style>.

/* Related Post with Sliding CSS by SW Blogger*/ #kislidingbox{background:#fff;border-top:1px solid #bbb;box-shadow: 0 4px 10px #666;transition:all 0.4s ease-out;width:355px;height:185px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;} .kislidingbox-title{background:none;border-top:1px solid #ddd;color:#00789d;display:block;height:40px;width:100%;font-size:14px;font-family:Arial, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px} .kislidingbox-title span a{float:right;height:40px;width:25px;} a#kislidingbox-close, a#kislidingbox-close {margin-right:15px;} .kislidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;} .kislidingbox-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;} .kislidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px} .kislidingbox-container > div{border:none;height:40px;margin:3px;padding:10px;} .kislidingbox-container > div > span {font-size:14px;} .kislidingbox-container img{float:left;margin:3px 5px;width:25px;border:1px solid #ccc;} .show{bottom:80px;} .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 CCSS Related Post with Sliding */

5. Letakkan kode dibawah ini ke Bagian atas Kode </head>

<script type='text/javascript'> $(window).scroll(function(){ if ($(this).scrollTop() &gt; 400) { $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;0px&#39;}); } else { $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;-360px&#39;}); } }); $(document).ready(function(){ var kislidingbox = $(&#39;#kislidingbox&#39;); var closed = $(&#39;#kislidingbox-close&#39;); var minimize = $(&#39;#kislidingbox-minimize&#39;); var maximize = $(&#39;#kislidingbox-maximize&#39;); maximize.hide(); closed.click(function(){ kislidingbox.css({&#39;right&#39;:&#39;-350px&#39;}); kislidingbox.fadeOut(&#39;slow&#39;); }) minimize.click(function(){ kislidingbox.toggleClass(&#39;hide&#39;); $(this).hide(); maximize.show(); }) maximize.click(function(){ kislidingbox.toggleClass(&#39;hide&#39;); $(this).hide(); minimize.show(); }) }); </script>

6. Letakkan Kode Dibawah ini ke bagian bawah Kode <div class='post-footer'> (kode di langkah ke 5 )

<!-- Related Post with Sliding by SW Blogger --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='show' id='kislidingbox'> <div class='kislidingbox-title kislidingbox-www'> <span style='float: left;margin:14px 0 0 15px;'>Rekomendasi Untuk Anda</span> <span><a href='javascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='http://2.bp.blogspot.com/-IuwrMRddJPA/Uj0EKnY22II/AAAAAAAAFhM/V6cKdl07Bxc/s1600/close.png' title='close'/></a></span> <span><a href='javascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='http://4.bp.blogspot.com/-QMHVEsX6RI0/Uj0EKiuxajI/AAAAAAAAFhQ/7bebcoyuHKw/s1600/minimize.png' title='minimize'/></a></span> <span><a href='javascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='http://1.bp.blogspot.com/-spQvK4i4SNk/Uj0EKjKvMpI/AAAAAAAAFhc/CBa6r6ArUHA/s1600/maximize.png' title='maximize'/></a></span> </div> <div class='kislidingbox-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='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/> </b:if> </div> </div> </b:if> <!-- Related Post Widget End -->

Sekian Tutorialnya Trims :D

Regards Admin

Credits :

Script : SW Blogger

Tweet