كيفية إضافة مشغل صوت Mp3 مع قائمة تشغيل في بلوجر

هناك العديد من أزرار وسائل التواصل الاجتماعي لموقع الويب، اليوم سنتعلم في هذا المقال كيفية إضافة أزرار وسائل التواصل الاجتماعي لموقع الويب الخاص بك قائمة منسدلة بمظهر احترافي.

أضف أزرار الوسائط الاجتماعية في مدونة بلوجر Blogger

تسمح أزرار وسائل الوسائط الاجتماعية لزوار موقع الويب الخاص بك، بمتابعتك على وسائل التواصل الاجتماعي Social Media، ويساعدك كود ازرر الوسائط الاجتماعية شرح اليوم على زيادة متابعيك والعثور عليك بسهولة بوسائل التواصل.

بالتأكيد يوجد العديد من أدوات الوسائط الاجتماعية، ولكن اليوم سأقدم لك كود خفيف مميز يعمل بشكل احترافي في مدونة بلوجر على شكل قائمة منسدلة بها مواقع التواصل الخاصة بك.

ما يميز هذه الأداة بخلاف ان الكود خفيف هو انها لا تشغل مساحة كبيرة، مع خيار القائمة المنسدلة والواجهة الامعة مع الايقونات التي تجذب زوار موقعك بمتابعتك بسهولة.

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

 

يمكنك إضافة وسائل التواصل الاجتماعي في بلوجر قائمة منسدلة بشكل احترافي. مدمج في هذا الكود أزرر وسائل التواصل الاجتماعي لجميع الشبكات الوسائط الاجتماعية المميزة على الانترنت مثل:

• زر وسائل التواصل الاجتماعي فيسبوك Facebook.
• زر وسائل التواصل الاجتماعي تويترTwitter.
• موقع  لينكد ان LinkedIn.
• زر وسائل التواصل الاجتماعي كوراQuora.
• زر شبكة بينترست Pinterest.
• زر يوتيوب YouTube.
• زر وسائل التواصل الاجتماعي انستجرام Instagram.
• زر حساب واتساب WhatsApp.

جميع أزرر وسائل التواصل الاجتماعي Social Media، تتميز بأيقونة مميزة لكل شبكة تواصل، وأيضاً زر لإضافة رابط RSS Feed، وزر أخر لإضافة موقع Website بأيقونات تميزهم،

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

لماذا أحتاج إلى رموز وسائل التواصل الاجتماعي؟

• جذب متابعين الجدد.
• زيادة التواصل. يمنح زوارك طريقة أكثر سهولة للاتصال بك.
• تعزيز علامة تجارية في وسائل التواصل الاجتماعي
• قم بتوجيه زوار موقع الويب الخاص بك إلى حساباتك الاجتماعية بنقرة واحدة.
• أظهر أنك أقرب إلى عملائك، مما يمنحهم طريقة أكثر سهولة للاتصال بك.

كيف تضيف أيقونات مواقع التواصل الاجتماعي إلى الموقع؟

نظرًا لأن الوسائط الاجتماعية تلعب دوراً مهماً في التفاعل مع جمهورك، يجب على كل موقع ويب و نشاط تجاري عبر الإنترنت أن يمنح الزوار طريقة للاحتكاك ومشاركة محتوى موقع الويب على وسائل التواصل الاجتماعي.

وجميعاً يعلم أن بلوجر Blogger لا تقبل إضافات على عكس ووردبريس WordPress لديها العديد من الإضافات لأداة الوسائط الاجتماعية.

لذلك، سيغنيك كود وسائل التواصل الاجتماعي هذا عن البحث عن طريقة إضافة الوسائط الاجتماعية للمدونة الخاصة بك على بلوجر.

 

خطوات إضافة وسائل التواصل الاجتماعي لموقع الويب

يمكنك بسهولة إضافة وسائل التواصل الاجتماعي Social Media، في مدونة بلوجر Blogger الخاصة بك، فقط اتبع الخطوات:

1. قم بتسجيل الدخول إلى مدونة بلوجر Blogger الخاص بك وانتقل إلى لوحة تحكم بلوجر Blogger.
2. انتقل إلى علامة التبويب وقم بالنقر على التنسيق.
3. انقر فوق "إضافة أداة " ثم حدد أداة "HTML / JavaScript ".
4. الآن انسخ الكود أدناه والصقه في الأداة " HTML / JavaScript".

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

<style>
.AlkoptanTech {
  display:inline-block;
  font:normal bold 12px Arial,Sans-Serif;
  position:relative;
  width:300px;
  background-color:#111;
  text-align:left;
  /* Widget by www.alkoptantech.com*/
  background-image:-webkit-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-moz-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-ms-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-o-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  /* www.alkoptantech.com */  filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#333333',endColorstr='#111111');
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
  -webkit-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
}
.AlkoptanTech:before,
.AlkoptanTech:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:3px solid transparent;
  border-width:5px 3px;
  border-bottom-color:#999;
  position:absolute;
  top:25%;
  right:5px;
  z-index:4;
}
.AlkoptanTech:after {
  border-color:#999 transparent transparent;
  top:auto;
  bottom:25%;
}
.AlkoptanTech input {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:15px;
  height:100%;
  opacity:0;
  z-index:10;
  cursor:pointer;
}
.AlkoptanTech label {
  display:block;
  line-height:45px;
  color:rgba(255,255,255,.5);
  padding:0 15px;
  -webkit-transition:all 0s ease-out;
  -moz-transition:all 0s ease-out;
  -ms-transition:all 0s ease-out;
  -o-transition:all 0s ease-out;
  transition:all 0s ease-out;
}
.AlkoptanTech label:before {
  content:attr(data-default);
}
.AlkoptanTech label:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:15px;
  border-left:1px solid rgba(0,0,0,.4);
  -webkit-border-radius:0 7px 7px 0;
  -moz-border-radius:0 7px 7px 0;
  border-radius:0 7px 7px 0;
  -webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
  -moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1);
}
.AlkoptanTech input:hover + label {
  color:white;
}
.AlkoptanTech input:hover + label:after {
  background-color:rgba(255,255,255,.04);
}
.AlkoptanTech ul {
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:100%;
  left:14px;
  right:14px;
  background-color:#222;
  border:1px solid #111;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4);
  visibility:hidden;
  opacity:0;
  z-index:99;
}
.AlkoptanTech li {
  margin:0 0;
  padding:0 0;
  list-style:none;
  float:left;
  width:50%;
  display:inline;
}
.AlkoptanTech a {
  display:block;
  position:relative;
  color:#999;
  text-decoration:none;
  text-shadow:0 0 2px black;
  line-height:30px;
  border-top:1px solid #111;
  border-right:1px solid #111;
  padding:0 15px 0 32px;
  -webkit-box-shadow:inset 0 0 0 1px #333;
  -moz-box-shadow:inset 0 0 0 1px #333;
  box-shadow:inset 0 0 0 1px #333;
  /* Alkoptantech note: An unstable square shadow will appear if you do not specify a stroke radius of less than 1 pixel. */
  -webkit-border-radius:1px;
  -moz-border-radius:1px;
  border-radius:1px;
}
.AlkoptanTech a:nth-child(even) {
  border-right-width:0;
}
.AlkoptanTech a:before {
  content:"";
  display:block;
  width:16px;
  height:16px;
  position:absolute;
  top:7px;
  left:7px;
  background-color:transparent;
  background-repeat:no-repeat;
  background-position:50% 0;
}
.AlkoptanTech a:hover:before {
  background-position:50% 100%;
}
.AlkoptanTech .Techrss:before      {background-image:url('https://bit.ly/3UYZTEI');}
.AlkoptanTech .Techfacebook:before {background-image:url('https://bit.ly/3O7kEfi');}
.AlkoptanTech .Techtwitter:before  {background-image:url('https://bit.ly/3EAdahT');}
.AlkoptanTech .Techlinkedin:before {background-image:url('https://bit.ly/3AgcNGz');}
.AlkoptanTech .Techquora:before    {background-image:url('https://bit.ly/3Gci59U');}
.AlkoptanTech .Techpinterest:before{background-image:url('https://bit.ly/3TBbRDt');}
.AlkoptanTech .Techyoutube:before  {background-image:url('https://bit.ly/3UzgVJQ');}
.AlkoptanTech .Techwhatsapp:before {background-image:url('https://bit.ly/3g6ENFH');}
.AlkoptanTech .Techinstagram:before{background-image:url('https://bit.ly/3TBRyFW');}
.AlkoptanTech .Techwebsite:before  {background-image:url('https://bit.ly/3EuPN9l');}    
  
.AlkoptanTech a:hover {
  background-color:rgba(0,0,0,.2);
  color:#ccc;
}
/* www.alkoptantech.com*/
.AlkoptanTech input:TechSocial {
  color:rgba(255,255,255,.4);
  -webkit-transition-duration:.4s;
  -moz-transition-duration:.4s;
  -ms-transition-duration:.4s;
  -o-transition-duration:.4s;
  transition-duration:.4s;
}
.AlkoptanTech input:TechSocial:before {
  content:attr(data-focus);
}
.AlkoptanTech input:TechSocial:after {
  background-color:rgba(0,0,0,.2);
  -webkit-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
  -moz-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
  box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1);
}
.AlkoptanTech input:checked ~ ul {
  visibility:visible;
  opacity:1;
}
</style>
 <div class="AlkoptanTech">
    <input type="checkbox"/>
    <label data-default="تابعنا على مواقع التواصل الاجتماعي ⭐ Social Media" data-focus="Select your favorite social media service..."></label>
    <ul>
        <li><a class="Techrss" href="#" target="_blank">RSS Feed</a></li>
        <li><a class="Techfacebook" href="#" target="_blank">Facebook</a></li>
        <li><a class="Techtwitter" href="#" target="_blank">Twitter</a></li>
        <li><a class="Techlinkedin" href="#" target="_blank">Linkedin</a></li>
        <li><a class="Techquora" href="#" target="_blank">Quora</a></li>
        <li><a class="Techpinterest" href="#" target="_blank">Pinterest</a></li>
        <li><a class="Techyoutube" href="#" target="_blank">Youtube</a></li>
        <li><a class="Techwhatsapp" href="#" target="_blank">Whatsapp</a></li>
        <li><a class="Techinstagram" href="#" target="_blank">instagram</a></li>
        <li><a class="Techwebsite" href="#" target="_blank">Website</a></li>
    </ul>

مشاهدة عرض تجريبي للإضافة

كيفية التعديل على كود وسائل التواصل الاجتماعي

بعد إضافة الكود في مدونتك يمكنك التعديل عليه، واضافة روابط مواقع التواصل Social Media الخاصة بك، ويمكنك حذف أي زر لمواقع التواصل لست بحاجة له، أو التعديل وجعل الروابط جميعها ترتبط بمواقع أخرى فقط تقوم بتكرار الكود نفسه وتغير الرابط.

كيفية التعديل على الكود وإضافة روابط مواقع التواصل الاجتماعي الخاصة بك:

• إضافة رابط موقع التواصل مكان رمز "#" الموجود اسفل الكود بجانب وسيلة التواصل "رابط وسيلة التواصل"= href.
• حذف وسيلة تواصل لا تحتاجها: تقوم بحذف كود الوسيلة كامل من التعليمات البرمجية الموجود به رابط ايقونة وسيلة التواصل، وأيضا حذف نفس كود رابط الوسيلة من الأسفل.
• تغير روابط وسائل التواصل وجعلها روابط لمواقع اخرى: تقوم بحذف جميع اكواد مواقع التواصل التي لا تحتاجها، وتقوم بنسخ كود الموقع وتكراره كما تشاء، الكود الكامل المدرج بجانبه Website.

تعديل المقال