المميزات:
إضافة أكثر من رائعة بخاصية css3 .
أزرار المشاركة الرسمية ( Facebook Like, Twitter Tweet, Google +1 , Linked In Share Buttons )
خفيف وأنيق
سهلة التركيب.
بعد أن قمنا بمعاينة مباشرة نمر لإضافة هذه القطعة للمدونة الخاصة بك ونتابع كيفية تثبيت هذه القطعة
انتقل إلى Blogger
قالب
تحرير HTML.
اضغط على CTRL + D، والعثور على رمز
بعد العثور على الكود أعلاه، نقوم بنسخ الكود التالية
<b:if cond='data:blog.pageType == "item"'><style>@import url(http://fonts.googleapis.com/css?family=Open+Sans);@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";#buttons { width: 475px; overflow: hidden; margin: 70px auto 0;}
.button { float: left; margin-right: 10px; width: 110px; background: #eaeaea; border: 1px solid #cbcbcb; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: inset 0 1px 0px #fdfdfd; padding: 15px 5px 5px; box-sizing: border-box;}
.button i { background: #c5c5c5; color: #eaeaea; text-align: center; line-height: 40px; font-size: 18px; width: 40px; height: 40px; display: block; margin: 0 auto 10px; border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;}
.social-container { text-align: center; text-transform: uppercase; font-size: 12px; color: #656565; line-height: 54px; font-family: Open Sans; background: #d8d8d8; width: 100%; height: 45px; box-shadow: inset 0 -2px 4px #c7c7c7; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; position: relative; overflow: hidden;}
.slide, .button i { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;}
.slide { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); border-radius: 0 0 22px 22px; -o-border-radius: 0 0 22px 22px; -ms-border-radius: 0 0 22px 22px; -moz-border-radius: 0 0 22px 22px; -webkit-border-radius: 0 0 22px 22px; /* top fix */ transition: all 0.2s ease-in-out; position: absolute; height: 45px; width: 100%; top: -35px;}
.slide::after { content: ""; display: block; position: absolute; width: 100%; height: 10px; box-shadow: inset 0 1px 0px #fdfdfd, 0 3px 0px #cdcdcd; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background: #eaeaea; border: 1px solid #cbcbcb; box-sizing: border-box; bottom: 0;}
.button:hover .slide { top: 0; border-radius: 3px;}
.linkedin .IN-widget, .button iframe, .google #___plusone_0 { top: -2px; position: relative;}
.twitter iframe { width: 79px !important;}
.google #___plusone_0 { width: 60px !important;}
.button.facebook:hover i, .facebook .slide { background: #305c99; color: white;}
.button.twitter:hover i, .twitter .slide { background: #00cdff; color: white;}
.button.google:hover i, .google .slide { background: #d24228; color: white;}
.button.linkedin:hover i, .linkedin .slide { background: #007bb6; color: white;}
.button.linkedin { margin-right: 0;}
.credit { padding-left: 10px; font-size: 14px; color: #172b36; position: absolute; bottom: 0; text-align: center; font-family: Open Sans;}
.credit a { border-bottom: 2px solid #dc4106; text-decoration: none; padding: 0 0 2px; color: #172b36;}</style><div id="buttons"><div class="facebook button"> <i class="icon-facebook"></i> <div class="social-container fb"> <div class="slide"> <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Freference%2Fplugins%2Flike&send=false&layout=button_count&width=90&show_faces=false&font&colorscheme=light&action=like&height=21&appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true"> </iframe> </div>Facebook </div></div><div class="twitter button"> <i class="icon-twitter"></i> <div class="social-container tw"> <div class="slide"> <a href="https://twitter.com/share" class="twitter-share-button" data-via="mariuCSS"> Tweet </a> <script> !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https'; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); </script> </div>Twitter </div></div><div class="google button"> <i class="icon-google-plus"></i> <div class="social-container tw"> <div class="slide"> <!-- Place this tag where you want the +1 button to render. --> <div class="g-plusone" data-size="medium"> </div><!-- Place this tag after the last +1 button tag. --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); } )(); </script> </div>Google+ </div></div><div class="linkedin button"> <i class="icon-linkedin"></i> <div class="social-container tw"> <div class="slide"> <script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US </script> <script type="IN/Share"></script> </div>LinkedIN </div></div></div><div style="text-align: right;"><a href="http://gg.gg/j0hw" target="_blank" title="Get This Widget"><span style="font-size: x-small;">get</span></a></div></b:if>
ونقوم بلصق الكود تحته مباشرة
ملاحظة :
. الآن نقوم بتغير tounsi.coool بصفحة الفيس بوك الخاصة بك .
5. بعد إضافة صفحة الفيس بوك ، قم بالحفظ، أنت ثم انتقل إلى مدونتك والتحقق من أنها تعمل، و تمتع بهذة الاضافة الرائعة ؛-)
إذا كان لديك أي مشكلة فيما يتعلق هذه القطعة يمكنك ترك تعليقك
