اضافة اداة التواصل الاجتماعي لمدونتك بشكل احترافي مثل مدونة المحترف - المطور التقني | شروحات ودروس مكتوبة و مصورة بالفيديو -->

الاثنين، 2 مايو 2016

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




إخواني متتبعي مدونة المطور التقني سلام الله عليكم اليوم أردت فقط مشاركتكم بإضافة مواقع التوصل الإجتماعى مثل تلك الإضافة الرائعة في قالب الأخ أمين راغيب مؤسس مدونة المحترف وهذه الإضافة تجمع بين موقع فيسبوك وجوجل بلس و تويتر واليوتيوب وهي إضافة جد رائعة وبشكل احترافي ويمكنك استخدامهاعلى جميع قوالب بلوجر فهى سهل التركيب.
طريقة التركيب :
1- اذهب إلي قالب ثم إلى تحرير HTML و قم بالبحث على هذا الوسم ]]></b:skin> وأضف قبله مباشرة هذا الكود و بعدها اضغط على حفظ النموذج
div#social {
  overflow: hidden;
  margin: 7px auto;
  margin-top: -5px;
  margin-right: -15px;
  width: 1103px;
}
#social ul li {
  float: right;
  width: 25%;
  padding: 13px 0;
  padding-bottom: 20px;
}
li.fb {
  background: #366299 !important;
}
li.ggl {
  background: #CB2027 !important;
}
li.twt {
  background: #4099FF !important;
}
ul li {
  list-style: none;
}
#social ul li p {
  display: block;
  padding: 10px 15px;
  transition: 0.4s;
  color: #fff;
  font-size: 16px;
  text-align: center;  font-weight: 400;
  font-family: Electrolize,ge_dinar_oneregular;
}
#social ul li a {
  display: block;
  background: #1f376c;
  padding: 8px 0;
  transition: 0.4s;
  width: 100px;
  color: #fff;
  margin: 0 auto;
  font-size: 16px;
  text-align: center;font-weight: 400;
  font-family: Electrolize,ge_dinar_oneregular;
}
#social i {
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.13);
  line-height: 30px;
  border-radius: 50%;
  margin-left: 2px;
  font-size: 14px;
}
.fa-facebook:before {
  content: "\f09a";  margin-left: 0px;
}
li.ytb {
  background: #D1252A !important;
}
.p2 {
  background: #AF1A20 !important;
}
.p3 {
  background: #3A8DEC !important;
}
.p4 {
  background: #BB1E23 !important;
}
.p1 {
  background: #2F5686 !important;
}
 2- اذهب إلى التخطيط و قم باختيار المكان المناسب هذه الأداة حسب ذوقك و انق على إضافة أداة ثم انقر على HTML/JAVASCRIPT ثم الصق هذا الكود التالي
<b:if cond='data:blog.url == data:blog.homepageUrl'><div id='social'><ul><li class='fb'><p>إنظم إلينا عبر صفحتنا على الفايسبوك.</p><a class='p1' href='https://www.facebook.com/th3weblamps'><i class='fa fa-facebook'/> تابع</a></li><li class='ggl'><p>إنظم إلينا عبر جوجل بلس.</p><a class='p2' href='https://plus.google.com/u/0/b/112188864096769743742/112188864096769743742'><i class='fa fa-google-plus'/> تابع</a></li><li class='twt'><p>إنظم إلينا عبر تويتر.</p><a class='p3 ' href='https://www.twitter.com/th3weblamps'><i class='fa fa-twitter'/> تابع</a></li><li class='ytb'><p>اشترك في قناتنا على اليوتوب.</p><a class='p4' href='https://www.youtube.com/channel/UC_pOSWwxd4rm0SioxWTBAQg'><i class='fa fa-youtube'/> اشترك</a></li></ul></div></b:if>
و هكذا سوف تضاف هذه الأدة بنجاح


0 تعليقات على " اضافة اداة التواصل الاجتماعي لمدونتك بشكل احترافي مثل مدونة المحترف "