اضافات بلوجر

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

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

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

في المكان المناسب لك إما تحت التدوينة أو في أداة 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]

 

في الأخير أرجوا الإفادة للجميع و بالتوفيق

عياش محمد

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

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني.

زر الذهاب إلى الأعلى