Archive for 2014

الرئيسية » Archive for 2014

اضافة ازرار المواقع الاجتماعية بشكل احترافي

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

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

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

. نذهب الى لوحة التحكم

. ثم الى التخطيط

. ثم اضافة اداة جافاسكربت Javascript

والصق هذه الكود داخل الصندوق مع مراعاة تغير الروابط

<div class="btnt-chronicl-social"><ul><li><a class="rss" href="http://feeds.feedburner.com/username">Subscribe to the RSS Feed</a></li> <li><a class="twitter" href="http://twitter.com/username">Follow me on Twitter</a></li> <li><a class="facebook" href="http://facebook.com/username">Find me on Facebook</a></li> <li><a class="google" href="الرابط هنا" rel="author">Join me on Google+</a></li> <li><a class="linkedin" href="الرابط هنا">Connect with me on LinkedIn</a></li> <li><a class="youtube" href="http://www.youtube.com/user/username">Watch me on YouTube</a></li>

</ul></div>

<style type="text/css">.btnt-chronicl-social { width: 100%; } .btnt-chronicl-social ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; } .btnt-chronicl-social ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; } .btnt-chronicl-social ul li:first-child { border-top: 0 none; } .btnt-chronicl-social ul li:last-child { border-bottom: 0 none; } .btnt-chronicl-social ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; } .btnt-chronicl-social ul li a:hover { background-color: #fafafa !important; } .btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; } .btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;} .btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; } .btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; } .btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; } .btnt-chronicl-social ul li .youtube { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; } .social-about { display: none; }</style>

غير مابلون الاحمر الى الروابط الخاصة بك

اضغط على حفظ ومبروك عليك الاضافة

اتمنى ان تنال اعجابكم الاضافة

في امان الله

حصريا قائمة احترافية لمدونات بلوجر

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

اليوم حبيت اقدم لكم قائمة احترافية وانيقة وبسيطة لمدونات بلوجر

لمعاينة القائمة

كود الـ HTML

<nav>

<a id="tombolmenu" href="#">menu</a>

<ul class="menu">

<li><a href="#">الرئيسية</a></li>

<li><a href="#">قائمة1</a></li>

<li><a href="#">قائمة2</a></li>

<li><a href="#">قائمة3</a></li>

<li><a href="#">قائمة4</a></li>

<li><a href="#">قائمة منسدلة</a>

<ul class="hidden">

<li><a href="#">منسدلة1</a></li>

<li><a href="#">منسدلة2</a></li>

<li><a href="#">منسدلة3</a></li>

<li><a href="#">منسدلة4</a></li>

</ul>

</li>

</ul>

</nav>

كود الـ css

nav {

font:15px 'DroidKufi-Regular', tahoma ,arial;

background-color:#313131;

}

@font-face {

font-family: 'DroidKufi-Regular';

src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');

src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),

url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),

url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}

nav,

nav * {

display:block;

}

nav #tombolmenu {

display:none;

}

nav ul,

nav li {

padding:0;

margin:0;

list-style:none;

}

nav ul {

height:30px;

}

nav li {

float:right;

position:relative;

}

nav li a {

display:block;

padding:0 10px;

color:white;

text-decoration:none;

}

nav li:hover > a {

background-color:#1D8FC5;

}

nav li ul {

position:absolute;

background-color:black;

height:auto;

width:160px;

display:none;

}

nav li:hover ul.hidden {

display:block;

}

nav li li {

float:right;

}

@media only screen and (max-width:600px) {

nav #tombolmenu {

display:block;

padding:0 15px;

background-color:black;

text-decoration:none;

}

nav #tombolmenu.active {

background-color:#1D8FC5;

color:white;

}

nav ul {

height:auto;

display:none;

}

nav li {

float:right;

}

nav li ul {

width:100%;

}

اتمنى ان تنال اعجابكم وتستفيدو من القائمة

في امان الله

افضل 5 مواقع لعمل شعار ناجح مجاناً !

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

اليوم حبيت اقدم لكم افضل خمس مواقع لصنع شعار مجاناً لان الكثير الايعرفون العمل على برامج التصميم لهذا حبيت اضع بين ايديكم هذه المواقع

الموقع الاول

logoease

الموقع الثاني

logomaker

الموقع الثالث

logodesignengine

الموقع الرابع

logoyes

الموقع الخامس والاخير

freelogoservices

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

في امان الله

طريقة جعل قائمة المدونات تتحرك مع النزول الى اسفل المدونة

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

شرح طريقة جعل قائمة مدونات بلوجر تتحرك مع النزول الى اسفل المدونة

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

طريقة التركيب

نذهب الى المدونة ثم قالب

تحرير HTML ونبحث عن الكود </body>

نضع الكود التالي قبله مباشرة فوق </body>

<script type='text/javascript'>//<![CDATA[$(document).ready(function() {// Menentukan elemen yang dijadikan sticky yaitu .navvar stickyNavTop = $('#nav').offset().top;var stickyNav = function(){var scrollTop = $(window).scrollTop(); // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya if (scrollTop > stickyNavTop) {$('#nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });} else {$('#nav').css({ 'position': 'relative', 'width': '100%' });}};// Jalankan fungsistickyNav();$(window).scroll(function() {stickyNav();});});//]]></script>

غير مابلون الاحمر الى الايدي (id) الخاص بقائمة مدونتك الأسهل عليكم الامر ابحث عن (الرئيسية) او اي قسم من اقسام القائمة وستجد الأيدي فوقها

شاهد الصورة

اتمنى ان تنال اعجابكم الاضافة

في امان الله

تغير شكل الاقتباس لمدونات بلوجر الى اشكال احترافية

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

اليوم حبيت اقدم لكم طريقة بسيطة لتغير شكل الاقتباس لمدونات بلوجر والذي الكثير من المدونين المبتدئين لايستخدموها والتي تقوم بتميز كواد او ملاحضة او نص

طبعأ الشكل الذي سوف اقدمه لكم شكل احترافي وبسيط وانيق وسوف يلائم جميع المدونات انشاء الله مع امكانية اختيارالوان الذي يناسب مدونتك

شكل الاقتباس

طريقة التركيب

ابحث عن الكود التالي .post blockquote او blockquote وقم بحذفة جميعاً ثم ابحث عن الكود التالي ]]></b:skin>

واضف قبله مباشرة الكود التالي

.post blockquote{background: #DBDBDB ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; border-left: 5px solid #0075A3;

border-right: 5px solid #0075A3;}

.post blockquote p { margin: 0; padding-top: 10px; }

.post-body blockquote{line-height:1.6em;position :relative; font-family: 'Droid Arabic Kufi', tahoma ,arial; font-size:13px;font-style:italic;padding:0.5em 1em}

غير ما بلون الاحمر لون الخلفية : الى اي لون يعجبك ويناسب مدونتك
غير م بلون البرتقالي الوان الاطراف : الى اي لون يعجبك ويناسب مدونتك

وثم حفظ ومبروووووك عليك الاضافة الجميلة

وفي الاخير اتمنى ان تستفيدو من الشكل الجديد للاقتباس

في امان الله

افضل عشر مواقع لختيار الوان متناسقة وجذابة

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

اليوم حبيت اجمع لكم افضل عشر مواقع لتنسيق الالوان

طبعاً الالوان لها دوراً رئيسياً في جمالية الموقع او التصميم فان الالون

هي التي تحدد التصميم اذا كان جميل او سيء طبعأ الكثير

منا لايعرف ان ينسق ويختار الالوان الجذابة للزوار

وخاصة هذه المواقع تفيد مصممين الويب

المواقـع

الموقع الاول

الموقع الثاني

الموقع الثالث

الموقع الرابع

الموقع الخامس

الموقع السادس

الموقع السابع يوفر لك الون لمحبين التصميم المسطح

hflatuicolors.com

الموقع الثامن يوفر لك هذه الموقع خاصية سحب الوان اي موقع

webcolourdata.com

الموقع التاسع يوفر لك فرش وتدرجات

colorschemer

الموقع العاشر والاخير يوفر لك خاصية اختيار الالوان من اي صورة

pictaculous

وفي الختام اتمنى ان تستفيدو من المواقع

في امان الله

5 صناديق احترافية بالوان مختلفة

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

اليوم اقدم لكم خمس صناديق احترافية بالوان مختلفة.يمكنك ان تستعملها في اعلان خبر او نص في مدونتك ليشاهده الزوار.

لمشاهدة الصناديق مباشرة: من هنـا

طريقة التركيب

ابحث عن الكود : ]]></b:skin> واضف الكود التالي قبله

/* this boxs by : http://th7design.blogspot.com/ */
text{

color: #555;
display: block;
padding: 5px;
color: #000;
text-align: right;
direction: rtl;
font: 15px 'DroidKufi-Regular',tahoma,arial;
border-radius: 4px;
max-width: 800px;
margin: 5px auto;
}
@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}

.green{
background: #DFF2BF;
border: 1px solid #ace900;
}
.Yellow{

background: #fff8c4;
border: 1px solid #f2c779;
}

.blue{

background:#2794B6;
border:1px solid #2749B6;
}

.red{

background:#C71717;
border:1px solid #FF0303;
}

.orange{

background:#FF7A00;
border:1px solid #FF3D00;
}

/* this boxs by : http://th7design.blogspot.com/ */
<div id='searchbarleft'>