Cara Membuat Share Button Responsive Media Sosial Lengkap di Blog

Cara Membuat Share Button Responsive Media Sosial Lengkap di Blog

ipung berjuang       Comment   

Ketika membaca sebuah artikel yang terdapat di sebuah blog atau website, terkadang terbesit keinginan untuk membagikan ke semua orang atau hanya sekedar untuk disimpan dan di baca nanti. Banyak cara yang dilakukan untuk hal tersebut. Salah satunya dengan cara men-share ke berbagai media sosial yang di milikinya. Tentu hal ini sangat mudah bila di blog atau website tersebut di dukung dengan fitur tombol share button berbagai media sosial, sehingga kita dapat memililih mau di share kemana artikel tersebut.

Tombol Share ke Media Sosial di Blog Responsive

Pada kesempatan kali ini, SinauBlog.com akan berbagi cara membuat share button responsive media sosial lengkap di blog. Silahkan sobat SinauBlog.com mengikuti langkah-langkah berikut ini.

Langkah pertama:

Silahkan login ke blogger > Pilih Tema > Edit HTML. Kemudian Copy kode CSS yang ada di bawah ini dan dan Paste kan tepat di atas kode </Head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.rrssb-buttons{box-sizing:border-box;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:10px;height:36px;margin:0;padding:0;width:100%}
.rrssb-buttons:after{clear:both}
.rrssb-buttons:after,.rrssb-buttons:before{content:' ';display:table}
.rrssb-buttons li{box-sizing:border-box;float:left;height:100%;line-height:13px;list-style:none;margin:0;padding:0 2px}
.rrssb-buttons li.rrssb-line a{background-color:#00C300}
.rrssb-buttons li.rrssb-line a:hover{background-color:#00C300}
.rrssb-buttons li.rrssb-facebook a{background-color:#306199}
.rrssb-buttons li.rrssb-facebook a:hover{background-color:#244872}
.rrssb-buttons li.rrssb-tumblr a{background-color:#32506d}
.rrssb-buttons li.rrssb-tumblr a:hover{background-color:#22364a}
.rrssb-buttons li.rrssb-linkedin a{background-color:#007bb6}
.rrssb-buttons li.rrssb-linkedin a:hover{background-color:#005983}
.rrssb-buttons li.rrssb-twitter a{background-color:#26c4f1}
.rrssb-buttons li.rrssb-twitter a:hover{background-color:#0eaad6}
.rrssb-buttons li.rrssb-googleplus a{background-color:#e93f2e}
.rrssb-buttons li.rrssb-googleplus a:hover{background-color:#ce2616}
.rrssb-buttons li.rrssb-pinterest a{background-color:#b81621}
.rrssb-buttons li.rrssb-pinterest a:hover{background-color:#8a1119}
.rrssb-buttons li.rrssb-whatsapp a{background-color:#43d854}
.rrssb-buttons li.rrssb-whatsapp a:hover{background-color:#28c039}
.rrssb-buttons li.rrssb-bbm a{background-color:#000}
.rrssb-buttons li.rrssb-bbm a:hover{background-color:#000}
.rrssb-buttons li a{background-color:#ccc;border-radius:2px;box-sizing:border-box;display:block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;height:100%;padding:11px 7px 12px 27px;position:relative;text-align:center;text-decoration:none;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;width:100%}
.rrssb-buttons li a .rrssb-icon{display:block;left:10px;padding-top:9px;position:absolute;top:0;width:10%}
.rrssb-buttons li a .rrssb-icon svg{height:17px;width:17px}
.rrssb-buttons li.rrssb-line a .rrssb-icon svg{height:36px;width:36px;}
.rrssb-buttons li.rrssb-bbm a .rrssb-icon svg{height:26px;width:26px;margin: 5px 0 0 0;}
.rrssb-buttons li.rrssb-line a,.rrssb-buttons li.rrssb-bbm a{padding:0}
.rrssb-buttons li.rrssb-line a .rrssb-icon,.rrssb-buttons li.rrssb-bbm a .rrssb-icon{padding-top:0}
.rrssb-buttons li a .rrssb-icon svg circle,.rrssb-buttons li a .rrssb-icon svg path{fill:#fff}
.rrssb-buttons li a .rrssb-text{color:#fff}
.rrssb-buttons li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,.25)}
.rrssb-buttons li.small a{padding:0}
.rrssb-buttons li.small a .rrssb-icon{left:auto;margin:0 auto;overflow:hidden;position:relative;top:auto;width:100%}
.rrssb-buttons li.small a .rrssb-text{visibility:hidden}
.rrssb-buttons.large-format,.rrssb-buttons.large-format li{height:auto}
.rrssb-buttons.large-format li a{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:.2em;padding:8.5% 0 8.5% 12%}
.rrssb-buttons.large-format li a .rrssb-icon{height:100%;left:7%;padding-top:0;width:12%}
.rrssb-buttons.large-format li a .rrssb-icon svg{height:100%;position:absolute;top:0;width:100%}
.rrssb-buttons.large-format li a .rrssb-text{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.rrssb-buttons.small-format{padding-top:5px}
.rrssb-buttons.small-format li{height:80%;padding:0 1px}
.rrssb-buttons.small-format li a .rrssb-icon{height:100%;padding-top:0}
.rrssb-buttons.small-format li a .rrssb-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 .rrssb-icon{height:100%}
.rrssb-buttons.tiny-format li a .rrssb-icon svg{height:70%;width:100%}
.rrssb-buttons.tiny-format li a:active,.rrssb-buttons.tiny-format li a:hover{background-color:transparent}
.rrssb-buttons.tiny-format li.rrssb-line a .rrssb-icon svg path{fill:#0a88ff}
.rrssb-buttons.tiny-format li.rrssb-line a .rrssb-icon:hover .rrssb-icon svg path{fill:#0a88ff}
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon svg path{fill:#306199}
.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon:hover .rrssb-icon svg path{fill:#18304b}
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon svg path{fill:#32506d}
.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon:hover .rrssb-icon svg path{fill:#121d27}
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon svg path{fill:#007bb6}
.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon:hover .rrssb-icon svg path{fill:#003650}
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon svg path{fill:#26c4f1}
.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon:hover .rrssb-icon svg path{fill:#0b84a6}
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon svg path{fill:#e93f2e}
.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon:hover .rrssb-icon svg path{fill:#a01e11}
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon svg path{fill:#b81621}
.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon:hover .rrssb-icon svg path{fill:#5d0b11}
.rrssb-buttons.tiny-format li.rrssb-whatsapp a .rrssb-icon svg path{fill:#43d854}
.rrssb-buttons.tiny-format li.rrssb-whatsapp a .rrssb-icon:hover .rrssb-icon svg path{fill:#1f962d}
.rrssb-buttons.tiny-format li.rrssb-bbm a .rrssb-icon svg path{fill:#000}
.rrssb-buttons.tiny-format li.rrssb-bbm a .rrssb-icon:hover .rrssb-icon svg path{fill:#000}
@media screen and (max-width:414px){.rrssb-buttons.small-format li.rrssb-line a .rrssb-icon svg{height:24px;width:24px;margin: -5px 0 0;}
.rrssb-buttons.small-format li.rrssb-bbm a .rrssb-icon svg{height:18px;width:18px;margin: -2px 0 0;}
}
/*]]>*/
</style>
</b:if>

Langkah kedua:

Silahkan Copy kode Javascript di bawah ini dan Paste kan di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
+function(t,e,r){"use strict";var i={calc:!1};e.fn.rrssb=function(t){var i=e.extend({description:r,image:r,title:r,url:r},t);i.title||(i.description?i.description:"")+(i.url?"\n\n"+i.url:"");for(var s in i)i.hasOwnProperty(s)&&i[s]!==r&&(i[s]=a(i[s]));i.url!==r&&(e(this).find(".rrssb-facebook a").attr("href","https://www.facebook.com/sharer/sharer.php?u="+i.url),e(this).find(".rrssb-tumblr a").attr("href","http://tumblr.com/share/link?url="+i.url+(i.title!==r?"&name="+i.title:"")+(i.description!==r?"&description="+i.description:"")),e(this).find(".rrssb-linkedin a").attr("href","http://www.linkedin.com/shareArticle?mini=true&url="+i.url+(i.title!==r?"&title="+i.title:"")+(i.description!==r?"&summary="+i.description:"")),e(this).find(".rrssb-twitter a").attr("href","https://twitter.com/intent/tweet?text="+(i.description!==r?i.description:"")+"%20"+i.url),e(this).find(".rrssb-googleplus a").attr("href","https://plus.google.com/share?url="+i.url),e(this).find(".rrssb-pinterest a").attr("href","http://pinterest.com/pin/create/button/?url="+i.url+(i.image!==r?"&amp;media="+i.image:"")+(i.description!==r?"&description="+i.description:"")),e(this).find(".rrssb-bbm a").attr("href","bbmi://api/share?message="+i.url+(i.title!==r?"?ref=bbm&userCustomMessage="+i.title:"")),e(this).find(".rrssb-whatsapp a").attr("href","whatsapp://send?text="+(i.description!==r?i.description+"%20":i.title!==r?i.title+"%20":"")+i.url)),e(this).find(".rrssb-line a").attr("href","https://timeline.line.me/social-plugin/share?url="+i.url)};var s=function(){var t=e("<div>"),r=["calc","-webkit-calc","-moz-calc"];e("body").append(t);for(var s=0;s<r.length;s++)if(t.css("width",r[s]+"(1px)"),1===t.width()){i.calc=r[s];break}t.remove()},a=function(t){if(t!==r&&null!==t){if(null===t.match(/%[0-9a-f]{2}/i))return encodeURIComponent(t);t=decodeURIComponent(t),a(t)}},n=function(){e(".rrssb-buttons").each(function(t){var r=e(this),i=e("li:visible",r),s=i.length,a=100/s;i.css("width",a+"%").attr("data-initwidth",a)})},l=function(){e(".rrssb-buttons").each(function(t){var r=e(this),i=r.width(),s=e("li",r).not(".small").eq(0).width(),a=e("li.small",r).length;if(s>80&&a<1){r.addClass("large-format");var n=s/12+"px";r.css("font-size",n)}else r.removeClass("large-format"),r.css("font-size","");i<25*a?r.removeClass("small-format").addClass("tiny-format"):r.removeClass("tiny-format")})},o=function(){e(".rrssb-buttons").each(function(t){var r=e(this),i=e("li",r),s=i.filter(".small"),a=0,n=0,l=s.eq(0),o=parseFloat(l.attr("data-size"))+55,c=s.length;if(c===i.length){var d=42*c,u=r.width();d+o<u&&(r.removeClass("small-format"),s.eq(0).removeClass("small"),h())}else{i.not(".small").each(function(t){var r=e(this),i=parseFloat(r.attr("data-size"))+55,s=parseFloat(r.width());a+=s,n+=i});var m=a-n;o<m&&(l.removeClass("small"),h())}})},c=function(t){e(".rrssb-buttons").each(function(t){var r=e(this),i=e("li",r);e(i.get().reverse()).each(function(t,r){var s=e(this);if(s.hasClass("small")===!1){var a=parseFloat(s.attr("data-size"))+55,n=parseFloat(s.width());if(a>n){var l=i.not(".small").last();e(l).addClass("small"),h()}}--r||o()})}),t===!0&&u(h)},h=function(){e(".rrssb-buttons").each(function(t){var r,s,a,l,o,c=e(this),h=e("li",c),d=h.filter(".small"),u=d.length;u>0&&u!==h.length?(c.removeClass("small-format"),d.css("width","42px"),a=42*u,r=h.not(".small").length,s=100/r,o=a/r,i.calc===!1?(l=(c.innerWidth()-1)/r-o,l=Math.floor(1e3*l)/1e3,l+="px"):l=i.calc+"("+s+"% - "+o+"px)",h.not(".small").css("width",l)):u===h.length?(c.addClass("small-format"),n()):(c.removeClass("small-format"),n())}),l()},d=function(){e(".rrssb-buttons").each(function(t){e(this).addClass("rrssb-"+(t+1))}),s(),n(),e(".rrssb-buttons li .rrssb-text").each(function(t){var r=e(this),i=r.width();r.closest("li").attr("data-size",i)}),c(!0)},u=function(t){e(".rrssb-buttons li.small").removeClass("small"),c(),t()},m=function(e,i,s,a){var n=t.screenLeft!==r?t.screenLeft:screen.left,l=t.screenTop!==r?t.screenTop:screen.top,o=t.innerWidth?t.innerWidth:document.documentElement.clientWidth?document.documentElement.clientWidth:screen.width,c=t.innerHeight?t.innerHeight:document.documentElement.clientHeight?document.documentElement.clientHeight:screen.height,h=o/2-s/2+n,d=c/3-a/3+l,u=t.open(e,i,"scrollbars=yes, width="+s+", height="+a+", top="+d+", left="+h);u&&u.focus&&u.focus()},f=function(){var t={};return function(e,r,i){i||(i="Don't call this twice without a uniqueId"),t[i]&&clearTimeout(t[i]),t[i]=setTimeout(e,r)}}();e(document).ready(function(){try{e(document).on("click",".rrssb-buttons a.popup",{},function(t){var r=e(this);m(r.attr("href"),r.find(".rrssb-text").html(),580,470),t.preventDefault()})}catch(t){}e(t).resize(function(){u(h),f(function(){u(h)},200,"finished resizing")}),d()}),t.rrssbInit=d}(window,jQuery);
//]]>
</script>
</b:if>

Langkah ketiga:

Silakan Sobat SinauBlog.com Copy kode di bawah ini dan kemudian mencari kode ini <b:includable id='shareButtons' var='post'>, Lalu Paster kode di bawah kode tersebut.

<b:includable id='share-tool' var='post'>
<div class='share-wrapper' id='share-wrapper'>
  <ul class='rrssb-buttons'>
    <li class='rrssb-facebook'>
      <a class='popup' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url'>
        <span class='rrssb-icon'>
            <svg viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'><path d='M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z'/></svg>
          </span>
        <span class='rrssb-text'>facebook</span>
      </a>
    </li>
    <li class='rrssb-twitter'>
      <a class='popup' expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url'>
        <span class='rrssb-icon'>
            <svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62a15.093 15.093 0 0 1-8.86-2.32c2.702.18 5.375-.648 7.507-2.32a5.417 5.417 0 0 1-4.49-3.64c.802.13 1.62.077 2.4-.154a5.416 5.416 0 0 1-4.412-5.11 5.43 5.43 0 0 0 2.168.387A5.416 5.416 0 0 1 2.89 4.498a15.09 15.09 0 0 0 10.913 5.573 5.185 5.185 0 0 1 3.434-6.48 5.18 5.18 0 0 1 5.546 1.682 9.076 9.076 0 0 0 3.33-1.317 5.038 5.038 0 0 1-2.4 2.942 9.068 9.068 0 0 0 3.02-.85 5.05 5.05 0 0 1-2.48 2.71z'/></svg>
          </span>
        <span class='rrssb-text'>twitter</span>
      </a>
    </li>
    <li class='rrssb-googleplus'>
      <a class='popup' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url'>
        <span class='rrssb-icon'>
            <svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M21 8.29h-1.95v2.6h-2.6v1.82h2.6v2.6H21v-2.6h2.6v-1.885H21V8.29zM7.614 10.306v2.925h3.9c-.26 1.69-1.755 2.925-3.9 2.925-2.34 0-4.29-2.016-4.29-4.354s1.885-4.353 4.29-4.353c1.104 0 2.014.326 2.794 1.105l2.08-2.08c-1.3-1.17-2.924-1.883-4.874-1.883C3.65 4.586.4 7.835.4 11.8s3.25 7.212 7.214 7.212c4.224 0 6.953-2.988 6.953-7.082 0-.52-.065-1.104-.13-1.624H7.614z'/></svg>            </span>
        <span class='rrssb-text'>google+</span>
      </a>
    </li>

    <li class='rrssb-tumblr'>
      <a expr:href='&quot;http://tumblr.com/share/link?url=&quot; + data:post.url + &quot;&amp;name=&quot; + data:post.title + &quot;&amp;description=&quot; + data:post.snippet' target='_blank'>
        <span class='rrssb-icon'>
            <svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M18.02 21.842c-2.03.052-2.422-1.396-2.44-2.446v-7.294h4.73V7.874H15.6V1.592h-3.714s-.167.053-.182.186c-.218 1.935-1.144 5.33-4.988 6.688v3.637h2.927v7.677c0 2.8 1.7 6.7 7.3 6.6 1.863-.03 3.934-.795 4.392-1.453l-1.22-3.54c-.52.213-1.415.413-2.115.455z'/></svg>
          </span>
        <span class='rrssb-text'>tumblr</span>
      </a>
    </li>

    <li class='rrssb-linkedin'>
      <a class='popup' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url'>
        <span class='rrssb-icon'>
            <svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M25.424 15.887v8.447h-4.896v-7.882c0-1.98-.71-3.33-2.48-3.33-1.354 0-2.158.91-2.514 1.802-.13.315-.162.753-.162 1.194v8.216h-4.9s.067-13.35 0-14.73h4.9v2.087c-.01.017-.023.033-.033.05h.032v-.05c.65-1.002 1.812-2.435 4.414-2.435 3.222 0 5.638 2.106 5.638 6.632zM5.348 2.5c-1.676 0-2.772 1.093-2.772 2.54 0 1.42 1.066 2.538 2.717 2.546h.032c1.71 0 2.77-1.132 2.77-2.546C8.056 3.593 7.02 2.5 5.344 2.5h.005zm-2.48 21.834h4.896V9.604H2.867v14.73z'/></svg>
          </span>
        <span class='rrssb-text'>linkedin</span>
      </a>
    </li>

    <li class='rrssb-pinterest'>
      <a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title' target='_blank'>
        <span class='rrssb-icon'>
            <svg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'><path d='M14.02 1.57c-7.06 0-12.784 5.723-12.784 12.785S6.96 27.14 14.02 27.14c7.062 0 12.786-5.725 12.786-12.785 0-7.06-5.724-12.785-12.785-12.785zm1.24 17.085c-1.16-.09-1.648-.666-2.558-1.22-.5 2.627-1.113 5.146-2.925 6.46-.56-3.972.822-6.952 1.462-10.117-1.094-1.84.13-5.545 2.437-4.632 2.837 1.123-2.458 6.842 1.1 7.557 3.71.744 5.226-6.44 2.924-8.775-3.324-3.374-9.677-.077-8.896 4.754.19 1.178 1.408 1.538.49 3.168-2.13-.472-2.764-2.15-2.683-4.388.132-3.662 3.292-6.227 6.46-6.582 4.008-.448 7.772 1.474 8.29 5.24.58 4.254-1.815 8.864-6.1 8.532v.003z'/></svg>
          </span>
        <span class='rrssb-text'>pinterest</span>
      </a>
    </li>

    <li class='rrssb-whatsapp'>
      <a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%3A%20&quot; + data:post.url'>
        <span class='rrssb-icon'>
            <svg height='90' viewBox='0 0 90 90' width='90' xmlns='http://www.w3.org/2000/svg'><path d='M90 43.84c0 24.214-19.78 43.842-44.182 43.842a44.256 44.256 0 0 1-21.357-5.455L0 90l7.975-23.522a43.38 43.38 0 0 1-6.34-22.637C1.635 19.63 21.415 0 45.818 0 70.223 0 90 19.628 90 43.84zM45.818 6.983c-20.484 0-37.146 16.535-37.146 36.86 0 8.064 2.63 15.533 7.076 21.61l-4.64 13.688 14.274-4.537A37.122 37.122 0 0 0 45.82 80.7c20.48 0 37.145-16.533 37.145-36.857S66.3 6.983 45.818 6.983zm22.31 46.956c-.272-.447-.993-.717-2.075-1.254-1.084-.537-6.41-3.138-7.4-3.495-.993-.36-1.717-.54-2.438.536-.72 1.076-2.797 3.495-3.43 4.212-.632.72-1.263.81-2.347.27-1.082-.536-4.57-1.672-8.708-5.332-3.22-2.848-5.393-6.364-6.025-7.44-.63-1.076-.066-1.657.475-2.192.488-.482 1.084-1.255 1.625-1.882.543-.628.723-1.075 1.082-1.793.363-.718.182-1.345-.09-1.884-.27-.537-2.438-5.825-3.34-7.977-.902-2.15-1.803-1.793-2.436-1.793-.63 0-1.353-.09-2.075-.09-.722 0-1.896.27-2.89 1.344-.99 1.077-3.788 3.677-3.788 8.964 0 5.288 3.88 10.397 4.422 11.113.54.716 7.49 11.92 18.5 16.223 11.01 4.3 11.01 2.866 12.996 2.686 1.984-.18 6.406-2.6 7.312-5.107.9-2.513.9-4.664.63-5.112z'/></svg>
          </span>
        <span class='rrssb-text'>Whatsapp</span>
      </a>
    </li>
    <li class='rrssb-line'>
      <a expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:post.url' target='_blank'>
        <span class='rrssb-icon'>
           <svg class='icon icons8-LINE' viewBox='0 0 48 48'>
    <path d='M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23      C6,39.09,8.91,42,12.5,42z' style='fill:#00C300;'/>
    <path d='M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637      c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185      c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001      C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01      c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687      C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01      c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652      c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688      c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035      c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z      M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917      c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603      c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604      c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z' style='fill:#FFFFFF;'/>
  </svg>
          </span>
        <span class='rrssb-text'>line</span>
      </a>
    </li>
    <li class='rrssb-bbm'>
      <a expr:href='&quot;bbmi://api/share?message=&quot; + data:post.url + &quot;?ref=bbm&amp;userCustomMessage=&quot; + data:post.title'>
        <span class='rrssb-icon'>
            <svg class='icon BlackBerry-Icon' viewBox='0 0 5067 5067'>
    <rect height='5067' rx='489' ry='489' style='fill: black;' width='5067'/>
    <g>
      <path d='M1327 885l2018 0c141,0 269,58 361,150 93,93 150,221 150,361l0 1457c0,141 -57,268 -150,361 -92,93 -220,150 -361,150l-1584 0 -724 737c64,-258 143,-487 226,-741 -115,-15 -219,-68 -297,-146 -93,-93 -150,-220 -150,-361l0 -1457c0,-140 57,-268 150,-361 92,-92 220,-150 361,-150zm2018 135l-2018 0c-104,0 -197,43 -266,111 -68,68 -110,162 -110,265l0 1457c0,103 42,197 110,265 69,69 162,111 266,111l27 0 90 0 -26 87c-11,37 -57,177 -102,312l369 -379 20 -20 28 0 1612 0c104,0 198,-42 266,-111 68,-68 110,-162 110,-265l0 -1457c0,-103 -42,-197 -110,-265 -68,-68 -162,-111 -266,-111z' style='fill: white; fill-rule: nonzero;'/>
      <path d='M1655 1452l310 0c91,0 149,75 129,166l0 0c-19,91 -110,166 -201,166l-310 0 72 -332z' style='fill: white;'/>
      <path d='M1565 1938l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/>
      <path d='M2291 1452l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
      <path d='M2200 1938l309 0c92,0 150,74 130,165l0 0c-20,92 -111,166 -202,166l-309 0 72 -331z' style='fill: white;'/>
      <path d='M2872 1748l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/>
      <path d='M2781 2233l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
      <path d='M2118 2419l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/>
      <path d='M3819 1091l10 0c233,0 423,190 423,422l0 1715c0,232 -190,422 -423,422l-13 0 225 735 -719 -735 -1224 0c-165,0 -308,-96 -378,-235 17,2 34,2 51,2l1586 0c301,0 548,-246 548,-547l0 -1486c0,-107 -32,-208 -86,-293z' style='fill: white;'/>
    </g>
  </svg>
          </span>
        <span class='rrssb-text'>blackberry</span>
      </a>
    </li>
  </ul>
</div>
</b:includable>

Langkah terakhir:

Copy dan Pastekan kode di bawah ini tepat dibawah kode </article> atau lainnya, sesuai kebutuhan Anda

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='share-tool'/>
</b:if>

Selamat mencoba.

Sobat SinauBlog.com dapat memberikan kritik atau saran atau pertanyaan lainnya di email: ExploreBeasiswa@gmail.com atau hub. 085602060009 atau langsung di laman Kontak.

Media Partner:
Admin Ipung Berjuang, Explore Geografi, Explore Beasiswa.com, Explore Bencana, Seputar Jogja.com 

Cara Cepat Kilat Agar Artikel Terindeks Google Dalam Hitungan Detik

Cara Cepat Kilat Agar Artikel Terindeks Google Dalam Hitungan Detik

ipung berjuang       Comment   

Halo sobat SinauBlog.com, kali ini kita akan belajar bagaimana caranya agar tulisan artikel kita yang sudah di publish di blog cepat ter-indeks di google. Pertanyaan yang seringkali dilontarkan para blogger pemula. Setelah di publish, di coba cek searching di google tidak segera muncul. Hehehe. mungkin masih tidur mbah google nya. Sering banget kan ini terjadi. Bagi para blogger pemula. Kali ini saya akan bocorkan triks rahasianya agar cepat masuk daftar pencarian orang hilang, ehh maksudnya masuk daftar pencarian di google. Syaratnya tanpa syarat. Cukup ikuti aja perintahnya. Hehehe..

Perlu di ketahui, Artikel yang masuk ke Google sangat beragam dan banyak sekali. Bayangkan, ribuan juta blogger seperti kalian menulis dan publish bersamaan Pasti banyak persaingan kan. Kalau kita bisa lihat, mungkin artikel-artikel tersebut saling berantem rebutan menempati posisi teratas hehehe. Jadi sistem kerja google pasti sama yang kita bayangkan. Banyak filterisasi dan butuh proses agar terindeks google secara normal. Kira-kira ya butuh 90 hari alias 3 bulan-an agar masuk Google.

Google URL Submit agar artikel cepat terindeks Google

Tapi, kali ini jangan berkecil hati dan gundah gulana. Masak ngeblog susah-susah harus nunggu lama banget gitu. Nah, ini nih caranya agar artikel kita dapat secepat kilat terindeks google dalam hitungan detik. Langsung saja bro, ikuti langkah berikut ini.

1. Salin URL artikel kalian yang akan di masukkan ke Google.
2. Masuk link Google URL Submit di sini 
3. Langsung saja copas URL artikelnya di laman Google URL Submit
4. Klik kirim. 
5. Langsung coba searching dan masukkan keyword artikel anda. 
6. Untuk memastikan benar-benar terindeks, Silahkan coba berkali-kali.

Cara Daftar Histats Dan Memasang Di Blog Terbaru

Cara Daftar Histats Dan Memasang Di Blog Terbaru

ipung berjuang       1 comment   

Histats merupakan salah satu widget yang sangat membantu para blogger untuk mengetahui jumlah pengunjung blog atau website. Pengunjuang blog atau web akan dipantau jumlahnya mulai dari harian, mingguan, atau bulanan. Adanya histats akan mempermudah anda dalam melakukan kontrol blog atau website mengenai jumlah pengunjung yang semakin meningkat atau menurun.

Tampilan halaman website www.Histats.COM

Layanan Histats ini disediakan gratis tanpa di pungut biaya sepersen pun. cara daftarnya pun juga sangat mudah dan tidak berlebit-belit.

Cara Daftar Histats Terbaru

1. Pendaftaran Histats dapat dilakukan dengan cara  mengunjungi situs official di Hitstats.COM.
2. Setelah itu masukkan url blog atau website anda dan kemudian klik "Register".
3. Lengkapi isian formulir pendaftaran yang tersedia
4. Centang pada "Privacy" dan isi "Captcha" yang sudah tersedia kemudian klik "Register"
5. Jika sudah ada pemberitahuan "Registration Done ! Please check your mailbok !" maka langsung saja cek email dan melakukan konfirmasi.
6. Kunjungi link yang tersedia di email dan anda telah berhasil mendaftar.

Cara memasang Widget Histats di Blog

Setelah mendaftar dan melakukan konfirmasi, anda langsung dapat kembali mengunjungi situs www.histats.com untuk melakukan log in. Setelah log in anda dapat melakukan pembuatan widget agar dapat di pasang di blog. adapun tata cara memasang widget Histats di Blog sebagai berikut.

1. Log in Histats.com
2. Setelah berhasil log in, klik "add a website"
3. Selanjutnya isilah profil blog/website anda
4. Selesai isi formulir kemudian klik "Continou"
5. Selamat anda telah selesai mendaftarkan blog. selanjutnya klik URL blog anda.
6. Pilik Counter Code
7. Klik Add New Counter
8. Pilih tampilan histats yang sesuai dengan selera anda
9. Centang pilihan rekam jejak yang ingin ditampilkan
10. Klik Save untuk menyimpan pilihan
11. selanjutnya, anda pilih standar counter dan copy kode histats untuk di pasang di blog
12. Buka akun blogger.COM
13. pilih menu tata letak >> tambah Gadget >> Pilih HTML >> Copas Kode tadi
14. Simpan dan lihat apa yang terjadi heheheh.. Selamat anda telah berhasil.

Cara Membuat Contact Form di Menu Kontak Pada Postingan Blog

Cara Membuat Contact Form di Menu Kontak Pada Postingan Blog

ipung berjuang       Comment   

Bagi para pengunjung blog atau website, seringkalai kita membutuhkan informasi detail dan lebih. Biasanya kita akan mencari inforemasi tersebut kepada pengelola atau admin blog atau website. untuk mendapatkannya, hal yang kita cari terlebih dahulu adalah menu kontak yang terdapat di dalam web atau blog. Nah inilah salah satu fungsi keberadaan cantact form yang terdapat pada halaman postingan atau laman blog. Semua tidak lain adalah untuk mempermudah pengunjung menghubungi kita.

Contact form biasanya dibuat dengan sederhana dan mudah dimengerti baik pengirim maupun penerima. Adapun isi yang terdapat conttact form diantaranya terdapat nama, email, dan pesan yang akan di sampaikan. Setelah di kirim, pesan akan secara otomatis masuk ke email yang kita gunakan. So mudah banget kan kinerjanya.

Contoh Contact Form yang telah di buat di blog ipungberjuang.blogspot.com

Gambar di atas adalah contoh hasil contact form yang telah di buat. Nah, untuk membuat seperti yang di contohkan tersebut. Ikuti prosedur langkah-langkahnya sebagai berikut.

Langkah pertma membuat Contact Form di halaman postingan atau laman blog. di sarankan lebih baik di buat pada laman blog karena postingan ini memang edisi khusus.

1. Login ke blogger, dari halaman dasbor pilih pengaturan Tata letak. 
2. Lalu klik tambahkan Gadget > Gadget Lainnya > lalu pilih Formulir Kontak > Dan letakkan di bagian sidebar paling bawah. 
3. Selanjutnya, memasukan formulir kontak ke halaman posting. Buatlah artikel baru atau buat dilaman > Laman baru > Laman Kosong. Dan Copi kode dibawah ini lalu pastekan dibagian HTML.
4. Terakhir beri judul dan publikasi

<form name='contact-form'><div>Nama Kamu:</div><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Email:</div><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> 
<div>Pesan:</div> <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <p></p><input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<div style='text-align: center; max-width: 450px; width: 100%'><p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p><p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </div></form>

Langkah ke dua: Atur tinggi dan panjang Contact Form, Nama, Email, dan Isi Pesan

1. Ke pengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode ini kedalamnya
2. Lalu terapkan ke blog, jika ingin merubah tingginya tambahkan kode height:100 px;.Silakan diatur sendiri.

/* untuk mengatur ukuran form name dan email*/.contact-form-name, .contact-form-email { max-width: 300px;width: 100%;}/* untuk mengatur ukuran form pesan*/ .contact-form-email-message {max-width: 300px;width: 100%;}