Cara Membuat Tombol Share Media Social Pada Blog
1. Login ke blogger anda
2. Klik Template - Edit HTML
3. Tekan Ctrl+F dan cari kode <data:post.body/>
4. apabila <data:post.body/> anda ada 2, pilihlah yang ke 2 saja
5. Letakkan kode berikut di bawah kode <data:post.body/>
<!-- share start here http://rizqy-fadhillah.blogspot.com/ --><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/AVvXsEhpnZGr-xKUwrqyghbHSF65GH96zsm54VfSc8QUkqEKnyFyY3bLLdRAyy4yRpEVRSzjBDoo33ncAteu152ll95ySTeG88QwxCDMk5rwOijbm-IcW_C3rX7HjDHOsvJT_-cbEDe6RD7h3Bo/s50/facebook.png); } ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPf6siwDqVegxBYCrYl27Idg3nDIrcTx1roamO0tq5YykF6VlQUKplAL1KuScGtxTGJDadLZlzuBewjK-n_j-Fos75lQYNeEN5GSBgUq9P_jcbJlRjAf2cZOYlyYmkaJ-BOgE5ksnp-w4/s50/twitter.png); } ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivLqposNeGE0_xxPdx5n7XWXvnjpbanT5SCfg6xm8BPb99UymKVu2ab8zkFAS3z2w1h0hFR0V8M9qUZOBy8y4lhsFa2Kgr9b0KYtqmVfhNiRarkxMONAYep6AKBohGnn2iBv3tILhgnnU/s50/google%252B.png); } ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirSkRyQwLQQUMaX7T9CkAhFKdumbkRICXJsSqTOf2dV1II4dCbbI7TMeh8TCPuyfESy6GhkHsY2FZah_4yK5a-S2GuNVX8jGj0kMcZCcQF-tEKfGhMzzqg0qZB4mTCKLY8fN-9llzp_to/s50/pinterest.png); } ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ4_difr5POmN_gAakP4V00Ud25GShbhZKuErpOJXKwUHwqemdaqXkKi52ir2sx20nKvr3ka-el0PCk-8dfLL4pi4EGs58wBEHMGtXH_DQUa55twoCJCwtef7Kyubqmhu8wRqRWBxejpg/s50/stumbleupon.png); } ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmxRfBSS0W_X8PD9PzZn5isixFz2QtNaa4Digi5Ilaid6jUBYrt67h1nYg-1qXyfKTiJ3J8hJmNW1K5SNj0bKIANf5Oitz4MrUSWlJwx1Y8T9aDJyGNadGruz8Hn_ypDgQOh26j8fTmuA/s50/delicious.png); } ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBD5tUbfq4ZvZJXl8RXj3vo4pfc_t5GPwCqAH9JjzypADQPOg4GYOQWILPNkKZB0I08Dl1aPHvmL9aW5fZFQYWc7CpDpjkiGvjwHVtacPWIPtbH-gD01TJNW0T-Lh9hstDt-M3BNZAs0I/s50/linkedin.png); } ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsDnMBGdxQBEyEVum9HGIBLJMODCSsuZlp0PGjDHOZiwZtqX8w_tPx7_NMx3dhWFoxjA1BPjnbi1vrc8MuVPdQICzxrPLSx-CBBAfVmhuaUlVPj9ZHl4i5c_hXXZdcYGONbtsczx-u5HE/s50/reddit.png); } ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfUWJ0AA0ZLEVn2vVEVErLokEC1WxnqAtWe0YkOICy0eC3QNoOhM7tIKkLJjL3xvdkm_I1iNN6-ajwYaSPQ4XjQRjti-jPwBUUBsiS7LItUm1yvepo4RKfoi0ENiqc3UjAQqUuxpW10qS6/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://rizqy-fadhillah.blogspot.com/ -->
6. Langkah Terakhir Klik Simpan Template. Hasilnya seperti ini :
0 Response to "Cara Membuat Tombol Share Media Social Pada Blog"
BACA DULU SEBULUM BERKOMENTAR PERATURAN BERKOMENTAR DI BLOG INI :
- Di Wajibkan Berkomentar Dengan OpenID,supaya mimin bisa berkunjung balik
- Berkomentarlah sesuai artikel diatas,Jika diluar artikel gunakanlah tag [ OOT ].
- Berkomentar Disaran kan Sesuai Artikel
- Untuk Menyisipkan Kode Gunakan <i rel="code">Tulis kode yang sudah diparse di sini</i>
- Untuk Menyisipkan pre Gunakan <i rel="pre">Tulis kode yang sudah diparse di sini</i>
- Untuk Menyisipkan Catatan/Blockquote Gunakan <b rel="quote">Tulis catatan di sini</b>
- Untuk Menyisipkan Link Gunakan <i rel="anchor">URL DISINI</i>
- Untuk Menyisipkan Gambar Langsung Saja Tulis URL Imagenya
- Untuk Menyisipkan Video Youtube Langsung Saja Tulis URL Videonya
Konversi KodeEmoticon