الكود الخاص باضافة التنقل بين نسخة الحاسوب و الهاتف مجانا لمدونتك

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

اما بعد في شرح جديد وبيسط حول طريقة تركيب اضافة التنقل بين نسخ الهاتف والحاسوب

 مجانا لمدونتك على بلوجر

لن اطيل اليك المعاينة ثم نعود

معاينة

تركيب الضافة

توجه الى محرر قالب مدونتك Edit HTML

وابحث عن الوسم التالي

</body>

والصق فوقه الكود التالي

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
<div class='myblog'>
<div class='btnphone'>
<a href='/?m=1' target='_blank'><span class='usephone'/><span class='txtphone'>شاهد نسخة المحمول</span></a></div>
<div class='btncomputer'>
<a href='#'><span class='usecomputer'/><span class='txtcomputer'>انت تشاهد نسخة الحاسوب</span></a></div>
</div>
<style>
.myblog {position:fixed;top:100px;right:30px;}
.myblog a{text-decoration:none;font-family:tahoma;font-size:14px;}
.usephone::before{content:"\f10a";font-family:fontawesome;font-size:20px;color:#000;margin:5px;transition:all 0.5s;padding-right:5px;}
.btnphone{width:30px;padding:10px;border:1px solid;margin-bottom:5px;border-radius:5px;background:#fff;transition:all 0.5s;}
.btnphone:hover{width:200px;border:1px solid;background:#4EB1EA;transition:all 0.5s;}
.btnphone:hover .txtphone{color:#fff}
.btnphone:hover .usephone::before{color:#fff;}
.btnphone:hover .txtphone{display:inline-block;}
.txtphone{position:fixed;display:none;}
.btncomputer:hover{width:200px!important;border:1px solid;background:#FF5353;transition:all 0.5s;}
.btncomputer:hover .txtcomputer{color:#fff}
.btncomputer:hover .usecomputer::before{color:#fff;}
.btncomputer{width:30px;padding:10px;border:1px solid;border-radius:5px;background:#fff;transition:all 0.5s;}
.btncomputer:hover{width:150px;border:1px solid;transition:all 0.5s;}
.btncomputer:hover .txtcomputer{display:inline-block;}
.txtcomputer{position:fixed;display:none;}
.usecomputer::before{content:"\f108";font-family:fontawesome;font-size:20px;color:#000;margin:5px;transition:all 0.5s;padding-right:5px;}
</style>

تحديد الكل

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

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

احفظ القالب ومبروك عليك الاضافة

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