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

أضف تعليق

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

طريقة تركيب أزرار :
* لاضافة ازرار التحميل نذهب الى القالب >>>>تحرير HTML .

بعد ذلك نضغط علي أي مكان في القالب ثم نضغط علي زر Ctrl + F من علي الكيبورد حتي يظهر مربع البحث .
ثم نقوم بالبحث عن الكود التالي : ]]></b:skin> . كما هو موضح في الصورة .

ثم نلصق الكود التالي فوقه مباشرتا .

@import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;src:local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff');}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;src:local('Oswald Bold'), local('Oswald-Bold'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}
a:link{text-decoration:none;font-family:Oswald;font-size:24px}
 
.vn-red a{
  background-color:red;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}
.vn-red a:before{
  content:"\f06e";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:32px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}
.vn-red a:hover{
  background:#2c3e50
}

.vn-green a{
background-color:#27ae60;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}
.vn-green a:before{
  content:"\f019";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:32px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}
.vn-green a:hover{
  background:#2c3e50
}

.vn-teal a{
background-color:#16a085;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}
.vn-teal a:before{
  content:"\f06e";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:32px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}
.vn-teal a:hover{
  background:#2c3e50
}

.vn-orange a{
background-color:#f39c12;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}
.vn-orange a:before{
  content:"\f019";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:32px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}
.vn-orange a:hover{
  background:#2c3e50
}

.vn-blue a{
background-color:#2980b9;
  display:inline-block;
  position:relative;
  margin:30px 5px;
  padding:20px 20px 20px 80px;
  color:#fff;
  transition:all 0.4s ease
}
.vn-blue a:before{
  content:"\f019";
  font-family:fontAwesome;
  position:absolute;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size:32px;
  border-radius:0 20px 0 0;
  color:#000;
  background-color:#fff;
  opacity:0.3;
  padding:20px;
  top:0;
  left:0
}
.vn-blue a:hover{
  background:#2c3e50
}

كما هو موضح في الصورة .

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

ثم تقوم بإضافة أحد الأكواد التالية :

كما يمكنك تغير كلمة تحميل بأي كلمة أخرى ووضع رابط التحميل أو المعاينة بدل من ال # .
وفي الأخير لا تنسى مشاركة الموضوع بين أصدقائك وإلي اللقاء في تدوينة أخري بحول الله .

بقلم عالم المعلوميات

بقلم عالم المعلوميات : مدون جزائري عمره 20 سنة, يهتم بكل ما هو جديد في عالم التقنيات و الأنترنت طموحه مساعدة الأخرين في الوصول إلى المعلومة بأسهل طريقة ممكنة يمكنكم متابعتي عبر مواقع التواصل الاجتماعية او , ، .

عن المدونة :

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

أخر الأخبار

عالم المعلوميات

أخر الأخبار