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/>
<!-- share start here http://satu-delapan.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/AVvXsEgXh9fmdwffBisJxHxStuHumKgMy9WNUCprWQQ4oeSpbMLaetWyt-dAhyphenhyphengityx7q_keYrzHzihxsdWYN-X-vbBWbgipUknsOuAMPzlJnhHTlejOXh7dhFK3y2bflOVc06xtwmze_iUFCNI/s50/facebook.png); } ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPIacuqZQEtHHVzzxW_fsAkk4FJa9WpYAnh67ACoLI9fRkCA_MMzjXZAf3RzXrp6bYfgta0d1yoo2vTHfQB3DEyEm2JEM-mRJf13j7dhgfCC92tmy9SmbJe4cwf3aja3YL3NrQYZ5RmLY/s50/twitter.png); } ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg45U6Hkc3ebGbZZfbzAljpqNoAk9wPYEysPkvssh6UfI4jQfmYINWpz54rceV11twEK5QHHBCsbAg28XMVwivAkg3T9hKC39Eht4JhwOfKsepYzyO8awYtyUtwOSsPIVSQ5dQyKQkJMmM/s50/google%252B.png); } ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvhWDd5Tz52qgUEL0hu09CifiVwR09Eyw0QF4SG39U-HKsZAsEyRXCtJnt43rYVd7aFNFu4W9eMgtAkwVQMfbZu0UmB1-ydjo5Dpttloebwgf4jamwfQ1_YE1WREvR4PH81kbak-Xxtgg/s50/pinterest.png); } ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh417htg6zBaV74WnjZpHCOtPZz5Vpd7EyWuLdZFXo5nI3jTpIt8XyfvmHbSYMSuqrjllV5HHlSbjrgCWqH95s8R5acMO0YRmOTvIltNC8CepL1RqUhU5IaQES63GvtNzzJ4R-3phsueYI/s50/stumbleupon.png); } ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV7WSfrhX36PZfHpGxd2aPEeIixwDaLsfTHTKCOpPJUbokazO43xA0D7YBcMgDSha8L903EptuKGTXL99o8VZ9RZ_bPQJDCMRJEUoVnfS1wPhSC25rxHwofCvOvkLGZzwCmAj821CvdvE/s50/delicious.png); } ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKGNTJcN2nta0Llw8iB9MAtmoxXIb6He4rYEymleUvmEwzsunmCSPA6kVJa2UJG28eZN9GHBpWxST9rfg9DaLUB5Z7Zmx4R_1GLl4pxilK6_3k_2m7P6N54vO8dT3OzOs7MTdhxSBmfAg/s50/linkedin.png); } ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm1ot-aw8znWyIwRCGo9ZVjwLNiQCbLHLuhZliIKXYWSEvXhVR9MFBsJymG34uoi5HBck4VGdfP2Bz4xUwsB2XQJi6Ko4O7AhUZ2eyQXB7Z2Cf8HOn7tG_9k26VHqXlz9-0eeWzZnfXIA/s50/reddit.png); } ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3R6tB2XP4S5GMYTb4MCbSQYPfir1PK4BnfpJ83Dat-Rc4jyMgfQ5WH3TGQ32aGTWhxeUELo3-9sKs8wXuTUP8u37beLicUehDHOD8reoPWE28Kq0uuaE37I1AODQV70m8Jwj082-vQdbB/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
0 komentar:
Posting Komentar