أزرار التحميل والمعاينة:
مرحبا بكم أعزائي الكرام في تدوينة جديدة حول طريقة إضافة أزرار التحميل والمعاينة لمدونات بلوجر، والتي تعطي مظهرا جميلا على التدوينات.
في تدوينة سابقة تطرقنا على طريقة إضافة صفحة تعريف الكاتب لمدونة بلوجر.
ولاكن هذه التدوينة سنضيف أزرار مميزة وبشكل جميل.
لمعاينة الإضافة:
تركيب أزرار التحميل والمعاينة لمدونات بلوجر:
لتركيب الإضافة توجه أولا إلى المظهر تم قم بتعديل وضع html ، وابحث عن الوسم </head> أو <head/> .بعد أن تجد الوسم قم بوضع الكود التالي قبله مباشرة (فوقه ) وبعد لصق الكود احفظ القالب :
<style>
/* Tikniya-ar Buttons */
a.btn{margin:.375rem;font-weight:400;color:inherit;text-align:center;vertical-align:middle;text-transform:uppercase;word-wrap:break-word;white-space:normal;cursor:pointer;border:0;border-radius:4px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;padding:.75rem 2.14rem;font-size:.81rem}
a.btn:hover,a.btn:focus,a.btn:active{outline:0;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
a.btn-primary{color:#fff;background-color:#1E88E5}
a.btn-primary:hover{color:#fff;background-color:#2196F3}
a.btn-default{color:#fff;background:linear-gradient( 315deg,#2672db,#6a5acd,#19bfe5)}
a.btn-default:hover{color:#fff;background-color:#80CBC4}
a.btn-success{color:#fff;background-color:#00C853}
a.btn-success:hover{color:#fff;background-color:#00E676}
a.btn-danger{color:#fff;background-color:#FF1744}
a.btn-danger:hover{color:#fff;background-color:#FF5252}
a.btn-warning{color:#fff;background-color:#FFC400}
a.btn-warning:hover{color:#fff;background-color:#FFD740}
a.btn-info{color:#fff;background-color:#33b5e5}
a.btn-info:hover{color:#fff;background-color:#00B0FF}
a.btn-light{color:#212121;background-color:#E0E0E0}
a.btn-light:hover{color:#212121;background-color:#EEEEEE;border-color:#EEEEEE}
a.btn-dark{color:#FAFAFA;background-color:#212121}
a.btn-dark:hover{color:#FAFAFA;background-color:#424242;border-color:#424242}
a.btn-link{color:#000;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}
a.btn.btn-link:hover{box-shadow:unset;text-decoration:underline}
a.btn-elegant{color:#fff;background-color:#616161}
a.btn-elegant:hover{color:#fff;background-color:#757575}
a.btn-unique{color:#fff;background-color:#880E4F}
a.btn-unique:hover{color:#fff;background-color:#AD1457}
a.btn-pink{color:#fff;background-color:#E91E63}
a.btn-pink:hover{color:#fff;background-color:#EC407A}
a.btn-purple{color:#fff;background-color:#9C27B0}
a.btn-purple:hover{color:#fff;background-color:#AB47BC}
a.btn-deep-purple{color:#fff;background-color:#673AB7}
a.btn-deep-purple:hover{color:#fff;background-color:#7E57C2}
a.btn-indigo{color:#fff;background-color:#fc1264}
a.btn-indigo:hover{color:#fff;background-color:#5C6BC0}
a.btn-light-blue{color:#fff;background-color:#2196F3}
a.btn-light-blue:hover{color:#fff;background-color:#42A5F5}
a.btn-cyan{color:#fff;background-color:#00BCD4}
a.btn-cyan:hover{color:#fff;background-color:#26C6DA}
a.btn-dark-green{color:#fff;background-color:#4CAF50}
a.btn-dark-green:hover{color:#fff;background-color:#66BB6A}
a.btn-light-green{color:#fff;background-color:#8BC34A}
a.btn-light-green:hover{color:#fff;background-color:#9CCC65}
a.btn-yellow{color:#fff;background-color:#FFEB3B}
a.btn-yellow:hover{color:#fff;background-color:#FFEE58}
a.btn-amber{color:#fff;background-color:#FFC107}
a.btn-amber:hover{color:#fff;background-color:#FFCA28}
a.btn-deep-orange{color:#fff;background-color:#FF5722}
a.btn-deep-orange:hover{color:#fff;background-color:#FF7043}
a.btn-brown{color:#fff;background-color:#795548}
a.btn-brown:hover{color:#fff;background-color:#8D6E63}
a.btn-blue-grey{color:#fff;background-color:#607D8B}
a.btn-blue-grey:hover{color:#fff;background-color:#78909C}
.peach-gradient{background:linear-gradient(40deg,#E65100,#FFA000)!important}
.purple-gradient{background:linear-gradient(40deg,#4527A0,#7B1FA2)!important}
.blue-gradient{background:linear-gradient(40deg,#2962FF,#3949AB)!important}
.aqua-gradient{background:linear-gradient(40deg,#0097A7,#CCFF90)!important}
.btn.peach-gradient,.btn.purple-gradient,.btn.blue-gradient,.btn.aqua-gradient{color:#fff;-webkit-transition:.5s ease;transition:.5s ease}
a.btn-outline-primary{color:#4285f4!important;background-color:transparent!important;border:2px solid #4285f4!important}
a.btn[class*="btn-outline-"]{padding-top:.7rem;padding-bottom:.7rem}
a.btn-outline-default{color:#3D5AFE!important;background-color:transparent!important;border:2px solid #3D5AFE!important}
a.btn-outline-secondary{color:#E040FB!important;background-color:transparent!important;border:2px solid #E040FB!important}
a.btn-outline-success{color:#00C853!important;background-color:transparent!important;border:2px solid #00C853!important}
a.btn-outline-info{color:#33b5e5!important;background-color:transparent!important;border:2px solid #33b5e5!important}
a.btn-outline-warning{color:#FFC400!important;background-color:transparent!important;border:2px solid #FFC400!important}
a.btn-outline-danger{color:#FF1744!important;background-color:transparent!important;border:2px solid #FF1744!important}
a.btn-rounded{border-radius:99em}
a.btn.btn-flat{font-weight:500;color:inherit;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}
a.btn.btn-lg{padding:.4rem 2.426rem;font-size:.94rem}
a.btn.btn-sm{padding:.5rem 1.6rem;font-size:.64rem}
a.btn.btn-block{display:block;width:100%;margin:inherit}
.btn-block+.btn-block{margin-top:.75rem!important}
.mb-1,.my-1{margin-bottom:.25rem!important}
a.btn-primary:not([disabled]):not(.disabled).active{background-color:#01579B!important;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
a.btn-default:not([disabled]):not(.disabled).active{backgroundlinear-gradient( 315deg,#2672db,#6a5acd,#19bfe5):#004D40!important;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
</style> لقد قمت الآن بتركيب الكود المسؤول عن شكل ولون الأزرار
لا يزال هناك خطوة واحدة فقط وهي وضع الأزرار داخل التدوينات.
سنقوم بتجربة الإضافة إن كانت تعمل.
انتقل إلى الصفحات وأضف صفحة جديدة لتجربة الأزرار ، وانتقل لوضع تعديل html وأضف الكود التالي:
<center>
<br />
<a class="btn btn-danger btn-rounded waves-effect" href="https://tikniyaar.blogspot.com" rel="nofollow" target='_blank'><i aria-hidden="true" class="fa fa-download"></i> تحميل</a>
<a class="btn btn-primary btn-rounded waves-effect" href="https://tikniyaar.blogspot.com" rel="nofollow" target='_blank'><i aria-hidden="true" class="fa fa-eye"></i> معاينة </a>
<br />
<br />
<br />
<a class="btn btn-outline-danger btn-rounded waves-effect" href="https://tikniyaar.blogspot.com" rel="nofollow" target='_blank'><i aria-hidden="true" class="fa fa-download"></i> تحميل</a>
<a class="btn btn-outline-primary btn-rounded waves-effect" href="https://tikniyaar.blogspot.com" rel="nofollow" target='_blank'><i aria-hidden="true" class="fa fa-eye"></i> معاينة </a>
<br />
إن لم تظهر الأيقونات الموجودة على أزرار التحميل والمعاينة، فقم بنسخ الكود أسفله وضعه فوق الوسم
</head>
أو
</ body>
.
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/> 
