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

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

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

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

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

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

كيفية تركيب اداة المعاينة والتحميل داخل القالب والمشاركة :

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

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
.boxy {
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 1.5em;
  color: rgba(255, 255, 255, 0);
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  padding: 0.6em 1.6em;
  margin: 0.6em;
  border-style: solid;
  border-width: 1px;
  transition: all 0.2s ease;
  border-image: linear-gradient(155deg, #fb83fa 0%, #31bcb8 100%) 1 round;
  background: linear-gradient(155deg, #fb83fa 0%, #31bcb8 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.boxy:hover {
  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(49, 188, 184, 0.4), -2px -2px 6px rgba(251, 131, 250, 0.4);
}
.boxy:hover {
  color: rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.4);
}
.boxy.red {
  border-image: linear-gradient(155deg, #fc5c3c 0%, #ffb638 100%) 1 round;
  background: linear-gradient(155deg, #fc5c3c 0%, #ffb638 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.boxy.red:hover {
  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(255, 182, 56, 0.4), -2px -2px 6px rgba(252, 92, 60, 0.4);
}
.boxy.green {
  border-image: linear-gradient(155deg, #06e5de 0%, #AAFFA9 100%) 1 round;
  background: linear-gradient(155deg, #06e5de 0%, #AAFFA9 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.boxy.green:hover {
  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(170, 255, 169, 0.4), -2px -2px 6px rgba(6, 229, 222, 0.4);
}
.boxy.la {
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.05em;
  font-size: 3em;
  padding: 0.3em;
  border-width: 2px;
  display: block;
  width: 70%;
  margin: 0.6em auto;
  border-image: linear-gradient(155deg, #F0C27B 0%, #ad1ba3 100%) 1 round;
  background: linear-gradient(155deg, #F0C27B 0%, #ad1ba3 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.boxy.la:hover {
  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(173, 27, 163, 0.4), -2px -2px 6px rgba(240, 194, 123, 0.4);
}
p {
  color: rgba(255, 255, 255, 0.7);
  margin: 30px;
}

وهذا مثال على الصورة لتعم الفائدة لزوار : 

2 - سوف ندخل الى المشاركة الجديد ونكتب الموضوع ثم ندخل الى html الذي يوجد على يسار التأليف ونضع الكود مع رابط التحميل و المعاينة .

<a class="boxy" href="#">
  للتحميل
</a>
<a class="boxy red" href="#">
  للمعاينة
</a>
<a class="boxy green" href="#">
  للتحميل
</a>

- بنسبى كود ديز # هو مكان وضع الرابط