إضافة زر التحميل من جوجل بلاي لمدونة بلوجر تلقائياً


نشارك اليوم معكم إضافة هامة يحتاجها معظم مدونات بلوجر وهي زر التحميل من متجر جوجل بلاي زر يعمل بشكل تلقائي لإضافة رابط التحميل من متجر جوجل يعطي شكل جميل ومميز لزوار مدونتك يعمل الزر على

معاينة الإضافة:

Google Play

كما تشاهد الزر رائع ويمكنك التحكم به ببساطة وإضافة رابط التحميل له

لإضافة الزر ليعمل بشكل تلقائي على مدونتك

أنتقل إلى لوحة التحكم في مدونتك ثم "المظهر" أنقر على على تحرير HTML ثم أبحث عن الرمز </head> ثم اضف الكود التالي فوق الرمز </head> مباشرةً

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtVtcRBrDGSA2v_juSBJeIPsoLCf5n5yEBx89v01nG8sqfemd0vnCUfPyaxBPmvOPiJ6uoyfYPLN2RUV6Gv4sXCAaWrhDX3velviXwLcWtgp6gs6VYcdRZdo_0X7uHauuPvtofwF9wZsga/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>
صورة توضيحية لكيفية تضمين الرابط


تحديث
Store iTunes Google Play
 لإضافة زر جوجل بلاي مع ايتونز ستور دع الكود السابق وقم بنسخ الكود التالي كاملاً واضفه فوق الرمز </head>

<b:if cond="data:blog.pageType == &quot;item&quot;">
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtVtcRBrDGSA2v_juSBJeIPsoLCf5n5yEBx89v01nG8sqfemd0vnCUfPyaxBPmvOPiJ6uoyfYPLN2RUV6Gv4sXCAaWrhDX3velviXwLcWtgp6gs6VYcdRZdo_0X7uHauuPvtofwF9wZsga/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD1GRfpk2Hekxtopn3id7JzdSEgfX_ezauWyCmg_aYHTYOspIFuX8pVPKO-lm9r3bwajGEtPLYLDbNLKZcNcmQg9oVhVfrC5hecAncL3AHCyPFWrD2SqKeCffgcD0pYX12NUUPDfyvhcHY/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>



مشاركات أقدم المقال التالي
6 تعليق
  • ملخصات الثانوية العامة في اليمن
    ملخصات الثانوية العامة في اليمن 06‏/07‏/2017، 6:50:00 ص

    شكرا لك

    • مداد الجليد
      مداد الجليد 06‏/07‏/2017، 2:19:00 م

      العفو اخي اهلا وهسهلا بك

  • سامي العراقي
    سامي العراقي 03‏/08‏/2017، 7:00:00 م

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

    • مداد الجليد
      مداد الجليد 04‏/08‏/2017، 6:36:00 م

      من الصعب تطبيق هذه الاجراءات من المحمول وبالتالي انت بحاجة الى جهاز كمبيوتر

  • الخبير
    الخبير 09‏/08‏/2019، 2:22:00 ص

    اخي السلام عليكم مشكور علاضافة الجميلة ممكن تعديل بسيط ان الرابط تبع التحميل يفتح في نافذة جديدة

    • مداد الجليد
      مداد الجليد 10‏/08‏/2019، 8:57:00 ص

      اهلا بك
      تم التعديل على الكود ليعمل على الفتح بنافذة جديدة
      تحياتي

أضف تعليق
عنوان التعليق