4 0 4
نعتذر , لا نستطيع ايجاد الصفحة المطلوبة الصفحة الرئيسية

الأربعاء، 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>


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

شارك التدوينه
تنبية هام

هناك 9 تعليقات :

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

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

    ردحذف
  3. ياخي انا ببعت ليك مش بترد على حد

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

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

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

      حذف
    2. تم تركيب لك القالب اخى

      حذف

شارك بتعليق على

مواقع صديقة سوف تفيدك
عرب جيك MAX SEO TOOLS ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا
ALL RIGHTS RESERVED, 2016 WDBLOOG , POWERED BY BLOGGER , DESIGN BY WDBLOOG