Cara Bikin Floating Widget

<div class="tr_bq" style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px; text-align: justify;">Elements that float along your screen are pretty cool and attention grabbing. They are more commonly known as the “Sticky” floating widgets that stick to your screen as you scroll and tend to have a higher click through rate. This is the reason why at MyBloggerLab, we are using a Floating subscription widget in the sidebar that has been quite useful for us. Many of our users kept on emailing us about how they can create a “Sticky” floating sidebar widget in Blogger. In the past, we have already shown you <a href="http://www.mybloggerlab.com/2012/09/how-to-create-floating-sticky-footer.html" style="color: #2f6986; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank">how to make a Sticky Floating Footer bar in Blogger</a>. In this article, we will show you how to create a floating “sticky” Sidebar widget in Blogger?</div><div style="text-align: justify;"><a href="http://www.blogger.com/blogger.g?blogID=1611325994739357484" name="more" style="background-color: white; color: #2f6986; font-family: lora; font-size: 14px; line-height: 25.1875px; list-style: none; margin: 0px; outline: none; padding: 0px;"></a><br style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px;" /></div><div style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px; text-align: justify;"><i>Remember:</i> This works pretty well with all kinds of widgets present in your sidebar. It is not necessary that a person can only use if for email subscription boxes. You can use it for promotion of your items, galleries, <a href="http://www.mybloggerlab.com/2012/10/customize-blogger-popular-post-widget.html" style="color: #2f6986; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">popular posts</a>, <a href="http://www.mybloggerlab.com/2013/05/ow-to-easily-embed-instagram-photos-in-blogger.html" style="color: #2f6986; list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">Instagram photos</a>, and basically everything that you wish for. </div><div style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px; text-align: justify;"><br /></div><div style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px; text-align: justify;"><h4 style="font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">Step#1: Adding a New Widget: </h4>The First thing you need to do is to add a new widget in your sidebar so that later on you can make it sticky. Go to <i>Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript >></i> and name the widget as “<i><b>My Sticky Gadget</b></i>”. Now writing anything in the HTML body and once everything is down press “<i><b>Save</b></i>” button located at the end of the page.</div><div style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px; text-align: justify;"><br /></div><div style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px; text-align: justify;"><h4 style="font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">Step#2: Installing a “Sticky” Plugin:</h4>Now after properly adding a new widget in your blog, it’s time for some serious work. This time go to <i><b>Template >> Edit HTML >></b></i> and search for the ending<b><i> </body> </i></b>tag and just above it paste the following JavaScript code.<br /><br /><blockquote class="tr_bq" style="-webkit-box-shadow: rgb(221, 221, 221) 4px 4px 4px; background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-width: 1px; color: black; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; line-height: 18px; margin: 0px 20px; overflow: hidden; padding: 10px 20px 10px 45px;"><script><br />/*<![CDATA[*/<br />// Sticky Plugin<br />// =============<br />// Author: Syed Faizan Ali<br />(function($) {<br />    var defaults = {<br />            topSpacing: 0,<br />            bottomSpacing: 0,<br />            className: 'is-sticky',<br />            center: false<br />        },<br />        $window = $(window),<br />        $document = $(document),<br />        sticked = [],<br />        windowHeight = $window.height(),<br />        scroller = function() {<br />            var scrollTop = $window.scrollTop(),<br />                documentHeight = $document.height(),<br />                dwh = documentHeight - windowHeight,<br />                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;<br />            for (var i = 0; i < sticked.length; i++) {<br />                var s = sticked[i],<br />                    elementTop = s.stickyWrapper.offset().top,<br />                    etse = elementTop - s.topSpacing - extra;<br />                if (scrollTop <= etse) {<br />                    if (s.currentTop !== null) {<br />                        s.stickyElement.css('position', '').css('top', '').removeClass(s.className);<br />                        s.currentTop = null;<br />                    }<br />                }<br />                else {<br />                    var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;<br />                    if (newTop < 0) {<br />                        newTop = newTop + s.topSpacing;<br />                    } else {<br />                        newTop = s.topSpacing;<br />                    }<br />                    if (s.currentTop != newTop) {<br />                        s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);<br />                        s.currentTop = newTop;<br />                    }<br />                }<br />            }<br />        },<br />        resizer = function() {<br />            windowHeight = $window.height();<br />        };<br />    // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):<br />    if (window.addEventListener) {<br />        window.addEventListener('scroll', scroller, false);<br />        window.addEventListener('resize', resizer, false);<br />    } else if (window.attachEvent) {<br />        window.attachEvent('onscroll', scroller);<br />        window.attachEvent('onresize', resizer);<br />    }<br />    $.fn.sticky = function(options) {<br />        var o = $.extend(defaults, options);<br />        return this.each(function() {<br />            var stickyElement = $(this);<br />            if (o.center)<br />                var centerElement = "margin-left:auto;margin-right:auto;";<br />            stickyId = stickyElement.attr('id');<br />            stickyElement<br />                .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')<br />                .css('width', stickyElement.width());<br />            var elementHeight = stickyElement.outerHeight(),<br />                stickyWrapper = stickyElement.parent();<br />            stickyWrapper<br />                .css('width', stickyElement.outerWidth())<br />                .css('height', elementHeight)<br />                .css('clear', stickyElement.css('clear'));<br />            sticked.push({<br />                topSpacing: o.topSpacing,<br />                bottomSpacing: o.bottomSpacing,<br />                stickyElement: stickyElement,<br />                currentTop: null,<br />                stickyWrapper: stickyWrapper,<br />                elementHeight: elementHeight,<br />                className: o.className<br />            });<br />        });<br />    };<br />})(jQuery);<br />/*]]>*/<br /></script><br /><script type='text/javascript'><br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span> $(document).ready(function(){<br />    $("#mblfloater").sticky({topSpacing:0});<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span> });<br /><span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span></script></blockquote><br /></div><div style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px; text-align: justify;"><h4 style="font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;">Step#3: Creating a Widget “Sticky” in Blogger:</h4>After adding the JavaScript code, you have to search for the name of your widget. Since, we have named it as "<b>My Sticky Gadget</b>". Therefore, in the template coding search for "<b>My Sticky Gadget</b>". To be able to search correctly it is essential that you must use the built-in search box provided by the Blogger template editor.<br /><i><b><br /></b></i><i><b>Note: </b>To enable the search box click anywhere in the template editor and press<b>"CTRL+F". </b></i>Now on finding "My Sticky Gadget" you will able to see a code similar to the the following one.<br /><br /><blockquote class="tr_bq" style="-webkit-box-shadow: rgb(221, 221, 221) 4px 4px 4px; ; background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-width: 1px; color: black; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; line-height: 18px; margin: 0px 20px; overflow: hidden; padding: 10px 20px 10px 45px;"><b:widget id='HTML32' locked='false' title='<b>My Sticky Gadget</b>' type='HTML'><br />            <b:includable id='main'><br />  <!-- only display title if it's non-empty --><br />  <b:if cond='data:title != &quot;&quot;'><br />    <h2 class='title'><data:title/></h2><br />  </b:if><br />  <div class='widget-content'><br />    <data:content/><br />  </div><br /></b:includable><br />          </b:widget></blockquote><br />Now after finding the code as mentioned above, just replace it completely with the following coding.<br /><br /><blockquote class="tr_bq" style="-webkit-box-shadow: rgb(221, 221, 221) 4px 4px 4px; background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-width: 1px; color: black; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; line-height: 18px; margin: 0px 20px; overflow: hidden; padding: 10px 20px 10px 45px;"><b:widget id='HTML32' locked='false' title='<b>My Sticky Gadget</b>' type='HTML'><br />            <b:includable id='main'><br /><div id='<span style="list-style: none; margin: 0px; outline: none; padding: 0px;">mblfloater</span>'><br />  <!-- only display title if it's non-empty --><br />  <b:if cond='data:title != &quot;&quot;'><br />    <h2 class='title'><data:title/></h2><br />  </b:if><br />  <div class='widget-content'><br />    <data:content/><br />  </div>  </div><br /></b:includable><br />          </b:widget></blockquote><br />Remember: The ID of your widget should be unique. For example, if you are using<i>id='HTML32' </i>in any of your widget then you cannot use the same ID for others.<br /><br />All done: Once everything is done, press the "Save Template" button to finish the process.<br /><br />Sticky floating sidebar widgets can bring a lot of growth in your sign ups. They help in increasing user engagement. You can also use multiple floating widgets in sidebar. However, this act might annoy your visitors. Make sure you have a balanced design, so that it don't annoy your users.<br /><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9MkGu392cGnNQAadLqYF9o519a6bANuDydc6B9sRTrWFfUjrEhqtY65PqH_VRfNs23cy6NmXnffOdu7fI1SV7fxzMheAPYhLQ_Y0vCkx7xVm-SUHdoyE9yuq6mZMJQqbTUEUddBbus44/s1600/How-to-Create-a-Floating-Sticky-Sidebar-Widget-in-Blogger.png" style="background-color: transparent; text-align: center;" /></div>

Cara Bikin Floating Widget

Elements that float along your screen are pretty cool and attention grabbing. They are more commonly known as the “Sticky” floating widgets ...

Baca selengkapnya »

Bikin Title Tag SEO Friendly

<div style="background-color: white; color: #444444; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 22px; margin-bottom: 15px; text-align: justify;"><br /><div style="margin-bottom: 15px; text-align: justify;"><br />TItle tag default bawaan blogspot sepertinya kurang begitu bagus di mata search engine. Hal ini tentunya dapat mengurangi nilai SEO blog kita. Kali ini akan saya share suatu tips seo untuk blogger blogspot tentang bagaimana merubah title tag di blogspot supaya lebih seo friendly.<span id="more-9"></span></div><br /><h3 style="border-top-color: rgb(234, 234, 234); border-top-style: dashed; border-top-width: 1px; color: #333333; font-size: 16px; line-height: 30px; margin: 0px 0px 10px; padding-top: 20px; text-align: justify; text-rendering: optimizelegibility;"><br />Merubah Title Tag Blogspot</h3><br /><div style="margin-bottom: 15px; text-align: justify;"><br />To the point aja. Saya asumsikan anda sudah berada di halaman edit template pada blogspot. Jika belum, silahkan login dan masuk ke menu template lalu klik edit HTML kemudian klik lanjutkan.</div><br /><div style="margin-bottom: 15px; text-align: justify;"><br />Sebelum lanjut, disini kita akan merubah title tag pada blogspot dengan menggunakan blogger conditional tag. Sehingga penggunaan title tag bisa lebih terfokus / tertarget sesuai dengan halaman yang kita inginkan. Berikut tutorial nya :</div><br /><div style="margin-bottom: 15px; text-align: start;"><br /></div><br /><div style="text-align: justify;"><br />1. Cari kode <code style="background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(225, 225, 232); color: #dd1144; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; overflow-x: auto; padding: 2px 4px; white-space: nowrap;"><title><data:blog.pageTitle/></title></code></div><br /><div style="text-align: justify;"><br />2. Hapus kode tersebut, kemudian ganti dengan kode berikut :</div><br /><br /><br /><pre class="prettyprint linenums" style="-webkit-box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; background-color: #f7f7f9; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(225, 225, 232); box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: #333333; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 11px; line-height: 20px; margin-bottom: 20px; overflow-x: auto; padding: 8px; text-align: start; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><ol class="linenums" style="margin: 0px 0px 0px 30px; padding: 0px;"><br /><li class="L0" style="color: #bebec5; padding-left: 12px; text-align: justify; text-shadow: rgb(255, 255, 255) 0px 1px 0px;"><code class="XML" style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; overflow-x: auto; padding: 0px;"><span class="tag" style="color: #1e347b;"><b:if</span><span class="pln" style="color: #48484c;"> </span><span class="atn" style="color: teal;">cond</span><span class="pun" style="color: #93a1a1;">=</span><span class="atv" style="color: #dd1144;">'data:blog.pageType == "index"'</span><span class="tag" style="color: #1e347b;">></span></code></li><br /><li class="L1" style="color: #bebec5; padding-left: 12px; text-align: justify; text-shadow: rgb(255, 255, 255) 0px 1px 0px;"><code class="XML" style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; overflow-x: auto; padding: 0px;"><span class="pln" style="color: #48484c;"> </span><span class="tag" style="color: #1e347b;"><title><data:blog.pageTitle/></title></span></code></li><br /><li class="L2" style="color: #bebec5; padding-left: 12px; text-align: justify; text-shadow: rgb(255, 255, 255) 0px 1px 0px;"><code class="XML" style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; overflow-x: auto; padding: 0px;"><span class="tag" style="color: #1e347b;"><b:else/></span></code></li><br /><li class="L3" style="color: #bebec5; padding-left: 12px; text-align: justify; text-shadow: rgb(255, 255, 255) 0px 1px 0px;"><code class="XML" style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; overflow-x: auto; padding: 0px;"><span class="pln" style="color: #48484c;"> </span><span class="tag" style="color: #1e347b;"><title><data:blog.pageName/></span><span class="pln" style="color: #48484c;"> | </span><span class="tag" style="color: #1e347b;"><data:blog.title/></title></span></code></li><br /><li class="L4" style="color: #bebec5; padding-left: 12px; text-align: justify; text-shadow: rgb(255, 255, 255) 0px 1px 0px;"><code class="XML" style="background-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0px; color: inherit; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 12px; overflow-x: auto; padding: 0px;"><span class="tag" style="color: #1e347b;"></b:if></span></code></li><br /></ol><br /></pre><br /><div style="margin-bottom: 15px; text-align: justify;"><br />3. Save Template.</div><br /><div style="margin-bottom: 15px; text-align: justify;"><br />Penggantian kode title tag diatas, akan merubah title tag yang ada di halaman selain index, yaitu halaman posting dan static page menjadi seperti ini :</div><br /><blockquote style="border-left-color: rgb(238, 238, 238); border-left-style: solid; border-left-width: 5px; color: #999999; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; margin: 0px 0px 20px; padding: 0px 0px 0px 15px; text-align: start;"><br /><div style="font-size: 16px; line-height: 24px; margin-bottom: 15px; text-align: justify;"><br />Judul Post | Judul Blog</div><br /></blockquote><br /><div style="margin-bottom: 15px; text-align: justify;"><br />Dengan adanya perubahan pada title tag tersebut, maka halaman posting dan static_page blog anda akan lebih search engine friendly. Untuk selanjutnya, tinggal giliran sobat untuk mengoptimasi masing – masing artikel agar bisa tampil di halaman terdepan dari mesin pencari.</div><br /></div><br />

Bikin Title Tag SEO Friendly

TItle tag default bawaan blogspot sepertinya kurang begitu bagus di mata search engine. Hal ini tentunya dapat mengurangi nilai SEO blog kit...

Baca selengkapnya »

Membuat Artikel Terkait Vertikal Dengan Thumbnail

<h2 class="post-title entry-title" style="font-family: Helvetica; font-size: 22px; line-height: 1.4em; margin: 0.25em 0px 0px; padding: 0px 0px 4px; text-align: center; text-transform: capitalize;"><br />Cara Membuat Artikel Terkait Vertikal Dengan Thumbnail</h2><br /><div class="post-header" style="font-family: Arial, serif; font-size: 15px;"><br /><div class="post-header-line-1"><br /></div><br /></div><br /><div class="post-body entry-content" id="post-body-4802847041904958149" style="font-family: sans-serif, Arial; line-height: 1.8em; margin: 0px 0px 0.75em;"><br /><div dir="ltr" trbidi="on"><br /><div class="separator" style="clear: both; font-size: 16px; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHnANDlPkC-McRGeAl88urX1gCxMpDY5aycjRdlBPh7EJjPoneFf4qeOGR6q1orsP-2Y5VCcibtC18oUlcQqR1-sBc9SXzldr-ArGGfvwzLEJ8P2JEOmiEGS7icog7mMtRT3xbeqsvSg/s1600/related-posts-with-thumbnails-wordpress-plugin.png" imageanchor="1" style="color: #ff6600; margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHnANDlPkC-McRGeAl88urX1gCxMpDY5aycjRdlBPh7EJjPoneFf4qeOGR6q1orsP-2Y5VCcibtC18oUlcQqR1-sBc9SXzldr-ArGGfvwzLEJ8P2JEOmiEGS7icog7mMtRT3xbeqsvSg/s1600/related-posts-with-thumbnails-wordpress-plugin.png" style="background-color: white; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(204, 204, 204); padding: 7px;" /></a></div><br /><div style="font-size: 16px; text-align: justify;"><br /><b>Cara Membuat Artikel Terkait</b> <b>Vertikal</b> Dengan <b>Thumbnail</b> sangatlah mudah. Artikel terkait ini banyak digunakan untuk membantu blogger yang kesulitan melakukan interlink antar artikel. Manfaat lain penggunaan artikel terkait ini adalah membantu meningkatkan pageview blog anda dengan terus menawarkan artikel-artikel yang lain ke pengunjung blog.</div><br /><a href="http://www.blogger.com/blogger.g?blogID=305034545188581654" name="more"></a><br /><br /><div style="font-size: 16px; text-align: justify;"><br />Untuk membuat artikel terkait tampil di bagian bawah postingan cukup lakukan prosedur sederhana berikut ini:</div><br /><ul style="font-size: 16px;"><br /><li style="text-align: justify;">Login ke akun blogger saudara]</li><br /><li style="text-align: justify;">Buka menu TEMPLATE lalu pilih EDIT HTML</li><br /><li style="text-align: justify;">Centang EXPAND TEMPLATE WIDGET</li><br /><li style="text-align: justify;">Copy kode di bawah ini dan paste tepat di atas kode </head></li><br /></ul><br /><center style="font-size: 16px;"><br /><div style="height: 300px; overflow: auto; text-align: left; width: 500px;"><br /><code><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><style><br />#related_posts{}<br />#related_posts h4{ border-top:1px solid #333;  border-bottom:1px solid #333;  color:#333;  font-size:14px;  letter-spacing:0;  line-height:20px;  margin:0 0 5px;  padding:5px 10px; background:#03C}<br />#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px}<br />#relpost_img_sum:hover{background:none}<br />#relpost_img_sum ul{list-style-type:none; margin:0; padding:0}<br />#relpost_img_sum li{border:1px solid #ccc; background:#fff; margin:0 0 5px; padding:5px; height:65px; list-style:none}<br />#relpost_img_sum .news-title{display:block; font-weight:bold !important}<br />#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}<br />#relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}<br /></style><br /><script type='text/javascript'>//<![CDATA[<br />var relnum = 0;<br />var relmaxposts = 5;<br />var numchars = 150;<br />var morelink = "selengkapnya";<br /><br />eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))<br />//]]></script><br /></b:if></code></div><br /></center><br /><ul style="font-size: 16px;"><br /><li style="text-align: justify;">Sekarang cari kode <data:post.body/> </li><br /><li style="text-align: justify;">Copy kode di bawah ini dan taruh tepat di bawah <data:post.body/> tadi</li><br /></ul><br /><br /><br /><center style="font-size: 16px;"><br /><div style="height: 300px; overflow: auto; text-align: left; width: 500px;"><br /><code><b:if cond='data:blog.pageType == &quot;item&quot;'></code><br /><br /><code><div id='related_posts' style='margin-top:35px;'><br /><h4 style='color:#ffffff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#6fa8dc;'>Artikel Terkait</h4><br /><b:loop values='data:post.labels' var='label'><br /><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/><br /></b:loop><br /><ul id='relpost_img_sum'><br /><script type='text/javascript'>relatpost();</script><br /></ul><br /></div><br /></b:if></code></div><br /></center><br /><ul style="font-size: 16px; text-align: justify;"><br /><li>Jika lebih dari satu coba saja pasang satu persatu. Jika tidak terjadi perubahan, pindahkan ke kode <data:post.body/> lainnya. Sebaiknya mulai dari <data:post.body/> yang paling bawah.... <code></code></li><br /></ul><br /><div style="font-size: 16px; text-align: justify;"><br />Hasil dari pemasangan kode ini akan terlihat seperti gambar di bawah ini:</div><br /><br /><br /><div class="separator" style="clear: both; font-size: 16px; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPWU9TcZB9mKDaJwiZqwsbzh_TGkT4OtXsPG4y_3RE8K_Es9hFdN_GmX0xNWNJBppVGelZl_54vBwmo9jnnAeODXr65CZzJop3vKAxHYQoZCiu7u8FRQQp487wbtiiX4PveJLqVMgTVw/s1600/artikel+terkait+dengan+thumbnail.jpg" imageanchor="1" style="color: #ff6600; margin-left: 1em; margin-right: 1em;"><img alt="tampilan artikel terkait" border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPWU9TcZB9mKDaJwiZqwsbzh_TGkT4OtXsPG4y_3RE8K_Es9hFdN_GmX0xNWNJBppVGelZl_54vBwmo9jnnAeODXr65CZzJop3vKAxHYQoZCiu7u8FRQQp487wbtiiX4PveJLqVMgTVw/s400/artikel+terkait+dengan+thumbnail.jpg" style="background-color: white; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(204, 204, 204); padding: 7px;" title="tampilan artikel terkait" width="400" /></a></div><br /><br /><br /><div style="text-align: justify;"><br />Ok, terima kasih sudah mau mampir di blog saya ini. Mudah-mudahan artikel ini bisa membantu anda.<br /><br /><span style="color: #999999; font-size: x-small;">Sumber : <a href="http://trikmudahseo.blogspot.com/2012/10/cara-membuat-artikel-terkait-vertikal-dengan-thumbnail.html" style="line-height: 1.8em;">http://trikmudahseo.blogspot.com/2012/10/cara-membuat-artikel-terkait-vertikal-dengan-thumbnail.html</a></span></div><br /></div><br /></div><br />

Membuat Artikel Terkait Vertikal Dengan Thumbnail

Cara Membuat Artikel Terkait Vertikal Dengan Thumbnail Cara Membuat Artikel Terkait   Vertikal  Dengan  Thumbnail  sangatlah mudah. Artikel ...

Baca selengkapnya »