Oke baiklah, Pada artikel kali ini saya akan menjelaskan kepada sobat tentang Tutorial 2015 Cara Membuat Slide Box Rekomendasi Artikel di Blogger, Kita jalan-jalan dulu Hehehe :) Becanda,
Oke kita langsung ke TKP.
Oke kita langsung ke TKP.
1. Buka akun blogger.
2. Pilih menu template > Edit HTML
3. Lalu letakan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>
#kislidingbox{background:#fff;border-top:1px solid #bbb;width:320px;height:200px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;} .kislidingbox-title{background:none;color:#00789d;display:block;height:35px;width:100%;font-size:12px;font-family:Aerial, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px} .kislidingbox-title span a{float:right;height:35px;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:-35px;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 {}
4. Selanjutnya letakan kode dibawah ini tepata di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/> <script type='text/javascript'> $(window).scroll(function(){ if ($(this).scrollTop() > 400) { $('#kislidingbox').css({'right':'0px'}); } else { $('#kislidingbox').css({'right':'-360px'}); } }); $(document).ready(function(){ var kislidingbox = $('#kislidingbox'); var closed = $('#kislidingbox-close'); var minimize = $('#kislidingbox-minimize'); var maximize = $('#kislidingbox-maximize'); maximize.hide(); closed.click(function(){ kislidingbox.css({'right':'-350px'}); kislidingbox.fadeOut('slow'); }) minimize.click(function(){ kislidingbox.toggleClass('hide'); $(this).hide(); maximize.show(); }) maximize.click(function(){ kislidingbox.toggleClass('hide'); $(this).hide(); minimize.show(); }) }); </script>
5. Jika sudah sekarang letakan kode dibawah ini di bawah kode <div class='post-footer'> dan letakan pada kode yang nomor dua.
<!-- Related Post with Sliding --> <b:if cond='data:blog.pageType == "item"'> <div class='show' id='kislidingbox'> <div class='kislidingbox-title kislidingbox-www'> <span style='float: left;margin:14px 0 0 15px;'>Baca Juga Artikel Ini</span> <span><a href='javascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-993nITa05Qyu8Ok57q5Eq8_3Sh5D4NJuvH4fcfu2QBHj0CuGgN-xCHJ5pZ6Di5a2HfdvBV5dUpMa5YSbdyAdIyAQabPN_rOOVBlHqMaxiBfZP9ie9cHO5qwxxAMnn4eSttVdCQfy/s1600/close.png' title='close'/></a></span> <span><a href='javascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcXKagN9VpTAO8W9TpRYXRBBMRTX2Z8sbkoVGMVP_InF9dHb7u50xJo_T6zPGsD2B0FoFZD02LOyEBspWGi3bmLyB3RdiqDdIWG-8YjNA0VTuDaAakOD6S8R7E1nlWbs5A_mO5Q0LW/s1600/minimize.png' title='minimize'/></a></span> <span><a href='javascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0mBvuL61gG0c9ymBp2eWMauzyXOyZdYykHUlO89CieaOSabjfQ9grATXXHMcQ4F097M0CtamQSkEXQ2VRNfD5cE5ClDE90E7Ty7Q00ELdPzsLcxXce3ypybEV4Q5YtUaJQMjZx6Qu/s1600/maximize.png' title='maximize'/></a></span> </div> <div class='kislidingbox-container'> <b:if cond='data:blog.pageType == "item"'> <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'> "<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: "<data:blog.homepageUrl/>", widgetTitle: "<h4></h4>", numPosts: 2, summaryLength: 35, titleLength: "auto", thumbnailSize: 45, noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", containerId: "sliding-tab", newTabLink: false, moreText: "", 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 -->
6. Save template, Dan Lihat Hasilnya
#kislidingbox{background:#fff;border-top:1px solid #bbb;width:320px;height:200px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;} .kislidingbox-title{background:none;color:#00789d;display:block;height:35px;width:100%;font-size:12px;font-family:Aerial, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px} .kislidingbox-title span a{float:right;height:35px;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:-35px;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 {}
4. Selanjutnya letakan kode dibawah ini tepata di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/> <script type='text/javascript'> $(window).scroll(function(){ if ($(this).scrollTop() > 400) { $('#kislidingbox').css({'right':'0px'}); } else { $('#kislidingbox').css({'right':'-360px'}); } }); $(document).ready(function(){ var kislidingbox = $('#kislidingbox'); var closed = $('#kislidingbox-close'); var minimize = $('#kislidingbox-minimize'); var maximize = $('#kislidingbox-maximize'); maximize.hide(); closed.click(function(){ kislidingbox.css({'right':'-350px'}); kislidingbox.fadeOut('slow'); }) minimize.click(function(){ kislidingbox.toggleClass('hide'); $(this).hide(); maximize.show(); }) maximize.click(function(){ kislidingbox.toggleClass('hide'); $(this).hide(); minimize.show(); }) }); </script>
5. Jika sudah sekarang letakan kode dibawah ini di bawah kode <div class='post-footer'> dan letakan pada kode yang nomor dua.
<!-- Related Post with Sliding --> <b:if cond='data:blog.pageType == "item"'> <div class='show' id='kislidingbox'> <div class='kislidingbox-title kislidingbox-www'> <span style='float: left;margin:14px 0 0 15px;'>Baca Juga Artikel Ini</span> <span><a href='javascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-993nITa05Qyu8Ok57q5Eq8_3Sh5D4NJuvH4fcfu2QBHj0CuGgN-xCHJ5pZ6Di5a2HfdvBV5dUpMa5YSbdyAdIyAQabPN_rOOVBlHqMaxiBfZP9ie9cHO5qwxxAMnn4eSttVdCQfy/s1600/close.png' title='close'/></a></span> <span><a href='javascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcXKagN9VpTAO8W9TpRYXRBBMRTX2Z8sbkoVGMVP_InF9dHb7u50xJo_T6zPGsD2B0FoFZD02LOyEBspWGi3bmLyB3RdiqDdIWG-8YjNA0VTuDaAakOD6S8R7E1nlWbs5A_mO5Q0LW/s1600/minimize.png' title='minimize'/></a></span> <span><a href='javascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0mBvuL61gG0c9ymBp2eWMauzyXOyZdYykHUlO89CieaOSabjfQ9grATXXHMcQ4F097M0CtamQSkEXQ2VRNfD5cE5ClDE90E7Ty7Q00ELdPzsLcxXce3ypybEV4Q5YtUaJQMjZx6Qu/s1600/maximize.png' title='maximize'/></a></span> </div> <div class='kislidingbox-container'> <b:if cond='data:blog.pageType == "item"'> <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'> "<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: "<data:blog.homepageUrl/>", widgetTitle: "<h4></h4>", numPosts: 2, summaryLength: 35, titleLength: "auto", thumbnailSize: 45, noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", containerId: "sliding-tab", newTabLink: false, moreText: "", 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 -->
6. Save template, Dan Lihat Hasilnya
Jangan lupa Klik atau Baca 8 gambar yang ada dibawah artikel ini,
Saya rasa cukup penjelasan tentang Tutorial 2015 Cara Membuat Slide Box Rekomendasi Artikel di Blogger,
Semoga artikel saya kali ini bermanfaat untuk kita sesama, dan selamat mencoba.