إضافة ثلاث أزرار المعاينة والتحميل بطريقة احترافية

إضافة ثلاث أزرار المعاينة والتحميل بطريقة احترافية

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

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

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

هناك ثلاث أزرار المعانية والتحميل بطريقة احترافية وإخطر ما يناسبك :

1 - نقوم بدخول الى القالب >> ثم تحرير html >> ونفتح محرك البحث عن الاكواد CTRL+F ونبحيث عن امر ]]></b:skin> ونضع الكود فوقه مباشرة .

#wrap {margin:20px auto;text-align:center;}
a.btn {display:inline-block;position:relative;font-family: Electrolize,ge_dinar_tworegular;text-decoration:none;font-weight:100;background:#30abd5;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #22313F;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}
a.btn:hover {background:#30abd5;color:#fff;box-shadow:inset 0px -50px 0px #22313F;}
a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;}
a.btn.warn {background:#f5f7fa;color:#05555e;box-shadow:inset 0 0 0 #30abd5;}
a.btn.warn:hover {background:#f5f7fa;color:#fff;box-shadow:inset 0px -50px 0px #30abd5;}
a.btn.warn:active {color:#fff;box-shadow:inset 0px -50px 0px #30abd5;} 0px -50px 0px #30abd5;}

بعدها كما هو معتاد قم بحفظ القالب .

ثم ندخل الى مشاركة جديدة من اجل كتابة موضوع وقم بترك التاليف ودخل الى html وضع هذا الكود في المكان الذي تريد .

<div id="wrap"><a class="btn" href="#">تحميل او معاينة</a></div> <div id="wrap"><a class="btn warn" href="#">تحميل او معاينة</a></div>

2 - الشكل الثاني تقوم بنفس العملية بدخول الى القالب >> ثم تحرير html >> ونفتح محرك البحث عن الاكواد CTRL+F ونبحيث عن امر ]]></b:skin> ونضع الكود فوقه مباشرة .

/* CSS Button Style 1 by wdbloog.blogspot.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:100;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;font-family: Electrolize,ge_dinar_tworegular;}
.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'}

ثم نبحث عن امر </head> ونضع فوقه اقبله هذا الكواد .

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

بعدها كما هو معتاد قم بحفظ القالب .

ثم ندخل الى مشاركة جديدة من اجل كتابة موضوع وقم بترك التاليف ودخل الى html وضع هذا الكود في المكان الذي تريد .

<div style="text-align: center;"> <ul class="button"> <li><a class="معاينة" href="#" target="_blank">Demo</a></li> <li><a class="تحميل" href="#" target="_blank">Download</a></li> </ul> </div> <div class="clear"></div>

3 - الشكل الثالث تقوم بنفس العملية بدخول الى القالب >> ثم تحرير html >> ونفتح محرك البحث عن الاكواد CTRL+F ونبحيث عن امر ]]></b:skin> ونضع الكود فوقه مباشرة .

/* CSS Button Style 2 by wdbloog.blogspot.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: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)}}

ثم نبحث عن امر </head> ونضع فوقه اقبله هذا الكواد .

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

بعدها كما هو معتاد قم بحفظ القالب .

ثم ندخل الى مشاركة جديدة من اجل كتابة موضوع وقم بترك التاليف ودخل الى 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>