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

كيفية اضافة ازرار تحميل ومعاينة فى مدونة بلوجر بشكل احترافى تركيب ازرار المعاينة والتحميل بشكل احترافي فى بلوجر لمساعدة على اضافة ازرار جذابة فى المحتوي الخاص بك كيفية جعل زر Demo و تحميل واجهة مستوية فى درس اليوم سوف نتعلم تركيب ازرار المعاينة والتحميل وتركيب مع أضافة ايقونة الخط للجميع المدونين المهتمين بالبرامج والافلام وتصميم القوالب وعمل زر تحميل تجريبي وهكذا تابع معايا

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

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

كيفية جعل الزر Demo و تحميل فى واجهة مستوية

هذا هو الخط المستخدم فى الازرار Font Awesome من خلال اضافة الكود CSS ضعه فوق هذا </head>

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

يرجي اتباع الامثلة لتركيب استايل مناسب لك المعاينة والنتيجة المثال التاني المعاينة والنتيجة اذهب الى القالب وبعدين تحرير HTML تأكد فى البداية انك اضفت الخط فى المرحلة الاولي اللى هي كانت فوق الوسم </head> وبعدين اضف هذه الاكواد بين الوسم ]]></b:skin> او </style> كود المثال الاول Css

/* CSS Button Style 1 by www.tvtion.com */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';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:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}

كود المثال الثاني CSS

/* CSS Button Style 2 by www.tvtion.com */
.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:700;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}
.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="button">
    <li><a class="demo" href="http://www.tvtion.com" target="_blank">Demo</a></li>
    <li><a class="download" href="http://www.tvtion.com" target="_blank">Download</a></li>
  </ul>
</div>
<div class="clear"></div>

الكود الثاني

<div style="text-align: center;">
  <ul class="button2">
    <li><a class="demo" href="http://www.tvtion.com" target="_blank">Demo Link</a></li>
    <li><a class="download" href="http://www.tvtion.com" target="_blank">Download Link</a></li>
  </ul>
</div>
<div class="clear"></div>

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

وهكذا شرح كيفية جعل زر معاينة و تحميل بشكل احترافي. نأمل أن هذا الازرار مفيدة