أضف تأثير جميل إلى صندوق المعجبين بصفحتك على الفايسبوك

أضف تأثير جميل إلى صندوق المعجبين بصفحتك على الفايسبوك

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

1-إدخل إلى حساب مدونتك.

2-ثم إنتقل إلى تصميم أو تخطيط .

3-أنقر على إضافة أداة.

4-إختر HTML/JavaScript

 ضع الكود التالي مع تغير ID الخاص بصفحتك :

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

<script type="text/javascript">FB.init("32eb3732082b27e7c314feb421a56208");</script>

<fb:fan profile_id="ID" connections="20" width="300" height="300" css="http://related-sources.googlecode.com/files/facebook.css?"></fb:fan>
 <a href="http://homeblooger.blogspot.com/" class="fbfb_tut" title="أضف هذه الإضافة إلى مدونتك">أضف هذه الإضافة إلى مدونتك</a>

شرح الحصول على ID الخاص بصفحتك

عندما تقوم بالتعديل على أي شيء مثلا تعديل الصورة أو العنوان سوف يظهر لك في الربط الأعلى مثل :

وبهذا نكون قد أنهينا الموضوع أتمنى أن تكونو قد إستفدتم وفي موضوع أخر إن شاء الله

تابع القراءة Résuméabuiyad

إضافة تجعل كل من يقوم بنسخ تدويناتك ينسخ رابط موقعك وكذلك العنوان تلقائيا

إضافة تجعل كل من يقوم بنسخ تدويناتك ينسخ رابط موقعك وكذلك العنوان تلقائيا

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

لنبدأ على بركة الله

1-قم بالتوجه إلى لوحة التحكم لمدونتك.

2-إختر تصميم أو قالب .

3- ثم توجه إلى تحرير html.

4-قم بالبحث عن :

</head>

تم قم بوضع  الكود التالي قبلها 

<script type='text/javascript'>
if(document.location.protocol==&#39;http:&#39;){
 var Tynt=Tynt||[];Tynt.push(&#39;d-PytMlMWr4j7madbi-bnq&#39;);Tynt.i={&quot;ap&quot;:&quot;المصدر: مدونة بيت البلوجر &quot;};
 (function(){var s=document.createElement(&#39;script&#39;);s.async=&quot;async&quot;;s.type=&quot;text/javascript&quot;;s.src=&#39;http://tcr.tynt.com/ti.js&#39;;var h=document.getElementsByTagName(&#39;script&#39;)[0];h.parentNode.insertBefore(s,h);})();
}
</script>

قم بتغير المصدر: مدونة بيت البلوجر بما تريد

5-قم بحفظ القالب .

6- جرب نقل أي شيء من مدونتك وسترى النتيجة.

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

تابع القراءة Résuméabuiyad

أضف أخر التعليقات مع صورة الكاتب بشكل جميل ورائع لمدونات البلوجر

أضف أخر التعليقات مع صورة الكاتب بشكل جميل ورائع لمدونات البلوجر

السلام عليكم ورحمة الله تعالى وبركاته أهلا وسهلا ومرحبا بكم زواري الكرام في موضوع أتمنى أن ينال إعجابكم وهو لإضافة أخر التعليقات في القائمة الجانبية مرفوقة بصورة لكاتب التعليق وبطريقة سهلة للغاية وبشكل جميل وبتقنية jquery.

لنبدأ على بركة الله

1 - قم بتسجيل الدخول إلى مدونتك بلوجر. 
2 - الأن توجه إلى تخطيط أو تصميم حسب لوحة التحكم.
3 - ثم إضافة أدة.
4 - إختر HTML/JavaScript .
5 - بعدها في الحقل الأول ضع إسم الأداة مثلا أخر العليقات..... ثم ضع في الحقل الكبير هذا الكود :

<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #333;display: block;font-size: 12px; line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 60,
roundAvatar = true,
characters  = 100,
showMorelink = false,
moreLinktext = "More &#187;",
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://homeblooger.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

قم بتغيير http://homeblooger.blogspot.com برابط موقعك.

تابع القراءة Résuméabuiyad

إضافة تبادل إعلاني بتأثير جميل JQUERY

إضافة تبادل إعلاني بتأثير جميل JQUERY

السلام عليكم ورحمة الله تعالى وبركاته أهلا وسهلا بكم من جديد في تدوينة جديدة ومع إضافة جديدة لمدونات البلوجر وهي لإضافة التبادل الإعلاني بتأثير جميل بتقنية jQuery وتشمل الإضافة أربع أماكن لعرض التبادل الإعلاني مع مدونتك تتحرك بطريقة إحترافية.

لنبدأ على بركة الله

المثال من مدونتي وسوف أتركه فقط لمدة أسبوع 

1 - قم بتسجيل الدخول إلى مدونتك بلوجر.
2 - من لوحة التحكم الخاصة بمدونتك توجه إلى تصميم أو قالب.
3 - قم بالبحث عن :
]]></b:skin>

أضف قبله هذا الكود :

#banners {
margin-bottom:20px;
padding-left:10px;
}
.banner1 {-webkit-transition: -webkit-transform .15s linear;
margin-left:20px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
.banner1:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner2 {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.banner2:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner3 {-webkit-transition: -webkit-transform .15s linear;
margin-left:20px;
margin-bottom:20px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(+12deg);
-moz-transform: rotate(+12deg);
}
.banner3:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}
.banner4 {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border:5px solid #fff;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
.banner4:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}

4 - الأن قم بحفظ القالب وتوجه بعدها إلى تصميم أو تخطيط.

5 - ثم إضافة أدة.
6 - إختر HTML/JavaScript .
7 - بعدها في الحقل الأول ضع إسم الأداة مثلا تبادل إعلاني..... ثم ضع في الحقل الكبير هذا الكود :

<div id='banners'>
<a href=" هنا ضع الرابط للإعلان رقم 1 " target="_blank">
<img class="banner1" src="http://lh6.ggpht.com/_PhBMR7XaHEs/TEJTuhWpHnI/AAAAAAAABis/-NU7uweLofQ/%28F1%204%28%27%28JC_thumb%5B1%5D.png" width="105" border="0" height="105"></img></a>
<a href=" هنا ضع الرابط للإعلان رقم 2 " target="_blank">
<img class="banner2" src="http://lh6.ggpht.com/_PhBMR7XaHEs/TEJTuhWpHnI/AAAAAAAABis/-NU7uweLofQ/%28F1%204%28%27%28JC_thumb%5B1%5D.png" width="125" border="0" height="125"></img></a>
<a href="هنا ضع الرابط للإعلان رقم 3" target="_blank">
<img class="banner3" src="http://lh6.ggpht.com/_PhBMR7XaHEs/TEJTuhWpHnI/AAAAAAAABis/-NU7uweLofQ/%28F1%204%28%27%28JC_thumb%5B1%5D.png" width="70" border="0" height="70"></img></a>
<a href=" هنا ضع الرابط للإعلان رقم 4 " target="_blank">
<img class="banner4" src="http://lh6.ggpht.com/_PhBMR7XaHEs/TEJTuhWpHnI/AAAAAAAABis/-NU7uweLofQ/%28F1%204%28%27%28JC_thumb%5B1%5D.png" width="110" border="0" height="110"></img></a>
</div>

مع تغيير ما هو بالأحمر بما يناسبك 

تابع القراءة Résuméabuiyad