اضافة ازرار لمواقع التواصل الاجتماعي بشكل إحترافي و رائع بلوجر
قد نجد أنه من المهم جدا إضافة أزرار أو أيقونات التواصل الاجتملعي للموقع أو المدونة لما فيها من فائدة . حيث أصبحت هذه الإضافة ضرورية لزيادة التفاعل الاجتماعي للموقع . في هذا الموضوع سنتطرق لأحد هذه الإضافات بشكل جميل و جذاب وسهولة التركيب مع أهكانية وضعها أينما تشاء .
طريقة التركيب
في المكان المناسب لك إما تحت التدوينة أو في أداة 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; } .sfacebook{opacity:1;transition:all .5s;} .sfacebook:hover {opacity:0.5;border-radius:20px;transition:all .5s;} .stwitter{opacity:1;transition:all .5s;} .stwitter:hover {opacity:0.5;border-radius:20px;transition:all .5s;} .syoutube{opacity:1;transition:all .5s;} .syoutube:hover {opacity:0.5;border-radius:20px;transition:all .5s;} .srss{opacity:1;transition:all .5s;} .srss:hover {opacity:0.5;border-radius:20px;transition:all .5s;} .sgoogle{opacity:1;transition:all .5s;} .sgoogle:hover {opacity:0.5;border-radius:20px;transition:all .5s;} </style> <ul id="socialmedia"><a href="https://kalammoufid.com/" style="display:none;">kalammoufid</a> <li class="tooltip"><a href="https://kalammoufid.com/facebook.com" target="_blank"><img class="sfacebook" src="http://2.bp.blogspot.com/-qdm69A16hRY/Uz-UJjTlKTI/AAAAAAAAD5Q/hOF2OPnGPjU/s1600/Facebook.png"/></a><span class="tooltiptext">Facebook</span></li> <li class="tooltip"><a href="https://kalammoufid.com/twitter.com" target="_blank"><img class="stwitter" src="http://4.bp.blogspot.com/-qQUui1EDcag/Uz-URAk7MyI/AAAAAAAAD7k/hEo67ngQqLA/s1600/Twitter.png"/></a><span class="tooltiptext">Twitter</span></li> <li class="tooltip"><a href="https://kalammoufid.com/youtube" target="_blank"><img class="syoutube" src="http://1.bp.blogspot.com/-iECtaP5XGxo/Uz-UTFKCelI/AAAAAAAAD8M/NVT-Jxwfli8/s1600/Youtube.png"/></a><span class="tooltiptext">Youtube</span></li> <li class="tooltip"><a href="https://kalammoufid.com/feed/" target="_blank"><img class="srss" src="http://2.bp.blogspot.com/-9cGvH4bmmPs/Uz-UOPepamI/AAAAAAAAD6w/bCFiKbA3Cyo/s1600/RSS.png"/></a><span class="tooltiptext">RSS</span></li> <li class="tooltip"><a href="https://kalammoufid.com/plus.google" target="_blank"><img class="sgoogle" src="http://1.bp.blogspot.com/-dTCjJ3KKKo0/Uz-UK77IcSI/AAAAAAAAD5k/y1xWbMi4oQM/s1600/Google+.png"/></a><span class="tooltiptext">Google+</span></li> </ul>
الآن قم بتغير الروابط الخاصة بمواقع التواصل الإجتماعي الخاصة بك :
[one_half]Facebook[/one_half][one_half_last]https://kalammoufid.com/facebook.com[/one_half_last]
[one_half]Twitter[/one_half][one_half_last]https://kalammoufid.com/twitter.com[/one_half_last]
[one_half]Youtube[/one_half][one_half_last]https://kalammoufid.com/youtube[/one_half_last]
[one_half]RSS[/one_half][one_half_last]https://kalammoufid.com/feed/[/one_half_last]
[one_half]Google+[/one_half][one_half_last]https://kalammoufid.com/plus.google[/one_half_last]
في الأخير أرجوا الإفادة للجميع و بالتوفيق