أزرار المعاينة والتحميل بثلاث أشكال - عالم المدون

الأربعاء، 4 مايو، 2016

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


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



شرح التركيب 


الشكل الاول 

الشكل الأول يمكنك اشتخدامه للمعاينة أول التحميل كما تشاء 

1- قم بالبحث فى قالب مدونتك عن الوسم ]]></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;}

2- قم بحفظ القالب الأن .

3- عندما تقوم بكتابة موضوع جديد استخدم احد الكودين عندما تريد عمل معاينة أو تحميل وقم بوضعه فى خانة html مع تغيير الـ # بلرابط الذى تريد .

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


الشكل الثانى

1- قم بالبحث فى قالب مدونتك عن الوسم ]]></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'}

2- قم بالبحث عن الوسم </head> ثم قم بوضع الكود التالى فوقه (قبلة)

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

3- قم بحفظ القالب الأن

4- عندما تقوم بكتابة موضوع جديد استخدم احد الكودين عندما تريد عمل معاينة أو تحميل وقم بوضعه فى خانة 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>


الشكل الثالث

1- قم بالبحث فى قالب مدونتك عن الوسم ]]></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)}}

2- قم بالبحث عن الوسم </head> ثم قم بوضع الكود التالى فوقه (قبلة)

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

3- قم بحفظ القالب الأن

4- عندما تقوم بكتابة موضوع جديد استخدم احد الكودين عندما تريد عمل معاينة أو تحميل وقم بوضعه فى خانة 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>


وهذا كل شئ فى موضوع اليوم اذا واجهتك اى مشكلة فى تركيب الإضافة او تريد التعديل على اى شئ ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)

شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

13 تعليق على موضوع : أزرار المعاينة والتحميل بثلاث أشكال

اضافة رائعة جيدا تابع الله يوفقك اخي

ممكن اخي تنزل تلك الضاافة في تدوينة
وهي صندوق المشاركة الموجود باسفل قالب سيو صح القديم
http://seos7-test.blogspot.com/
ويمكنك حذف الرابط ان اردت
وشكرا لكم ::::)

ياخي انا ببعت ليك مش بترد على حد

ما الذى تبعته اى
وانا اقوم بالرد على كل ما يقوم بالتعليق

اخي ممكن تركبلي قالب المحترف الحالي هنا
th3profisor.blogspot.com
بعتلك دعوه

سوف اقوم بتركيب لك القالب اخى عندما انتهى من العمل
وبعد اذنك المرة القادمة اطلبة ما تريد فى المكان المخصص له ( ركن الأسئلة )

اخي العزيز الشكل الثاني لا يشتغل الرجاء حل المشكله فى اسرع وقت وشكرا لك

اخي لا اعرف تركيب الاضافة

عليك فقط أخى الكريم متابع الشرح

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر