قالب نوردين للمعلوميات على المساعد العربي

السلام عليكم و رحمة الله تعالى و بركاته 

متلما اعتدنا على الجديد أقدم لكم

قالب نوردين للمعلوميات

قالب كان قد طلبه أحد أعضاء الصفحة منذ مدة و قد تم اليوم طرحه حسب التصويت 

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

لمشاهدت المعاينة إنقر هنا

و للتحميل إشترك في الموقع و ضع الإسم الذي اشتركت به و الإيميل الخاص بك (في محاولة للحد من النقل و اللصق )

الإضافة و الأدوات

إضافة الكاتب (بقلم) من هنا

إضافة المواقع الاجتماعية (غير ما بالأحمر إلى ما يناسبك)

<div class="so">

<a href="http://www.facebook.com/Dr.Help.officiel">

    <center>

    <div class="face"></div>

    <span>3000</span>

    <p>معجب</p>

    </center>

 </a>

</div>

<div class="so">

  <a href="http://tweeter.com/xxxxxxx">

    <center>

    <div class="twt"></div>

    <span>00</span>

    <p>متابع</p>

    </center>

 </a>

</div>

<div class="so">

  <a href="http://www.youtube.com/user/drhelpofficiel">

    <center>

    <div class="you"></div>

    <span>100</span>

    <p>مشترك</p>

    </center>

 </a>

</div>

<div class="sub">

    <h3>تابعنا عبر البريد الالكتروني :</h3>

    <div id="sleek-subscribe">

        <form action="http://feedburner.google.com/fb/a/mailverify?uri=drhelp4u" class="signform" method="post" target="_new">

       

        <input class="txt2" name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;ضع اميلك هنا ليصلك كل جديد&#39;;}" onfocus="if (this.value == &#39;ضع اميلك هنا ليصلك كل جديد&#39;) {this.value = &#39;&#39;;}" value="ضع اميلك هنا ليصلك كل جديد" />

        

        <input class="btn2" type="submit" value=" " />

        </form>

     </div>

</div>

<style>

.so {

width:100px;

height:119px;

float:left;

}

.so a{ text-decoration:none;}

.so span{ font:18px tahoma; color:#4a4a4a; }

.so p{ font:13px tahoma; color:#7b7b7b; margin:0;}

.so .face{ margin-bottom:10px; width:50px; height:50px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOyIXc_PAua6t5lJ0QRsKyTBeHM6qBM_feuoZPACldenEO5Kog7SSBH8NUzZH3JaEv3MnQiUI_u_EZEwPS3XC78p2NugmAj1ymWRWrDhkUKduKGKydKz45759DcJH6VbLLni841oN82lQ/s1600/face1.png);}

.so .twt{ margin-bottom:10px; width:50px; height:50px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis1uz2lMdGOl6HzLKftCMPtRRIEb2gxlQFynjUlR2Yep1_XtM-6kmXTtmPoaFsQY4D6YB-NFPJ0YIMUkrpVytv3Rwy3H1HnQ5aHIG7b1IdXa7un4UvvY5RsYAPfVlcZPGJ6RSLAW4jGEc/s1600/twt1.png);}

.so .you{ margin-bottom:10px; width:50px; height:50px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjweeoQGseyWmEDFl20sAaWZirJj49V3QHjY0DsuuKRGmyBkkIpbtx6qbhVNmnEUJSr-4hUBIfSCvqNbYCVY0IUF9YKObTpFpPQCZaYvunamAjaUo7LTG1dlGvwJ7I3K_rFkOHOrqI4uxM/s1600/you1.png);}

.so .face:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrKqQZzm6wEGgD5ZiiEYOpJHPTFDg7OiM50gZs3SZrVZ0keHbHKj8tJ4xOBOjttl8NGw1tJ22JXz2HjFklMTCTvxAENmK-knd-hO7vAidrdC3HwTnTlFeSAFER1Yxj1LVk4IHEQVO9sVk/s1600/face2.png);}

.so .twt:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2hl4eYZtXM6NzkMimTeCRsnLTqdJ8PXC5s2hctzm2Y1B2DB4KR1NzEZZBjYNY8jiQ4wu3HOFNF2HFEabDLk-n7GfXz2g0aRKN8InD6Q4NAivZhhL3IKb_NXiL7OgfHRwRnZpC3fIDbg8/s1600/twt2.png);}

.so .you:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv1Y22oXKXNXaG4mIhkAw4IdjzNeIieJbCnIMBI_yzs4rmWy8wRstZhtPCrmyDC-g5ZZ4pviog_iEYJUldpqZMu8r0i2WZ8pm2XJl9Gu5zuLMaDAwdkgfYpCMWK_dU_8TsRrPirgEgSDs/s1600/you2.png);}

.sub{

width: 298px;

height: 109px;

border-top: 1px solid #e2e2e2;

border-bottom: 1px solid #e2e2e2;

float: left;

}

.sub .txt2 {

background: #f4f4f4;

border: none;

font: 12px Tahoma, Geneva, sans-serif;

color: #b8b8b8;

padding: 11px 7px 13px 7px;

float: right;

margin: 0;

text-align: right;

width: 220px;

}

.sub .btn2 {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjagwttp3jxSfV9ZvReuZJE5GQ6jUqdrcp8SJZAsqn_xC8SFTgIEBLrsdaHpmF5HdlZqb2m25hbWkgOoVPmuOSUZblEzMpaNzGSx1JLHdmqo2PiAO2dSwtAtNVuONITz_qnay5SYddot88/s1600/sub.png);

float: left;

border: none;

width: 64px;

height: 38px;

cursor: pointer;

}

        .sub .btn2:hover {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9AkOA-m59ttTYuYagxytjSGWE8_JiJyXzF1CP4R2fpSGI69qcJwM_oVQ7ul7i3qBPpgV4XjWn3MgrSaSJQy2peX_ceNBD4yrZkvJUD51SqXECNT2cK_l6mhYICR1vwvpeSVrcW5Vfc-I/s1600/sub2.png);

        }

.sub h3{

margin: 13px 0;

font: 13px droidkufi-bold;

color: #4a4a4a;

}

</style>

 و لتغيير اللوجو غير هذا الرابط داخل HTML

http://im33.gulfup.com/iInYQ.png

لتشغيل ألسليدر إبحث بواسطة Ctrl + F عن "كل" و ضع مكانها القسم الذي تريد وضع مواضعيك فيه

أما لمن يسأل عن تغيير الأقسام فأبحث عن اسم القسم داخل HTML و ستجده و قم بتغييره 

و أخيرا أتمنى أن لا يقف الموضوع عندكم و تشاركوه بين أصدقائكم أن أعجبكم القالب

و إن كانت هذه هي زيارتك الأولى لا تنسى الإشتراك في الصفحة على الفيسبوك و قناتنا على اليوتيوب للتوصل بالجديد