اضافة ايقونات التواصل الاجتماعي في مدونة بلوجر

1 26 2 دقائق

add social media icons to blogger blog 1626153420

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

اضافة ايقونات التواصل الاجتماعي في مدونة بلوجر

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

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

لهذا اذا كنت فعلا مهتم باضافة ايقونات التواصل الاجتماعي في مدونة بلوجر التي تظهر على يسار الموقع وتكون متحركة مع جميع الزوار والتي تظهر في الصفحات والمشاركات وايضا في الصفحة الرئيسية ، سوف نقدم لك احدى افضل ايقونات التواصل الاجتماعية والتي يمكنك إضافة فيها الموقع الاجتماعية الفيسبوك Facebook وايضا تويتر twitter و tumblr و plus.google و feeds.feedburner . الا اننا سوف نشرح لكم كيفية تغير روابط الموجودة في الكود الى روابط خاصة بكم بالصور والفيديو على قناة هشام هاشم العروجي .

اضافة ازرار مواقع التواصل الاجتماعي في مدونة بلوجر

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

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

1 – سوف تقوم بنسخ الكود ثم بعدها سوف تدخل الى المدونة ثم الى التنسيق بعدها سوف تقوم بفتح اضافة اداة جديدة سوف تجد العديد من الاختيارات سوف تختار ، سوف تختار اضافة اداة HTML JAVASCRIPT وتقوم بلصق الكود بالكامل .

<div id='social-sidebar'> <ul> <li> <a class="entypo-twitter" href="https://twitter.com/infos_sati" target="_blank" rel="noopener"> Twitter </a></li> <li> <a class="entypo-gplus" href="https://plus.google.com/u/0/105802265575293727870/posts" target="_blank" rel="noopener"> google+ </a></li> <li> <a class="entypo-tumblr" href="http://www.tumblr.net/" target="_blank" rel="noopener"> tumblr </a></li> <li> <a class="entypo-facebook" href="http://www.facebook.com/infossati12" target="_blank" rel="noopener"> facebook </a></li> <li> <a class="entypo-rss" href="http://feeds.feedburner.com/" target="_blank" rel="noopener"> feedburner </a></li> </ul> </div><style type='text/css'>/**/ @charset "utf-8"; /* CSS Document */ /* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : /---------- */ @import url(http://weloveiconfonts.com/api/?family=entypo); [class*="entypo-"]:before { font-family: 'entypo', sans-serif; } /* ---------- GENERAL ---------- */ #social-sidebar a { text-decoration: none; } #social-sidebar ul { list-style: none; margin: 0; padding: 0; } /* ---------- Social Sidebar ---------- */ #social-sidebar { left: 0; margin-top: -75px; /* (li * a:width) / -2 */ position: fixed; top: 50%; } #social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; } #social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; } #social-sidebar ul li a { background: #121212; color: #fff; display: block; height: 50px; font-size: 18px; line-height: 50px; position: relative; text-align: center; width: 50px; } #social-sidebar ul li a:hover span { left: 130%; opacity: 1; } #social-sidebar ul li a span { border-radius: 3px; line-height: 24px; left: -100%; margin-top: -16px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; padding: 4px 8px; position: absolute; -webkit-transition: opacity .3s, left .4s; -moz-transition: opacity .3s, left .4s; -ms-transition: opacity .3s, left .4s; -o-transition: opacity .3s, left .4s; transition: opacity .3s, left .4s; top: 50%; z-index: -1; } #social-sidebar ul li a span:before { content: ""; display: block; height: 8px; left: -4px; margin-top: -4px; position: absolute; top: 50%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 8px; z-index: -2; } #social-sidebar ul li a[class*="twitter"]:hover, #social-sidebar ul li a[class*="twitter"] span, #social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; } #social-sidebar ul li a[class*="gplus"]:hover, #social-sidebar ul li a[class*="gplus"] span, #social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; } #social-sidebar ul li a[class*="tumblr"]:hover, #social-sidebar ul li a[class*="tumblr"] span, #social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; } #social-sidebar ul li a[class*="facebook"]:hover, #social-sidebar ul li a[class*="facebook"] span, #social-sidebar ul li a[class*="facebook"] span:before { background: #234999; } #social-sidebar ul li a[class*="rss"]:hover, #social-sidebar ul li a[class*="rss"] span, #social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; } /*]]>*/</style>

2 – سوف تقوم بتغيير عنوان صفحة الفيس بوك وايضا تويتر كما في الصورة .

مثال سوف تجد : http://www.facebook.com/infossati12 سوف تغير فقط كلمة infossati12 الى اسم صفحة الفيس بوك وهكذا مع تويتر ، اما الباقيات غير الرابط بالكامل ان وجدت لديك