طريقة إضافة أزرار أنيقة خاصة بالمواقع الإجتماعية أو بأقسام المدونة بتقنية CSS

السلام عليكم ورحمة الله وبركاته.

درس اليوم هو عن طريقة إضافة أزرار أنيقة خاصة بالمواقع الإجتماعية أو بأقسام المدونة بتقنية CSS.

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

نمر لشرح الطريقة:

1.توجه إلى لوحة التحكم الخاصة بمدونتك.
2.إضغط على قالب.
3. ثم تحريرhtml.
4.إضغط على متابعة.
5.إختار توسيع القالب
6. إبحث عن هذا الكود باستعمال Ctrl+F:

</head>

تم ضع قبله مباشرة الكود التالي:

<style type="text/css">

.spotlightmenu{
width: 100%;
overflow:hidden;
}

.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* Fuente - Tamaño y estilo */
list-style-type: none;
text-align: center; /* Alineación "left", "center", o "right"  */
}

.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px;
}

.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px;
height:50px;
text-decoration: none;
color: black; /*Color del título base*/
margin: 0 auto; /* Espacio entre los títulos en px se quitaría auto */
overflow:hidden;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.spotlightmenu li:hover a{
color: white; /* Color del título resaltado */
background: #a71b15; /* Color de fondo del efecto */
-webkit-border-radius: 50%; /* Medida en porcentaje del borde circular */
-moz-border-radius: 50%;
border-radius: 50%;
}

.spotlightmenu li a span{
position:relative;
top:35%; /* Mover el texto del menú hacia arriba para centrarlo si se necesitara */
}

</style>

ملاحظة:

يمكنك التعديل على لون الدائرة الخاص بالأزرار بتغير كود اللون المكتوب بالأحمر في الكود السابق.

7.الآن كل ما عليك فعله لإضافة الأزرار على شكل أداة خاصة بالمواقع الإجتماعية أو الأقسام هو التوجه ألى لوحة التحكم الخاصة  بمدونتك.

8. تخطيط.
9.إضافة أداة.
10.اختار  Html/Javascript.
11.أضف الكود التالي:

<div class="spotlightmenu">
<ul>
<li><a href="رابط صفحتك على فايسبوك أو رابط قسم "><span>أكتب إم إسم القسم أو فايسبوك</span></a></li>
<li><a href="الرابط 2"><span>الإسم 2</span></a></li>
<li><a href="الرابط 3"><span>الإسم 3</span></a></li>
<li><a href="الرابط 4"><span>الإسم 3</span></a></li>
</ul>
</div>

ملاحظة:
-قم بتعديل الكود بما يناسبك.
-يمكنك سحب الإضافة للمكان الذي يناسبك.

-إذا كنت تريد إدراج الأزرار داخل موضوع كل ما عليك فعله عندما تهم بكتابة الموضوع إضغط html بجانب تأليف وقم بإدراج الكود السابق في المكان الذي تود أن تظهر فيه الأزرار .
-يمكنك التحكم بعدد الأزرار بحدف أو إظافة الجزء المشار إليه باللون الأزرق في الكود السابق.


أتمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق.

المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم.