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

بسم الله الرحمان الرحيم

اما بعد متابعي ومتابعات مدونة حاسوبي Astuce

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

بدون اطالة لنشاهد التجربة

تركيب الاضافة

في المكان المناسب لك اما تحت التدوينة او في اداة HTML/JavaScript اضف الكود التالي

<style>
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

#socialmedia {list-style-type:none;}
#socialmedia li {
display: inline-block;
padding: 0;
}

.sicon{opacity:1;transition:all .5s;}
.sicon:hover {opacity:0.5;border-radius:20px;transition:all .5s;}
</style>
<ul id="socialmedia"><a href="https://astuce-hassoubi.blogspot.com/" style="display:none;">حاسوبي Astuce</a>
<li class="tooltip"><a href="http://www.facebook.com/yourid" target="_blank"><img class="sicon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQmcDcYzOJ-Qb_kA9GcO90juGdP2y9hlo-t1awezc3NxB7E9lIPsquu_FnXJqfJpEjcD_ryPuPfOOVHe2mfAdJb6zdxvVfD33T0llljtXm7qC9lUoVgJgrVxMvTeeJOU3XGIHhnLfi1UT8/s1600/Facebook.png"/></a><span class="tooltiptext">Facebook</span></li>
<li class="tooltip"><a  href="http://www.twitter.com/yourtwitter" target="_blank"><img class="sicon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFHPcPPoLmbD_FJDF1xA95M1sWueM81hTbejbbiBJkyCHRcOuiUpzfVhJ8DgDVsUO566mKsC_d9cz7VF1tmhnUCmn8dSWikbXSyVIRrZog1-SGJDdT41VRRZsdHWoZi9ZY7zl-fQCT5iK/s1600/Twitter.png"/></a><span class="tooltiptext">Twitter</span></li>
<li class="tooltip"><a  href="https://www.youtube.com/user/youruser" target="_blank"><img class="sicon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEtEgd42XH3NMn25Rz3McGwqzkUqmvRJigJkLbJ8Opv-5dm5AAoM8Xa1mkTf4CRBty_d0d5LoZ7dbNZPbCpPWwXnDESvj0czC6elbvbklxE6NVCJuoKZjgBPAqCiAFkX97CwGfllLddePu/s1600/Youtube.png"/></a><span class="tooltiptext">Youtube</span></li>
<li class="tooltip"><a  href="http://feeds.feedburner.com/yourrss" target="_blank"><img class="sicon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwbpvUSex4eCkXS5ESiqWC8EXB-YM9i6frQrvSxToC-xxH_EHGp9R8M9ua2RpoSXsKOEeSYC01XGmcSiN62PCNduK1ZSeewpoBHBHAGT_z451Q8ATE0bP3qj3372Q2NnUcMCl1nSIDHP4x/s1600/RSS.png"/></a><span class="tooltiptext">RSS</span></li>
<li class="tooltip"><a href="https://plus.google.com/yourgoogle+" target="_blank"><img class="sicon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivmd2jA7tB3Rz1WQHNs_3Tku7ne2wy2kHg-BNDyw9NgjooKwCoNPCGU2JZjh2SbWYCFn-2dDKfaNdLu_W2SRfrhBBCGcpg8gmJRM24WXWnjdYfqCfTGfngYmowJ2Volsdf02IpX26z2Ulx/s1600/Google+.png"/></a><span class="tooltiptext">Google+</span></li>
</ul>

تحديد الكل

غير روابط الصفحات بروابط صفحاتك في المواقع الاجتماعية
ستجد الروابط دائما في الكود التالي

<a href="url_here"

لاضافة موقع تواصل آخر يرجى اضافة الكود التالي

<li class="tooltip"><a href="http://WEBSITEURL" target="_blank"><img class="sicon" src="IMGSRCURL"/></a><span class="tooltiptext">WEBSITE NAME</span></li>

مع تغيير رابط الصورة
و رابط الموقع
ووضع اسم الموقع
ووضعه قبل الكود التالي

</ul>

وهذا مثال على اضافة موقع Instagram

<li class="tooltip"><a href="http://instagram.com/yourid" target="_blank"><img class="sicon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjchqTaEOqLjIG6dU_jeudYVDRp0HT2dHkYfm73BzbESno6d-xL6UZUaWax6FAsUWT4NbyH7xzfxB-vykHxEseHqiOctpV1iBgqRAC8uw9xfK_bL0LLqcHZ7wAsa0UTYqV086j09xm6Gcgy/s1600/INSTAGRAM-logo-48x48+-+Copie+%25282%2529.png"/></a><span class="tooltiptext">Instagram</span></li>

تحديد الكل انتهى الشرح

اعجبتك الاضافة?لا تنسى تحفيزنا بتعليق او مشاركة للموضوع