طريقة تركيب الإضافة
1- ادخل إلى مدونتك / واختر تحرير قالب
2- إبحث عن الوسم <data:post.body/>
3- ضع الكود التالي تحته
الكود
<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%2Fwww.facebook.com%2Fdigitalhubinc&like&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=408184442589211" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:20px;" 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 = "http://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;"></div></b:if>
5- احفظ القالب
الرجاء من الأخوة الكرام : زوار المدونة عدم النسخ دون ذكر المصدر
كتب بواسطة Expert Blogger
بلدي هو الأردن مشرف سابقا على عدة منتديات و مواقع و صفحات تعليمية على الفيسبوك و من عشاق البحت و الاكتشاف أشياء جديدة و حصرية حول شبكت الأنترنيت من أهمها مدونات بلوجر و وود دبرس و الصفحات على الفيسبوك أحب مساعدة المبتدئين لإنجاز طموحاتهم كما أسعى لتحقيقي طموحاتي من خلال هذا الموفع المتواضع أتمنى أن تنال مقالاتي إعجابكم و أن أكون أول من يدعمكم لشق طريقكم نحو التطور و الإحتراف و الإستفادة من خلال عرض مجموعة من المعلومات و المواضيع القيمة .
0 التعليقات:
إرسال تعليق