Cara Membuat Tombol Share Buttons Responsive pada Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">Setiap Blogger jika memang ingin website yang anda kelola meningkat prioritasnya serta yang terbaik, efektif yaitu dengan cara berbagi konten gratis ke sosial media. Cara untuk meningkatkan popularitas dan terkenalnya sebuah blog/situs adalah dengan rajin menge-share artikel kita ke media sosial, seperti Facebook, Twitter, Dll. Tujuan berbagi ke sosial media adalah untuk meningkatkan pengunjung jika pengunjung tersebut tertarik dan meng-klik bersama. Salah satu cara untuk berbagi postingan ke sosial media dari Blogger yaitu dengan cara memasang tombol share buttons. <br /><br /><div style="text-align: left;"><b>Baca Juga : </b></div><ul style="text-align: left;"><li><a href="http://maycyber-download.blogspot.com/2016/11/cara-membuat-tombol-share-buttons.html">Cara Membuat Tombol Share Buttons Keren, Responsive di Blogger</a></li><li><a href="http://maycyber-download.blogspot.com/2016/11/cara-membuat-flat-social-share-buttons.html">Cara Membuat Flat Social Share Buttons di Blogger</a></li></ul><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR7zqnKT81W7cfeJwhSLHtF20N67rAnclB1uP3qmxZ0r0DfmpbRLHA4HHEE7GeiieZGutGK3l64c9YoBY6GEjLf-bzRknILZZSXe_fi7rbsvEhr8-XwOZp-V0s4gVB2LIXCDR3t4cmMt0/s1600/%255BMayCyber%255D+-+Share+Buttons+Responsive.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="[MayCyber] - Share Buttons RRSSB " border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR7zqnKT81W7cfeJwhSLHtF20N67rAnclB1uP3qmxZ0r0DfmpbRLHA4HHEE7GeiieZGutGK3l64c9YoBY6GEjLf-bzRknILZZSXe_fi7rbsvEhr8-XwOZp-V0s4gVB2LIXCDR3t4cmMt0/s400/%255BMayCyber%255D+-+Share+Buttons+Responsive.jpg" title="[MayCyber] - Share Buttons RRSSB " width="400" /></a></div>Selain Tujuan berbagi ke media sosial adalah untuk meningkatkan pengunjung jika pengunjung tersebut tertarik mengklik postingan Anda, Selain itu juga Tujuan berbagi ke media sosial adalah agar orang lain tahu blog Anda, dan melihat terus-menerus alamat blog anda di Timeline mereka. Dengan tombol share buttons yang anda terapkan di Blogger, pengunjung dapat dengan mudah berbagi artikel ke sosial media milik pengunjung dengan hanya satu klik. Karena ini memang dibutuhkan, sebaiknya Anda memasang Tombol Share di blog Anda.<br /><b><br />Screenshoot : </b><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmA2YEUlGZgAuFgpm12FvztsE2ULwSclyUzZbB28kAPwtEmIe4pagMqlnTrzYVf7fjxGjR7gf49J9k0DA9H14J148z1isskCR_3FiFS4DFb1Ja7YFPuigiyyxtUcZVyyl348qZSNBrLUg/s1600/share+buttons+rrssb-preview.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmA2YEUlGZgAuFgpm12FvztsE2ULwSclyUzZbB28kAPwtEmIe4pagMqlnTrzYVf7fjxGjR7gf49J9k0DA9H14J148z1isskCR_3FiFS4DFb1Ja7YFPuigiyyxtUcZVyyl348qZSNBrLUg/s640/share+buttons+rrssb-preview.gif" width="640" /></a></div><br /><div style="text-align: center;"><b><span style="font-size: large;">Cara Membuat Tombol Share Buttons Responsive pada Blogger</span></b></div><br /><b>Cara Pertama : </b><br /><br />1. Buka Blogger - Kemudian login.<br />2. Dashboard - Template</div></div>3. Edit HTML<br /><br /><b>Proses Pembuatan : </b><br /><br />1. Temukan kode <b style="color: red;">]]></b:skin> </b>atau<b> <span style="color: red;"></style></span></b><br />2. Copy & Paste kode berikut ini, dan letakkan diatas kode <b style="color: red;">]]></b:skin> </b>atau<b> <span style="color: red;"></style></span></b><br /><pre data-codetype="CSS" title="CSS"><code class="language-css">/* Share Buttons RRSS<br />----------------------------------------------- */<br />.rrssb-buttons.large-format li a,.rrssb-buttons.large-format li a .text{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden}.rrssb-buttons,.rrssb-buttons li,.rrssb-buttons li a{-moz-box-sizing:border-box;box-sizing:border-box}.clearfix{*zoom:1}.clearfix:after{clear:both}.clearfix:before,.clearfix:after{content:" ";display:table}.rrssb-buttons{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;height:36px;margin:0;padding:0!important;width:100%}.rrssb-buttons li{float:left;height:100%;list-style:none;margin:0;padding:0 2.5px;line-height:13px}.rrssb-buttons li.email a{background-color:#0a88ff}.rrssb-buttons li.email a:hover{background-color:#006ed6}.rrssb-buttons li.facebook a{background-color:#306199}.rrssb-buttons li.facebook a:hover{background-color:#244872}.rrssb-buttons li.tumblr a{background-color:#32506d}.rrssb-buttons li.tumblr a:hover{background-color:#22364a}.rrssb-buttons li.linkedin a{background-color:#007bb6}.rrssb-buttons li.linkedin a:hover{background-color:#005983}.rrssb-buttons li.twitter a{background-color:#26c4f1}.rrssb-buttons li.twitter a:hover{background-color:#0eaad6}.rrssb-buttons li.googleplus a{background-color:#e93f2e}.rrssb-buttons li.googleplus a:hover{background-color:#ce2616}.rrssb-buttons li.youtube a{background-color:#df1c31}.rrssb-buttons li.youtube a:hover{background-color:#b21627}.rrssb-buttons li.reddit a{background-color:#8bbbe3}.rrssb-buttons li.reddit a:hover{background-color:#62a3d9}.rrssb-buttons li.pinterest a{background-color:#b81621}.rrssb-buttons li.pinterest a:hover{background-color:#8a1119}.rrssb-buttons li.pocket a{background-color:#ed4054}.rrssb-buttons li.pocket a:hover{background-color:#e4162d}.rrssb-buttons li.github a{background-color:#444}.rrssb-buttons li.github a:hover{background-color:#2b2b2b}.rrssb-buttons li a{background-color:#ccc;border-radius:2px;display:block;font-size:11px;font-weight:bold;height:100%;padding:11px 7px 12px 27px;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;-webkit-transition:background-color 0.2s ease-in-out;-moz-transition:background-color 0.2s ease-in-out;-o-transition:background-color 0.2s ease-in-out;transition:background-color 0.2s ease-in-out}.rrssb-buttons li a .icon{display:block;height:100%;left:10px;padding-top:9px;position:absolute;top:0;width:10%}.rrssb-buttons li a .icon svg{height:17px;width:17px}.rrssb-buttons li a .icon svg path,.rrssb-buttons li a .icon svg polygon{fill:#fff}.rrssb-buttons li a .text{color:#fff}.rrssb-buttons li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,0.25)}.rrssb-buttons li.small a{padding:0}.rrssb-buttons li.small a .icon{height:100%;left:auto;margin:0 auto;overflow:hidden;position:relative;top:auto;width:100%}.rrssb-buttons li.small a .text{visibility:hidden}.rrssb-buttons.large-format{height:auto}.rrssb-buttons.large-format li{height:auto}.rrssb-buttons.large-format li a{font-size:15px;font-size:1vw;padding:7% 0% 7% 12%;border-radius:0.2em;line-height:1vw}.rrssb-buttons.large-format li a .icon{left:7%;padding-top:0;width:12%}.rrssb-buttons.large-format li a .icon svg{height:100%;width:100%}.rrssb-buttons.large-format li a .text{font-size:15px;font-size:1vw}.rrssb-buttons.large-format li a:hover{font-size:15px;font-size:1vw;padding:7% 0% 7% 12%;border-radius:0.2em}.rrssb-buttons.small-format{padding-top:5px}.rrssb-buttons.small-format li{height:80%;padding:0 1.5px}.rrssb-buttons.small-format li a .icon{height:100%;padding-top:0}.rrssb-buttons.small-format li a .icon svg{height:48%;position:relative;top:6px;width:80%}.rrssb-buttons.tiny-format{height:22px;position:relative}.rrssb-buttons.tiny-format li{padding-right:7px}.rrssb-buttons.tiny-format li a{background-color:transparent;padding:0}.rrssb-buttons.tiny-format li a .icon svg{height:70%;width:100%}.rrssb-buttons.tiny-format li a:hover,.rrssb-buttons.tiny-format li a:active{background-color:transparent}.rrssb-buttons.tiny-format li.email a .icon svg path,.rrssb-buttons.tiny-format li.email a .icon svg polygon{fill:#0a88ff}.rrssb-buttons.tiny-format li.email a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.email a .icon:hover .icon svg polygon{fill:#0054a3}.rrssb-buttons.tiny-format li.facebook a .icon svg path,.rrssb-buttons.tiny-format li.facebook a .icon svg polygon{fill:#306199}.rrssb-buttons.tiny-format li.facebook a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.facebook a .icon:hover .icon svg polygon{fill:#18304b}.rrssb-buttons.tiny-format li.tumblr a .icon svg path,.rrssb-buttons.tiny-format li.tumblr a .icon svg polygon{fill:#32506d}.rrssb-buttons.tiny-format li.tumblr a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.tumblr a .icon:hover .icon svg polygon{fill:#121d27}.rrssb-buttons.tiny-format li.linkedin a .icon svg path,.rrssb-buttons.tiny-format li.linkedin a .icon svg polygon{fill:#007bb6}.rrssb-buttons.tiny-format li.linkedin a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.linkedin a .icon:hover .icon svg polygon{fill:#003650}.rrssb-buttons.tiny-format li.twitter a .icon svg path,.rrssb-buttons.tiny-format li.twitter a .icon svg polygon{fill:#26c4f1}.rrssb-buttons.tiny-format li.twitter a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.twitter a .icon:hover .icon svg polygon{fill:#0b84a6}.rrssb-buttons.tiny-format li.googleplus a .icon svg path,.rrssb-buttons.tiny-format li.googleplus a .icon svg polygon{fill:#e93f2e}.rrssb-buttons.tiny-format li.googleplus a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.googleplus a .icon:hover .icon svg polygon{fill:#a01e11}.rrssb-buttons.tiny-format li.youtube a .icon svg path,.rrssb-buttons.tiny-format li.youtube a .icon svg polygon{fill:#df1c31}.rrssb-buttons.tiny-format li.youtube a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.youtube a .icon:hover .icon svg polygon{fill:#84111d}.rrssb-buttons.tiny-format li.reddit a .icon svg path,.rrssb-buttons.tiny-format li.reddit a .icon svg polygon{fill:#8bbbe3}.rrssb-buttons.tiny-format li.reddit a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.reddit a .icon:hover .icon svg polygon{fill:#398bcf}.rrssb-buttons.tiny-format li.pinterest a .icon svg path,.rrssb-buttons.tiny-format li.pinterest a .icon svg polygon{fill:#b81621}.rrssb-buttons.tiny-format li.pinterest a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.pinterest a .icon:hover .icon svg polygon{fill:#5d0b11}.rrssb-buttons.tiny-format li.pocket a .icon svg path,.rrssb-buttons.tiny-format li.pocket a .icon svg polygon{fill:#ed4054}.rrssb-buttons.tiny-format li.pocket a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.pocket a .icon:hover .icon svg polygon{fill:#b61124}.rrssb-buttons.tiny-format li.github a .icon svg path,.rrssb-buttons.tiny-format li.github a .icon svg polygon{fill:#444}.rrssb-buttons.tiny-format li.github a .icon:hover .icon svg path,.rrssb-buttons.tiny-format li.github a .icon:hover .icon svg polygon{fill:#111}<br /><br />/* Share Buttons RRSS End<br />----------------------------------------------- */</code></pre>3. Jika sudah? Temukan lagi kode <b><span style="color: red;"></body></span></b><br />4. Copy & Paste kode berikut ini, dan letakkan diatas <b><span style="color: red;"></body></span></b><br /><pre data-codetype="Javascript" title="Javascript"><code class="language-javascript"><script type='text/javascript'>//<![CDATA[<br />/* Start Share Buttons RRSSB */<br />(function(e,t,n){"use strict";var r=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=t("li",n).length,i=100/r;t("li",n).css("width",i+"%").attr("data-initwidth",i)})},i=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=parseFloat(t(n).width()),i=t("li",n).not(".small").first().width(),s=t("li.small",n).length;i>170&&s<1?t(n).addClass("large-format"):t(n).removeClass("large-format");r<200?t(n).removeClass("small-format").addClass("tiny-format"):t(n).removeClass("tiny-format")})},s=function(){t(".rrssb-buttons").each(function(e){var n=t(this),r=0,i=0,s,o,a=t("li.small",n).length;if(a===t("li",n).length){var f=a*42,l=parseFloat(t(n).width());s=t("li.small",n).first();o=parseFloat(t(s).attr("data-size"))+55;if(f+o<l){t(n).removeClass("small-format");t("li.small",n).first().removeClass("small");u()}}else{t("li",n).not(".small").each(function(e){var n=parseFloat(t(this).attr("data-size"))+55,s=parseFloat(t(this).width());r+=s;i+=n});var c=r-i;s=t("li.small",n).first();o=parseFloat(t(s).attr("data-size"))+55;if(o<c){t(s).removeClass("small");u()}}})},o=function(e){t(".rrssb-buttons").each(function(e){var n=t(this),r=t("li",n).nextAll(),i=r.length;t(t("li",n).get().reverse()).each(function(e,r){if(t(this).hasClass("small")===!1){var i=parseFloat(t(this).attr("data-size"))+55,o=parseFloat(t(this).width());if(i>o){var a=t("li",n).not(".small").last();t(a).addClass("small");u()}}--r||s()})});e===!0&&f(u)},u=function(){t(".rrssb-buttons").each(function(e){var n=t(this),i,s,o,u,a,f=t("li.small",n).length;if(f>0&&f!==t("li",n).length){t(n).removeClass("small-format");t("li.small",n).css("width","42px");o=f*42;i=t("li",n).not(".small").length;s=100/i;a=o/i;navigator.userAgent.indexOf("Chrome")>=0||navigator.userAgent.indexOf("Safari")>=0?u="-webkit-calc("+s+"% - "+a+"px)":navigator.userAgent.indexOf("Firefox")>=0?u="-moz-calc("+s+"% - "+a+"px)":u="calc("+s+"% - "+a+"px)";t("li",n).not(".small").css("width",u)}else if(f===t("li",n).length){t(n).addClass("small-format");r()}else{t(n).removeClass("small-format");r()}});i()},a=function(){t(".rrssb-buttons").each(function(e){t(this).addClass("rrssb-"+(e+1))});r();t(".rrssb-buttons li .text").each(function(e){var n=parseFloat(t(this).width());t(this).closest("li").attr("data-size",n)});o(!0)},f=function(e){t(".rrssb-buttons li.small").removeClass("small");o();e()},l=function(t,r,i,s){var o=e.screenLeft!==n?e.screenLeft:screen.left,u=e.screenTop!==n?e.screenTop:screen.top,a=e.innerWidth?e.innerWidth:document.documentElement.clientWidth?document.documentElement.clientWidth:screen.width,f=e.innerHeight?e.innerHeight:document.documentElement.clientHeight?document.documentElement.clientHeight:screen.height,l=a/2-i/2+o,c=f/3-s/3+u,h=e.open(t,r,"scrollbars=yes, width="+i+", height="+s+", top="+c+", left="+l);e.focus&&h.focus()},c=function(){var e={};return function(t,n,r){r||(r="Don't call this twice without a uniqueId");e[r]&&clearTimeout(e[r]);e[r]=setTimeout(t,n)}}();t(".rrssb-buttons a.popup").on("click",function(e){var n=t(this);l(n.attr("href"),n.find(".text").html(),580,470);e.preventDefault()});t(e).resize(function(){f(u);c(function(){f(u)},200,"finished resizing")});t(document).ready(function(){a()})})(window,jQuery);<br /><br />/* Share Buttons RRSSB: JavaScript Ends */<br />//]]></script></code></pre>5. Jika sudah? Terakhir, Temukan kode <b><span style="color: red;"><data:post.body/></span> </b>.<b> </b>Biasanya kode ini lebih dari satu, silakan anda pilih yang kedua/ketiga. <br />6. Copy & Paste kode berikut ini, dan letakkan dibawah kode <b><span style="color: red;"><data:post.body/></span></b><br /><pre data-codetype="HTML" title="HTML"><code class="language-markup"><!-- RRSSB Share Buttons Start --><br /><ul class='rrssb-buttons'><br /> <li class='email'><br /> <a expr:href='&quot;mailto:?subject=Check%20out%20&quot; + data:post.title + &quot;&amp;body=Visit:%20&quot; + data:post.canonicalUrl '><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><g><path d='M20.111 26.147c-2.336 1.051-4.361 1.401-7.125 1.401c-6.462 0-12.146-4.633-12.146-12.265 c0-7.94 5.762-14.833 14.561-14.833c6.853 0 11.8 4.7 11.8 11.252c0 5.684-3.194 9.265-7.399 9.3 c-1.829 0-3.153-0.934-3.347-2.997h-0.077c-1.208 1.986-2.96 2.997-5.023 2.997c-2.532 0-4.361-1.868-4.361-5.062 c0-4.749 3.504-9.071 9.111-9.071c1.713 0 3.7 0.4 4.6 0.973l-1.169 7.203c-0.388 2.298-0.116 3.3 1 3.4 c1.673 0 3.773-2.102 3.773-6.58c0-5.061-3.27-8.994-9.303-8.994c-5.957 0-11.175 4.673-11.175 12.1 c0 6.5 4.2 10.2 10 10.201c1.986 0 4.089-0.43 5.646-1.245L20.111 26.147z M16.646 10.1 c-0.311-0.078-0.701-0.155-1.207-0.155c-2.571 0-4.595 2.53-4.595 5.529c0 1.5 0.7 2.4 1.9 2.4 c1.441 0 2.959-1.828 3.311-4.087L16.646 10.068z'/></g></svg></span><span class='text'>email</span></a><br /> </li><br /> <li class='facebook'><br /> <a class='popup' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M27.825,4.783c0-2.427-2.182-4.608-4.608-4.608H4.783c-2.422,0-4.608,2.182-4.608,4.608v18.434 c0,2.427,2.181,4.608,4.608,4.608H14V17.379h-3.379v-4.608H14v-1.795c0-3.089,2.335-5.885,5.192-5.885h3.718v4.608h-3.726 c-0.408,0-0.884,0.492-0.884,1.236v1.836h4.609v4.608h-4.609v10.446h4.916c2.422,0,4.608-2.188,4.608-4.608V4.783z'/></svg></span><span class='text'>facebook</span></a><br /> </li><br /> <li class='linkedin'><br /> <a class='popup' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title ' title='Share on Linkedin'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M25.424,15.887v8.447h-4.896v-7.882c0-1.979-0.709-3.331-2.48-3.331c-1.354,0-2.158,0.911-2.514,1.803 c-0.129,0.315-0.162,0.753-0.162,1.194v8.216h-4.899c0,0,0.066-13.349,0-14.731h4.899v2.088c-0.01,0.016-0.023,0.032-0.033,0.048 h0.033V11.69c0.65-1.002,1.812-2.435,4.414-2.435C23.008,9.254,25.424,11.361,25.424,15.887z M5.348,2.501 c-1.676,0-2.772,1.092-2.772,2.539c0,1.421,1.066,2.538,2.717,2.546h0.032c1.709,0,2.771-1.132,2.771-2.546 C8.054,3.593,7.019,2.501,5.343,2.501H5.348z M2.867,24.334h4.897V9.603H2.867V24.334z'/></svg></span><span class='text'>linkedin</span></a><br /> </li><br /> <li class='twitter'><br /> <a class='popup' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M24.253,8.756C24.689,17.08,18.297,24.182,9.97,24.62c-3.122,0.162-6.219-0.646-8.861-2.32 c2.703,0.179,5.376-0.648,7.508-2.321c-2.072-0.247-3.818-1.661-4.489-3.638c0.801,0.128,1.62,0.076,2.399-0.155 C4.045,15.72,2.215,13.6,2.115,11.077c0.688,0.275,1.426,0.407,2.168,0.386c-2.135-1.65-2.729-4.621-1.394-6.965 C5.575,7.816,9.54,9.84,13.803,10.071c-0.842-2.739,0.694-5.64,3.434-6.482c2.018-0.623,4.212,0.044,5.546,1.683 c1.186-0.213,2.318-0.662,3.329-1.317c-0.385,1.256-1.247,2.312-2.399,2.942c1.048-0.106,2.069-0.394,3.019-0.851 C26.275,7.229,25.39,8.196,24.253,8.756z'/></svg></span><span class='text'>twitter</span></a><br /> </li><br /> <li class='reddit'><br /> <a expr:href='&quot;http://www.reddit.com/submit?url=&quot;+data:post.canonicalUrl' title='Share on reddit'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><g><path d='M11.794 15.316c0-1.029-0.835-1.895-1.866-1.895c-1.03 0-1.893 0.865-1.893 1.895s0.863 1.9 1.9 1.9 C10.958 17.2 11.8 16.3 11.8 15.316z'/><path d='M18.1 13.422c-1.029 0-1.895 0.864-1.895 1.895c0 1 0.9 1.9 1.9 1.865c1.031 0 1.869-0.836 1.869-1.865 C19.969 14.3 19.1 13.4 18.1 13.422z'/><path d='M17.527 19.791c-0.678 0.678-1.826 1.006-3.514 1.006c-0.004 0-0.009 0-0.014 0c-0.004 0-0.01 0-0.015 0 c-1.686 0-2.834-0.328-3.51-1.005c-0.264-0.265-0.693-0.265-0.958 0c-0.264 0.265-0.264 0.7 0 1 c0.943 0.9 2.4 1.4 4.5 1.402c0.005 0 0 0 0 0c0.005 0 0 0 0 0c2.066 0 3.527-0.459 4.47-1.402 c0.265-0.264 0.265-0.693 0.002-0.958C18.221 19.5 17.8 19.5 17.5 19.791z'/><path d='M27.707 13.267c0-1.785-1.453-3.237-3.236-3.237c-0.793 0-1.518 0.287-2.082 0.761c-2.039-1.295-4.646-2.069-7.438-2.219 l1.483-4.691l4.062 0.956c0.071 1.4 1.3 2.6 2.7 2.555c1.488 0 2.695-1.208 2.695-2.695C25.881 3.2 24.7 2 23.2 2 c-1.059 0-1.979 0.616-2.42 1.508l-4.633-1.091c-0.344-0.081-0.693 0.118-0.803 0.455l-1.793 5.7 C10.548 8.6 7.7 9.4 5.6 10.75C5.006 10.3 4.3 10 3.5 10.029c-1.785 0-3.237 1.452-3.237 3.2 c0 1.1 0.6 2.1 1.4 2.69c-0.04 0.272-0.061 0.551-0.061 0.831c0 2.3 1.3 4.4 3.7 5.9 c2.299 1.5 5.3 2.3 8.6 2.325c3.228 0 6.271-0.825 8.571-2.325c2.387-1.56 3.7-3.66 3.7-5.917 c0-0.26-0.016-0.514-0.051-0.768C27.088 15.5 27.7 14.4 27.7 13.267z M23.186 3.355c0.74 0 1.3 0.6 1.3 1.3 c0 0.738-0.6 1.34-1.34 1.34s-1.342-0.602-1.342-1.34C21.844 4 22.4 3.4 23.2 3.355z M1.648 13.3 c0-1.038 0.844-1.882 1.882-1.882c0.31 0 0.6 0.1 0.9 0.209c-1.049 0.868-1.813 1.861-2.26 2.9 C1.832 14.2 1.6 13.8 1.6 13.267z M21.773 21.57c-2.082 1.357-4.863 2.105-7.831 2.105c-2.967 0-5.747-0.748-7.828-2.105 c-1.991-1.301-3.088-3-3.088-4.782c0-1.784 1.097-3.484 3.088-4.784c2.081-1.358 4.861-2.106 7.828-2.106 c2.967 0 5.7 0.7 7.8 2.106c1.99 1.3 3.1 3 3.1 4.784C24.859 18.6 23.8 20.3 21.8 21.57z M25.787 14.6 c-0.432-1.084-1.191-2.095-2.244-2.977c0.273-0.156 0.59-0.245 0.928-0.245c1.035 0 1.9 0.8 1.9 1.9 C26.354 13.8 26.1 14.3 25.8 14.605z'/></g></svg><br /></span><span class='text'>reddit</span></a><br /> </li><br /> <li class='googleplus'><br /> <a class='popup' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><br /> <g><br /> <g><br /> <path d='M14.703,15.854l-1.219-0.948c-0.372-0.308-0.88-0.715-0.88-1.459c0-0.748,0.508-1.223,0.95-1.663 c1.42-1.119,2.839-2.309,2.839-4.817c0-2.58-1.621-3.937-2.399-4.581h2.097l2.202-1.383h-6.67c-1.83,0-4.467,0.433-6.398,2.027 C3.768,4.287,3.059,6.018,3.059,7.576c0,2.634,2.022,5.328,5.604,5.328c0.339,0,0.71-0.033,1.083-0.068 c-0.167,0.408-0.336,0.748-0.336,1.324c0,1.04,0.551,1.685,1.011,2.297c-1.524,0.104-4.37,0.273-6.467,1.562 c-1.998,1.188-2.605,2.916-2.605,4.137c0,2.512,2.358,4.84,7.289,4.84c5.822,0,8.904-3.223,8.904-6.41 c0.008-2.327-1.359-3.489-2.829-4.731H14.703z M10.269,11.951c-2.912,0-4.231-3.765-4.231-6.037c0-0.884,0.168-1.797,0.744-2.511 c0.543-0.679,1.489-1.12,2.372-1.12c2.807,0,4.256,3.798,4.256,6.242c0,0.612-0.067,1.694-0.845,2.478 c-0.537,0.55-1.438,0.948-2.295,0.951V11.951z M10.302,25.609c-3.621,0-5.957-1.732-5.957-4.142c0-2.408,2.165-3.223,2.911-3.492 c1.421-0.479,3.25-0.545,3.555-0.545c0.338,0,0.52,0,0.766,0.034c2.574,1.838,3.706,2.757,3.706,4.479 c-0.002,2.073-1.736,3.665-4.982,3.649L10.302,25.609z'/><br /> <polygon points='23.254,11.89 23.254,8.521 21.569,8.521 21.569,11.89 18.202,11.89 18.202,13.604 21.569,13.604 21.569,17.004 23.254,17.004 23.254,13.604 26.653,13.604 26.653,11.89 '/><br /> </g><br /> </g></svg></span><span class='text'>google+</span></a><br /> </li><br /> <li class='pinterest'><br /> <a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><span class='icon'><svg enable-background='new 0 0 28 28' height='28px' id='Layer_1' version='1.1' viewBox='0 0 28 28' width='28px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M14.021,1.57C6.96,1.57,1.236,7.293,1.236,14.355c0,7.062,5.724,12.785,12.785,12.785c7.061,0,12.785-5.725,12.785-12.785 C26.807,7.294,21.082,1.57,14.021,1.57z M15.261,18.655c-1.161-0.09-1.649-0.666-2.559-1.219c-0.501,2.626-1.113,5.145-2.925,6.458 c-0.559-3.971,0.822-6.951,1.462-10.116c-1.093-1.84,0.132-5.545,2.438-4.632c2.837,1.123-2.458,6.842,1.099,7.557 c3.711,0.744,5.227-6.439,2.925-8.775c-3.325-3.374-9.678-0.077-8.897,4.754c0.19,1.178,1.408,1.538,0.489,3.168 C7.165,15.378,6.53,13.7,6.611,11.462c0.131-3.662,3.291-6.227,6.46-6.582c4.007-0.448,7.771,1.474,8.29,5.239 c0.579,4.255-1.816,8.865-6.102,8.533L15.261,18.655z'/></svg></span><span class='text'>pinterest</span></a><br /> </li><br /></ul><!-- RRSSB Share Buttons End --></code></pre>7. Silakan Simpan Template.<br /><br />Sekian Tutorial Blogger kali ini, Jika terdapat kesalahan silakan jangan sungkan untuk berkomentar.<b> </b>Silakan anda lihat postingan blog anda atau lihat bagian bawah blog anda. Sekian dari saya <b>Semoga Bermanfaat!</b> <span style="font-size: large;"><span style="font-size: small;">Thank's For Reading & Sharing and Visited; </span></span><b>Cara Membuat Share Buttons Responsive pada Blogger</b></div></div></div></div>

Diposting oleh Mr Xiulung

Cara Membuat Widget Subscribe Newsletter dibawah Postingan

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">Salah satu untuk mendapatkan pengunjung setia adalah memasang kotak berlangganan<br /><b>(Subscription Box)</b> di Blogger anda. Kotak berlangganan <b>(Subscription Box)</b> ini sangat penting untuk sebuah blog. Dengan begitu pengujung akan lebih mudah untuk mendapatkan update postingan blog via email. Nantinya ketika Anda membuat postingan, maka postingan atau artikel tersebut akan terkirim melalui inbox pelanggan.<br /><br />Pada kesempatan kali ini saya akan membagikan <b>Tombol Subscribe Newsletter</b> dibawah postingan, dan juga bisa dipasang di bagian<b> sidebar, footer</b> dll. Tapi nanti saya akan menjelaskan kedua cara memasangnya.<br /><br />Baca Juga :<br /><ul style="text-align: left;"><li style="text-align: left;"><a href="http://maycyber-download.blogspot.com/2016/09/cara-membuat-kotak-berlangganan.html">Cara Membuat Kotak Berlangganan (Subscription Box) Responsive! Dibawah Postingan Blogger.</a></li><li style="text-align: left;"><a href="http://maycyber-download.blogspot.com/2016/07/cara-membuat-widget-kotak-berlangganan.html">Cara Membuat Widget Kotak Berlangganan Plus Media Sosial di Blogger</a></li></ul><br /><b>Screenshoot :</b><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghMl7Iphp7ySIRMExCejioo9fmKja2PQxOu0PIA3ov9HiUJSRui-ZUAsT7IgMG9R-LMsRAle9sY1bkwoDMCWw263W2lbtP-Ni0I27N08ArZIjAMuSBl5VeYk4P35nR9EypHVdXo8laq_Y/s1600/%255BMayCyber%255D+-+Subscribe+dibawah+postingan_1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghMl7Iphp7ySIRMExCejioo9fmKja2PQxOu0PIA3ov9HiUJSRui-ZUAsT7IgMG9R-LMsRAle9sY1bkwoDMCWw263W2lbtP-Ni0I27N08ArZIjAMuSBl5VeYk4P35nR9EypHVdXo8laq_Y/s640/%255BMayCyber%255D+-+Subscribe+dibawah+postingan_1.gif" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div style="text-align: center;"><b><span style="font-size: large;">Cara Membuat Widget Subscribe Newsletter dibawah Postingan</span></b></div><div style="text-align: center;"><br /></div><div style="text-align: left;"><b>Cara Pertama : </b><br /><br />1. Buka <a href="http://blogger.com/">Blogger </a>- Kemudian login.</div><div style="text-align: left;">2. Dashboard - Template</div><div style="text-align: left;">3. Edit HTML</div><div style="text-align: left;"><br /></div><div style="text-align: left;"><b>Proses Pembuatan : </b></div><div style="text-align: left;"><b><br /></b></div><div style="text-align: left;">1. Temukan <CTRL+F> kode <b><span style="color: red;">]]></b:skin></span></b> atau <b><span style="color: red;"></style></span></b></div><div style="text-align: left;">2. Copy & Paste kode berikut ini, dan letakkan diatas kode <b><span style="color: red;">]]></b:skin></span></b> atau <span style="color: red;"><b></style></b></span></div><pre data-codetype="CSS" title="CSS"><code class="language-css"><pre data-codetype="CSS" title="CSS"><code class="language-css">#subscribebox{background:#576269;padding:20px;font-family:'PT Sans',sans-serif;}<br />.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}<br />#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}<br />.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}<br />.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}<br />.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}<br />.follow-subscribe-social ul li:last-child{margin:0}<br />.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}<br />.follow-subscribe-social ul li a:hover{color:#fff}<br />form.subscribe{margin-top:-7px}<br />form.subscribe input{display:block;width:100%}<br />.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}<br />.subscribe-email:focus{outline:0}<br />form.subscribe .placeholder{color:#cacaca}<br />form.subscribe input:-ms-input-placeholder{color:#cacaca}<br />form.subscribe input::-webkit-input-placeholder{color:#cacaca}<br />form.subscribe input:-moz-placeholder{color:#fafafa}<br />form.subscribe input::-moz-placeholder{color:#fafafa}<br />.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}<br />.subscribe-button:hover{background-color:#f1d640}<br />.subscribe-button:focus{outline:0}</code></pre></code></pre>3. Jika sudah dipasang? Temukan kode <b><span style="color: red;"></head></span></b><br />4. Copy & Paste kode berikut ini, dan letakkan diatas kode <b><span style="color: red;"></head></span></b><br /><pre data-codetype="jQuery" title="jQuery"><code class="language-javascript"><link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/><br /><link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/></code></pre>5. Jika sudah dipasang? Temukan lagi kode <b><span style="color: red;"><data:post.body/></span></b> biasanya kode ini lebih dari satu, silakan pilih yang kedua atau yang ketiga.<br />6. Copy & Paste kode berikut ini, dan letakkan dibawah kode <b><span style="color: red;"><data:post.body/></span></b><br /><br />Jika kesalahan pada kode <span style="color: blue;"><data:post.body/></span><br /><br /><b>Cara Alternatif :</b><br /><br /><b>A. </b>Anda bisa meletakan kode dibawah ini, tepat diatas/dibawah <b>Related Post</b> jika memang anda memasangnya.<br /><b>B.</b> Anda bisa meletakan kode dibawah ini, tepat diatas/dibawah <b>Share Buttons.</b><br /><pre data-codetype="HTML" title="HTML"><code class="language-markup"><div id="subscribebox"><br /><div class="follow-subscribe-social"><br /><ul><br /><li><a href="<span style="color: red;">#</span>" target="_blank"><i class="fa fa-facebook"></i></a></li><br /><li><a href="<span style="color: red;">#</span>" target="_blank"><i class="fa fa-twitter"></i></a></li><br /><li><a href="<span style="color: red;">#</span>" target="_blank"><i class="fa fa-linkedin"></i></a></li><br /><li><a href="<span style="color: red;">#</span>" target="_blank"><i class="fa fa-google"></i></a></li><br /><li><a href="<span style="color: red;">#</span>" target="_blank"><i class="fa fa-pinterest-p"></i></a></li><br /><li><a href="<span style="color: red;">#</span>" target="_blank"><i class="fa fa-dribbble"></i></a></li><br /><li><a href="<span style="color: red;">#</span>" target="_blank"><i class="fa fa-instagram"></i></a></li><br /></ul><br /></div><br /><p>Subscribe Newsletter</p><br /><form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: red;">YOUR-USER-NAME</span>' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><br /><input name='uri' type='hidden' value='<span style="color: red;">YOUR-USER-NAME</span>'/><br /><input name='loc' type='hidden' value='en_US'/><br /><input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/><br /><input class="subscribe-button" type="submit" value="Subscribe" /><br /></form><br /></div></code></pre><pre data-codetype="HTML" title="HTML"><code class="language-markup"><br /></code></pre>NB : Silakan anda ganti tulisan yang berwarna <span style="color: red;">merah </span>dengan kepunyaan anda.<br /><div style="text-align: center;"><br /><b><span style="font-size: large;">Selain dibawah postingan? Subscribe ini juga bisa dipasang di Sidebar, Footer</span></b></div><div style="text-align: left;"><br /><b>Caranya :</b><br /><br />1. Buka Tata Letak/Layout.</div><div style="text-align: left;">2. Add a Gadget</div><div style="text-align: left;">3. Pilih HTML Java Script</div><div style="text-align: left;">4. Copy & Paste kode berikut ini, dan letakkan di kolom HTML Java Script.</div><div style="text-align: left;"><br /><b>Screenshoot : </b><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF0trOFdfVHats9T0FySOX005McO_KzOfgU8Xu4x5VC_RtYEvZ7ly7hRRHxiaHpAlHQcxPpFm_WBKyncTa6BXSZ5P-viR_xmzhYulQV7AQtyRR89X4XIcWuHvdJHGB7t30ihwUMceHBlU/s1600/%255BMayCyber%255D+-+Subscribe+Tata+Letak_2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF0trOFdfVHats9T0FySOX005McO_KzOfgU8Xu4x5VC_RtYEvZ7ly7hRRHxiaHpAlHQcxPpFm_WBKyncTa6BXSZ5P-viR_xmzhYulQV7AQtyRR89X4XIcWuHvdJHGB7t30ihwUMceHBlU/s400/%255BMayCyber%255D+-+Subscribe+Tata+Letak_2.gif" width="400" /></a></div><br /></div><pre data-codetype="HTML" title="HTML"><code class="language-markup"><div id="subscribebox"><br /><div class="follow-subscribe-social"><br /><ul><br /><li><a href="<span style="color: red;">#</span>" target="_blank"><i class="fa fa-facebook"></i></a></li><br /><li><a href="<span style="color: red;">#</span>" target="_blank"><i class="fa fa-twitter"></i></a></li><br /><li><a href="<span style="color: red;">#</span>" target="_blank"><i class="fa fa-linkedin"></i></a></li><br /><li><a href="<span style="color: red;">#</span>" target="_blank"><i class="fa fa-google"></i></a></li><br /><li><a href="<span style="color: red;">#</span>" target="_blank"><i class="fa fa-pinterest-p"></i></a></li><br /><li><a href="<span style="color: red;">#</span>" target="_blank"><i class="fa fa-dribbble"></i></a></li><br /><li><a href="<span style="color: red;">#</span>" target="_blank"><i class="fa fa-instagram"></i></a></li><br /></ul><br /></div><br /><p>Subscribe Newsletter</p><br /><form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: red;">YOUR-USER-NAME</span>' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><br /><input name='uri' type='hidden' value='<span style="color: red;">YOUR-USER-NAME</span>'/><br /><input name='loc' type='hidden' value='en_US'/><br /><input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/><br /><input class="subscribe-button" type="submit" value="Subscribe" /><br /></form><br /></div></code></pre>Terakhir, Silakan Simpan Template. Silakan anda lihat postingan blog anda atau lihat bagian sidebar atau footer anda. Sekian dari saya <b>Semoga Bermanfaat!</b> <span style="font-size: large;"><span style="font-size: small;">Thank's For Reading & Sharing and Visited; </span></span><b>Cara Membuat Tombol Subscribe Newsletter dibawah Postingan</b></div></div></div></div></div>

Diposting oleh Mr Xiulung

Cara Membuat Flat Social Share Buttons di Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">Menge-share artikel ke sosial media mungkin merupakan salah satu cara untuk meningkatkan popularitas dan terkenalnya sebuah blog/situs. Tujuan berbagi ke sosial media adalah untuk meningkatkan pengunjung jika pengunjung tersebut tertarik dan meng-klik bersama. Salah satu cara untuk berbagi postingan ke sosial media yaitu dengan cara memasang tombol share buttons di blog Anda. Mungkin tombol share ini sudah tidak asing lagi dikalangan web atau situs. Karena ini memang dibutuhkan. Hal ini sangat bermanfaat, diantaranya adalah agar pengunjung dapat membagikan sebuah postingan anda di Sosial Media.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNw94h-N6tHShT6QarGNvEXpOEIaERt1oBntsfs22pFwL6furyvk3oWuaxR-g67gN_WYgfvktPZ7YNU38cd0zqnRzfFezzAJX_YIQHgsbPyeIbu-5O0Catvxm202gPnAHkN86tg4TMSBE/s1600/Share+Buttons_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNw94h-N6tHShT6QarGNvEXpOEIaERt1oBntsfs22pFwL6furyvk3oWuaxR-g67gN_WYgfvktPZ7YNU38cd0zqnRzfFezzAJX_YIQHgsbPyeIbu-5O0Catvxm202gPnAHkN86tg4TMSBE/s400/Share+Buttons_1.jpg" width="400" /></a></div>Pada kesempatan kali ini, saya akan membagikan <b>Flat Social Share Buttons. </b>Dengan tombol share buttons, pengunjung dapat dengan mudah berbagi artikel ke sosial milik dia dengan hanya satu klik saja.<br /><br />Baca Juga :<br /><ul style="text-align: left;"><li><a href="http://maycyber-download.blogspot.com/2016/11/cara-membuat-tombol-share-buttons.html">Cara Membuat Tombol Share Buttons Keren, Responsive di Blogger</a> <b><span style="color: red;"><Update></span></b></li><li><a href="http://maycyber-download.blogspot.com/2016/08/cara-memasang-tombol-share-di-blogger.html">Cara memasang Tombol Share di Blogger, Responsive!</a></li><li><a href="http://maycyber-download.blogspot.com/2016/09/cara-membuat-tombol-share-sosial-button.html">Cara Membuat Tombol Share Sosial Button Seperti EvoMagz</a></li><li><a href="http://maycyber-download.blogspot.com/2016/09/cara-membuat-tombol-share-sosial-media.html">Cara Membuat Tombol Share Sosial Media Buttons Melayang di Kiri Blog</a></li></ul><br /><b>Screenshoot : </b><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmNcwyM-iBr9Iv85u3YMrP4x6H17ds9A-Giyup8rnqsTcJ0UwBpfzfb8W8ZQjIDdRupoy75WoUkd0EWc2f1jrEi7h81JHfz_-2zMHjEKz6v9pen8kzTLJQ7d_mOMOqgSucjAgrd1LTS_A/s1600/%255BMayCyber%255D+-+Flat+Share+buttons_1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="[MayCyber] - Tombol Flat Social Share Buttons" border="0" height="58" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmNcwyM-iBr9Iv85u3YMrP4x6H17ds9A-Giyup8rnqsTcJ0UwBpfzfb8W8ZQjIDdRupoy75WoUkd0EWc2f1jrEi7h81JHfz_-2zMHjEKz6v9pen8kzTLJQ7d_mOMOqgSucjAgrd1LTS_A/s640/%255BMayCyber%255D+-+Flat+Share+buttons_1.gif" title="[MayCyber] - Tombol Flat Social Share Buttons" width="640" /></a></div><b><br /></b><br /><div style="text-align: center;"><b><span style="font-size: large;">Cara Membuat Flat Social Share Buttons di Blogger </span></b></div><div style="text-align: left;"><b><br />Cara Pertama :</b><br /><br />1. Buka <a href="http://blogger.com/">Blogger</a> - Kemudian Login.</div><div style="text-align: left;">2. Dashboard - Kemudian Template.</div><div style="text-align: left;">3. Edit HTML.</div><div style="text-align: left;"><br /></div><div style="text-align: left;"><b>Proses Pembuatan : </b><br /><br />1. Temukan <CTRL+F> kode<b> <span style="color: red;">]]></b:skin> </span></b>atau <b style="color: red;"></style></b></div><div style="text-align: left;">2. Copy & Paste kode berikut ini, dan letakkan diatas kode <b><span style="color: red;">]]></b:skin></span></b> atau <b><span style="color: red;"></style></span></b></div><pre data-codetype="CSS" title="CSS"><code class="language-css">/* CSS Share Button */<br />.sharepost li{width:19%;padding:0;list-style:none;}<br />.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}<br />.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}<br />.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}<br />.sharepost li .twitter{background-color:#55acee;}<br />.sharepost li .facebook{background-color:#3b5998;}<br />.sharepost li .gplus{background-color:#dd4b39;}<br />.sharepost li .pinterest{background-color:#cc2127;}<br />.sharepost li .linkedin{background-color:#0976b4;}<br />.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,<br />.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}<br />.sharepost li{float:left;margin-right:1.2%}<br />.sharepost li:last-child{margin-right:0}<br />.sharepost li .fa:before{margin-right:5px}</code></pre>3. Jika sudah dipasang? Temukan lagi kode<b> <span style="color: red;"><data:post.body/></span></b><br />4. Copy & Paste kode berikut ini, dan letakkan dibawah kode <b><span style="color: red;"><data:post.body/></span></b><br /><b>Catatan :</b><br /><div style="text-align: center;"><span style="color: blue;">" Bisanya kode ini lebih dari satu, silakan anda pilih yang kedua. Atau anda bisa mencobanya satu/satu."</span></div><pre data-codetype="HTML" title="HTML"><code class="language-markup"><b:if cond='data:blog.pageType == &quot;item&quot;'><br /> <div class='sharepost'><br /> <ul><br /> <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li><br /><br /> <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li><br /><br /> <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li><br /><br /> <li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li><br /><br /> <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li><br /><br /> </ul><br /> </div> </b:if></code></pre>5. Supaya Responsive? Sekarang kita pasang script <span style="color: blue;">Bootstrapcdn</span><b> </b>atau <span style="color: blue;">Font Awesome</span><b>. </b>Karena Icon pada tombol share ini, menggunakan font awesome icons<b> </b>"Contoh :<b> fa fa-facebook"</b><br />6. Selanjutnya Temukan kode <b><span style="color: red;"></head></span></b><br />7. Copy & Paste kode berikut ini, dan letakkan diatas kode <b><span style="color: red;"></head></span></b><br /><pre data-codetype="jQuery" title="jQuery"><code class="language-javascript"><link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/></code></pre>8. Terakhir, Simpan Template.<br /><br />Sekian Tutorial Blogger kali ini, bila ada kesalahan? Silakan jangan sungkan untuk berkomentar. Terakhir silakan anda lihat postingan blog anda. Sekian dari saya <b>Semoga Bermanfaat!</b> <span style="font-size: large;"><span style="font-size: small;">Thank's For Reading & Sharing and Visited; </span></span><b>Cara Membuat Flat Social Share Buttons di Blogger</b></div></div></div></div>

Diposting oleh Mr Xiulung

Cara Membuat Tombol Share Buttons Keren, Responsive di Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">Mungkin tombol share ini sudah tidak asing lagi dikalangan web atau situs. Karena ini memang dibutuhkan. Hal ini sangat bermanfaat, diantaranya adalah agar pengunjung dapat membagikan sebuah postingan anda di Sosial Media. Menge-share artikel ke sosial media mungkin merupakan salah satu cara untuk meningkatkan popularitas sebuah blog. Jadi jika blog anda ingin menjadi popularitas harus rajin dan konsisten mendistribusikan artikel anda ke berbagai sosial media yang anda miliki. Hal ini agar orang tahu blog Anda untuk melihat terus-menerus alamat blog anda di Timeline mereka.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCOqQ8NNpCcuaagNIhPuwxu769O1h-Gf52HHNs8njplU6Pe4b_n3XKh7GaFD3pieEDNOz4T0dBTOTK10KAW5M7ZpSsKlvOzkbmnP_1h3JbnGH78MmSw71EMVIqcITsib7R7gvIj9do-2w/s1600/%255BMayCyber%255D+-+Share+Buttons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCOqQ8NNpCcuaagNIhPuwxu769O1h-Gf52HHNs8njplU6Pe4b_n3XKh7GaFD3pieEDNOz4T0dBTOTK10KAW5M7ZpSsKlvOzkbmnP_1h3JbnGH78MmSw71EMVIqcITsib7R7gvIj9do-2w/s320/%255BMayCyber%255D+-+Share+Buttons.png" width="320" /></a></div><br />Tujuan berbagi ke sosial media adalah untuk meningkatkan pengunjung jika pengunjung tersebut tertarik dan meng-klik bersama. Salah satu cara untuk berbagi postingan ke sosial media yaitu dengan cara memasang tombol share buttons. Dengan tombol share buttons, pengunjung dapat dengan mudah berbagi artikel ke sosial milik dia dengan hanya satu klik. Dan kali ini saya akan mempostingan sesuai judul yaitu <b>Cara Membuat Tombol Share Buttons Responsive di Blogger</b><br /><b><br /></b><br /><div class="separator" style="clear: both; text-align: left;"><b>Screenshoot : </b></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV0E07q4Usn71iJs9ZN9Ctu5a8-Xu7yceGs34PfQHmn9YYn9zCnnVG7tz_sW_24LYYq1vMxmYgmwCaEIxjMiq5cq_7ijG2wGdzzp2WH30qN8uhAxgqcJgNWQYmFN_EFrK6w3GWdoIEDDQ/s1600/%255BMayCyber%255D+-+Share+buttons_1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="123" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV0E07q4Usn71iJs9ZN9Ctu5a8-Xu7yceGs34PfQHmn9YYn9zCnnVG7tz_sW_24LYYq1vMxmYgmwCaEIxjMiq5cq_7ijG2wGdzzp2WH30qN8uhAxgqcJgNWQYmFN_EFrK6w3GWdoIEDDQ/s640/%255BMayCyber%255D+-+Share+buttons_1.gif" width="640" /></a></div></div><br /><div style="text-align: center;"><b><span style="font-size: large;">Cara Membuat Tombol Share Buttons Keren, Responsive di  Blogger</span></b></div><div style="text-align: left;"><br /><b>Cara Pertama :</b><br />1. Buka Blogger - Kemudian Login.</div><div style="text-align: left;">2. Dashboard - Template.</div><div style="text-align: left;">3. Edit HTML.</div><div style="text-align: left;"><br /></div><div style="text-align: left;"><b>Proses Pembuatan :</b></div><div style="text-align: left;"><br /></div><div style="text-align: left;">1. Temukan <CTRL + F >kode <span style="color: red;"><b>]]></b:skin></b> </span>atau <b style="color: red;"></style></b></div><div style="text-align: left;">2. Copy & Paste kode berikut ini, dan Letakkan diatas kode <span style="color: red;"><b>]]></b:skin></b> </span>atau <b style="color: red;"></style></b></div><pre data-codetype="CSS" title="CSS"><code class="language-css">/* Share Button */<br />.post-footer{margin-top:30px;}<br />.share-post, .multiauthor-box {margin-bottom:50px;}<br />.share-post ul {padding:0;margin:0;text-align:center;}<br />.share-post li{list-style:none;display:inline-block;margin-right:10px;padding:0;font-weight:700;text-transform:uppercase}<br />.share-post li:first-child {font-size:16px;color:#22a1c4;}<br />.share-post li a{display:block;text-align:center;}<br />.share-post span{display:none;}<br />.share-post li a i{display:block;color:#fff;width:40px;height:40px;line-height:40px;font-size:18px;border-radius:40px;font-weight:normal;transition:all .3s;}<br />.share-post{margin-bottom:30px;border-top:1px solid #eff0f0;border-bottom:1px solid #eff0f0;line-height:52px;min-height:52px;margin-left:-30px;margin-right:-30px}<br />.share-post li a i.fa.fa-facebook{background:#3b5998;border:1px solid transparent;}<br />.share-post li a i.fa.fa-twitter{background:#19bfe5;border:1px solid transparent;}<br />.share-post li a i.fa.fa-google-plus{background:#d64136;border:1px solid transparent;}<br />.share-post li a i.fa.fa-linkedin{background:#006699;border:1px solid transparent;}<br />.share-post li a i.fa.fa-pinterest{background:#cb2027;border:1px solid transparent;}<br />.share-post li a i.fa.fa-facebook:hover{background:#fff;color:#3b5998;border:1px solid #4666aa;}<br />.share-post li a i.fa.fa-twitter:hover{background:#fff;color:#19bfe5;border:1px solid #2acef4;}<br />.share-post li a i.fa.fa-google-plus:hover{background:#fff;color:#d64136;border:1px solid #e95247;}<br />.share-post li a i.fa.fa-linkedin:hover{background:#fff;color:#006699;border:1px solid #017ab6;}<br />.share-post li a i.fa.fa-pinterest:hover{background:#fff;color:#cb2027;border:1px solid #e33239;}</code></pre>3. Jika sudah dipasang? Temukan lagi <CTRL <complete id="goog_152603343">+F > </complete>kode <b><span style="color: red;"></head></span></b><br />4. Copy & Paste kode berikut ini, dan Letakkan diatas kode <b><span style="color: red;"></head></span></b><br /> <pre data-codetype="Javascript" title="Javascript"><code class="language-javascript"><script type='text/javascript'><br />//<![CDATA[<br />//CSS Ready<br />function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }<br />loadCSS("http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,300");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");<br />//]]><br /></script></code></pre>5. Terakhir, silakan Anda Temukan <CTRL+F> kode <b><span style="color: red;"><data:post.body/></span></b><br />6. Copy & Paste kode berikut ini, dan letakkan dibawah kode <b><span style="color: red;"><data:post.body/></span></b><br /><b>Catatan : </b><br /><div style="text-align: center;"><div style="text-align: left;"><div style="text-align: center;"><span style="color: blue;"><i>". </i>Biasanya kode ini, lebih dari satu silakan anda pilih yang kedua dari atas. Atau anda bisa mencobanya satu/satu.<i>"</i></span></div></div></div><pre data-codetype="HTML" title="HTML"><code class="language-markup"><div class='share-post'><br /><ul class='entry-share-list clearfix'><br /><li>Share This</li><br /><li class='facebook_share'><br /><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/> </a><br /></li><br /><li class='twitter_share'><br /><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a><br /></li><br /><li class='google_share'><br /><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a><br /></li><br /><li class='linkedin_share'><br /><a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/></a><br /></li><br /><li><a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><i class='fa fa-pinterest'/></a></li><br /></ul><br /></div></code></pre>7. Simpan Template.<br /><br />Sekian Tips blogger kali ini, bila ada kesalahan? Jangan sungkan untuk berkomentar. Terakhir silakan anda lihat postingan blog anda. Sekian dari saya <b>Semoga Bermanfaat!</b> <span style="font-size: large;"><span style="font-size: small;">Thank's For Reading & Sharing and Visited; </span></span><b>Cara Membuat Tombol Share Buttons Keren, Responsive di Blogger</b></div></div></div></div>

Diposting oleh Mr Xiulung

Cara Membuat Popular Post Thumbnail dan Auto Numbering

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><b>Populart Post</b> adalah artikel yang sering dikunjungi atau yang paling banyak dilihat oleh pengunjung. Seperti yang kalian tahu, bahwa Blogger menyediakan Widget Entri Popular. Namun Tampilannya biasa-biasa saja. Popular post ini sangat penting di blogger, karena memudahkan pengunjung dalam melihat artikel apa yang sedang naik daun atau popular. Perlu diketahui Blogger menyediakan Populart Post, namun tidak menarik. Bagaimana kita modifikasi saja, agar terlihat menarik dan enak dipandang. Popular disertakan<b> Thumbnai (Gambar) dan Auto Numbering (Memberi angka otomatis)</b>. Widget Popular post kali ini dibuat dengan Elemen CSS.<br /><br /><div class="separator" style="clear: both; text-align: center;"><br /></div>Setiap pengguna blogspot pasti mencari cara untuk memperindah blog mereka. Blogger Populer Post widget adalah widget, yang menunjukkan sebagian besar melihat posting (7days lalu, terakhir 30 hari dan sepanjang waktu melihat) dan Widget ini pasti selalu dipakai pertama oleh para Blogger. Karena tulisan populer widget adalah yang paling penting dalam setiap blog. Dengan menggunakan tulisan populer widget, Anda dapat meningkatkan <b>traffic blog</b> Anda. Setiap pengguna selalu mencari tulisan paling menarik, bahwa pengguna membuat membantu. Oke langsung saja kita praktekan. .<br /><br /><b>Screenshoot :</b><br /><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_uoB-pVc_tJoHHRsh2JGlLxFjgkVVrwjFWfFQzCuVX11PdxZtGpVq2GQR58GfEiz4XlT9ekm0s6CFgegxFQcVdaWOITPn_BSE2pG5-qiiqfFOLK5olMM4CFKcUOnZkSakPoZbuTzPXVA/s1600/%255BMayCyber%255D+-+Tutorial+Popular+Post_1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_uoB-pVc_tJoHHRsh2JGlLxFjgkVVrwjFWfFQzCuVX11PdxZtGpVq2GQR58GfEiz4XlT9ekm0s6CFgegxFQcVdaWOITPn_BSE2pG5-qiiqfFOLK5olMM4CFKcUOnZkSakPoZbuTzPXVA/s400/%255BMayCyber%255D+-+Tutorial+Popular+Post_1.gif" width="282" /></a></div></div></div><b><span style="font-size: large;"><br />Cara Membuat Popular Post Thumbnail dan Auto Numbering</span></b><br /><br />Cara Pertama :<br /><br />1. Buka <a href="http://blogger.com/">Blogger </a>- Kemudian Login.<br />2. Dashboard - Template.<br />3. Edit HTML<br /><br />Proses Pembuatan :<br /><br />1. Temukan kode <CTRL+F> <span style="color: red;"><b>]]></b:skin></b> </span>atau <b style="color: red;"></style></b><br />2. Copy & Paste kode berikut ini, dan Letakkan diatas kode <b style="color: red;">]]></b:skin> </b>atau<b> <span style="color: red;"></style></span></b><br /><pre data-codetype="CSS" title="CSS"><code class="language-css">/* CSS Popular Post */<br />.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}<br />.PopularPosts ul{list-style:none;font-family:'Oswald',Sans-Serif;font-size:13px;color:#919392;margin:.5em 0}<br />.PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0; border: 1px solid silver;padding: 2px;}<br />.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px}<br />.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear; font-family: Open Sans;}<br />.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(247, 73, 73);color:#fff;width:30px;height:28px;line-height:25px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.5s linear; border-radius: 10%;font-size: 18px; padding: 5px;}<br />.PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#aaacab; border-bottom:1px solid #EFEFEF;transition:all .5s linear;}<br />PopularPosts ul li:last-child{border-bottom:none;}<br />.PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;}<br />.PopularPosts ul li:hover .item-title a{color:#37B576;transition:all .5s linear;}<br />.PopularPosts ul li:hover:before{background-color:#37B576;color:#fff;transition:all .5s linear;}<br />.PopularPosts .item-thumbnail{float:left;margin:0 0 0 10px;}<br />.PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#383838;transition:all .5s linear; font-family: Open Sans;}<br />.PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;}</code></pre>3. Simpan Template.<br />4. Buka Tata Letak/Layout.<br />5. Add a Gadget > Pilih <span style="color: blue;">Entri Populer.</span><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhpJrcf6hG_fx9RGxuiesm4PgLeTsOM1hsq1dA_6wuBuzHco3rElLRVWsTZ1GEgVvQm9oGFcNWDqETVxYccQ2MazSuXTkdZ-p76EKES4yViOnrtBVa5BcErzzom8f6_1uHg9BooaCvcXI/s1600/%255BMayCyber%255D+-+Tutorial+Popular+Post_2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhpJrcf6hG_fx9RGxuiesm4PgLeTsOM1hsq1dA_6wuBuzHco3rElLRVWsTZ1GEgVvQm9oGFcNWDqETVxYccQ2MazSuXTkdZ-p76EKES4yViOnrtBVa5BcErzzom8f6_1uHg9BooaCvcXI/s400/%255BMayCyber%255D+-+Tutorial+Popular+Post_2.gif" width="391" /></a></div>6. Terakhir, Simpan Gadget.<br /><br />Sekian Tutorial Blogger kali ini, Terakhir silakan anda lihat blog anda, maka akan muncul widget tersebut. Sekian dari saya <b>Semoga Bermanfaat!</b> <span style="font-size: large;"><span style="font-size: small;">Thank's For Reading & Sharing and Visited; </span></span><b>Cara Membuat Popular Post Thumbnail dan Auto Numbering</b></div></div>

Diposting oleh Mr Xiulung

Cara Membuat Chat Box Facebook Messenger di Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">Apakah anda ingin mempermudah pengunjung Anda dalam berkomunikasi dengan Admin? Ya, maka widget ini sangat cocok untuk Anda. Fungsi dari <b>Chat Box Facebook Messenger</b> ini mempermudah pengunjung dalam berkomunikasi dengan Admin Blog melalui perantara <b>Facebook Fanspage</b>. Umumnya di Blogger kita hanya menggunakan From "Kontak/Contact" yang tersedia di Blogger untuk menerima Email dari pembaca blog atau pengunjung blog. Tetapi jika Anda ingin menggunakan <a href="http://facebook.com/">Facebook </a>sebagai utusan pertama dalam menerima pesan? Widget ini sangat cocok untuk Anda. Syarat menggunakan <b>Chat Box Facebook Messenger</b> ini adalah Anda hanya mempunyai sebuah <b>Fanspage di Facebook</b>. Pesan yang dikirim oleh pengunjung melalui blog anda akan diterima oleh anda di <b>Fanspage Facebook</b> anda sendiri.<br /><br />Baca Juga : <br /><ul style="text-align: left;"><li><a href="http://maycyber-download.blogspot.com/2016/11/cara-membuat-tabel-pada-blogger.html">Cara Membuat Tabel dan Menu Tabel pada Blogger</a></li></ul>Widget ini cocok untuk blog/website yang mempunyai bisnis online. Karena memudahkan pengunjung dalam berkomunikasi dengan Admin atau pemilik website tersebut. Widget Chat Box Facebook Messenger ini mempesona serta mengambang di kiri blog dan tidak menempati ruang apapun dalam blog anda.<br /><br /><b>Screenshoot : </b><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidUQLCGldsjUcTFBAFkLvzQO-oyzBcQVgue6JcLtucYOtf43TqdMr6O7MrmPHvNr_xemBgWO9m7h5DCPJ5A5BV_DdnOen9QqpLp6X4UgGonaG3_im0Q2ZWAobCGPTNnq3D3SLs_NBTlpM/s1600/%255BMayCyber%255D+-+Chat+Box+Facebook+Messenger_1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidUQLCGldsjUcTFBAFkLvzQO-oyzBcQVgue6JcLtucYOtf43TqdMr6O7MrmPHvNr_xemBgWO9m7h5DCPJ5A5BV_DdnOen9QqpLp6X4UgGonaG3_im0Q2ZWAobCGPTNnq3D3SLs_NBTlpM/s400/%255BMayCyber%255D+-+Chat+Box+Facebook+Messenger_1.gif" width="281" /></a></div><b><br /></b>Cara Pertama : <br /><br />1. Buka <a href="http://blogger.com/">Blogger </a>- Kemudian login<br />2. Dashboard - Tata letak/Layout<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX0R2MDVj-3FWs9xGwVuJy0W_sSNensFUXvsZ72uuh5Av3tngs-XHBzFTkheADUFnPpkBrQRQeREKwEhMZGes6uFhdYd8HkSUCibovzD3fMTG_qxmYDQ4G1aei1UYaVnEMsm2ev9DKkOU/s1600/%255BMayCyber%255D+-+Chat+Box+Facebook+Messenger_2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX0R2MDVj-3FWs9xGwVuJy0W_sSNensFUXvsZ72uuh5Av3tngs-XHBzFTkheADUFnPpkBrQRQeREKwEhMZGes6uFhdYd8HkSUCibovzD3fMTG_qxmYDQ4G1aei1UYaVnEMsm2ev9DKkOU/s400/%255BMayCyber%255D+-+Chat+Box+Facebook+Messenger_2.gif" width="361" /></a></div><br />3. Add a Gadget - Pilih <b>HTML Java Script.</b><br />4. Copy & Paste kode berikut ini, dan Letakkan pada gadget HTML Java Script itu.<br /><pre data-codetype="HTML" title="CSS, HTML, Java Script"><code class="language-markup"><style type="text/css"><br />#b-c-facebook .fbchat_box,#chat_f_b_smal,#f_bt_start_chat{background:#3a5897}<br />#fbchat_box{padding-right:15px;max-width:210px;max-height:50px;display:block;transition:all .3s}<br />#b-c-facebook .f-chat-conent .chat-single a,#chat_f_b_smal{font-family:Arial,sans-serif}<br />#b-c-facebook .fbchat_box,#chat_f_b_smal{text-shadow:0 1px 0 rgba(0,0,0,.1);background-repeat:repeat-x;background-size:auto;background-position:0 0;text-decoration:none}<br />.chat_f_vt{position:fixed;right:10px}<br />#chat_f_b_smal{padding:0 10px;cursor:pointer;width:90px;color:#fff;height:38px;line-height:38px;background-color:#3a5897;border:0;margin-right:12px;font-size:14px;z-index:999999999;bottom:0;border-top-left-radius:5px;border-top-right-radius:5px;bottom:-400px;transition:all .3s;text-align:center;display:block}<br />#chat_f_b_smal:hover{background-color:#3B5998;opacity:1}<br />#b-c-facebook{margin-right:50px;bottom:0;z-index:9999999999;transition:all .3s;width:250px;height:auto;max-height:375px;min-height:38px;box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);border-top-left-radius:5px;border-top-right-radius:5px;overflow:hidden;display:block}<br />#b-c-facebook .f-chat-conent{float:left;width:100%;height:335px;overflow:hidden;display:none;background-color:#fff;position:relative}<br />#b-c-facebook .f-chat-conent .chat-single{float:left;position:absolute;bottom:0;left:0;background-color:#fff;line-height:25px;color:#fff;width:100%}<br />#b-c-facebook .f-chat-conent .chat-single a{float:left;text-decoration:none;margin-left:10px;color:#0C5BB5;font-size:12px}<br />#b-c-facebook .f-chat-conent .chat-single a:hover{color:#F60}<br />#b-c-facebook .fbchat_box label{width:185px}<br />#b-c-facebook .f-chat-conent .chat-single label{float:right;color:silver;margin-right:5px;font-size:12px;font-family:Arial}<br />#b-c-facebook .fbchat_box,#b-c-facebook .fbchat_box label{line-height:20px;margin:0;cursor:pointer;font-family:Arial,sans-serif;font-size:14px}<br />#b-c-facebook .f-chat-conent .chat-single i{color:#0C5BB5}<br />#b-c-facebook .f-chat-conent .fb-page{margin-top:0;float:left;height:310px}<br />#b-c-facebook .fbchat_box{float:left;padding:0 25px;padding-left:15px;width:250px;color:#fff;height:38px;line-height:38px;background-color:#3a5897;border:0;z-index:9999999;margin-right:12px}<br />#b-c-facebook .fbchat_box label{position:absolute;top:10px}<br />//Widget by MayCyber-Download<br />.title-f-chat-icon{margin-left:-10px}<br />#t_f_chat{float:left;position:absolute;right:15px;top:-5px}<br />#t_f_chat a{color:#fff;font-size:17px;font-family:verdana;text-decoration:none}<br />#t_f_chat a:hover i{color:#ff0;text-decoration:none}<br />.chat-left-5{margin-left:2px}<br />#start_chat{position:absolute;width:248px;height:239px;top:70px;left:0;background-color:#fff;padding:10px;float:left;display:none}<br />#start_chat em{font-size:11px;color:gray}<br />.msg_b{color:#434a54;width:80%;word-wrap:break-word;overflow:hidden;font-family:Arial,sans-serif;font-size:14px;background:#edeef1;padding:10px;min-height:13px;margin-bottom:5px;position:relative;margin:5px;border-radius:5px;border:1px solid #dfe3e9}<br />#close_chat{opacity:0.5}<br />#close_chat:hover{opacity:1}<br />.msg_b a{text-decoration:underline;color:#01509E}<br />#f_bt_start_chat{margin:auto;background-color:#3a5897;border-radius:3px;color:#fff;font-family:Arial;font-size:14px;font-weight:bold;padding:9px 35px;text-decoration:none}<br />#f_bt_start_chat:hover{text-decoration:none;opacity:0.8}<br />#start_chat p{margin-top:30px}<br />#fb_alert_num{background-color:#ff0;padding:0 7px;color:red;border-radius:40px;font-size:13px;font-family:Arial;font-weight:700;position:absolute;right:55px;top:12px;height:20px;line-height:20px;display:none!important}<br />.hide_chatbox{display:none}<br />#f_enter_3{margin-top:30px}<br /></style><br /><br /><script><br />//<![CDATA[<br />function check_fist_vist_f(){var _=f_read_cki("check_fist_vist_f");(0==_||""==_)&&(fb_eshow("f-chat-conent"),f_create_cki("check_fist_vist_f","1",1),f_create_cki("f_chat_open","1",1))}<br />function close_chat(){fb_ehide('b-c-facebook'),f_create_cki('close_chat',1,1),$('body').find('.zopim').remove(),fb_eshow('chat_f_b_smal'),on_playsound('click')}<br />function open_chat(){f_create_cki('close_chat','0',1),fb_eshow('b-c-facebook'),fb_eshow('f-chat-conent'),fb_ehide('chat_f_b_smal')}<br />function f_bt_start_chat(){f_create_cki('f_bt_start_chat','1',10),fb_ehide('start_chat'),fb_ehide('fb_alert_num'),on_playsound('click')}<br />function f_c_start_chat(){var t=f_read_cki('f_bt_start_chat');0==t||''==t?(fb_eshow('start_chat '),fb_eshow('fb_alert_num'),f_chat_step()):(fb_ehide('start_chat'),fb_ehide('fb_alert_num'))}<br />function b_f_chat(){var t=f_read_cki('f_chat_open');0==t||''==t?(fb_eshow('f-chat-conent'),f_create_cki('f_chat_open','1',1)):(fb_ehide('f-chat-conent'),f_create_cki('f_chat_open','0',1)),on_playsound('click')}<br />function f_ck_chat(){check_fist_vist_f();f_c_start_chat();var t=f_read_cki('close_chat');if(''==t||0==t||'0'==t){fb_eshow('b-c-facebook'),fb_ehide('chat_f_b_smal');var e=f_read_cki('f_chat_open');(1==e||'1'==e)&&fb_eshow('f-chat-conent')}else fb_eshow('chat_f_b_smal'),fb_ehide('b-c-facebook')}<br />function f_chat_step(){on_playsound('door_bell')<br />fb_eshow('f_enter_1');fb_eshow('f_enter_3');}<br />function fb_eshow(t){document.getElementById(t).style.display='block';}<br />function fb_ehide(t){document.getElementById(t).style.display='none';}<br />function f_create_cki(t,e,n){if(n){var o=new Date;o.setTime(o.getTime()+24*n*60*60*1e3);var c='; expires='+o.toGMTString()}else var c='';document.cookie=t+'='+e+c+'; path=/';}<br />function f_read_cki(t){for(var e=t+'=',n=document.cookie.split(';'),o=0;o<n.length;o++){for(var c=n[o];' '==c.charAt(0);)c=c.substring(1,c.length);if(0==c.indexOf(e))return c.substring(e.length,c.length)}<br />return''}<br />function on_playsound(t){}<br />function ionSound(){1==web_sound&&$.ionSound({sounds:['click','door_bell'],path:fb_path.live_chat_path+'sounds/',multiPlay:!0,volume:'1.0'})}<br />var web_sound=!0;jQuery(document).ready(function(t){t(window).scroll(function(){var e=t(window).width();680>=e?f_create_cki('f_chat_open','0',1):f_create_cki('f_chat_open','1',1)})}),setTimeout(function(){f_ck_chat()},1000);var $=jQuery.noConflict();!function(t){if(!t.ionSound){var e,n,o,c,_={},f={},a=!1,i=function(e){var c,a;-1!==e.indexOf(':')?(c=e.split(':')[0],a=e.split(':')[1]):c=e,f[c]=new Audio,n=f[c].canPlayType('audio/mp3'),o='probably'===n||'maybe'===n?_.path+c+'.mp3':_.path+c+'.ogg',t(f[c]).prop('src',o),f[c].load(),f[c].preload='auto',f[c].volume=a||_.volume},u=function(t){var e,n,o,c;if(-1!==t.indexOf(':')?(n=t.split(':')[0],o=t.split(':')[1]):n=t,e=f[n],'object'==typeof e&&null!==e)<br />if(o&&(e.volume=o),_.multiPlay||a){if(_.multiPlay)<br />if(e.ended)e.play();else{try{e.currentTime=0}catch(i){}<br />e.play()}}else e.play(),a=!0,c=setInterval(function(){e.ended&&(clearInterval(c),a=!1)},250)},l=function(t){var e=f[t];if('object'==typeof e&&null!==e){e.pause();try{e.currentTime=0}catch(n){}}},r=function(t){var e=f[t];if('object'==typeof e&&null!==e){try{f[t].src=''}catch(n){}<br />f[t]=null}};t.ionSound=function(n){if(_=t.extend({sounds:['water_droplet'],path:'/sounds/',multiPlay:!0,volume:'0.5'},n),e=_.sounds.length,'function'==typeof Audio||'object'==typeof Audio)<br />for(c=0;e>c;c+=1)i(_.sounds[c]);t.ionSound.play=function(t){u(t)},t.ionSound.stop=function(t){l(t)},t.ionSound.kill=function(t){r(t)}},t.ionSound.destroy=function(){for(c=0;e>c;c+=1)f[_.sounds[c]]=null;e=0,t.ionSound.play=function(){},t.ionSound.stop=function(){},t.ionSound.kill=function(){}}}}(jQuery);<br />//]]><br /></script><br /><br /><a title="Open Chat" id="chat_f_b_smal" onclick="open_chat()" class="chat_f_vt">Open Chat</a> <div id="b-c-facebook" class="chat_f_vt"> <div id="fbchat_box" onclick="b_f_chat()" class="fbchat_box"> <label>Send Message to Admin</label> <span id="fb_alert_num">1</span> <div id="t_f_chat"><div class='close_chatfb' onclick='hidechatfb()'>&#95;</div></div></div><div id="f-chat-conent" class="f-chat-conent"> <div class="fb-page" data-tabs="messages" data-href="<span style="color: red;">https://facebook.com/MayCyber-Download-1098896160183608/</span>" data-width="250" data-height="310" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="true"> </div><div id="start_chat"> <div id="f_enter_1" class="msg_b hide_chatbox"> Hello! Thanks for visiting my site. Please press Start button to Contact with Admin :) </div><p id="f_enter_3" class="hide_chatbox" align="center"> <a href="javascript:;" onclick="f_bt_start_chat()" id="f_bt_start_chat">Start</a> </p></div></div></div><br /><br /><div id="fb-root"></div><br /><script>(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";fjs.parentNode.insertBefore(js,fjs);}(document,'script','facebook-jssdk'));</script></code></pre><b>Catatan : </b><br /><br />Silakan ganti URL Fanspage saya, dengan URL Fanspage Anda.<br />(<span style="color: blue;">https://facebook.com/maycyber-download-1098896160183608/</span>)<br /><br />5. Simpan.<br /><span style="font-size: large;"><span style="font-size: small;"><b>Jangan lupa Like Fanspage baru kami : <a href="https://facebook.com/MayCyber-Download-1098896160183608/">MayCyber-Download </a></b></span></span><br />Terakhir silakan anda lihat blog anda, maka akan muncul widget tersebut. Sekian dari saya Semoga Bermanfaat! <span style="font-size: large;"><span style="font-size: small;"> Thank's For Reading & Sharing and Visited; <b>Cara Membuat Chat Box Facebook Messenger di Blogger<a href="https://facebook.com/MayCyber-Download-1098896160183608/"></a></b></span></span></div></div>

Diposting oleh Mr Xiulung

Cara Membuat Tabel dan Menu Tabel pada Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">Menemapatkan Menu pada Header itu sudah biasa, kali ini saya akan mempostingan sesuai judul yaitu<b> Cara Membuat Menu Tabel pada Blogger Sederhana</b> dengan <b>Microsoft Word</b>. Kebanyakan para Blogger menempatkan Menu mereka dibagian Menu Header dan Menu Navigasi. Tapi saya ingin kreasikan sendiri menu itu, yaitu dengan cara menempatkan semua menu saya ke dalam Tabel. Jadi semua kategori saya tempatkan jadi satu menu dan satu halaman yaitu dengan Tabel tersebut. Ide ini saya pikirkan, dan saya kreasikan sendiri.<br /><div dir="ltr" style="text-align: left;" trbidi="on"><br />Jika kalian ingin membuat menu anda jadi simple, seperti gambar dibawah. Untuk membuat menu seperti itu anda hanya memerlukan Microsoft Word.<br />Ide ini saya pikirkan, karena menu saya sangat kebanyakan. Jadi saya ingin menempatkan menu itu jadi satu halaman dan satu menu.<br />Mungkin dari artikel ini saya sudah menjelaskan :<br /><br /><span style="color: blue;">1. Cara Membuat Menu Tabel pada Blogger<br />2. Cara Membuat dan Memasang Tabel pada Blogger</span><br /><br /><b>Screenshoot :</b><br /><br /><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJttgJCLZ0eFkwDqNye60wpPswVyIdqRUra1_XoEXzm3vG9ux9E3KTmhkXnhHx2sSJTR8aoxk2eT8gWW_dnZGVFeQtuUHd5oIW6Q_Gx5UyzLlw7cL1lOiiBEdjT6bJJVFCJKy7DoVZbZ8/s1600/%255BMayCyber%255D+-+Cara+Membuat+Menu+Tabel.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="380" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJttgJCLZ0eFkwDqNye60wpPswVyIdqRUra1_XoEXzm3vG9ux9E3KTmhkXnhHx2sSJTR8aoxk2eT8gWW_dnZGVFeQtuUHd5oIW6Q_Gx5UyzLlw7cL1lOiiBEdjT6bJJVFCJKy7DoVZbZ8/s400/%255BMayCyber%255D+-+Cara+Membuat+Menu+Tabel.jpg" width="400" /></a></div></div><br /><b>Screenshoot "<span style="color: blue;">Menu Header Kebanyakan</span>"</b><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcTG01bmma6D-slTaVakUWsTuDD7U0NZRZeLhkz6KikX6MV-vNM1TTgxJaxVeHT-fS035n_xxbNv1tf4yXGlJJzFgpysfOLq-Ha3I-jUk51_1J1aYAWGkqK3hcv85YZ1dn_9Ha7duIiRc/s1600/MayCyber-Download_Menu.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcTG01bmma6D-slTaVakUWsTuDD7U0NZRZeLhkz6KikX6MV-vNM1TTgxJaxVeHT-fS035n_xxbNv1tf4yXGlJJzFgpysfOLq-Ha3I-jUk51_1J1aYAWGkqK3hcv85YZ1dn_9Ha7duIiRc/s640/MayCyber-Download_Menu.jpg" width="640" /></a></div><br /><div style="text-align: center;"><b><span style="font-size: large;">Cara Membuat Menu Tabel pada Blogger dengan Microsoft Word</span></b> </div><br /><b>Cara Pertama : </b><br /><br />1. Buka <b>Microsoft Word</b><br />2. Buatlah Tabel sesuai dengan selera Anda.<br /><span style="font-size: large;"><br /></span><br /><div style="text-align: center;"><span style="font-size: large;"><b>Buat Tabel di Microsoft Word</b></span></div><div style="text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdT1cOt7RpAmlXYuVD-0h74RkXfXQ-HB8jAKVkEs_wkyKiX1H8k2Kti42ucJavhT44ZZ6RG0TKtfz1fVa9OX0XUsVXS7M_a51ybQ-av3lBEwBVqE3peiN9slncUzhSMGlkG95zoQGjDqs/s1600/%255BMayCyber%255D+-+Cara+Membuat+Menu+Tabel.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="476" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdT1cOt7RpAmlXYuVD-0h74RkXfXQ-HB8jAKVkEs_wkyKiX1H8k2Kti42ucJavhT44ZZ6RG0TKtfz1fVa9OX0XUsVXS7M_a51ybQ-av3lBEwBVqE3peiN9slncUzhSMGlkG95zoQGjDqs/s640/%255BMayCyber%255D+-+Cara+Membuat+Menu+Tabel.jpg" width="640" /></a> 3. Jika sudah membuat Tabel di Microsoft Word. Sekarang Save File itu.<span style="color: red;"> Perhatikan</span> cara Save nya agar bisa dipasangkan di Blogger. Silakan pilih "Web Page"<i><b> <HTML></b></i><br /><br /><div style="text-align: center;"><b><span style="font-size: large;">Save. Pilih Web Page </span></b><b><span style="font-size: large;"><HTML></span></b></div></div><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKHozHx4lYNv0WlwZbmklbV9m5tJBA9ZZC9TzLS4LdOOMm3D3Tsjes_VKEcl7A0fDhtioH47UOyV1kgDaI_7pC2vA6lPgFb0Pb0_F0toWcVmCKGWD72u-AKNXDDbf9K2aHjUa_PuiY97M/s1600/%255BMayCyber%255D+-+Tutorial+Menu+Tabel.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="448" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKHozHx4lYNv0WlwZbmklbV9m5tJBA9ZZC9TzLS4LdOOMm3D3Tsjes_VKEcl7A0fDhtioH47UOyV1kgDaI_7pC2vA6lPgFb0Pb0_F0toWcVmCKGWD72u-AKNXDDbf9K2aHjUa_PuiY97M/s640/%255BMayCyber%255D+-+Tutorial+Menu+Tabel.jpg" width="640" /></a></div><br />4. Buka lokasi dimana Anda menyimpan File tadi. Silakan > <b>Open With > Pilih Notepad.</b><br /><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu25cblocRoJ13FhIHCWtUa6_8QnArsxNCAjdZU2PmHl2Hl2CcdiKH-DyqRiq29mnixplH2M9lstD-Ta2WBYJvNbHsqz8rpKjNKL9qLKpV41r233U9VcZLkMI_z6AKGsXeL58N0zapYq8/s1600/%255BMayCyber%255D+-+Tutorial+Menu+Tabel_1.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="366" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu25cblocRoJ13FhIHCWtUa6_8QnArsxNCAjdZU2PmHl2Hl2CcdiKH-DyqRiq29mnixplH2M9lstD-Ta2WBYJvNbHsqz8rpKjNKL9qLKpV41r233U9VcZLkMI_z6AKGsXeL58N0zapYq8/s640/%255BMayCyber%255D+-+Tutorial+Menu+Tabel_1.jpg" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div style="text-align: left;">5. Sehingga menjadi Sebuah <b>kode HTML</b>. Silakan Anda <b>Copy & Paste</b> kode tersebut dan Pastekan di<b> Laman Kosong.</b><br /><i><br /></i><br /><div style="text-align: center;"><b><span style="font-size: large;">Sellect All <Copy> </span></b></div></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt-TPck6LpvsRTtPTlFg0xvJYDglU4XShBaUGXiPQPQWVorZ7X6489Urmom41cxukHOPP1WGd1MP7UONAlk0YAQP-sERiz_I6t1LkNUoAOnaE3_MN7fSTF6iMXhwLfZEJxZQOFT_xTdiU/s1600/%255BMayCyber%255D+-+Tutorial+Menu+Tabel_2.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt-TPck6LpvsRTtPTlFg0xvJYDglU4XShBaUGXiPQPQWVorZ7X6489Urmom41cxukHOPP1WGd1MP7UONAlk0YAQP-sERiz_I6t1LkNUoAOnaE3_MN7fSTF6iMXhwLfZEJxZQOFT_xTdiU/s640/%255BMayCyber%255D+-+Tutorial+Menu+Tabel_2.jpg" width="640" /></a> </div></div><br /></div>6. Setelah men-<b>Sellect all</b> script nya sekarang adalah langkah memasangnya. Anda membuka <b>Laman > Laman kosong.</b><br /><br /><div style="text-align: center;"><b><i> </i><span style="font-size: large;">Buat Laman Baru</span></b></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-UKRmNU4X6ji_wUGYyhQW-k0RlY67J6pH-zghjSUNCSCm1YiMcQW8zRYH0u7QjAXWWuW4PAR973GndpzDe-bxCvnTUZRinxiIuvYMKdr2Ajz7vBAQp2uhVO0TSnTntaVCdpS4RyZ_pfQ/s1600/%255BMayCyber%255D+-+Tutorial+Menu+Tabel_3.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-UKRmNU4X6ji_wUGYyhQW-k0RlY67J6pH-zghjSUNCSCm1YiMcQW8zRYH0u7QjAXWWuW4PAR973GndpzDe-bxCvnTUZRinxiIuvYMKdr2Ajz7vBAQp2uhVO0TSnTntaVCdpS4RyZ_pfQ/s640/%255BMayCyber%255D+-+Tutorial+Menu+Tabel_3.jpg" width="640" /></a></div><br />7.  Jika sudah membuat tabel dan meng-copy script yang sudah di sellect all itu. Langkah selanjutnya adalah bagaimana cara memasangnya di Blogger. Mudah saja, Anda hanya meng-copy kode HTML tadi ke Laman. Contohnya seperti di bawah ini. <br /><br /><div style="text-align: center;"><span style="font-size: large;"><b>Paste kode HTML yang di Notepad ke Laman kosong </b></span></div><div style="text-align: center;"><span style="font-size: large;"><b><Pilih HTML></b></span><br /><br /><div style="text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE9DytTe7bXosBLC_xMu7CSustzj9WTXUUc7977sks7zHxFULW83sFHPOPrisS0uEjSBh0wwOTKFRTq70EAwNyKh_HqaLv5L2Gzk9qzgrepCmjl-h7ckdgtToGOSNCHMLVkN3rCGbWHhw/s1600/%255BMayCyber%255D+-+Tutorial+Menu+Tabel_5.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE9DytTe7bXosBLC_xMu7CSustzj9WTXUUc7977sks7zHxFULW83sFHPOPrisS0uEjSBh0wwOTKFRTq70EAwNyKh_HqaLv5L2Gzk9qzgrepCmjl-h7ckdgtToGOSNCHMLVkN3rCGbWHhw/s640/%255BMayCyber%255D+-+Tutorial+Menu+Tabel_5.jpg" width="640" /></a><span style="font-size: large;"><b><br /> </b></span><i><br /></i></div></div><center><span style="font-size: large;"><b>Cara Membuat Link pada Tabel yang Dibuat Tadi<i> </i></b></span></center><div style="text-align: left;"><span style="font-size: large;"><span style="font-size: small;">Setelah membuat Tabel dan Memasangnya di Blogger, Maka menu itu belom di sisipkan Link. Untuk membuatnya dan mensisipkan link pada tabel itu, silakan ikuti langkah-langkah berikut ini :</span></span><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1zhdfFtmD177DCd6i94ZuRZOT3izRBA1_Zc_Mi7ciU4HIXxAEOT4EavZm9czTAyfL8d8ElMTBMUEAN5Luc8TxZqjnGFO7QAMmPGl-CH5zC1Jsmr8NYOyFO8lnEgvO4BX68zrFjsj1nx0/s1600/%255BMayCyber%255D+-+Tutorial+Memberikan+Link_Tutorial+Menu+Tabel_6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1zhdfFtmD177DCd6i94ZuRZOT3izRBA1_Zc_Mi7ciU4HIXxAEOT4EavZm9czTAyfL8d8ElMTBMUEAN5Luc8TxZqjnGFO7QAMmPGl-CH5zC1Jsmr8NYOyFO8lnEgvO4BX68zrFjsj1nx0/s640/%255BMayCyber%255D+-+Tutorial+Memberikan+Link_Tutorial+Menu+Tabel_6.jpg" width="640" /></a></div><br /><span style="font-size: large;"><span style="font-size: small;">8. Terakhir, Silakan anda publikasikan.</span></span><br /><span style="font-size: large;"><span style="font-size: small;"><br /></span></span><span style="font-size: large;"><span style="font-size: small;">Sekian Tips Blogger kali ini, bila anda merasakan kesulitan. Silakan jangan sungkan untuk berkomentar, pasti komentar anda saya balas. :) Thank's For Reading & Sharing and Visited; <b>Cara Membuat Tabel dan Menu Tabel pada Blogger. - Semoga Bermanfaat! </b></span></span></div></div>

Diposting oleh Mr Xiulung