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

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

الطريقة الأولى :

1. أولا قم بنسخ شفرة التالية بالأسفل ولصقها أو وضعها في ? القالب ? تعديلHTML ابحث عن الوسم </ head> اضف الكود فوقها تماما.

<style>
.TIMbutton{padding:15px;margin:15px;width:100%;text-align:center}
.TIMdownload{margin:5px;padding:15px 25px;text-decoration:none;color:#fff;background:-webkit-gradient(to right,#16a085 0%,#F5D76E 50%,#D24D57 100%);background:linear-gradient(to right,#16a085 0%,#F5D76E 50%,#D24D57 100%);background-size:500%;border-radius:5rem;border:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1em;letter-spacing:0.05em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:none;box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15)}
.TIMdownload:hover{animation-name:gradient;-webkit-animation-name:gradient;animation-duration:2s;-webkit-animation-duration:s;animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}
.TIMdownload:after{content:"\f019";font-family:fontawesome;font-size:14px;padding-right:10px}
.TIMdemo{margin:5px;padding:15px 25px;text-decoration:none;color:#fff;background:-webkit-gradient(to right,#2980b9 0%,#F5D76E 50%,#e67e22 100%);background:linear-gradient(to right,#2980b9 0%,#F5D76E 50%,#e67e22 100%);background-size:500%;border-radius:5rem;border:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:1em;letter-spacing:0.05em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:none;box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15)}
.TIMdemo:hover{animation-name:gradient;-webkit-animation-name:gradient;animation-duration:2s;-webkit-animation-duration:s;animation-iteration-count:1;-webkit-animation-iteration-count:1;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}
.TIMdemo:after{content:"\f1d8";font-family:fontawesome;font-size:14px;padding-left:10px}
@keyframes gradient{0%{background-position:0% 50%}100%{background-position:100%}}
</style>

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

<div class="TIMbutton">
  <a class="TIMdemo" href="https://kalammoufid.com/" target="_blank">معاينة</a>
  <a class="TIMdownload" href="https://kalammoufid.com/" target="_blank">تحميل</a>
</div>

قم بتغير رابط المعاينة مع التحميل إلى ما يناسبك . أيضا تستطيع تغير الكلمتين معاينة و تحميل . مع إمكانية الإستغناء على أحد الأزرار و الإكتفاء بواحد فقط عبر حذف السطر الذي يحمل الكلمة المراد الإستغناء عليها . مثلا إذا أردنا ترك زر التحميل فقط سيكون الكود Html كالتالي :

<div class="TIMbutton">
  <a class="TIMdownload" href="https://kalammoufid.com/" target="_blank">تحميل</a>
</div>

3. إذا لم تظهر ايقونات الموجود على زر العرض المعاينة و التحميل ، فيرجى نسخ الكود Html التالي ولصقه أعلى الوسم </ head> أو </ body>.

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

الطريقة الثانية :

1. أولا قم بنسخ شفرة التالية بالأسفل ولصقها أو وضعها في ? القالب ? تعديلHTML ابحث عن الوسم </ head> اضف الكود فوقها تماما.

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

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

/* Custom Button */
.whitebutton {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebutton a {
    background: #fff;
    color: #666;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Droid Arabic Kufi',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
}

.whitebutton a:before {
    content: '\f019';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -90px;
    margin-right: 30px;
}

.whitebutton span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Droid Arabic Kufi', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebutton .up {
    background: #e25734;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down {
    margin: -30px auto;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down:before {
    content:'\f14a';
    font-family: FontAwesome;
    font-weight: normal;
    margin-left: -6px;
    color: #aaa;
}

.whitebutton:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

.whitebutton:hover .down {
    opacity: 1;
    transform: translate(0,-90px);
}

.whitebuttondemo {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebuttondemo a {
    background: #e25734;
    color: #fff;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family:'Droid Arabic Kufi',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
    transition: 350ms;
}

.whitebuttondemo a:before {
    content:'\f002';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -90px;
    margin-right: 30px;
}

.whitebuttondemo a:hover {
    color: #fff;
}

.whitebuttondemo span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Droid Arabic Kufi', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebuttondemo .up {
    background: #444;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebuttondemo:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

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

<div class="whitebuttondemo">
<a href="https://kalammoufid.com/">معاينة</a>
<span class="up">انقر للعرض</span></div>

<div class="whitebutton">
<a href="https://kalammoufid.com/">تحميل</a>
<span class="up">انقر للعرض</span>
<span class="down"> 2.5MB .rar </span></div>
</div>

استبدل رابط الموقع بالرابط الذي تريده ان ينتقل إليه عند الضغط
استبدل كلمة معاينة بالكمة التي تريدها
استبدل كلمة انقر للعرض بالكلمة التي تريدها
استبدل 2.5MB .rar بحجم الملف

الطريقة الثالثة :

1. أولا قم بنسخ شفرة التالية بالأسفل ولصقها أو وضعها في ? القالب ? تعديلHTML ابحث عن الوسم </ head> اضف الكود فوقها تماما.

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

2. ابحث عن الوسم ]]></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;
}

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

<div id="wrap">
<a href="https://kalammoufid.com/" 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="https://kalammoufid.com/" class="btn-slide2">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل</span>
  <span class="title-hover2">اضغط هنا</span>
</a>
</div>

والان قم بتغيير رابط الموقع برابط المعاينه والتحميل الخاص بك . مع إمكانية تغير الكلمات أيضا .اضافات بلوجر أزرار معاية تحميل

الطريقة الرابعة :

1. نقوم بالدخول إلى لوحة تحكم المدونة ثم القالب ثم أنقر على تحرير HTML ثم أضف الكود التالي فوق الوسم ]]></b:skin> مباشرةً.اضافات بلوجر أزرار معاية تحميل

#wrap{margin:20px auto;text-align:center}
#wrap a{text-decoration:none}
.tombolripple{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.7em;border-radius:4px;color:rgba(255,255,255,0.8);font-weight:400;padding:20px 25px;margin:0 15px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s}
.tombolripple:hover,.tombolripple:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.tombolripple.tsatu{background:#e67e22}
.tombolripple.tdua{background:#3498db}
.tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:#f49541}
.tombolripple.tdua:hover,.tombolripple.tdua:active{background:#4aaff3}
svg{position:absolute;top:0;left:0;width:100%;height:100%}
circle{fill:rgba(255,255,255,0.07)}
.ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)}
.teffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5}
.teffect.animate{animation:ripple-effect 0.5s linear}
@keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}
@-webkit-keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}

2. ثم أبحث عن الوسم </body> وأضف الكود التالي فوقه مباشرةً.اضافات بلوجر أزرار معاية تحميل

<script type="text/javascript">
//<![CDATA[
!function(a){a(".ripple-effect").click(function(b){var c=a(this);0===c.find(".teffect").length&&c.append("<span class='teffect'></span>");var d=c.find(".teffect");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery);
//]]>
</script>

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

<div id="wrap">
<a class="tombolripple tsatu ripple-effect" href="https://kalammoufid.com/" rel="nofollow" target="_blank">عرض</a>
  <a class="tombolripple tdua ripple-effect" href="https://kalammoufid.com/" rel="nofollow" target="_blank">تحميل</a>
</div>

والان قم بتغيير رابط الموقع برابط العرض والتحميل الخاص بك . مع إمكانية تغير الكلمات أيضا .

إلى مقالة أخرى إنشاء الله مع تمنياتي بالتوفيق للجميع .اضافات بلوجر أزرار معاية تحميل