كود الماسكي لإخفاء رقم الهاتف عند الاتصال بأي شخص

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

كيفية إضافة أزرار المعاينة و التحميل لبلوجر:

* اولا اتجه الى لوحة تحكم مدونتك.

* بعدها الى المظهر (القالب).

* ثم اضغط على سهم جنب كلمة تخصيص.

* بعدها اختر تحرير html.

* الان اضغط داخل صندوق اكواد وقم بضغط على Ctrl + F من لوحة مفاتيح كمبيوتر.

* سيظهر لك مربع بحث قم بالبحث عن هذا الكود التالي.

]]></b:skin>

* عند ايجاده قم بوضع الكود التالى فوقه.

.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:100;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden;font-family: Electrolize,ge_dinar_tworegular;}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:’F054′;background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

* بعد انتهاء قم بحفظ القالب.

* وعندما تريد وضع زر من ازرار سواء للمعاينة او تحميل استخدم احد الكودين التاليين، وقم بوضعه فى خانة html مع تغيير الـ # بالرابط الذي تريد.

<div style="text-align: center;">
<ul class="button2">
<li><a class="demo" href="#" target="_blank">
معاينة الرابط
</a></li>
<li><a class="download" href="#" target="_blank">
تحميل الرابط
</a></li>
</ul>
</div>
<div class="clear"></div>

ملاحظة هذا الشكل يعتمد على ايقونات الفونت اوسم لهذا يجب ان تتأكد ان كانت مدونتك تحتوي على هذه ايقونات. وفي حال لم تكن كذلك يمكنك اضافة مكتبة الفونت اوسم لمدونة بلوجر في شرح الذي قدمناه على مدونتنا.

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