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

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

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

طريقة تركيب الإضافة

من لوحة التحكم على مدونتك إضغط على ''المظهر''
ثم على "تحرير html"
ثم قم بوضع الكود التالي فوق الوسم <head>

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"></link> <style type="text/css"> .button {color:white!important; font-family:open sans; margin:10px 10px 10px 0;text-decoration:none!important; font-weight:700;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-oborder-radius:5px; transition:all .4s;-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;} .blue {background: #3498db;border-bottom: 3px solid #226693;} .blue:hover {background:#2980b9;} .green {background: #2ecc71;border-bottom: 3px solid #1F8C4C;} .green:hover {background: #27ae60;} .red {background: #e74c3c;border-bottom: 3px solid #922C20;} .red:hover {background:#c0392b;} .purple {background: #9b59b6; border-bottom: 3px solid #74398E;} .purple:hover {background:#8e44ad;} .seagreen {background: #1abc9c;border-bottom: 3px solid #127F69;} .seagreen:hover {background: #16a085;} .big {font-size:18px; padding:15px 20px;} .medium {font-size:15px; padding: 10px 15px;} .small {font-size:12px; padding:8px 10px;} </style>

قم بضغط على حفظ

والأن سنرى طريقة إضافة الأزرار إلى مواضيعك

من لوحة التحكم إختر "مشاركات"
ثم "مشاركة جديدة"
إنتقل من وضع "تأليف" إلى وضع "HTML"
نسخ ولسق أي كود للزر الذي تريده

Big Size Buttons

<a class="button blue big" href="#">Blue Button</a>
<a class="button green big" href="#">Green Button</a>
<a class="button red big" href="#">Red Button</a>
<a class="button purple big" href="#">Purple Button</a>
<a class="button seagreen big" href="#">SeaGreen </a>

Medium Size Buttons

<a class="button blue medium" href="#">Blue Button</a>
<a class="button green medium" href="#">Green Button</a>
<a class="button red medium" href="#">Red Button</a>
<a class="button purple medium" href="#">Purple Button</a>
<a class="button seagreen medium" href="#">SeaGreen </a>

Small Size Buttons

<a class="button blue small" href="#">Blue Button</a>
<a class="button green small" href="#">Green Button</a>
<a class="button red small" href="#">Red Button</a>
<a class="button purple small" href="#">Purple Button</a>
<a class="button seagreen small" href="#">SeaGreen </a>.

إستبدل # برابط يخصك
إستبدل الجملة الملونة بكلماتك

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

مواضيع ذات صلة