كود ازرار تدور 360 درجة لمدونتك او موقعك مجانا مع التنسيق مثل ترايدنت

بسم الله الرحمان الرحيم

اما بعد متابعي ومتابعات مدونة حاسوبي Astuce
في شرح جديد حول كود ازرار تدور 360 درجة لمدونتك او موقعك مجانا مع التنسيق

تحت طلب لاحد اعضاء منتديات ترايدنت الشهير

قمت بعمل شرح بسيط للكود

معاينة

لنبدّأ على بركة الله

شرح الطريقة

في المكان الذي تراه مناسبا او الذي تريد ان تضع في الصور او الازرار الصق الكود التالي

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>

<div class="IconFooterMain">
<div class="IconFooterCounct" align="center">
<ul><a href="https://astuce-hassoubi.blogspot.com/" rel="nofollow">
<li class="fa fa-home"></li>
</a>  <a href="https://astuce-hassoubi.blogspot.com/p/blog-page_4.html" rel="nofollow">
<li class="fa fa-envelope"></li>
</a>  <a href="https://astuce-hassoubi.blogspot.com/p/sitemap.html" rel="nofollow">
<li class="fa fa-sitemap"></li>
</a>  <a href="https://astuce-hassoubi.blogspot.com/p/blog-page_27.html" rel="nofollow">
<li class="fa  fa-play-circle"></li>
</a> </ul>
</div>
</div>
<style>
.IconFooterMain { background:#fff; margin:10px 0 18px 0 ; border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0;}.IconFooterCounct { width:72%; margin:0 auto;}.IconFooterCounct ul { margin:0; padding:25px;}.IconFooterCounct li { border:5px solid; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; -webkit-box-shadow:0 0 0 5px #eee; -moz-box-shadow:0 0 0 5px #eee; box-shadow:0 0 0 5px #eee; font-size:48px; height:62px; margin:0 10px; padding:13px 15px 0; text-align:center; width:45px;}.IconFooterCounct li:hover { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg); color:#7796b4; -webkit-box-shadow:0 0 0 10px #eee; -moz-box-shadow:0 0 0 10px #eee; box-shadow:0 0 0 10px #eee;}.IconFooterMain a:hover { color:#ccc; text-decoration:none;}.IconFooterMain a { color:#b7cee4;}.IconThreadSize { font-size:18px !important;}
.IconFooterCounct li ,.IconFooterMain a:hover { -webkit-transition:all 0.4s ease-in-out 0s; -moz-transition:all 0.4s ease-in-out 0s; -o-transition:all 0.4s ease-in-out 0s; -ms-transition:all 0.4s ease-in-out 0s; transition:all 0.4s ease-in-out 0s;}
</style>

تحديد الكل

 بعدها احذف السطر التالي ان كان ت مكتبة Fontawesome مضافة الى موقعك

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>

ثم استبدل على التوالي اكواد الازرار التالية باكوادك

fa-home

fa-envelope

fa-sitemap

fa-play-circle

يمكنك الحصول عليها من الصفحة التالية

ثم استبدل الروابط براويطك

مثلا

<a href="https://astuce-hassoubi.blogspot.com/p/blog-page_27.html" rel="nofollow">
<li class="fa  fa-play-circle"></li></a>

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

• غرّد
• شارك
• شارك
• شارك
• شارك