حصريا اضافة صناديق احترافية للتدوينات وبشكل جميل من حمزه ويب

السلام عليكم ورحمه الله وبركاته اللهم صلى على سيدنا محمد وعلى ال محمد

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

على مدونة حمزه ويب

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

يمكنك اضافتة الى تدويناتك احترافية وجميلة ويعطي منظراً جميلا للمدونة

وللتدويناتك وبأشكال مختلفة ورائعة طبعا هذه اضافة غيير 

موجود على ويب واعرضة لأول مرة مقدم من حمزه ويب

معاينة قالب

للمعاينة اضافة اضغط هنا

 طريقة تركيب اضافة

1. لوحة تحكم 
2. قالب 
3. تحرير HTML
4. ابحث عن هذا كود </head>
5. واضف هذا كود فوقة 

<link href='http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css' rel='stylesheet' type='text/css'/>

ثم ابحث عن هذا كود ]]></b:skin>
واضف هذا كود فوقة 

#pro1 {margin: 3px -15px 3px 0px;color: #fff;font: 15px Droid arabic naskh;padding: 8px 67px 0px 0;height: 28px;width: 100%;background: #2c3e50 url(https://dl.dropboxusercontent.com/s/xl45xxg9slpspas/1-1.png) no-repeat 100% 0px;text-align: right;transition: 1s;overflow: hidden;}#pro1:hover {background: #00a8ad url(https://dl.dropboxusercontent.com/s/xl45xxg9slpspas/1-1.png) no-repeat 100% 0px;color: #fff;transition: 1s;}#pro2 {margin: 3px -15px 3px 0px;color: #fff;font: 15px Droid arabic naskh;padding: 8px 67px 0px 0;height: 28px;width: 100%;background: #2c3e50 url(https://dl.dropboxusercontent.com/s/yt79n12nlp678d2/2-2.png) no-repeat 100% 0px;text-align: right;transition: 1s;overflow: hidden;}#pro2:hover {background: #ab2e2e url(https://dl.dropboxusercontent.com/s/yt79n12nlp678d2/2-2.png) no-repeat 100% 0px;color: #fff;}#pro3 {margin: 3px -15px 3px 0px;color: #fff;font: 15px Droid arabic naskh;padding: 8px 67px 0px 0;height: 28px;width: 100%;background: #2c3e50 url(https://dl.dropboxusercontent.com/s/oukzfti8dlazvra/4-4-4.png) no-repeat 100% 0px;text-align: right;transition: 1s;overflow: hidden;}#pro3:hover {background: #788081 url(https://dl.dropboxusercontent.com/s/oukzfti8dlazvra/4-4-4.png) no-repeat 100% 0px;color: #fff;}#pro4 {margin: 3px -15px 3px 0px;color: #fff;font: 15px Droid arabic naskh;padding: 8px 67px 0px 0;height: 28px;width: 100%;background: #2c3e50 url(https://dl.dropboxusercontent.com/s/h39m03t19p7cnp7/5-5-5.png) no-repeat 100% 0px;text-align: right;transition: 1s;overflow: hidden;}#pro4:hover {background: #f39c12 url(https://dl.dropboxusercontent.com/s/h39m03t19p7cnp7/5-5-5.png) no-repeat 100% 0px;color: #fff;}#pro5 {margin: 3px -15px 3px 0px;color: #fff;font: 15px Droid arabic naskh;padding: 8px 67px 0px 0;height: 28px;width: 100%;background: #2c3e50 url(https://dl.dropboxusercontent.com/s/ayfajdkngi7377r/3-3.png) no-repeat 100% 0px;text-align: right;transition: 1s;overflow: hidden;}#pro5:hover {background: #27ae60 url(https://dl.dropboxusercontent.com/s/ayfajdkngi7377r/3-3.png) no-repeat 100% 0px;color: #fff;}#pro6 {margin: 3px -15px 3px 0px;color: #fff;font: 15px Droid arabic naskh;padding: 8px 67px 0px 0;height: 28px;width: 100%;background: #2c3e50 url(https://dl.dropboxusercontent.com/s/qhfqjdpch23lvyu/6-6.png) no-repeat 100% 0px;text-align: right;transition: 1s;overflow: hidden;}#pro6:hover {background: #278879 url(https://dl.dropboxusercontent.com/s/qhfqjdpch23lvyu/6-6.png) no-repeat 100% 0px;color: #fff;}

ثم اضغط حفظ نموذج 
وعند كتابة في موضوع او تدوينة تضغط HTML
وتضيف اي من هذه اكواد التي تعجبك

<div id='pro1'>تجربة</div><div id='pro2'>تجربة</div><div id='pro3'>تجربة</div><div id='pro4'>تجربة</div><div id='pro5'>تجربة</div><div id='pro6'>تجربة</div>

وانتهى موضوعنا الى هنا
وانتظروا كل جديد وحصري من حمزه ويب 
في امان الله

انتهى الموضوع ، اتمنى أن تكون الإضافة في متناول الجميع تحياتي .