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

<

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

صور للأداة

مثال حي للأداة

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

1.تتجه الي لوحة التحكم
2.نختار التخطيط
3.اضافة اداة
4.نختار اضافة اداة Html ثم نضع الكود
صورة توضيحية لطريقة التركيب

الكود

<style type="text/css">
#buttonbg {width: 335px;margin: 10px 20px;padding: 0;}
#buttonbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none;  }
#buttonbg .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Ag8IB38gHL_NupzBD9DPewGP_yZjNrC78I04-5FTMTThXlrzfWY1zXjvDGcM9GHRF9rHuSD01jTitsV2aWuK4_NvZlPJJ1tp_szqX6hEqIvH7H3-SIhpBICWNEZDWS-LWawMwry9owk/s1600/blsocial12.png') 0 0 no-repeat;
background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;
color: #141414;float: none;height: 48px;line-height: 48px;
margin: 5px 0;position: relative;text-align: left;text-indent: 90px;
text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;
-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
transition: width .25s ease-in-out, background-color .25s ease-in-out;
-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
-o-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
text-decoration: none;}
#buttonbg span:hover {visibility: hidden;}
#buttonbg span {display: block;top: 15px;position: absolute;left: 90px;}
#buttonbg .icon {color: #fafafa;overflow: hidden;}
#buttonbg .fb {background-color: rgba(45,118,185, .42); background-position: 0 -382px;}
#buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;}
#buttonbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;}
#buttonbg .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}
#buttonbg .linked {background-color: rgba(0, 87, 114, .42);  background-position: 0 -574px;}
#buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;}
#buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;}
#buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;}
#buttonbg li:hover .icon {width: 250px; }
#buttonbg li:hover .icon {background-color: #d91e76; }
#buttonbg li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; }
#buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#buttonbg li:hover .pint {background-color: #C00;background-position: 0 -142px; }
#buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;}
#buttonbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;}
#buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; }
#buttonbg li:hover .rss {background-color: #EC5601;background-position: 0 -334px; }
#buttonbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>
<ul id="buttonbg">
<li ><a href="رابط صفحتك علي الفيس بوك" class="icon fb">تابعنا عبر فيس بوك</a><span>Like us on Facebook</span></li>
<li ><a href="رابط ايميلك علي تويتر" class="icon twit" >تابعنا عبر اتويتر </a><span>
Follow us On twitter </span></li>
<li ><a href="رابط ايميلك علي جوجل بلس" class="icon google" >تابعنا عبر جوجل بلس</a><span>+Follow us on Google</span>
</li>
<li ><a href="رابط الــبينترست "class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span></li>
<li ><a href="رابط ديفيانت أرت " class="icon deviant" >Follow us on DeviantArt</a><span>Follow us on DeviantArt</span></li>
<li ><a href="رابط قناتك علي اليوتيوب" class="icon ytube">تابعنا عبر يوتيوب</a><span>Follow us on Youtube</span></li>
<li ><a href="رابط الـفيدز" class="icon rss" >Subscribe via RSS</a><span>Subscribe via RSS</span></li>
</ul>

لاحظ

يوجد معظم الاشخاص ليس لديهم ايميل \ موقع علي ديفيانتأرت والــبينترست لذا قم باستعمال هذا الكود انا قمت بحذف هذين الايميلين منه

الكود

<style type="text/css">
#buttonbg {width: 335px;margin: 10px 20px;padding: 0;}
#buttonbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none;  }
#buttonbg .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Ag8IB38gHL_NupzBD9DPewGP_yZjNrC78I04-5FTMTThXlrzfWY1zXjvDGcM9GHRF9rHuSD01jTitsV2aWuK4_NvZlPJJ1tp_szqX6hEqIvH7H3-SIhpBICWNEZDWS-LWawMwry9owk/s1600/blsocial12.png') 0 0 no-repeat;
background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;
color: #141414;float: none;height: 48px;line-height: 48px;
margin: 5px 0;position: relative;text-align: left;text-indent: 90px;
text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;
-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
transition: width .25s ease-in-out, background-color .25s ease-in-out;
-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
-o-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
text-decoration: none;}
#buttonbg span:hover {visibility: hidden;}
#buttonbg span {display: block;top: 15px;position: absolute;left: 90px;}
#buttonbg .icon {color: #fafafa;overflow: hidden;}
#buttonbg .fb {background-color: rgba(45,118,185, .42); background-position: 0 -382px;}
#buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;}
#buttonbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;}
#buttonbg .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}
#buttonbg .linked {background-color: rgba(0, 87, 114, .42);  background-position: 0 -574px;}
#buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;}
#buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;}
#buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;}
#buttonbg li:hover .icon {width: 250px; }
#buttonbg li:hover .icon {background-color: #d91e76; }
#buttonbg li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; }
#buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#buttonbg li:hover .pint {background-color: #C00;background-position: 0 -142px; }
#buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;}
#buttonbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;}
#buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; }
#buttonbg li:hover .rss {background-color: #EC5601;background-position: 0 -334px; }
#buttonbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>

<ul id="buttonbg">
<li ><a href="رابط صفحتك علي الفيس بوك" class="icon fb">تابعنا عبر فيس بوك</a><span>Like us on Facebook</span></li>
<li ><a href="رابط ايميلك علي تويتر" class="icon twit" >تابعنا عبر اتويتر </a><span>
Follow us On twitter </span></li>
<li ><a href="رابط ايميلك علي جوجل بلس" class="icon google" >تابعنا عبر جوجل بلس</a><span>+Follow us on Google</span></li>
<li ><a href="رابط قناتك علي اليوتيوب" class="icon ytube">تابعنا عبر يوتيوب</a><span>Follow us on Youtube</span></li>
<li ><a href="رابط الـفيدز " class="icon rss" >Subscribe via RSS</a><span>Subscribe via RSS</span></li>
</ul>

وهكذا تكون انتهت تدوينتنا أراكم في تدوينة أخري بإذن الله

<

6:03 ص