Cara Membuat Tombol Share Super Keren Di Blog | Sosial Media

Labels Blogging

Cara Membuat Tombol Share Super Keren Di Blog | Sosial Media , Assalammualaikum..kali ini saya ingin membahas tentang tutorial blogging nih yaitu cara membuat tombol share sosial media di blog. Tutorial ini selain bertujuan untuk mempercantik blog , juga dapat meningkatkan traffic blog sobat. Karena dengan adanya tombol share sosial media seperti google+ , facebook , twitter ,dll  para pengunjung dapat membagikan artikel anda ke berbagai sosial media tersebut. tentu saja dapat mambantu anda menyebar luas kan artikel anda. Oke berikut ini langkah Cara Membuat Tombol Share Super Keren Di Blog | Sosial Media:

• Pertama masuk terlebih dahulu ke blog masing-masing www.blogger.com
• Kemudian langsung aja menuju Template - Edit HTML
• Kemudian cari kode

<data:post.body/>

<!-- share start here http://satu-delapan.blogspot.com/ --><b:if cond='data:blog.pageType == &quot;item&quot;'>   <div class="sharelordhtml"> <center><div class="headinglordhtml">Like the Post? Do share with your Friends.</div>     <ul class='social' id='cssanimation'>     <li class='facebook'>     <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>     </li>     <li class='twitter'>     <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>     </li>     <li class='googleplus'> <a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>     </li>     <li class='pinterest'> <a href='javascript:void((function()%7Bvar%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)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>     </li>     <li class='stumbleupon'>     <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>     </li>     <li class='delicious'>     <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>     </li>     <li class='linkedin'>     <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>     </li>     <li class='reddit'>     <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>     </li>     <li class='technorati'>     <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>     </li>     </ul></center></div>   <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/>​ <style> ul.social { list-style:none; display:inline-block; margin:15px auto; }  ul.social li { display:inline; float:left; background-repeat:no-repeat; }  ul.social li a { display:block; width:50px; height:50px; padding-right:10px; position:relative; text-decoration:none; }  ul.social li a strong { font-weight:400; position:absolute; left:20px; top:-1px; color:#fff; z-index:9999; text-shadow:1px 1px 0 rgba(0,0,0,0.75); background-color:rgba(0,0,0,0.7); -moz-border-radius:3px; -moz-box-shadow:0 0 5px rgba(0,0,0,0.5); -webkit-border-radius:3px; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5); border-radius:3px; box-shadow:0 0 5px rgba(0,0,0,0.5); padding:3px; }  ul.social li.facebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1PXZzafwCfqWBXFV_LhPZXDNJ6SQNfbhVsh44FwogkXqX1ZWpdZvQ4tnwek-oDci8-g4TwNDQdmXRsV553aUKBr4xRo8kYROzJT5h_q09b-gaJGzm1vZ0-WA20CT-qJH01YgEyRVu7E/s50/facebook.png); }  ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMdA-hpk3DAs1kKCDLh8a4FjD4A0KnRleld4WFVb5I84lzIDzXiwQkTz5GMmfG2PpGF3CH8cVZFAgDNifodutKBphut_zP59CDJIR0YeGnc-YfHjk7V5Q_BVoHMIh6N7b5izhxXJC8SPg/s50/twitter.png); }  ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8nUUxBEpEcswYfO1er15orrCeOVSXbHh6rmfJG-rXzQE2K4Ee1iU0rtIAMPeCeWfD38i0mf0pUVuFs1gKLkBLF3BQTGn1wV9acJLSLFReApfZxRS1MMofuHEm1h8doKzXzJm00Om3RMg/s50/google%252B.png); }  ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2iUBouBXvTr5cMtLFNpNpOmNHvteue4QAgeRMLIO9SDZ5pbaNpYZoPM72UXWq_2XBU68IkHZKSJTL_8EjF13UYo-n2tRA3zr6kyXdH1348wvcBxgGquUui1thMgVprTvkedFanzsy_So/s50/pinterest.png); }  ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisW2uongoXawYP94mATfwQNgT8L_2mBuwyX6Y2fEaC6HKmU4i_hxdruWG-UUwEtHNN10OdUgzDHLIv1Uf9CRettB4k9P4K85dNeDXa5TiHP4FUiY-pCIYbCRSVYEaRDYHPUIaCeB_T2Hg/s50/stumbleupon.png); }  ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6u4haMHV-ZMS6Lg_zhPZokhmTpxZrSsBDk-gdlPs4FV-oDwiI8aZqfyAFOFuZvmfyIN066ggp16hoWiT7iEKRV-OXqhKhjdKCYcZl_vhrBsSVuoCMshEuWj1TbN6l5KXoR8cKvavaSCE/s50/delicious.png); }  ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggUL8bsAYdysDG2Hx7WEq_7fUFtzCi999I-rXWSEKKYDTGiyZiDaJOFUgdFtoIkx3sFJvq8wJqaJf_VJBp6WsdDOX2JusmMTVoIUMPIJKoaKcFIAX1d6pSbUkSE_7wnT9ISDPr1eXzdN4/s50/linkedin.png); }  ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg87vJ2LnxvaXc5YILbA-2x-m4LZWAeI9S6dDvZZyLWvM7Nfl6MtHhLYs0h7Ore2UK9JYruoVrj4VehjAUJkxsaGxfan44lH6lREz66MnLxb4iNLJggBwBhBa4AN5HdKHKFkPSl0k4l7fk/s50/reddit.png); }  ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-9kSOBEjGGimkH2xAgq_0WowfNYH1l_hvt9EdrMm_cFabbkcBMh52BdITzUb7aTx4R1nC4kmsbf7OVWH3cJWM__WfvDwMWu2VoWTFq78pOw3pnaqIdJqu_ERBfI0bu1lYblTerfPvxyvw/s1600/TBI-technorati.png); }  #cssanimation:hover li { opacity:0.2; }  #cssanimation li { -webkit-transition-property:opacity; -webkit-transition-duration:500ms; -moz-transition-property:opacity; -moz-transition-duration:500ms; }  #cssanimation li a strong { opacity:0; -webkit-transition-property:opacity, top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top; -moz-transition-duration:300ms; }  #cssanimation li:hover { opacity:1; }  #cssanimation li:hover a strong { opacity:1; top:-10px; } .headinglordhtml{     font-size:25px;     font-family: 'Englebert', sans-serif; } .sharelordhtml{   border-top:30px solid #3873CC;      padding:16px;         -webkit-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow:    0px 7px 9px rgba(50, 50, 50, 0.75); box-shadow:         0px 7px 9px rgba(50, 50, 50, 0.75);     transition: background .777s; -webkit-transition: background .777s; -moz-transition:background .777s; -o-transition: background .777s; -ms-transition: background .777s;     background:#D9D6FF; }  .sharelordhtml:hover {         background:white;  }  ​ </style>  </b:if><!-- share end here http://satu-delapan.blogspot.com/ -->

• Klik save maka hasilnya akan seperti gambar di bawah :