Cara Menambahkan Tombol Share Media Sosial di Bawah Postingan

Share this article on :

Pada kesempatan ini admin akan membahas Cara Menambahkan Tombol Share Media Sosial di Bawah Postingan yang terdiri dari media sosial Facebook, Twitter, Google Plus, Pinterest, StumbleUpon, Delicious, LinkedIn dan Reddit. Adapun fungsi tombol share ini adalah untuk meningkatkan lalu lintas blog sobat dan pastinya bisa meningkatkan SEO blog sobat. Sebelum ke pembahasan admin kasih dulu deh previewnya.


Like the Post? Do share with your Friends.


1. Pertama-tama login dulu ke blog sobat

2. Pilih template → Edit HTML

3. Tekan ctrl+f lalu cari kode <div class='post-footer-line post-footer-line-1'/>

4. Copy kode dibawah ini lalu pastekan dibawah <div class='post-footer-line post-footer-line-1'/>


<!-- share start here http://hacksevenseven.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://lh6.googleusercontent.com/-qXQfMpK5yyM/UBgnVp-zyWI/AAAAAAAAFb0/GRnVp4eqO1g/s50/facebook.png); }  ul.social li.twitter { background-image:url(https://lh3.googleusercontent.com/-XoczCzeugFg/UBgnW9gfOMI/AAAAAAAAFcg/N9qWk37w_SA/s50/twitter.png); }  ul.social li.googleplus { background-image:url(https://lh3.googleusercontent.com/-XZA2IVaxutU/UBgnV81TTMI/AAAAAAAAFb8/5-SxVYGD3WU/s50/google%252B.png); }  ul li.pinterest { background-image: url(https://lh6.googleusercontent.com/-Hfy8WKpzfKc/UBgnWW00Z8I/AAAAAAAAFcM/5ppIBhBfhUo/s50/pinterest.png); }  ul.social li.stumbleupon { background-image:url(https://lh5.googleusercontent.com/-D89Zc49MpsM/UBgnWuUueaI/AAAAAAAAFcY/EhOMIXDHPTY/s50/stumbleupon.png); }  ul.social li.delicious { background-image:url(https://lh5.googleusercontent.com/-8YgPtME6n9U/UBgnVlFappI/AAAAAAAAFb4/TJRielU0dVU/s50/delicious.png); }  ul.social li.linkedin { background-image:url(https://lh6.googleusercontent.com/-4yZnL9kjU9w/UBgnWDrtReI/AAAAAAAAFcE/WbW8M0G1QTE/s50/linkedin.png); }  ul.social li.reddit { background-image:url(https://lh5.googleusercontent.com/-BVN-XnkL53g/UBgnWdIXDBI/AAAAAAAAFcQ/v4GRUCSsPLA/s50/reddit.png); }  ul.social li.technorati { background-image:url(http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/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://hacksevenseven.blogspot.com/ -->

5. Terakhir save template.



TAG : Cara menambahkan tombol share di blog, cara menambahkan tombol share dibawah postingan, cara menambakan tombol share facebook, twitter dan google. 

Related Post

Ditulis Oleh : nanda zulvi rahman

Nanda Zulvi Rahman Artikel Cara Menambahkan Tombol Share Media Sosial di Bawah Postingan ini ditulis oleh nanda zulvi rahman pada hari Saturday, June 22, 2013 pukul 11:11 PM. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Cara Menambahkan Tombol Share Media Sosial di Bawah Postingan dapat Anda sampaikan melalui kotak komentar dibawah ini. Bagi Sobat yang ingin mengcopy paste atau menyebar-luaskan artikel ini, tolong letakkan link dibawah ini sebagai sumbernya

2 comments on Cara Menambahkan Tombol Share Media Sosial di Bawah Postingan :

fahmy seiei said... Reply comment Sunday, 30 November, 2014

ijin nyoba gan

Dzaky Dewan said... Reply comment Saturday, 05 December, 2015

Makasih ilmunya gan, sangat bermanfat nih

Jangan malu untuk meninggalkan komentar, kritik dan saran anda. berkomentarlah dengan baik, sopan, sesuai dgn isi postingan dan dengan bahasa Indonesia yang benar. No link aktif. no spam!

 

Recent Comment

:: Get this Widget here! ::

Friends Link

YOU'RE NEXT HERE!
Mau link anda dipasang disini juga? lihat persyaratan tukar link disini

SITE INFO


JOIN US ON FACEBOOK AND GET UPDATE! close

Get this widgethere