16.04.2015.

Kako dodati SOCIAL MEDIA dugmice na blog

"SOCIAL MEDIA" dugmici


U ovom postu cu vam pokazati kako da postavite SOCIAL MEDIA
 dugmice na vasem blogu.

Postupak je isti kao kod dodavanja dugmeta "Scroll to top button" ili "Polje za pretrazivanje".


Izgled > Dodaj gadzet > HTML/JavaScript



drustvene_mreze_gadzet






Dodajemo sledeci kod

<style>.labnolSocial{display:inline-block;margin:10px 0}.labnolSocial a{text-decoration:underline !important;float:right}.labnolSocial span{float:left;display:inline;margin-right:10px}.labnolSocial span.last{margin-left:0}.labnolSocial span a{display:block;width:32px;height:32px;text-indent:-9999px;background-color:none;background:transparent url("http://4.bp.blogspot.com/-R-J-UqMBhh8/UYjvfhBAxzI/AAAAAAAAAR0/R-YzozeAaUk/s1600/labnolcss.png") 0 0 no-repeat} #iconTwitter{background-position:-33px -33px}#iconTwitter:hover{background-position:-33px 0}#iconFacebook{background-position:-66px -33px}#iconFacebook:hover{background-position:-66px 0}#iconRSS{background-position:0 -33px}#iconRSS:hover{background-position:0 0}#iconYouTube{background-position:-99px -33px}#iconYouTube:hover{background-position:-99px 0}#iconGooglePlus{background-position:-132px -33px}#iconGooglePlus:hover{background-position:-132px 0}.logo{background:url("labnol.org/wp/wp-content/themes/baba/logo-XL.png") no-repeat scroll 0 0 transparent;margin:0 auto;width:420px;padding:0 0 20px 0} </style><div class="labnolSocial">
 <span>  <a title="RSS Feed" href="http://OVDE UPISETE VAS LINK RSS" target="_blank" id="iconRSS" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'RSS', document.location.pathname]);">RSS</a>  </span> <span>  <a title="Follow on Twitter" href="http://OVDE UPISETE TWITTER LINK" target="_blank" id="iconTwitter" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Twitter', document.location.pathname]);">Twitter</a>  </span> <span>  <a title="Facebook Page" href="http://OVDE UPISETE FACEBOOK LINK" target="_blank" id="iconFacebook" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Facebook', document.location.pathname]);">Facebook</a>  </span> <span>  <a title="YouTube Channel" href="http://OVDE UPISETE YOUTUBE LINK" target="_blank" id="iconYouTube" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'YouTube', document.location.pathname]);">YouTube</a>  </span> <span><a title="Google Plus" href="https://OVDE UPISETE GOOGLE PLUS LINK" target="_blank" id="iconGooglePlus" onclick="_gaq.push(['_trackEvent', 'Subscribe', 'Google Plus', document.location.pathname]);">YouTube</a></span></div>


drustvene_mreze_widzet


Dodajemo sledeci kod

<style>
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://beautifulbloggerwidgets.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;   
-moz-transition: ease-in 0.2s all;   
-o-transition: ease-in 0.2s all;   
-ms-transition: ease-in 0.2s all;   
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="VAS RSS LINK" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="VAS GOOGLE PROFILE LINK" rel='nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="VAS FACEBOOK LINK" rel='nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="VAS TWITTER LINK" rel='nofollow' target='_blank' ></a>
</div>​

dugmad_drustvene_mreze



Dodajemo sledeci kod

<div class='social-widget'>
<a href='VAS RSS LINK' target='_blank'><img src="http://3.bp.blogspot.com/-2s-dIcOf860/UN18aeew9iI/AAAAAAAAAq8/iWLQCguyKEE/s1600/rss.png" alt="Subcribe to our RSS feeds" /></a>
<a href='VAS FACEBOOK LINK' target='_blank'><img src="http://3.bp.blogspot.com/-XN61PbeLj9Y/UN18Xav8YLI/AAAAAAAAAqs/RitGLNDI_0c/s1600/fbook.png" alt="Join Us on Facebook" /></a>
<a href='VAS TWITTER LINK' target='_blank'><img src="http://1.bp.blogspot.com/-WlrYBnt_sw8/UN18btqoflI/AAAAAAAAArE/d5ciYvTY3Y0/s1600/twit.png" alt="Follow us on Twitter" /></a>
<a href='VAS GOOGLE LINK' target='_blank'><img src="http://2.bp.blogspot.com/-BWfJNYrfvnU/UN18Yj-SHVI/AAAAAAAAAq0/3_IZROJpjeE/s1600/gplus.png" alt="Add to Circles" /></a>
<a href='VAS LINK PINTEREST' target='_blank'><img src="http://2.bp.blogspot.com/-D05ptYRs4Mg/UN2RjBb1EcI/AAAAAAAAArg/Pz1Scz0ozJs/s1600/pinterest.png" alt="Connect us on Pinterest" /></a>
</div>

Mozete pojedinacno menjati slicice, npr

Kod:

<div class='social-widget'>
<a href='VAS LINK RSS' target='_blank'><img src="OVDE UBACITE LINK SLIKE" alt="Subcribe to our RSS feeds" /></a>
<a href='VAS LINK FACEBOOK' target='_blank'><img src="OVDE UBACITE LINK SLIKE" alt="Join Us on Facebook" /></a>
<a href='VAS LINK GOOGLE+' target='_blank'><img src="OVDE UBACITE LINK SLIKE" alt="Add to Circles" /></a></div>

Ovde cu ostaviti par slicica:










0 komentara:

Постави коментар