اضافة ازرار مواقع التواصل الاجتماعى للمدونة بلوجر بشكل جميل واحترافى
- كود الاداة
<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/AVvXsEgSagqbis-yEf5Fcen9jFE-MVNc-LWwPX7ULe6WnSQpgKIsH_j0CeYsxgdfoBci1-qp_gvNrlUPiA5UH4uoRvSzA0AKz5k22YYx8M1ePbtl6cOjy1MMvdkCV3vFPw0GXLQkn3n5Zvse7WrU/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/AVvXsEgyDirjDMUcKPAqvYbaCIntChUJ4bjQbTV-ZZqunumz3wxuq1_H0tEMxJu3w0cHB4UIGidZteFfZf2Fi1c07qxNjhrpoQnnPMLc68sjYkHH5-8zerASFNn_W_4g3DMQdpToAFtu5L9qxmRK/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/AVvXsEj69eIlMkCnlSVFrCu7Gel7NsvB2XWCHHvL5ivL3sv8P5-1rR1DdLPpYJo86GCxgrDetw6F_LmGg6WikzdTY6Hq2EkGxD4GMyk7TMrQg1xD15mgJK6a6ovNQeR2EjSctAxQzLibItaxkvw3/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/AVvXsEjXUVsoRewnZ6G8HVObR7witi3vPM9H84f-Pk_1Ytoro5TQs4sYt4u3hWd4wxcobKHSQEyRnwZcZcxvsGtigEPNMcyJh5sAIEZUQu3LwVYk5DxU7nWfYwOZXvMn7x4xeTQ066QIMh3lqW7a/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/AVvXsEhwySQDkCmZjjVf03qJx0sOyWzoz_Ux4d3h0gWE6XgvSco6CpcFzwaFtkelFgFcuXFvbgYgsHH833qtC1lceGGpX3tB5Masa1BBWOjhN3fZOg4TPOS6_LYnt470oNzQy4yb0eypHRWSdyD4/s1600/Google+.png"/></a><span class="tooltiptext">Google+</span></li>
</ul>
.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/AVvXsEgSagqbis-yEf5Fcen9jFE-MVNc-LWwPX7ULe6WnSQpgKIsH_j0CeYsxgdfoBci1-qp_gvNrlUPiA5UH4uoRvSzA0AKz5k22YYx8M1ePbtl6cOjy1MMvdkCV3vFPw0GXLQkn3n5Zvse7WrU/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/AVvXsEgyDirjDMUcKPAqvYbaCIntChUJ4bjQbTV-ZZqunumz3wxuq1_H0tEMxJu3w0cHB4UIGidZteFfZf2Fi1c07qxNjhrpoQnnPMLc68sjYkHH5-8zerASFNn_W_4g3DMQdpToAFtu5L9qxmRK/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/AVvXsEj69eIlMkCnlSVFrCu7Gel7NsvB2XWCHHvL5ivL3sv8P5-1rR1DdLPpYJo86GCxgrDetw6F_LmGg6WikzdTY6Hq2EkGxD4GMyk7TMrQg1xD15mgJK6a6ovNQeR2EjSctAxQzLibItaxkvw3/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/AVvXsEjXUVsoRewnZ6G8HVObR7witi3vPM9H84f-Pk_1Ytoro5TQs4sYt4u3hWd4wxcobKHSQEyRnwZcZcxvsGtigEPNMcyJh5sAIEZUQu3LwVYk5DxU7nWfYwOZXvMn7x4xeTQ066QIMh3lqW7a/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/AVvXsEhwySQDkCmZjjVf03qJx0sOyWzoz_Ux4d3h0gWE6XgvSco6CpcFzwaFtkelFgFcuXFvbgYgsHH833qtC1lceGGpX3tB5Masa1BBWOjhN3fZOg4TPOS6_LYnt470oNzQy4yb0eypHRWSdyD4/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/AVvXsEjiYmQkE0KjhSfFS3_cDtvT7Z8xVQnkrRbSsHNFbwguyc4j4Bmzq2kiqJE-EmIIs960fSvMScqktZroqg6PRIcCvCX1UyobGIHxxmk-2N2C-1glWl04toAY8e-6OP8YjwE1oOh36b75Ug5q/s1600/INSTAGRAM-logo-48x48+-+Copie+%25282%2529.png"/></a><span class="tooltiptext">Instagram</span></li>
0 comments