Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link


الصفحة الرئيسية
اضافات بلوجر

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

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

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>

إرسال تعليق