(1171) اضافة نوافذ المواقع الاجتماعية عائمة بشكل احترافي على جاتب مدونات بلوجر

اضافة نوافذ المواقع الاجتماعية عائمة بشكل احترافي على جاتب مدونات بلوجر

زوار ومتابعي المدونة الكرام

أسعد الله أوقاتكم بكل خير ومحبة

درسنا اليوم سوف نتعرف على اضافة في قمة الروعة وبشكل احترافي ايضاً وفيها لمسه جمالية وايضاً هذه الاضافة مهمة جدا لكل مدونة من مشاركة مواضيع المدونة على المواقع الاجتماعية .

للمعاينة أنقر هنا

- طريقة التركيب :

1- ادخل إلى مدونتك ثم احتر لوحة التحكم .

2- من لوحة التحكم اختر قالب ثم اختر تحرير قالب .

3- ابحث عن الوسم :

<head>

4- ضع الكود التالي تحته .

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

- ايضاً ضع هذا الكود تحت الوسم السابق .

<script src='https://googledrive.com/host/0BxFbqjck0GDdc2ptQUdsNUdlXzA' type='text/javascript'/>

5- بعد ذلك ابحث عن الوسم : </head>

6- ضع الكود التالي فوقه .

/*------------------------------------------------------------
Floating Social Share Button Bar Version 2.0
Designed by:: http://www.homeblog7.blogspot.com
Shares Count Code by:: http://homeblog7.blogspot.com/social-share-count
issued under GNU GPL Licence
Icons:: FontAwesome 4.5.0
**************** Do Not Remove These Credits *****************
------------------------------------------------------------*/
.homeBlogger_SocialBar {
  position: fixed;
  bottom: 30%;
  padding: 0;
  left:0;
  background: none;
  text-align: center;
  margin: 0 auto;
  z-index: 99999999;
}
.homeBlogger_SocialBar label:hover {
  cursor: pointer;
  opacity:1;
}
.homeBlogger_SocialBar label {
  text-align: center;
  opacity: 0.4;
  width: 50px;
  background: #3A3939;
  color: #FFF;
  border: 0;
  font-family: FontAwesome;
  display: block;
  font-size: 12px;
  padding: 0px 0px;
  border-radius: 0;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  position: absolute;
  line-height: 1.5em;
  margin-top: 346px;
}
input.ShowHide_Button:checked + label {
  transform-origin: 50% 0%!important;
  -webkit-transform-origin: 50% 0%!important;
  -moz-transform-origin: 50% 0%!important;
  -ms-transform-origin: 50% 0%!important;
  -o-transform-origin: 50% 0%!important;
  opacity: 1;
  -webkit-transform: translateX(0px) rotateY(-180deg);
  -moz-transform: translateX(0px) rotateY(-180deg);
  -ms-transform: translateX(0px) rotateY(-180deg);
  -o-transform: translateX(0px) rotateY(-180deg);
  transform: translateX(0px) rotateY(-180deg);
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
  border: 1px solid #3A3939;
  border-radius: 50px 0px 0px 50px;
  width: 30px;
  max-width: 30px;
}
input.ShowHide_Button ~ .ShowHideMe {
  -webkit-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -moz-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -ms-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -o-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
}
input.ShowHide_Button:checked ~ .ShowHideMe {
  margin-left: -75px !important;
}
input.ShowHide_Button {
  display: none;
}
.homeBlogger_SocialBar .social_menu {
  display: inline-block;
  float: left;
  list-style:none;
  max-width:50px;
  margin: 0;
  padding: 0;
}
.homeBlogger_SocialBar .social_menu .button_facebook {
  background: #3a579a;
}
.homeBlogger_SocialBar .social_menu .button_facebook:hover {
  background: #314a83;
}
.homeBlogger_SocialBar .social_menu .button_twitter {
  background: #00abf0;
}
.homeBlogger_SocialBar .social_menu .button_twitter:hover {
  background: #0092cc;
}
.homeBlogger_SocialBar .social_menu .button_googleplus {
  background: #df4a32;
}
.homeBlogger_SocialBar .social_menu .button_googleplus:hover {
  background: #be3f2b;
}
.homeBlogger_SocialBar .social_menu .button_pinterest {
  background: #cd1c1f;
}
.homeBlogger_SocialBar .social_menu .button_pinterest:hover {
  background: #ae181a;
}
.homeBlogger_SocialBar .social_menu .button_stumbleupon {
  background: #ea4b24;
}
.homeBlogger_SocialBar .social_menu .button_stumbleupon:hover {
  background: #c7401f;
}
.homeBlogger_SocialBar .social_menu .button_linkedin {
  background: #2554BF;
}
.homeBlogger_SocialBar .social_menu .button_linkedin:hover {
  background: #224EB4;
}
.homeBlogger_SocialBar .social_menu .button_facebook .count,
.homeBlogger_SocialBar .social_menu .button_twitter .count,
.homeBlogger_SocialBar .social_menu .button_googleplus .count,
.homeBlogger_SocialBar .social_menu .button_pinterest .count,
.homeBlogger_SocialBar .social_menu .button_stumbleupon .count,
.homeBlogger_SocialBar .social_menu .button_linkedin .count {
  color: #fff!important;
  padding-top: 4px;
  font-size: 13px !important;
  line-height: 1.2em;
  font-family: sans-serif;
  font-weight: bold;
}
.homeBlogger_SocialBar .social_menu > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.homeBlogger_SocialBar .social_menu .share {
  background: #FFF;
  color: #807F7F;
  font-size: 11px;
  height: 45px !important;
}
.homeBlogger_SocialBar .social_menu .share .count.h4 {
  font-size: 18px;
  font-family: sans-serif;
  color: #424242;
  height: 25px !important;
  line-height: 1.5em;
  font-weight: bold;
  margin: 0px !important;
}
.homeBlogger_SocialBar .social_menu .share .h6 {
  padding-bottom: 3px;
  font-family: sans-serif;
  margin: 0px !important;
  line-height: 1.5em;
  font-size: 11px;
}
.homeBlogger_SocialBar .social_menu > ul > li {
  margin: 0px 0px 0px 0px;
  position: relative;
  text-align: center;
  list-style: none;
  list-style-type: none;
  padding: 0px;
  border: 0px;
  border-left: 0 solid rgba( 0,0,0,.4);
  height: 50px;
  width: 50px;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
  background: none;
  box-sizing: content-box;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.homeBlogger_SocialBar .social_menu > ul > li a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 5px 0px;
  cursor: pointer;
  text-decoration: none;
}
.homeBlogger_SocialBar .social_menu > ul > li:hover {
  border-left: 5px solid rgba( 0,0,0,.3);
  width: 40px;
}
.homeBlogger_SocialBar .social_menu > ul > li i {
  color: #fff !important;
  font-family: FontAwesome;
  font-size: 20px;
  font-style: normal;
  font-weight: normal;
  line-height: 1em;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.homeBlogger_SocialBar .social_menu > ul > li:hover i {
  opacity: 0.9;
}
@media only screen and (min-width:768px) and (max-width:979px) {
.homeBlogger_SocialBar {
  bottom: 20% !important;
}
}
@media only screen and (min-width:480px) and (max-width:767px) {
.homeBlogger_SocialBar {
  bottom: 15% !important;
}
}
 @media only screen and (max-width:479px) {
.homeBlogger_SocialBar {
  bottom: 10% !important;
  display: none !important; /*---delete this code line to make it appear on mobile--*/
}
}

7-ايضاً ابحث عن السطر التالي :

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

8- ضع الكود التالي تحته .

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='homeBlogger_SocialBar'>
  <input class='ShowHide_Button' id='twiSter' type='checkbox'/>
  <label for='twiSter'><i class='fa fa-arrow-left'/></label>
  <div class='ShowHideMe'>
  <div class='social_menu'>
<div class='share'>
    <div class='share-btn' data-service='total'>
        <div class='count h4'/>
        <div class='h6'>SHARES</div>
  </div></div>
<ul>
<li class='button_facebook'>
<a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot;   + data:post.url + &quot;   &amp;   t=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-facebook'/>
<div class='share-btn' data-service='facebook'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_twitter'>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @homeblog7- &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'><strong><i class='fa fa-twitter'/>
<div class='share-btn' data-service='twitter'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_googleplus'>
<a expr:href='&quot;   https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'><strong><i class='fa fa-google-plus'/>
<div class='share-btn' data-service='google'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_pinterest'>
<a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-pinterest'/>
<div class='share-btn' data-service='pinterest'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_stumbleupon'>
<a expr:href='&quot;   http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;   &amp;   title=&quot;   + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-stumbleupon-circle'/>
<div class='share-btn' data-service='stumbleupon'>
        <div class='count'/></div></strong>
</a>
</li>
<li class='button_linkedin'>
<a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/>
<div class='share-btn' data-service='linkedin'>
        <div class='count'/></div></strong>
</a>
</li>
</ul>
</div>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
  var shareUrl = $("link[rel=canonical]").attr("href");
    $.getJSON('http://sharecount.twistblogger.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
        shares = data.shares;
        $(".count").each(function (index, el) {
            service = $(el).parents(".share-btn").attr("data-service");
            count = shares[service];
            if (count > 1000) {
                count = (count / 1000).toFixed(1);
                if (count > 1000) count = (count / 1000).toFixed(1) + "M";
                else count = count + "k";
            }
            $(el).html(count);
        });
    });
});
//]]></script>
</b:if>
</b:if>

9- احفظ القالب .

10- التعديلات :

- استبدل " @homeblog7 " اسم المستخدم هذا بأسم المستخدم خاصيتك على تويتر .

عزيزي الزائر صندوق التعليقات ملك لك ، نحن على استعداد للإجابة عن جميع استفساراتكم

لكم منا كل الاحترام والتقدير

0 Comments:

رسالة تنبيه

يسعدنا تفاعلكم بالتعليق لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق :

أن لا تضع أي روابط خارجية

أي سؤال خارج محتوى التدوينة يرجى استخدام صفحة الدعم الفني

صفحة الدعم الفني

أن يكون التعليق خاص بمحتوى التدوينة اضافة نوافذ المواقع الاجتماعية عائمة بشكل احترافي على جاتب مدونات بلوجر

لإضافة كود حوله أولا بمحول الأكواد

انقرهنا لتحويل الكود

إرسال تعليق

Item Reviewed: اضافة نوافذ المواقع الاجتماعية عائمة بشكل احترافي على جاتب مدونات بلوجر Description: اضافة نوافذ المواقع الاجتماعية عائمة بشكل احترافي على جاتب مدونات بلوجر Rating: 5 Reviewed By: home blogger

almaad medical center في 2015_24…
8 فبراير 2017 في 5:02 م رد حذف
almaad medical center في 2015_24…
8 فبراير 2017 في 2:44 م رد حذف
Elnemsawy في 2015…
6 فبراير 2017 في 1:45 ص رد حذف
خالد المعمري في oldhomebloge 2015…
3 فبراير 2017 في 1:45 م رد حذف
خالد المعمري في oldhomebloge 2015…
3 فبراير 2017 في 1:44 م رد حذف
Anonymous في blog post…
1 فبراير 2017 في 6:07 م رد حذف
Anonymous في blog post_53…
1 فبراير 2017 في 5:45 م رد حذف
dramsd في blog post_76…
30 يناير 2017 في 4:39 ص رد حذف
dramsd في blog post_76…
29 يناير 2017 في 1:54 م رد حذف
omar في blog post_16…
16 يناير 2017 في 1:31 ص رد حذف
عبدو في 2015…
22 ديسمبر 2016 في 5:33 م رد حذف
angelmyself في 2015_24…
21 ديسمبر 2016 في 2:56 م رد حذف
Anonymous في 216…
11 ديسمبر 2016 في 6:28 م رد حذف
صبري سوفت في blog post_16…
3 ديسمبر 2016 في 9:42 م رد حذف
المنسي للمعلومات في one minute…
3 ديسمبر 2016 في 1:12 م رد حذف
ee في blog post_8…
2 ديسمبر 2016 في 3:55 م رد حذف
Anonymous في css3…
30 نوفمبر 2016 في 12:23 م رد حذف
ManaGeR Nos5A‬‏ في blog page_5…
24 نوفمبر 2016 في 1:02 ص رد حذف

آخر الأخبار

كيفية إضافة أزرار المشاركات الاجتماعية تحت كل مشاركة من مشاركات بلوجر

كيفية إدراج بنر إعلاني ثابت على جانبي يمين ويسار مدونات بلوجر

زر المشاهدة والتحميل لمدونات بلوجر بشكل جديد وأحترافي 2016

إضافة صفحة خطأ بشكل مختلف لمدونات بلوجر [Error 404]

كيفية أرشفة صفحات الـ HTTPS لمدونات بلوجر

تعرف على rel=canonical

إضافة زر الصعود إلى الأعلى بشكل جديد وأحترافي 2016

كيفية إضافة شريط متحرك يعرض آخر مواضيع المدونة بشكل جديد وأحترافي

كيفية إضافة تعريف الكاتب + إيقونات المواقع الاجتماعية بشكل أحترافي لمدونات بلوجر

قالب وظائفكم إحترافي لمدونات بلوجر

قالب وان دي الإحترافي التقني

كيفية إنشاء صفحات متعددة لمدونات بلوجر

كيفية منع الروابط الداخلية فتح إرتباط في علامة تبويب جديدة لمدونات بلوجر

المشاركات الشائعة منزلقة وبشكل جديد لمدونات بلوجر

قالب تحديثات بلوجر تقني إحترافي النسخة الثانية

قالب تيم بلوجر إحترافي تقني متكامل

كيفية إضافة تأثير الظل على الصندوق وبعدة أشكال مختلفة

كيفية إضافة انضمام لهذا الموقع بشكل جديد واحترافي لمدونات بلوجر

إضافة شريط متحرك يضم آخر أخبار المدونة بأربعة الوان أحترافية

سلايد شو ذاتي التحكم بتقنية CSS لمدونات بلوجر

اضافة نوافذ المواقع الاجتماعية عائمة بشكل احترافي على جاتب مدونات بلوجر

0 Comments:

إرسال تعليق

المشاركات الشائعة

أرشيف

التسميات

خدماتي في خمسات

مساحة إعلانية

المتابعون

آخر الأخبار

اضافة نوافذ المواقع الاجتماعية عائمة بشكل احترافي على جاتب مدونات بلوجر

التالي

كيفية إضافة نموذج اتصل بنا بشكل أحترافي وجديد لمدونات بلوجر

السابق

اضافة شريط اخر المواضيع لمدونات بلوجر

0 Comments:

إرسال تعليق

المشاركات الشائعة

أرشيف

التسميات

خدماتي في خمسات

مساحة إعلانية

المتابعون