لكي يكون تطبيقك مقدما بطريقة لائقة و جميلة في مدونتك تحتاج لتخصيص صفحة خاصة به في المدونة ، لكن لايكفي أن تكتب عنه فقط بل يلزمك عن تضع صورا له و كذلك أزرار تحمل روابط لتحميله .
لذا فاليوم سأقدم لك الكود الخاص بهاته الإضافة و كذلك المكان الأمثل لها ، أول ما وجب عليك فعله هو أن تنشئ صفحة جديدة في مدونتك عن طريق الولوج لقسم الصفحات في لوحة التحكم في بلوجر ، ثم الضغط على صفحة جديدة ، بعدها تضغط على HTML و تحذف الكود الموجود و تعوضه بهذا الكود
<style>
/*-------------------- font --------------------*/
@font-face {
font-family: "Ta3alamFont";
font-weight: normal;
font-style: normal;
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot);
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot?#iefix) format('embedded-opentype'),
url(https://dl.dropboxusercontent.com/s/gjkkuvnfze5ii1l/Ta3alamFont.woff) format('woff'),
url(https://dl.dropboxusercontent.com/s/mjj8mvkq7jgihhn/Ta3alamFont.ttf) format('truetype');
}
/*-------------------- #font# --------------------*/
*{
font-family:Ta3alamFont;
}
.ta3alamFans{
background: #FBF1FF;
text-align: center;
padding: 50px 0px 140px 0px;
margin: -5px -27px -7px -26px;
}
.ta3alamFans img{
width:200px;
}
.appinfo{
width: 600px;
height: 570px;
background: #8D8D8D;
margin: 40px auto;
border-radius: 5px;
box-shadow: 0px 0px 6px -2px #000;
}
.appimgdes{
width: 560px;
margin: 0px auto;
height: 180px;
padding: 20px;
border-bottom: 1px solid #868686;
background: #302F2F;
box-shadow: 0px -80px 160px -90px #000 inset;
}
.appimgdes img{
width: 160px;
float: right;
border: 5px solid #fff;
border-radius: 30px;
background: #3D1C56;
}
.appimgdes h3{
width: 340px;
text-align: end;
padding: 0px 20px;
float: right;
margin: 0px 0px 40px;
font-size: 25px;
font-weight: normal;
color: #fff;
}
.choisedown{
width: 160px;
height: 80px;
float: left;
background: #fff;
border-radius: 8px 15px 15px 8px;
padding: 0px;
}
.choisedown a{
float: right;
padding: 0px;
background: #C0C0C0;
width: 80px;
height: 80px;
border-radius: 0px 8px 8px 0px;
box-shadow: 0px 0px 100px 5px #1F1E1E inset;
}
.choisedown a:hover{
box-shadow: 0px 0px 80px 5px #1E1E1E inset;
}
.choisedown img{
width: 70px;
border: none;
float: left;
padding: 5px;
border-radius: 0;
}
.imageapp{
width: 600px;
padding: 10px 0px;
}
.imageapp img{
width: 185px;
margin: 0px 4px;
border: 2px solid #000;
border-radius: 4px;
}
</style>
<div class="appinfo">
<div class="appimgdes">
<img src="https://lh4.ggpht.com/UI2T4ve7D6TcChI6Bb-2JoEJPEJ0ocuhSwmeJPaD7LAGKs1HWIhSRHVABvPlK3GsJZgv=w300-rw" />
<br />
<h3>
المحترف</h3>
<br />
<div class="choisedown">
<a href="https://play.google.com/store/apps/details?id=com.th3professional.almohtarif">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvFilw1imsD9vr66FybQBNN3l_NA36gVRgnhntSAYb4qhGguMoViFsvfmIj0_4WmlHyzaDp8GfqAJQ7Dy1Qa8om-ShJ-0vzmrDWC1bOW2fWB8GPPZ7SHGa0uvIJcIGRPEtTpe3OjBGVVA/s1600-r/downloading12.png" style="background: none; float: none; margin: 15px; padding: 0px; width: 45px;" />
</a>
<img src="http://www.qrstuff.com/images/sample.png" style="background: #fff;" />
</div>
<a href="https://play.google.com/store/apps/details?id=com.th3professional.almohtarif">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6c9g0i9TCrKl7eIOULwbRq2Z6ukzSXnx0rEFQzaQguokOtKUxPWG8IVZcxAod9j6Sur5EOKDGRjn9ze7fzjdax64XH7SNnlVit7KmFfsFWxI9pCvQUGBgzcqLFHa4RKfYBR_WgP9oxwY/s1600-r/googleplay.png" style="background: none; border-radius: 5px; border: none;float: left; margin: 0px 20px; width: 170px;" />
</a>
<br />
</div>
<div class="imageapp">
<img src="https://lh6.ggpht.com/m2nc7vQkbC7wO3DIr6M_4mlIS2zSy1mmmO0_OyO5kO8HH7qMa4pBnRWqNzEBH1Ko0VA=h310-rw" />
<img src="https://lh3.ggpht.com/oDG8qj9rGLKlYuPOMU8FhtexUkCD1MIUHaYWdXCiOBkeMFEvsin3NGtFnt7kc_wC18be=h900-rw" />
<img src="https://lh3.ggpht.com/Nu5_iMAL0_H734LSTnd3fKKjcU1nxXDsYim8XqGu9nQgvCWa9NzxpU3u8pDiW0YgvVw=h900-rw" />
</div>
</div>
</div>
ثم تقوم بتغيير روابط الصور و كذلك إسم التطبيق في الكود و تضغط على نشر .