طريقة اضافة زر التحميل من جوجل بلاي او ايتونز ستور الى مدونة بلوجر بكل سهولة
نشارككم اليوم إضافة مهمة تحتاجها معظم مدونات Blogger ، وهي زر التنزيل من متجر Google Play.
لإضافة الزر ليعمل بشكل تلقائي على مدونتك
أنتقل إلى لوحة التحكم في مدونتك ثم “المظهر” أنقر على على تحرير HTML ثم أبحث عن الرمز </head> ثم اضف الكود التالي فوق الرمز </head> مباشرةً
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
a.btn-google{color:#fff}
.btn{padding:10px 16px;margin:5px;font-size:18px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none;display:inline-block}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-google{color:#fff;background-color:#111;border-color:#000;padding:15px 40px 5px 16px;position:relative;font-family:fontfutura;font-weight:400}
.btn-google:focus{color:#fff;background-color:#555;border-color:#000}
.btn-google:active,.btn-google:hover{color:#fff;background-color:#555;border-color:#000;}
.btn-google:before{content:"";background-image:url(https://4.bp.blogspot.com/-52U3eP2JDM4/WSkIT1vbUxI/AAAAAAAArQA/iF1BeARv2To-2FGQU7V6UbNPivuv_lccACLcB/s30/nexus2cee_ic_launcher_play_store_new-1.png);background-size:cover;background-repeat:no-repeat;width:30px;height:30px;position:absolute;right:6px;top:50%;margin-top:-15px}
.btn-google:after{content:"أحصل عليه من";position:absolute;top:5px;right:40px;font-size:10px;}
/*]]>*/
</style>
</b:if>
انقر على “حفظ المظهر”
والآن لإضافة رابط تطبيق جديد ماعليك سوى وضع الكود التالي في مسودة المشاركة انقر على “HTML” ثم أضف الكود في المكان المناسب بعد تضمين رابط التطبيق بدلاً من رمز المربع (#)
<a class="btn btn-google" target="_blank" href="#" title="Google Play">Google Play</a>
صورة توضيحية لكيفية تضمين الرابط |
لإضافة زر جوجل بلاي مع ايتونز ستور دع الكود السابق وقم بنسخ الكود التالي كاملاً واضفه فوق الرمز </head>
<b:if cond="data:blog.pageType == "item"">
<style type="text/css">
/*<![CDATA[*/
a.btn-google{color:#fff}
.btn{padding:10px 16px;margin:5px;font-size:18px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none;display:inline-block}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-google{color:#fff;background-color:#111;border-color:#000;padding:15px 40px 5px 16px;position:relative;font-family:fontfutura;font-weight:400}
.btn-google:focus{color:#fff;background-color:#555;border-color:#000}
.btn-google:active,.btn-google:hover{color:#fff;background-color:#555;border-color:#000;}
.btn-google:before{content:"";background-image:url(https://4.bp.blogspot.com/-52U3eP2JDM4/WSkIT1vbUxI/AAAAAAAArQA/iF1BeARv2To-2FGQU7V6UbNPivuv_lccACLcB/s30/nexus2cee_ic_launcher_play_store_new-1.png);background-size:cover;background-repeat:no-repeat;width:30px;height:30px;position:absolute;right:0px;top:50%;margin-top:-15px}
.btn-google:after{content:"أحصل عليه من";position:absolute;top:5px;right:40px;font-size:10px;}
a.btn-app-store{color:#fff}
.btn{padding:10px 16px;margin:5px;font-size:18px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none;display:inline-block}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-app-store{color:#fff;background-color:#111;border-color:#000;padding:15px 40px 5px 16px;position:relative;font-family:fontfutura;font-weight:400}
.btn-app-store:focus{color:#fff;background-color:#555;border-color:#000}
.btn-app-store:active,.btn-app-store:hover{color:#fff;background-color:#555;border-color:#000;}
.btn-app-store:before{content:"";background-image:url(https://1.bp.blogspot.com/-EQPK9IkKAe4/WgYU6a6EdzI/AAAAAAAAwTI/9eRRTdTTPSczZWXoZoj8_f8xN0d2KHR-gCLcBGAs/s1600/Apple-Icon.png);background-size:cover;background-repeat:no-repeat;width:30px;height:30px;position:absolute;right:6px;top:50%;margin-top:-15px}
.btn-app-store:after{content:"أحصل عليه من";position:absolute;top:5px;right:40px;font-size:10px;}
/*]]>*/
</style>
</b:if></div>
الان يمكنك اضافة اي رمز تريد في المشاركات كما ذكرنا سابقا لعرض الزر الخاص بمتجر ابل او جوجل بلاي
<a class="btn btn-app-store" target="_blank" href="#" title="Store iTunes">Store iTunes</a>
<a class="btn btn-google" target="_blank" href="#" title="Google Play">Google Play</a>