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

موضوع عشوائي

آخر المواضيع

إضافة اداة ازرار لمواقع التواصل الاجتماعي باستخدام أيقونات جميلة في مدونتك

طريقة اضافة ايقونات التواصل الاجتماعي
مرحباً بكل مهتم بتطوير مدونته على بلوجر ، اليوم في هذه التدوينه سوف نعلمك كيفية إضافة أزرار التواصل الاجتماعي مع خاصية واجهة العداد في قالب بوجر. يمكنك إضافة أداة Social Counter Widget في الشريط الجانبي الخاص بك في بلوجر. هذا سوف يساعد على تنمية المعجبين بك فى مواقع التواصل الاجتماعي سيتمكن زائرو مدونتك أو موقعك الإلكتروني من زيارة مواقع التواصل الاجتماعي الخاصة بك بسهولة من موقع الويب الخاص بك. يأتي هذا التصميم من ووردبريس ، لكننا عدّلنا فيه ليتناسب مع مستخدمي منصة بلوجر. لتثبيت هذه الأداة الذكية اتبع الخطوات المذكورة أدناه.
إضافة اداة ازرار لمواقع التواصل الاجتماعي باستخدام أيقونات جميلة في مدونتك

خطوات التثبيت :

الخطوة 1: قم بتسجيل الدخول إلى حسابك وانتقل إلى لوحة معلومات Blogger
الخطوة 2: الآن انقر فوق -> قالب -> تحرير HTML
الخطوة 3: الآن ابحث عن العلامة <head> التالية بالضغط على Ctrl + F
الخطوة 4: الصق كود FontAwesome بعد / أسفل <head> "إذا كانت مدونتك تحتوي بالفعل على كود fontawesome ، فلن تحتاج إلى القيام بذلك مرة أخرى ، فقط تخطي هذه الخطوة"
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
الخطوة 5: الآن ابحث عن ]]></b:skin> بالضغط على Ctrl + F
الخطوة 6: الآن الصق كود CSS التالي قبل / أعلى ]]></b:skin>
/* Social Media with counter Widget by www.flammainfo.com */
.list-unstyled {
  padding-left: 0;
  list-style: none;
  margin: 2px
}
.list-inline li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
  margin-bottom: 10px
}
.bsd-colored-social .fa,
.bsd-social-icons .fa {
  font-size: 16px
}
.bsd-colored-social .fa,
.bsd-social-icons .fa {
  -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
}
.bsd-colored-social .fa,
.bsd-social-icons .fa {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #FFF;
  color: rgba(255, 255, 255, 0.8)
}
.bsd-colored-social.icon-circle .fa,
.bsd-social-icons.icon-circle .fa {
  border-radius: 50%
}
.bsd-colored-social.icon-rounded .fa,
.bsd-social-icons.icon-rounded .fa {
  border-radius: 2px
}
.bsd-colored-social.icon-flat .fa,
.bsd-social-icons.icon-flat .fa {
  border-radius: 0
}
.bsd-colored-social .fa:hover,
.bsd-colored-social .fa:active,
.bsd-social-icons .fa:hover,
.bsd-social-icons .fa:active {
  color: #FFF
}
.bsd-colored-social.icon-zoom .fa:hover,
.bsd-colored-social.icon-zoom .fa:active,
.bsd-social-icons.icon-zoom .fa:hover,
.bsd-social-icons.icon-zoom .fa:active,
.bsd-social-sidebar li:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1)
}
.bsd-colored-social.icon-rotate .fa:hover,
.bsd-colored-social.icon-rotate .fa:active,
.bsd-social-icons.icon-rotate .fa:hover,
.bsd-social-icons.icon-rotate .fa:active {
  -webkit-transform: scale(1.1) rotate(360deg);
  -moz-transform: scale(1.1) rotate(360deg);
  -ms-transform: scale(1.1) rotate(360deg);
  -o-transform: scale(1.1) rotate(360deg);
  transform: scale(1.1) rotate(360deg)
}
.bsd-colored-social .fa-dribbble,
.bsd-social-icons .fa-dribbble:hover,
.bsd-socialicons .bsd-dribbble:hover .bsd-sicon {
  background-color: #F46899
}

.bsd-colored-social .fa-stumbleupon,
.bsd-social-icons .fa-stumbleupon:hover,
.bsd-socialicons .bsd-stumbleupon:hover .bsd-sicon {
  background-color: #eb4924
}
.bsd-colored-social .fa-reddit,
.bsd-social-icons .fa-reddit:hover {
  background-color: #5f99cf
}
.bsd-colored-social .fa-facebook,
.bsd-social-icons .fa-facebook:hover,
.bsd-socialicons .bsd-facebook:hover .bsd-sicon {
  background-color: #3C599F
}
.bsd-colored-social .fa-rss,
.bsd-social-icons .fa-rss:hover,
.bsd-socialicons .bsd-rss:hover .bsd-sicon {
  background-color: #f26522
}
.bsd-colored-social .fa-flickr,
.bsd-social-icons .fa-flickr:hover,
.bsd-socialicons .bsd-flickr:hover .bsd-sicon {
  background-color: #d51007
}
.bsd-colored-social .fa-flickr,
.bsd-social-icons .fa-flickr:hover {
  background-color: #FF0084
}
.bsd-colored-social .fa-instagram,
.bsd-social-icons .fa-instagram:hover,
.bsd-socialicons .bsd-instagram:hover .bsd-sicon {
  background-color: #685243
}
.bsd-colored-social .fa-foursquare,
.bsd-social-icons .fa-foursquare:hover,
.bsd-socialicons .bsd-foursquare:hover .bsd-sicon {
  background-color: #0086BE
}
.bsd-colored-social .fa-github,
.bsd-social-icons .fa-github:hover,
.bsd-socialicons .bsd-github:hover .bsd-sicon {
  background-color: #070709
}
.bsd-colored-social .fa-google-plus,
.bsd-social-icons .fa-google-plus:hover,
.bsd-socialicons .bsd-googleplus:hover .bsd-sicon {
  background-color: #CF3D2E
}
.bsd-colored-social .fa-instagram,
.bsd-social-icons .fa-instagram:hover {
  background-color: #A1755C
}
.bsd-colored-social .fa-linkedin,
.bsd-social-icons .fa-linkedin:hover,
.bsd-socialicons .bsd-linkedin:hover .bsd-sicon {
  background-color: #0085AE
}
.bsd-colored-social .fa-pinterest,
.bsd-social-icons .fa-pinterest:hover,
.bsd-socialicons .bsd-pinterest:hover .bsd-sicon {
  background-color: #CC2127
}
.bsd-colored-social .fa-twitter,
.bsd-social-icons .fa-twitter:hover,
.bsd-socialicons .bsd-twitter:hover .bsd-sicon {
  background-color: #32CCFE
}
.bsd-colored-social .fa-vk,
.bsd-social-icons .fa-vk:hover,
.bsd-socialicons .bsd-vk:hover .bsd-sicon {
  background-color: #375474
}
.bsd-colored-social .fa-soundcloud,
.bsd-social-icons .fa-soundcloud:hover,
.bsd-socialicons .bsd-soundcloud:hover .bsd-sicon {
  background-color: #FF4100
}
.bsd-colored-social .fa-vine,
.bsd-social-icons .fa-vine:hover,
.bsd-socialicons .bsd-vine:hover .bsd-sicon {
  background-color: #35B57C
}

.bsd-colored-social .fa-youtube,
.bsd-social-icons .fa-youtube:hover,
.bsd-socialicons .bsd-youtube:hover .bsd-sicon {
  background-color: #C52F30
}
.top-social ul li {
  margin: 0;
  padding: 0
}
div#socialicons-top {
  float: left
}
.top-social .list-unstyled {
  margin: 0
}
.bsd-socialicons {
  text-align: center;
  overflow: auto;
  font-size: 22px;
  margin: 0 -8px
}
.bsd-socialicons .bsd-socialInner {
  position: relative;
  overflow: hidden;
  padding-left: 8px
}
.bsd-socialicons .bsd-social {
  float: left;
  width: 25%
}
.bsd-socialicons .bsd-sinn {
  padding-right: 8px
}
.bsd-socialicons .bsd-sinn:hover .bsd-sicon {
  color: #fff
}
.bsd-socialicons .bsd-sicon {
  display: block;
  padding: 10px 0;
}
.bsd-socialicons .bsd-facebook .bsd-sicon {
  color: #3B5998
}
.bsd-socialicons .bsd-googleplus .bsd-sicon {
  color: #DD4B39
}
.bsd-socialicons .bsd-twitter .bsd-sicon {
  color: #2AA9E0
}
.bsd-socialicons .bsd-instagram .bsd-sicon {
  color: #685243
}
.bsd-socialicons .bsd-pinterest .bsd-sicon {
  color: #CC2028
}
.bsd-socialicons .bsd-youtube .bsd-sicon {
  color: #DE1829
}
.bsd-socialicons .bsd-vine .bsd-sicon {
  color: #35B57C
}
.bsd-socialicons .bsd-soundcloud .bsd-sicon {
  color: #FF4100
}
.bsd-socialicons .bsd-vk .bsd-sicon {
  color: #45668e
}
.bsd-socialicons .bsd-foursquare .bsd-sicon {
  color: #f94877
}
.bsd-socialicons .bsd-github .bsd-sicon {
  color: #333333
}
.bsd-socialicons .bsd-dribbble .bsd-sicon {
  color: #ea4c89
}
.bsd-socialicons .bsd-stumbleupon .bsd-sicon {
  color: #eb4924
}
.bsd-socialicons .bsd-linkedin .bsd-sicon {
  color: #0085AE
}
.bsd-socialicons .bsd-rss .bsd-sicon {
  color: #f26522
}
.bsd-socialicons .bsd-flickr .bsd-sicon {
  color: #FF0084
}
.bsd-socialicons .bsd-sicon {
  background: #F5F5F5;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease
}
.bsd-socialicons .bsd-scount {
  display: block;
  color: #FFFFFF;
  background: #007ABE;
  padding: 5px 0;
  position: relative;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600
}
.bsd-socialicons .bsd-scount:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absdolute;
  pointer-events: none;
  border-color: rgba(238, 238, 238, 0);
  border-bottom-color: #007ABE;
  border-width: 4px;
  margin-left: -4px
}
.bsd-socialicons .bsd-scount:hover {
  background: #222222;
}
الخطوة 7: الآن انقر فوق حفظ القالب.
الخطوة 8: انتقل الآن إلى لوحة معلومات Blogger
الخطوة 9: ثم انتقل إلى قسم التخطيط الخاص بك.
الخطوة 10: انقر فوق "إضافة أداة" ، ثم حدد أداة "HTML / JavaScript".
الخطوة 11: الآن الصق كود HTML التالي في أداة "HTML / JavaScript"
<div class="bsd-socialicons">
<div class="bsd-socialInner">
  <!--Facebook-->
    <div class="bsd-social">
  <div class="bsd-facebook bsd-sinn">
      <a href='#' target='_blank' tibse="Facebook">
      <span class="bsd-sicon"><i class="fa fa-facebook"></i></span>
      <span class="bsd-scount">3.1K</span>
      </a>
      </div>
      </div>
  <!--Google Plus-->
    <div class="bsd-social">
  <div class="bsd-googleplus bsd-sinn">
      <a href='#' target='_blank' tibse="Google Plus">
      <span class="bsd-sicon"><i class="fa fa-google-plus"></i></span>
      <span class="bsd-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Twitter-->
  <div class="bsd-social">
  <div class="bsd-twitter bsd-sinn">
      <a href='#' target='_blank' tibse="Twitter">
      <span class="bsd-sicon"><i class="fa fa-twitter"></i></span>
      <span class="bsd-scount">1.4K</span>
      </a>
    </div>
    </div>
  <!--Instagram-->
  <div class="bsd-social">
  <div class="bsd-instagram bsd-sinn">
      <a href='#' target='_blank' tibse="Instagram">
      <span class="bsd-sicon"><i class="fa fa-instagram"></i></span>
      <span class="bsd-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Pinterest-->
  <div class="bsd-social">
  <div class="bsd-pinterest bsd-sinn">
      <a href='#' target='_blank' tibse="Pinterest">
      <span class="bsd-sicon"><i class="fa fa-pinterest"></i></span>
      <span class="bsd-scount">4.5K</span>
      </a>
    </div>
    </div>
  <!--Youtube-->
  <div class="bsd-social">
  <div class="bsd-youtube bsd-sinn">
      <a href='#' target='_blank' tibse="YouTube">
      <span class="bsd-sicon"><i class="fa fa-youtube"></i></span>
      <span class="bsd-scount">2.8K</span>
      </a>
    </div>
    </div>
  <!--Vine-->
  <div class="bsd-social">
  <div class="bsd-vine bsd-sinn">
      <a href='#' target='_blank' tibse="Vine">
      <span class="bsd-sicon"><i class="fa fa-vine"></i></span>
      <span class="bsd-scount">3.3K</span>
      </a>
    </div>
    </div>
  <!--SoundCloud-->
  <div class="bsd-social">
  <div class="bsd-soundcloud bsd-sinn">
      <a href='#' target='_blank' tibse="SoundCloud">
      <span class="bsd-sicon"><i class="fa fa-soundcloud"></i></span>
      <span class="bsd-scount">3.9K</span>
      </a>
    </div>
    </div>
 
      <!--VK-->
      <div class="bsd-social">
  <div class="bsd-vk bsd-sinn">
      <a href='#' target='_blank' tibse="VK">
      <span class="bsd-sicon"><i class="fa fa-vk"></i></span>
      <span class="bsd-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!---->
      <div class="bsd-social">
  <div class="bsd-foursquare bsd-sinn">
      <a href='#' target='_blank' tibse="Foursquare">
      <span class="bsd-sicon"><i class="fa fa-foursquare"></i></span>
      <span class="bsd-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!--GitHub-->
      <div class="bsd-social">
  <div class="bsd-github bsd-sinn">
      <a href='#' target='_blank' tibse="GitHub">
      <span class="bsd-sicon"><i class="fa fa-github"></i></span>
      <span class="bsd-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!--Dribbble-->
      <div class="bsd-social">
  <div class="bsd-dribbble bsd-sinn">
      <a href='#' target='_blank' tibse="Dribbble">
      <span class="bsd-sicon"><i class="fa fa-dribbble"></i></span>
      <span class="bsd-scount">3.9K</span>
      </a>
    </div>
    </div>
 
     <!--Stumbleupon-->
      <div class="bsd-social">
  <div class="bsd-stumbleupon bsd-sinn">
      <a href='#' target='_blank' tibse="Stumbleupon">
      <span class="bsd-sicon"><i class="fa fa-stumbleupon"></i></span>
      <span class="bsd-scount">3.4K</span>
      </a>
    </div>
    </div>
     <!--Linkedin-->
      <div class="bsd-social">
  <div class="bsd-linkedin bsd-sinn">
      <a href='#' target='_blank' tibse="Linkedin">
      <span class="bsd-sicon"><i class="fa fa-linkedin"></i></span>
      <span class="bsd-scount">1.5K</span>
      </a>
    </div>
    </div>
     <!--Rss-->
      <div class="bsd-social">
  <div class="bsd-rss bsd-sinn">
      <a href='#' target='_blank' tibse="Rss">
      <span class="bsd-sicon"><i class="fa fa-rss"></i></span>
      <span class="bsd-scount">1.9K</span>
      </a>
    </div>
    </div>
     <!--Flickr-->
      <div class="bsd-social">
  <div class="bsd-flickr bsd-sinn">
      <a href='#' target='_blank' tibsde="flickr">
      <span class="bsd-sicon"><i class="fa fa-flickr"></i></span>
      <span class="bsd-scount">2.9K</span>
      </a>
    </div>
    </div>
    </div>
</div>
</div>

التخصيص :

غير الكل مع مثال رابط الفيسبوك لملف التعريف الخاص بك: # استبدل بـ https: //www.facebook.com/flammainfo
غيّر كل رقم بأرقام معجبينك على مواقع التواصل ، على سبيل المثال: <span class = "bsd-scount"> 2.9K </span> استبدال بـ <span class = "bsd-scount"> 5.9K </span>
الآن احفظ أداتك .. وشاهدها على مدونتك إذا واجهتك أى مشكلة أترك تعليق وسوف نتواصل معك لحلها

الكــاتــب

    • مشاركة

هناك تعليق واحد:

جميع الحقوق محفوظة لــ فلاما للمعلوميات 2019 ©