مساحة اعلانية

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

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

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 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أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة

عبّر عن تعليقكالإبتسامات