Social Network Cards For Blogger

Social networks are now king for blogs but those are using social sites in a smarter they are getting huge amount of success. Also social sites are giving you unique visitors than normal visitors. Mainly in blogging platforms we are using social equipments like Facebook like box, Google plus one buttons, pinterest pin buttons and twitter button or twitter follow box. I think most of using only links for sharing but are you finding in blogger platform is anyone using attractive style share buttons like other platforms. For getting huge amount of likes and sharing you need to use some attractive buttons then you can say to getting huge amount of likes in your blog.

Also in Facebook the groups are doing an better work to giving much more traffic to an site but the readers are much more important for an blog because readers interest can grow your blog in a higher way. Most peoples are always interested while they are starting their site to getting huge amount of traffic but they are not know the real truth of getting traffic. In some cases if you connecting some bigger sites or older sites then you can getting high traffic in a free method but need smarter method.

In blogger we are just adding some buttons then interested to getting much more readers. But now others are coming to attractive position with valuable contents. So most of peoples are interested to liking attractive topics and also some are interested to commenting in valuable topics to getting some traffic. In this tutorial i am going to sharing four professional design social cards for blogger. After doing some work then with help of Photoshop i have created an great design and also added some css effects.

Social Network Cards For Blogger

First visit Blogger Dashboard > Design > Edit HTML

Then search below code using Ctrl + F

]]></b:skin>

then paste the below code just above it.

.MyBloggerClub:active {position:relative;top:1px;} .MBC_new {width:726px;padding-bottom:40px;zoom:1;} .MBC_new:before, .MBC_new:after {content:"";display:table;} .MBC_new:after {clear:both;} .MBC-container {display:none;position:fixed;top:0;left:0;z-index:9999;overflow:auto;} .MBC {margin:30px auto;padding-bottom:40px;position:relative;width:726px;z-index:1005;zoom:1;} .MBC:before, .MBC:after {content:"";display:table;} .MBC:after {clear:both;} .MBC-overlay {     background:-webkit-gradientundefinedradial,50% 0,1000,50% 0,100,fromundefined#696969),toundefined#CCC));     background:-moz-radial-gradientundefined50% 0 0deg, ellipse farthest-corner, #DDD, #494949);     background-color:#CCC;display:none;position:fixed;top:0;left:0;     z-index:9998;zoom:1;filter:alphaundefinedopacity=95);opacity:0.95; } .MBC-close-dialog {     -moz-box-shadow:inset 0px 1px 0px 0px #b5a7a7;     -webkit-box-shadow:inset 0px 1px 0px 0px #b5a7a7;     box-shadow:inset 0px 1px 0px 0px #b5a7a7;     -moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;     background-color:#898989;border:1px solid #6e6564;color:#FFF;     cursor:pointer;display:block;font-family:Trebuchet MS;     margin:6px 12px 6px 7px;font-size:15px;padding:1px 4px 3px 3px;     position:absolute;right:-17px;top:-17px;text-align:center;     text-shadow:-1px -1px 0px #8f8888;width:16px; } .MBC-close-dialog:hover {     background:-webkit-gradientundefinedlinear, left top, left bottom, color-stopundefined0.05, #fe1a00), color-stopundefined1, #ce0100));     background:-moz-linear-gradientundefinedcenter top, #fe1a00 5%, #ce0100 100%);     filter:progid:DXImageTransform.Microsoft.gradientundefinedstartColorstr='#fe1a00', endColorstr='#ce0100');     background-color:#fe1a00;border-bottom:1px solid #B50E0E; } .MBC-widget {     border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;       border-style:solid;border-width:1px;float:left;height:175px;     margin:20px;position:relative;width:320px; } .MBC-widget-89 {     color:#FFF;font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;font-size:12px;     font-style:italic;line-height:16px;margin:30px 0 0 30px;width:150px;z-index:10; } .MBC-widget-button {margin:20px 0 0 30px;} .MBC-widget-image{     background-image:urlundefinedhttp://4.bp.blogspot.com/-JXB7Mmvq9QQ/UCkufmyuqKI/AAAAAAAACqY/JnPSTPedEbU/s1600/sc-sprite.png);background-repeat:no-repeat;position:absolute;z-index:1; } .MBC-widget-upper {     border-radius:0 0px 4px 4px;-webkit-border-radius:0 0px 4px 4px;-moz-border-radius:0 0px 4px 4px;     border-style:solid;border-width:1px 0 0;bottom:0;height:35px;position:absolute;width:100%; } .MBC-facebook{     background:-webkit-gradientundefinedlinear, left top, left bottom, color-stopundefined0.05, #88A2C5), color-stopundefined1, #5B72A6));     background:-moz-linear-gradientundefinedcenter top, #88A2C5 5%, #5B72A6 100%);     filter:progid:DXImageTransform.Microsoft.gradientundefinedstartColorstr='#88A2C5', endColorstr='#5B72A6');     box-shadow:0 1px 0 #9DB6D0 inset, 0 38px 40px -23px #222;     -moz-box-shadow:0 1px 0 #9DB6D0 inset, 0 38px 40px -23px #222;     -webkit-box-shadow:0 1px 0 #9DB6D0 inset, 0 38px 40px -23px #222;     background-color:#88A2C5;border-color:#7F91AE; } .MBC-facebook .MBC-widget-89 {text-shadow:1px 1px 0 #52627b;width:160px;} .MBC-facebook .MBC-widget-image {background-position:0 -8px;bottom:-1px;height:141px;right:30px;width:69px;} .MBC-facebook .MBC-widget-upper {background-color:#7A8FBA;border-color:#879ABF;} .MBC-twitter {     background:-webkit-gradientundefined linear, left top, left bottom, color-stopundefined0.05, #61C3E4), color-stopundefined1, #2DABD6) );     background:-moz-linear-gradientundefined center top, #61C3E4 5%, #2DABD6 100% );     filter:progid:DXImageTransform.Microsoft.gradientundefinedstartColorstr='#61C3E4', endColorstr='#2DABD6');     box-shadow:0 1px 0 #7DD2EE inset, 0 38px 40px -23px #222;     -moz-box-shadow:0 1px 0 #7DD2EE inset, 0 38px 40px -23px #222;     -webkit-box-shadow:0 1px 0 #9DB6D0 inset, 0 38px 40px -23px #222;     background-color:#61C3E4;border-color:#43B3D8; } .MBC-twitter .MBC-widget-89{text-shadow:1px 1px 0 #227996;width:120px;} .MBC-twitter .MBC-widget-image{background-position:-544px -30px;height:135px;bottom:5px;right:15px;width:170px;} .MBC-twitter .MBC-widget-upper {background-color:#68BFDD;border-color:#76C7E3;} .MBC-googleplus {     background:-webkit-gradientundefined linear, left top, left bottom, color-stopundefined0.05, #D44635), color-stopundefined1, #AC2C1E) );     background:-moz-linear-gradientundefined center top, #D44635 5%, #AC2C1E 100% );     filter:progid:DXImageTransform.Microsoft.gradientundefinedstartColorstr='#D44635', endColorstr='#AC2C1E');     box-shadow:0 1px 0 #DE6354 inset, 0 38px 40px -23px #222;     -moz-box-shadow:0 1px 0 #DE6354 inset, 0 38px 40px -23px #222;     -webkit-box-shadow:0 1px 0 #DE6354 inset, 0 38px 40px -23px #222;     background-color:#D44635;border-color:#C54131; } .MBC-googleplus .MBC-widget-89{text-shadow:1px 1px 0 #93291e;width:120px;} .MBC-googleplus .MBC-widget-image{background-position:-156px -10px;height:141px;right:18px;bottom:5px;width:143px;} .MBC-googleplus .MBC-widget-upper {background-color:#C54131;border-color:#CE4C3D;} .MBC-pinterest {     background:-webkit-gradientundefined linear, left top, left bottom, color-stopundefined0.05, #EFEFEF), color-stopundefined1, #CCC) );     background:-moz-linear-gradientundefined center top, #EFEFEF 5%, #CCC 100% );     filter:progid:DXImageTransform.Microsoft.gradientundefinedstartColorstr='#EFEFEF', endColorstr='#CCCCCC');     box-shadow:0 1px 0 #FFF inset, 0 38px 40px -23px #222;     -moz-box-shadow:0 1px 0 #FFF inset, 0 38px 40px -23px #222;     -webkit-box-shadow:0 1px 0 #FFF inset, 0 38px 40px -23px #222;     background-color:#FAF7F7;border-color:#AAA; } .MBC-pinterest .MBC-widget-89{color:#888;text-shadow:1px 1px 0 #FFF;width:140px;} .MBC-pinterest .MBC-widget-image{background-position:-300px -8px;height:141px;right:25px;bottom:12px;width:118px;} .MBC-pinterest .MBC-widget-upper {background-color:#DDD;border-color:#EEE;}

Now search the below code using Ctrl + F

<div class='post-footer-line post-footer-line-1'>

Then paste the below code just above it.

<div id="MBC_new" class="MBC_new"><div class="MBC-facebook MBC-widget" id="MBC-facebook-container-inPage"><div class="MBC-widget-89">Like! or send this content to your friends as a Facebook message.</div><div class="MBC-widget-button" id="MBC-facebook-button-inPage"><div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://www.mybloggerclub.com/" data-send="true" data-width="170" data-layout="button_count" data-show-faces="false"><span style="height: 21px; width: 170px; ">    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="170" show_faces="false" font=""></fb:like>  </span></div></div><div class="MBC-widget-image"></div><div class="MBC-widget-upper"></div></div><div class="MBC-googleplus MBC-widget" id="MBC-googleplus-inPage"><div class="MBC-widget-89">Share this page with Google Plus. Feed your circles!</div><div class="MBC-widget-button" id="MBC-googleplus-button-inPage"><div id="___plusone_0" style="height: 24px; width: 106px; display: inline-block; text-indent: 0px; margin: 0px; padding: 0px; background-color: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><div style='margin-left:5px;'><g:plusone expr:href='data:post.url' size='standard'/> </g:plusone></div></div></div><div class="MBC-widget-image"></div><div class="MBC-widget-upper"></div></div><div class="MBC-pinterest MBC-widget" id="MBC-pinterest-inPage"><div class="MBC-widget-89">It's time to start thinking about the board that suits this content.</div><div class="MBC-widget-button" id="MBC-pinterest-button-inPage"><iframe src="&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url" scrolling="no" frameborder="0" style="border: none; width: 90px; height: 20px; "></iframe></div><div class="MBC-widget-image"></div><div class="MBC-widget-upper"></div></div><div class="MBC-twitter MBC-widget" id="MBC-twitter-inPage"><div class="MBC-widget-89">Let everyone hear this amazing content, hurry up!</div><div class="MBC-widget-button" id="MBC-twitter-button-inPage"><a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if></a></div><div class="MBC-widget-image"></div></div></div>

Then save your template.

Visit your blog.

Enjoy with new social cards.