كلاش اوف كلانس مهكرة بدون روت اخر اصدار 2019

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

معاينه الاضافه:

بالنسبه لشكل الازرار فسوف تكون على هذا الشكل الموضح بالصورة الاتيه :

طريقه التركيب:

1. ندخل الى لوحة تحكم بلوجر
2. نختار المظهر
3. تحرير html
4. نقوم الان بالبحث عن الوسم <head/> ونضيف الكود التالي فوقة 

 <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

الان وبعد اضافة الكود السابق نقوم بالبحث عن الوسم]]></b:skin> ونضيف الكود التالي فوقة مباشرة

#wrap {
     margin: 20px auto;
     text-align: center;
 }
 #wrap br {
     display: none;
 }
 .btn-slide, .btn-slide2 {
     position: relative;
     display: inline-block;
     height: 50px;
     width: 200px;
     line-height: 50px;
     padding: 0;
     border-radius: 50px;
     background: #fdfdfd;
     border: 2px solid #0099cc;
     margin: 10px;
     transition: .5s;
 }
 .btn-slide2 {
     border: 2px solid #efa666;
 }
 .btn-slide:hover {
     background-color: #0099cc;
 }
 .btn-slide2:hover {
     background-color: #efa666;
 }
 .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
     right: 100%;
     margin-right: -45px;
     background-color: #fdfdfd;
     color: #0099cc;
 }
 .btn-slide2:hover span.circle2 {
     color: #efa666;
 }
 .btn-slide:hover span.title, .btn-slide2:hover span.title2 {
     right: 40px;
     opacity: 0;
 }
 .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
     opacity: 1;
     right: 40px;
 }
 .btn-slide span.circle, .btn-slide2 span.circle2 {
     display: block;
     background-color: #0099cc;
     color: #fff;
     position: absolute;
     float: right;
     margin: 5px;
     line-height: 42px;
     height: 40px;
     width: 40px;
     top: 0;
     right: 0;
     transition: .5s;
     border-radius: 50%;
 }
 .btn-slide2 span.circle2 {
     background-color: #efa666;
 }
 .btn-slide span.title,
   .btn-slide span.title-hover, .btn-slide2 span.title2,
   .btn-slide2 span.title-hover2 {
     position: absolute;
     right: 90px;
     text-align: center;
     margin: 0 auto;
     font-size: 16px;
     font-weight: bold;
     color: #30abd5;
     transition: .5s;
 }
 .btn-slide2 span.title2,
   .btn-slide2 span.title-hover2 {
     color: #efa666;
     right: 80px;
   }
 .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
     right: 80px;
     opacity: 0;
 }
 .btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
     color: #fff;
 }

  

وبعد ذلك قم بحفظ المظهر ليتم حفظ الاكواد

طريقه اظهار الازرار داخل المواضيع:

عندما تقوم بكتابه موضوع وتريد إظهار الازرار ؛ فقط عليك الانتقال الى تحرير html داخل الموضوع ومن ثم لصق الكود التالي تحت النص الذي تريد عرض الازرار تحته

<div id="wrap">
 <a href="هنا ضع رابط المعاينه" class="btn-slide">
   <span class="circle"><i class="fa fa-rocket"></i></span>
   <span class="title">معاينة </span>
   <span class="title-hover">اضغط هنا</span>
 </a>
 </div>
 <div id="wrap">
 <a href="هنا ضع رابط التحميل" class="btn-slide2">
   <span class="circle2"><i class="fa fa-download"></i></span>
   <span class="title2">تحميل</span>
   <span class="title-hover2">اضغط هنا</span>
 </a>
 </div>

والان قم بتغيير الكلمات الملونة بالاحمر برابط المعاينه والتحميل الخاص بك