إضافات بلوجر | إضافة للتعريف بتطبيق مدونتك للهواتف الذكية

لكي يكون تطبيقك مقدما بطريقة لائقة و جميلة في مدونتك تحتاج لتخصيص صفحة خاصة به في المدونة ، لكن لايكفي أن تكتب عنه فقط بل يلزمك عن تضع صورا له و كذلك أزرار تحمل روابط لتحميله .

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

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

<div dir="ltr" style="text-align: left;" trbidi="on"><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/AVvXsEjarmVoY3y4gdfQk06KzkBPpl1b-__9yIAMfQBOUHOtyek4nitCXIZMALuZ78QwPnmFcoYjN4uUB9ByTIXzHg-lMRbW-mmohvwyCbavBSVuW_TnCwJFGT67jY_IUGrDMrYIAGFQ7anlzgU/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/AVvXsEiJl2-BLEzPp0JWxqXQgnG1sImY_Fe-wfxL5HDUb_wGiXfrLzNJG2JLDFpVHrzfx28-PVHwJd9naMC4vNbTvwYN4dMRp4v4V3YO8i0vU6RyoyqEho3QrOztfe8qO85wvvU6jiJRu343hLk/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>

ثم تقوم بتغيير روابط الصور و كذلك إسم التطبيق في الكود و تضغط على نشر .

Nazel gratuit

02:30

اقرأ المزيد

إضافات بلوجر | إضافة الإشتراك بالنشرة البريدية

إضافتنا لهذا اليوم تتمحور حول النشرات البريدية التي من الواجب أن توفرها لمتابعي مدونتك ، لذا فنحن نقدم لك هذا الشكل البسيط و الإحترافي لكي تقدم خدمة نشرات مدونتك على أفضل وجه .
طريقة التركيب بسيطة فقط قم بالتوجه إلى صفحة التخطيط الخاصة بمدونتك ثم قم بإنشاء أداة جديدة إختر HTML/JavaScript ثم في محتوى هاته الأداة ضع هذا الكود ، ثم غير كلمة raghib  بإسم المستخدم الخاص بمدونتك في موقع feedburner.google.com ، ثم إضغط على حفظ .
<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# --------------------*/ .FollowBEmail{ margin: -11px; padding: 20px 5px; background: #FFBE00; border-radius: 5px; border: 1px solid #FFBE00; } .FollowBEmail h3{ text-align: center; font-size: 22px; color: #383838; font-weight: normal; height: 40px; } .FollowBEmail i{ margin: 0px 0px 0px 5px; } .follow-by-email-inner { width: 280px; margin: 0 auto; } .FollowByEmail td { float: right; width: 100%; } .follow-by-email-address { width: 200px; height: 38px; border-radius: 0px 5px 5px 0px; border: 1px solid #FFFFFF; font-size: 14px; padding: 0px 10px; background: #FFFFFF; margin: 0px 0px 0px -4px; } .follow-by-email-submit { width: 56px; border-radius: 8px 0px 0px 8px; height: 40px; font-size: 17px; color: #FFFFFF; background: #383838; border: 1px solid #383838; padding: 0px 5px; cursor: pointer; } .follow-by-email-submit:hover { color: #FFBE00; } </style><div class="FollowBEmail"><h3><i class="fa fa-envelope"></i>إشترك بالنشرة البريدية</h3><div class="follow-by-email-inner"><form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open("https://feedburner.google.com/fb/a/mailverify?uri=Raghib", "popupwindow", "scrollbars=yes,width=550,height=520"); return true" target="popupwindow"><table width="100%"><tbody><tr><td><input class="follow-by-email-address" name="email" placeholder="ضع اميلك هنا" type="text" /></td><td width="64px"><input class="follow-by-email-submit" type="submit" value="إشترك الأن" /></td></tr></tbody></table><input name="uri" type="hidden" value="Raghib" /><input name="loc" type="hidden" value="en_US" /></form></div></div>

Nazel gratuit

01:45

اقرأ المزيد

إضافات بلوجر | عداد المتابعين

 من الإضافات التي يحتاجها أصحاب المدونات و المواقع ، إضافة عداد المتابعين التي يبرزون من خلالها قيمتهم في مواقع التواصل الإجتماعي ، و لهذا فاليوم نقترح عليكم تصميما راقيا لهاته الإضافة ، يبقى عليكم تغيير عدد المتابعين فقط .

المعاينة

بكل بساطة قم بالذهاب إلى صفحة التخطيط في مدونتك ثم أنشئ أداة جديدة ثم ضع هذا الكود بداخلها :
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/><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# --------------------*/ .conteurfans{ margin: -11px; background: #515151; border: 1px solid #1D0000; border-radius: 5px; padding: 20px 10px; box-shadow: 0px 0px 30px -10px #000 inset; } .conteurfans h3{ width: 100%; color: #fff; font-weight: normal; font-size: 25px; text-align: center; height: 50px; } .conteurfans i{ margin: 0px 0px 0px 8px; font-size: 20px; } .conteurfans ul{ width: 260px; height: 80px; margin: 0px 10px; padding: 0px; } .conteurfans ul li{ width: 55px; height: 60px; border-radius: 4px; background: #FFFFFF; float: right; display: block; margin: 0px 5px 0px; box-shadow: 0px 0px 30px -15px #000 inset; padding: 4px 0px 10px; text-align: center; } .conteurfans ul li a{ color: #515151; font-weight: bold; } .conteurfans ul li a:hover{ color:#000; } .conteurfans ul li i{ width: 44px; font-size: 30px; padding: 9px 0px 6px; margin:0px; } </style><div class="conteurfans"><h3><i class="fa fa-users"></i>عداد المتابعين</h3><ul><li><i class="fa fa-facebook" style="color:#43609C;"></i><a href="https://www.facebook.com/TH3.professional">عدد المتابعين</a></li><li><i class="fa fa-youtube" style="color:#f22;"></i><a href="https://www.youtube.com/geekraghib">عدد المتابعين</a></li><li><i class="fa fa-twitter" style="color:#55ACEE;"></i><a href="https://twitter.com/mr_raghib">عدد المتابعين</a></li><li><i class="fa fa-google-plus" style="color:#CA0606;"></i><a href="https://plus.google.com/+th3pro">عدد المتابعين</a></li></ul></div>

بعد أن تقوم بلصق الكود ، حان وقت تغيير عدد متابعيك في كل شبكة من الشبكات و ذلك بالنزول إلى الأسطر الأخيرة من الكود و تغيير " عدد المتابعين " بالعدد الذي تريدونه و تغيير الرابط كذلك، بعدها قومو بحفظ الأداة ، و مبروك عليكم التصميم الجديد

Nazel gratuit

03:00

اقرأ المزيد

إفتتاح قسم إضافات بلوجر | إضافة رائعة للتعريف بصاحب الموقع

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

للمعاينة : من هنا

ننتقل إلى طريقة التركيب الجد سهلة ، فقط قم بالتوجه إلى قسم التخطيط في مدونتك ، ثم إضغط على إضافة أداة

بعدها قم بنسخ الكود التالي و ضعه في محتوى الأداة و اضغط على حفظ
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/><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# --------------------*/ .admin{ width: 300px; height: 480px; background: #343434; border: 1px solid #131313; margin: -1px; border-radius: 4px; } .cover{ height: 120px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0iCeKWq-tOI97GB5Ayy8JYAk9dus8S3R55x1hF-H30of2YbFQXTmhid_-TVbyrBca6X3OI7uOHW23k_hltPn-EMd-VomvNEQuSTi0hP96YdjIH0yYwb_El0WDz1hJAQQwmU9mrRNCJbD5/s1600-r/Space-Desktop.jpg) no-repeat; border-bottom: 1px solid #868282; background-size: 300px; box-shadow: 0px -140px 310px -100px #000 inset; } .profile{ width: 120px; height: 120px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Brl02-hI89bmZyVLGLM5uDbgSX7dE9vv7EDQcNtsrtuSGVqr_8PsTb-OTRn3klG7PaoLERoui2T0gGuONfVtiLCuLcyyVHY7hibvVgDfu_j7Ur9bUmCi1iX-bv_r9fpu6alHAUS6rJNZ/s1600-r/92.jpg) no-repeat; border: 4px solid #fff; margin: -100px auto 0px; border-radius: 10px; box-shadow: 0px 0px 15px -5px #000,0px 0px 60px -10px #000 inset; background-size: 120px; } .form-info{ border-bottom: 1px solid #494949; border-top: 1px solid #494949; margin-top: 10px; background: #2A2A2A; } .form-info ul{ margin: 0; padding: 0px; } .form-info ul li{ display: block; padding: 0px 25px; margin: 2px 0px; border-bottom: 1px solid #343434; height: 30px; } .form-info ul li img{ display: block; float: right; padding: 5px; height: 18px; width: 18px; } .form-info ul li a{ display: block; float: right; height: 20px; padding: 5px; color: #9E9E9E; font-family:Ta3alamFont; } .form-info ul li a:hover{color:#fff;} .form-contact{ border-bottom: 1px solid #494949; border-top: 1px solid #494949; margin-top: 10px; background: #2A2A2A; } .form-contact ul{ margin: 0; padding: 0px; } .form-contact ul li{ display: block; padding: 0px 25px; margin: 2px 0px; border-bottom: 1px solid #343434; height: 30px; } .form-contact ul li img{ display: block; float: left ; padding: 5px; height: 18px; width: 18px; } .form-contact ul li a{ display: block; float: left ; height: 20px; padding: 5px; color: #9E9E9E; font-family:Ta3alamFont; } .form-contact ul li a:hover{color:#fff;} .form-socail{ text-align: center; } .form-socail i{ color: #9E9E9E; font-size: 32px; padding: 5px; } .form-socail i:hover{ color:#fff; } </style> <div class="admin"> <div class="cover"></div><div class="profile"></div><div class="form-info"> <ul><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAvW8RYSZgaJjrBcPsXxGlZS-92F3tWIOOQTbACk41HXuTfA-y_-IjoiYBf5LbIB12OIYr3dhYKPgUVCCG7dRGRdKfyyGvuBgE7TS_MXaKKs_IsQntPlz4WoypYB5QxBmLYVnU0_tuMVBb/s1600-r/users81.png" /> <a href="https://www.facebook.com/adnmej">عدنان المجدوبي</a></li><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2yka2YfUa5Wh2IsHdCKwT2RubK2zjB7VSERGyfNntG7NiRVzATvB_zrb4wpFAvFg_tG50ROV3WrjQygYpJzCB3LoC8eGD-Yn_eHf2MCtppNqAQx113NcV_4yaWEvPdGdaOb_TUcSkg6ij/s1600-r/suitcase57.png" /> <a href="http://www.th3professional.com/">مدون بمدونة المحترف</a></li><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimuo2-qzMNhNAwbNIVgDLqdua4Vxr6-Rr9mpImXZjekXFWVDuHrmxDPVkpzQbmyBbQpi062Xy-SzT41-_PKgbmORF0yc6eCXL3uwd4npugjqeHMtggVgJ5dVScvh2_O4harAZziqj0caf_/s1600-r/pin71.png" /><a href="www.almejdoubi.com">العرائش - المغرب</a></li><li style="border-bottom:none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdrCCLGeD7L8sh6S0cHHZE6xCA0MRnw0IDnoJoZxguEbd4pWA93GdzUT1WTWZNSjg2goVhQlBhO_Zax98GVwoX0pFc8180ODxRdimjX4LI-cIK-pZ5hFvtqOCYdiVclXfsC0S0AYi3-80t/s1600-r/candles5.png" /> <a href="www.almejdoubi.com">30 مارس 1997</a></li></ul></div><div class="form-contact"> <ul><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4TWCX0ISYDo0KAnXDAzCZsX7PaLewbOEWga7aM-ZHmxG5xdMKPpo8PlZGLgq0powZLEmu2oYdV3Y6unfgNHNIwGHmiy00dySmMLEtnJaX21mZqFd4r6mDZUq3KoaAewbliTFVdq74aKLi/s1600-r/symbol20.png" /> <a href="www.almejdoubi.com">ضع إيميلك هنا</a></li><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC1jGMguwbPyldPNuHoQ7GfzjPhL0CnqjBuyT_9CHSx-7_YCugcjm9c5igoQfBhteCFVpuD2BW0zIF0nS9qm9W5u1COQlt74h__r6IIlon8RILL_M9K2B6uNVLtScg8FNvdf4fLdczDfRx/s1600-r/connection27.png" /> <a href="http://www.almejdoubi.com">www.almejdoubi.com</a></li><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFoLusSubPHpEABFJr-Dn9ZCMh82tk3Pd5JREMNDJNIUdEKy0hQuf-1qlp5FXH3xUZ35VzOmGhHzE9DmYQ8ZGlVodQMuvnh5QnokMwQRo9fSpgJJvV5PjLFJmV7iEE-L234aP-qaqpY2Jm/s1600-r/black218.png" /> <a href="#">boite postal : 469 , 92000</a></li><li style="border-bottom:none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK-1O67jmcNftQeMBky9eMsQd-Vw-LTSKO_CrwEQgbkOFVhMliVt7GvywMlaWCWIamptknN9YJC7pAh0i98X8fN4JP-g7ZqksIjzavTKRwC00MW50-jBAcRK31WyxalRPfAY6U13TGz8lx/s1600-r/phone+call41.png" /> <a href="#">0600000000</a></li></ul></div><div class="form-socail"> <a href="www.almejdoubi.com"><i class="fa fa-google-plus-square"></i></a> <a href="www.almejdoubi.com"><i class="fa fa-youtube-square"></i></a> <a href="www.almejdoubi.com"><i class="fa fa-linkedin-square"></i></a> <a href="www.almejdoubi.com"><i class="fa fa-twitter-square"></i></a> <a href="https://www.facebook.com/adnmej"><i class="fa fa-facebook-square"></i></a> </div></div>
الآن ننتقل لطريقة التعديل على الأداة و تغيير الروابط و المحتوى من الكود بالضغط على تحرير .

- للتغيير صورة الغلاف ( الخلفية ) قومو بإستبدال الرابط التالي برابط الصورة التي تريدونها :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0iCeKWq-tOI97GB5Ayy8JYAk9dus8S3R55x1hF-H30of2YbFQXTmhid_-TVbyrBca6X3OI7uOHW23k_hltPn-EMd-VomvNEQuSTi0hP96YdjIH0yYwb_El0WDz1hJAQQwmU9mrRNCJbD5/s1600-r/Space-Desktop.jpg

- لتغيير الصورة الشخصية قومو بإستبدال الرابط التالي برابط الصورة التي تريدونها :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Brl02-hI89bmZyVLGLM5uDbgSX7dE9vv7EDQcNtsrtuSGVqr_8PsTb-OTRn3klG7PaoLERoui2T0gGuONfVtiLCuLcyyVHY7hibvVgDfu_j7Ur9bUmCi1iX-bv_r9fpu6alHAUS6rJNZ/s1600-r/92.jpg

- لتغيير المحتوى المتبقي إتبعو الطريقة التالية :
غير الرابط ثم عنوان الرابط كما ترى في الصورة ، نفس الطريقة مع كل المعلومات

* ملاحظة : في أيقونات الشبكات الإجتماعية أسفل الإضافة غير الروابط فقط .

Nazel gratuit

03:00

اقرأ المزيد