مكتبة بأرقى الإضافات الجزء الأول

مكتبة بأرقى الإضافات الجزء الأول

يوجد الآن مشاهدة التعليقات : 15

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

1 . من التخطيط أضف أداة Html/Javascript وضع بها كود الإضافة




<div id='profile-wrapper'>
<p>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. ولذلك يتم استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن استخدام "هنا يوجد محتوى نصي، هنا يوجد محتوى نصي" فتجعلها تبدو (أي الأحرف) وكأنها نص مقروء.</p>
<div id='social-wrapper'>
<div class='social-icons sticky-social'>
<a class='facebook' href='https://facebook.com/arabe1web'></a>
<a class='twitter' href='#'></a>
<a class='behance' href='#'></a>
<a class='skype' href='#'></a>
<a class='khamsat' href='#'></a>
</div>
</div>
</div>
<style>
#profile-wrapper {
text-align: center;
padding: 34px 20px;
background: #FFF;
border-top: 3px solid #E24300;
margin: 0 0 20px;
font-size: 12px;
font-weight: normal !important;
}
#profile-wrapper img {
border-radius: 100%;
margin: 0 0 10px;
}
#profile-wrapper h2 {
font: normal 20px tahoma;
color: #F34D4D;
}
#profile-wrapper p {
font: normal 12px ges,;
color: #888;
line-height: 2em;
}
#social-wrapper{padding:11px 0 0;overflow:hidden; margin-right: 30px;}
.social-icons a.facebook {
}
.social-icons a.facebook:hover {
background-color: #4265b9;
}
.social-icons a.twitter {
}
.social-icons a.twitter:hover {
background-color: #26d5ec;
}
.social-icons a.behance {
}
.social-icons a.behance:hover {
background-color: #444;
}
.social-icons a.skype {
}
.social-icons a.skype:hover {
background-color: #0bbff2;
}
.social-icons a.youtube {
}
.social-icons a.youtube:hover {
background-color: #df3333;
}
.social-icons a.google {
}
.social-icons a.google:hover {
background-color: #d62408;
}
.social-icons a.khamsat {
}
.social-icons a.khamsat:hover {
background-color: #F39C12;
}
.social-icons.sticky-social {
text-align: right;
float: right;
}
.social-icons {
float: right;
text-align: center;
}
.social-icons.sticky-social a {
margin-left: 10px;
margin-bottom: 10px;
float: right;
display: block;
}
.social-icons a {
background-color: #dadada;
}
.social-icons a {
width: 30px;
height: 30px;
margin: 0 3.5px !important;
}
.social-icons a {
width: 30px;
height: 30px;
display: block;
background-position: center center;
background-repeat: no-repeat;
border-radius: 3px;
display: inline-block;
position: relative;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
}
</style>



<div class='loginform'>
<form action='/search' method='get'>
<input class='username' placeholder='الاسم المستعمل' type='text'/>
<input class='password' placeholder='كلمة المرور' type='password'/>
<input class='checkbox' type='checkbox' value='كلمة المرور'/><span class='rememberme'>تذكرني&#1567;</span>
<a class='passwordlost' href='#'>نسيت كلمة المرور</a>
</form>
</div>
<style>
.loginform {
padding: 20px;
}
.username {
width: 70%;
padding: 14px 40px;
border: none;
font: normal 12px tahoma;
border-radius: 3px;
border:1px solid #eee;
color: #0093FF;
margin: 0 0 10px;
}
.username:focus {
border:1px solid #0093FF;
}
.password {
width: 70%;
padding: 14px 40px;
border: none;
font: normal 12px tahoma;
border-radius: 3px;
border:1px solid #eee;
color: #0093FF;
margin: 0 0 10px;
}
.password:focus {
border:1px solid #0093FF;
}
.rememberme {
font: normal 12px tahoma;
color: #888;
padding: 0 5px;
}
.passwordlost {
font-size: 12px;
text-decoration: underline;
float: left;
}
</style>


<div class='socialnetwork'>
<ul>
<li class='tw'><a href='#'>تويتر</a><p><span>4,321</span>متـابع</p></li>
<li class='rss'><a href='#'>الخلاصات</a><p><span>1,587</span>مشتـرك</p></li>
</ul>
</div>
<style>
.socialnetwork {
background: #FF954C;
margin: 0px;
}
.socialnetwork ul {
padding: 10px;
overflow: hidden;
}
.socialnetwork li {
float: right;
width: 33.33%;
background: #F8F8F8;
text-align:center;
padding: 0;
transition:0.4s;
}
.socialnetwork a {
width: 100%;
text-align: center;
display: block;
text-indent: 9999em;
padding: 80px 0 0;
}
.socialnetwork li:hover {
transition:0.4s;
}
.socialnetwork .fb{background:#666 url(http://2.bp.blogspot.com/-CFlwJYkcnVw/U4jgUCAHTXI/AAAAAAAADR4/1hQTbW_HDEc/s1600/fb.png) no-repeat center 30%;}
.socialnetwork .fb:hover{background:#0C6DB4 url(http://2.bp.blogspot.com/-CFlwJYkcnVw/U4jgUCAHTXI/AAAAAAAADR4/1hQTbW_HDEc/s1600/fb.png) no-repeat center 30%;}
.socialnetwork .tw{background:#555 url(http://1.bp.blogspot.com/-9JRfTF50xds/U4jgpkmIa_I/AAAAAAAADX8/pqjKZJbhs34/s1600/twitter.png) no-repeat center 30%;}
.socialnetwork .tw:hover{background:#33b5e5  url(http://1.bp.blogspot.com/-9JRfTF50xds/U4jgpkmIa_I/AAAAAAAADX8/pqjKZJbhs34/s1600/twitter.png) no-repeat center 30%;}
.socialnetwork .rss{background:#444 url(http://4.bp.blogspot.com/-xM7OELn38hI/U4jgkDMnJCI/AAAAAAAADWg/lobKUqprafg/s1600/rss.png) no-repeat center 30%;}
.socialnetwork .rss:hover{background:#ffbb33 url(http://4.bp.blogspot.com/-xM7OELn38hI/U4jgkDMnJCI/AAAAAAAADWg/lobKUqprafg/s1600/rss.png) no-repeat center 30%;}
.socialnetwork span {
float: right;
text-align: center;
width: 100%;
font:bold 14px arial;
color:#fff;
padding:0 0 5px
}
.socialnetwork p {
padding:10px 0;
text-align:center;
font:normal 14px ges;
color:#fff;
background: rgba(50, 50, 50, 0.47);
}
</style>



<div class='newsletter'>
<form action='/search' method='get'>
<input class='newsbox' placeholder='ضع بريدك الالكتروني هنا..' type='text'/>
</form>
</div>
<style>
.menuoption{display:none;}
.menuoption select {
padding: 10px;
float: right;
margin: 10px;
width: 60%;
font: normal 12px tahoma;
color: #888;
background: #F8F8F8;
border: 1px solid #EEE;
}
.newsletter {
padding: 10px;
}
</style>
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 15 تعليقًا:

  1. شكر لكم لقد أعجبتني الإضافة الخاصة بتسجيل الدخول رائعة
    واصلووووووووووو :)

    ردحذف
  2. لقد أعجبتني الإضافة الخاصة بتسجيل الدخول رائعة

    ردحذف
  3. سوال اين يتم تسجيل الدخول لانى وضعت الاضافة فى بلوجر لم يحصل شى ؟

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

      حذف
  4. yasmine Ahmed12/27/2014

    كيق سيقومون بتسجيل الدخول وتسجيل ليست موجود

    ردحذف
  5. ahmed wazani3/20/2015

    موضوع جميل هذا رابط موقع أختي :
    http://www.omsaad.com/

    merci

    ردحذف
  6. لو سمحت عايز كود التواصل الاجتماعي

    ردحذف
  7. عند إضافة أحد هده الإضافات لمدنتي أصبحت موقع مدونتى يتوجه دائما إلى مدونتكم مادا سأفعل ؟؟

    ردحذف
  8. ممكن تعبتلي قالب مدونتك
    mohamedgfx29@gmail.com

    ردحذف
  9. اخي الغالي كيف افعل خاصية تسجيل الدخول و الباسوورد ؟

    ردحذف
  10. شرح اكثرمن رااائع لكن قل لي اخي كيف يمكن جعل اول اضافة تظهر في المواضيع فقط

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم