اضافه ازرار التحميل من Google Play و App Store لمدونه بلوجر

اضافه ازار التحميل منGoogle Play و App Store مدونه بلوجر حيث تتكون هذه الاضافه من زر التحميل حيث يمكنك اضافتها الى موقعك بسهوله كما قد تم اضافه بعض التنسيقات الى الازرار لجعلها ذو مظهر مميز يمكن استخدام هذه الاضافه فى مدونتك بسهوله من خلال اتباع الخطوات التاليه

معاينه

اضافه صندوق تحميل التطبيقات الى مدونه بلوجر

إضافة أزرار التحميل من Google Play و App Store إلى مدونتك على بلوجر تعتبر خطوة مهمة لتحسين تجربة المستخدم وتشجيعه على تحميل تطبيقاتك بسهولة. في هذا المقال، سنشرح لك كيفية إضافة هذه الأزرار باستخدام لغات HTML وCSS، مع تقديم خطوات مفصلة لتضمين الأكواد في مدونتك.

مميزات الإضافة

• مرونة التخصيص: يمكنك تخصيص الأزرار بما يتناسب مع تصميم موقعك وألوانه.
• سهولة التنفيذ: يمكن إضافة الأزرار إلى مدونتك بسهولة باتباع بعض الخطوات البسيطة.
• تصميم جذاب: تتضمن الإضافة تنسيقات CSS و ايقونات SVG لجعل الأزرار تبدو بمظهر مميز وجذاب.

الشكل الاول

قم بالدخول الى لوحه التحكم الخاصه بمدونه بلوجر ثم قم باختيارالمظهرثم تعديل html قم بالبحث عن وسم ]]></b:skin> ثم اضف االكود التالى اعلى الوسم .

.buttbox {
    display: flex;
    justify-content: center;
    height: 60px;
}
.butt {
    background: #000;
    color: #fff;
    padding: 15px 20px;
    border-radius: 6px;
    cursor: pointer;
    margin: 3px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
  
.butt:after {
    display: inline-block;
    content: '';
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivZjhq0xvUNsA4rcQj53zFJrT5o9q3YF7UMgFCGb50gN35pOr-HHBjQNdDR2_osrqq9xLNwoXoflEKf9uyJ0OmxFFAM3-K7gQrB_Yt4DLckiylHePRcVL7TZVYeKE98Y-7r-ZuaXAu4ZbDPWH8nqCdm8B9hDn67082Q4ItvNSRd_rgP3LdbFfiMl988Q/s200/google-play_318-566073.webp);
    background-repeat: no-repeat;
    background-position: center;
    width: 30px;
    height: 30px;
}
  
  
  
.butt.apple:after { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOOSDZ6hDNMA_8SlxaIm4kzUGrLOfznVxcESpRhZzULd2LvowKnLzPXxfkgOpJ_fN--88acMB2qTIh7v5Dc3DrgT89lEb54M5s-QsXEBrCU-Jyp4e0mxpcXN5h9Kx_GiYO0OJAzXqB2x-n_o6fCLU2DGk4gPeyMpvcNn15MGxmMu_mEju_Tn7QDRhXOQ/s30/App_Store_%28iOS%29.svg.png);margin-right: 10px;}
.butt:before {
    content: "GET IT ON";
    position: absolute;
    font-size: 10px;
    margin-bottom: 25px;
  }

  
  .butt:hover{opacity:.9}
  
  .butt.apple:before {
    margin-left: 15px;
}

قم بالدخول الى الصفحه التى تريد وضع الزر بها واضف بها الكود التالى

<div class="buttbox">
<a class="butt google" href="">google play</a>
<a class="butt apple" href="">app store</a>
</div>

الشكل الثانى

قم بالدخول الى لوحه التحكم الخاصه بمدونه بلوجر ثم قم باختيارالمظهرثم تعديل html قم بالبحث عن وسم ]]></b:skin> ثم اضف احد الاكواد التاليه اعلى الوسم .

.buttoutbox {
    display: flex;
    justify-content: center;
    height: 60px;
}


.buttout {
    background: #fff;
    color: #000;
    padding: 15px 20px;
    border: 1px solid #000;
    border-radius: 6px;
    cursor: pointer;
    margin: 3px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
  
  

  
  .buttout:after {
    display: inline-block;
    content: "\f3ab";
    font-size: 25px;
    font-family: fontawesome;
    margin-right: 2px;
}

.buttout.apple:after {content: "\f36f";}
.buttout:before {
    content: "GET IT ON";
    position: absolute;
    font-size: 10px;
    margin-bottom: 25px;
  }

  
  .buttout:hover{opacity:.9}

قم بالبحث عن وسم </head> ثم اضف الكود التالى اعلى الوسم

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>

قم بالدخول الى الصفحه التى تريد وضع الصندوق بها واضف بها الكود التالى

<div class="buttoutbox">
<a class="buttout google" href="">google play</a>
<a class="buttout apple" href="">app store</a>
</div>

الشكل الثالث

قم بالدخول الى لوحه التحكم الخاصه بمدونه بلوجر ثم قم باختيارالمظهرثم تعديل html قم بالبحث عن وسم ]]></b:skin> ثم اضف احد الاكواد التاليه اعلى الوسم .

.buttrbox {
    display: flex;
    justify-content: center;
    height: 60px;
}


.buttr {
    background: #fff;
    color: #000;
    padding: 15px 20px;
    border: 1px solid #000;
    border-radius: 30px;
    cursor: pointer;
    margin: 3px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
  
  

  
  .buttr:after {
    display: inline-block;
    content: "\f3ab";
    font-size: 25px;
    font-family: fontawesome;
    margin-right: 2px;
}

.buttr.apple:after {content: "\f36f";}
.buttr:before {
    content: "GET IT ON";
    position: absolute;
    font-size: 10px;
    margin-bottom: 25px;
  }

  
  .buttr:hover{opacity:.9}

قم بالبحث عن وسم </head> ثم اضف الكود التالى اعلى الوسم

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>

قم بالدخول الى الصفحه التى تريد وضع الصندوق بها واضف بها الكود التالى

<div class="buttrbox">
<a class="buttr google." href="">google play</a>
<a class="buttr apple" href="">app store</a>
</div>

يمكنك اذا اردت اضافه الثلاث اشكال الى موقعك ولن يحدث اى تعارض بين الاكواد

تحميل الاكواد

####

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

ينتهي هنا موضوعنا عن "اضافه ازرار التحميل من Google Play و App Store لمدونه بلوجر"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

فتح رابط التوجية