Gie Project Course: Cara Membuat Tombol Share Super Keren Di Blog

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/>

Nb : mungkin pada template sobat memiliki 3 kode maka carilah kode yang pertama kemudian paste kan kode di bawah ini tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'> <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='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><strong>Facebook</strong></a> </li> <li class='twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a> </li> <li class='googleplus'> <a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a> </li> <li class='pinterest'> <a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a> </li> <li class='stumbleupon'> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a> </li> <li class='delicious'> <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a> </li> <li class='linkedin'> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a> </li> <li class='reddit'> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow'><strong>Reddit</strong></a> </li> <li class='technorati'> <a expr:href='"http://technorati.com/faves?add=" + 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>

Klik save maka hasilnya akan seperti gambar di bawah :

Demikianlah artikel yang berjudul Cara Membuat Tombol Share Super Keren Di Blog | Sosial Media semoga bermanfaat

Cara Membuat Tombol Share Super Keren Di Blog | Sosial Media

1 komentar: