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

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

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

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

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

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

. ثم اضافة اداة جافاسكربت 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%;

  }

}

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

في امان الله

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

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

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

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

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

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

تحرير 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}

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

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

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

في امان الله

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'>

الان اذا اردت وضع الصندوق داخل المشاركة فقط قم بنسخ الكود ووضعه داخل المشاركة ويجب ان تكون HTML ثم تأليف .

الصندوق الاحمر

الكود:

 <text class='red'><span>خمس صناديق احترافية بالوان مختلفة<span></text>

الاخضر:

الكود:

<text class='green'><span>خمس صناديق احترافية بالوان مختلفة<span></text>

الاصفر:

الكود:

<text class='Yellow'><span>خمس صناديق احترافية بالوان مختلفة<span></text>

الازرق:

الكود:

<text class='Blue'><span>خمس صناديق احترافية بالوان مختلفة<span></text>

البرتقالي:

الكود:

<text class='Orange'><span>خمس صناديق احترافية بالوان مختلفة<span></text>

ملاحظة: غير الكتابة الى اي نص يعجبك.

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

في امان الله