إضافة أيقونات المشاركة أسفل التدوينة
موضوع اليوم عن إنشاء شريط الشبكات الإجتماعية بصيغة جميلة. كالصورة الموجودة بالأسفل و إن نزلت لأسفل التدوينة ستجد الشريط يمكنك تجربته بمشاركة هذا الموضوع و لا تنسى وضع تعليق فهذا يشجعنا على الإستمرار.
لكي لا أطيل عليك ندخل في صلب الموضوع
بعد ذالك قم بلصق الكود التالي تحث الأول مباشرة
- ما هو باللون البرتقالي يمكنك تغيره بما تريد فهو لون النص.
- أما الكلام باللون الأحمر يمكنك كتابة ما تريد أو تركه كما هو.
- بعد ذالك قم بحفظ القالب و اذهب للمدونة لترى النتيجة.
طريقة إنشاء شريط الشبكات الإجتماعية العائم
أهمية الشبكات الإجتماعية أصبحت أكثر مما كانت عليه سابقا بسبب قوتها و تفاعلها الكبير. إذ يوجد الملايين من الناس بها و هي منجم مهم لجلب الزوار، و على كل مدون إستغلالها بشتى الطرق ليستفيد منها.
ومن بين هذه الطرق وضع أيقونات الشبكات الإجتماعية في مدونته من أجل جدب المزيد من الزوار. و إضافتنا لهذا اليوم ستكون عبارة عن أيقونات الشبكات الإجتماعيىة بشكل مميز و جميل.
إبحث عن الكود التالي (لمن ليس له خبرة في منصة بلوجر يزور هذا الرابط فسيساعده أساسيات بلوجر
</body> و قم بوضع الكود الموجود بالأسفل فوقه مباشرة.
لتعديل على الكود عير ما هو ملون بما يناسب.
اللون الأحمر بروابط الشبكات الإجتماعية
اللون البرتقالي غير رقم 8 لأي رقم أخر لعرض أقل لشبكات الإجتماعية
اللون الأزرق يمكنك تغييره لتحكم بموقع الإضافة
اللون البنفسجي لتغير لون الإضافة فهناك لونان لون فاتح clear و لون غامق dark غيره حسب ذوقك أو لون المدونة.
بعد التغير قم بحفظ القالب و إذهب لمعاينته على مدونتك.
لقد عدنا
السلام عليكم إخواني أخواتي الكرام و متتبعي مدونة أسرار بلوجر. بسبب ظروف خاصة إضطررت للإنقطاع عن التدوين في المدونة و قد أسفت لهذا كثيرا.
لكن إن شاء الله سأعود لتدوين و لوضع الجديد قد لا يكون عطائي كالسابق لكن سأحاول الإستمرار قدر المستطاع.
و أسفي الشديد لكل الإخوة و الأخوات اللذين وضعوا تعليق أو راسلوني على الخاص و لم أجبهم. أرجوا أن يقبلوا إعتذاري و أسفي الشديد.
و لمن مارالت تواجهه مشكلة ما فلا يتردد في وضعها في تعليق أو مراسلتي على الخاص و إن شاء الله سأجيبه في أقرب وقت ممكن.
تحياتي للجميع لقد عدنا.
تكبير شعار المدونة بتقنية CSS3
- الأن توجه للوحة التحكم ثم تحرير HTML و ابحث عن الكود التالي ]]></b:skin> و ضع الكود قبله.
{ width:256px; /* عرض الصورة التي ستظهر عليه أي العرض الجديد */
height:67px; /*إرتفاع الصورة التي ستظهر عليه أي الإرتفاع الجديد */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s; }
#header img:hover
{ width:514px; /*عرض الصورة الأصلي اللذي صممته */
height:134px; /* إرتفاع الصورة الأصلي اللذي صممته */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s; }
قم بتغير الإرتفاع و العرض حسب الصورة التي صممتها، القيم الأولى هي المقاسات التي سيظهر بها شعارك على المدونة و القيم الثانية هي المقاسات التي سيظهر بها شعارك بعد مرور زر الفأرة عليه.
و إن كنت من الأشخاص اللذين لا يحبون وضع الصور في الشعار و تريد تطبيق هذا التأثير على عنوان مدونتك فالأمر بسيط جدا، ما عليك سوى وضع الكود التالي قبل الوسم ]]></b:skin> و نتهى الأمر
{ -moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s; }
#header h1:hover
{ font-size:80px; /*حجم الكتابة بعد مرور زر الفأرة ععليها */
color:#FF00FF; /* لون الكتابة بعد مرور زر الفأرة ععليها */
margin-left:-30px; /* نسبة الإزاحة لليسار */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s; }
الأمر بسيط جدا كل ما في الأمر هو أن تعرف مقاس الصورة بدقة و حجم الخط و انتهى الأمر، و الأن تمتع بالمظهر الجديد و الإحترافي لمدونتك.
أتمنى أن تشارك هذا الموضوع مع من تحب.
أفضل طريقة لمشاهدة الفيديو على مدونتك turn off lights
موضوع اليوم جميل جدا و هو خاص بمشاهدة الفيديو. فكما تعرف أن الجميع يحبون مشاهدة الفيديو على النت، فإن كنت ممن يظعون الفيديو على مدوناتهم فهذه الطريقة ستساعدك على كسب ثقة زوارك و جلب المزيد منهم.فعند مشاهدتك لأحد الفيديوهات الموجودة في أحد المواقع ستجد أن هناك الكثير من الإلهاءات التي ستحول في عدم تركيزك على ما تشاهد.
لذا فالحل ستجده في هذا الموضوع و هو متمثل في سكريت JQuery يسمح لك بأن تحيط الفيديو بظا أسود داكن لتحجب باقي محتوى الموقع و تحصل بذالك على مشاهدة شبيه بالسنما :-) يمكنك مشاهدة مثال بالأسفل و ذالك بالضغط على كلمة “إطفاء الأنوار” .
و لكي تظيف هذه الخاصية لمدونتك تابع الشرح بالأسفل.
1- توجه لتحرير قالب المدونة و ابحث عن الوسم </head> ثم ضع فوقه الكود التالي:
2- ثم بعد ذالك إبحث عن الوسم ]]></b:skin> و أضف قبله الكود التالي:
3- و أخيرا ابحث عن الوسك </body> و أضف قبله الكود التالي:
بهذا نكون قد انتهينا من هذه الإضافة الجميلة كما اتمنى أن تروق لك.
إن أعجبك الموضوع فأرجوا ألا تبخل علينا ب 5 ثوان من وقتك و تقوم بنشر الموضوع بين أصدقائك
إضافة جديدة على بلوغر Google +1 Button و Google+ Badge
قام اليوم موقع Blogger بإضافة أداتين جديدتين لقائمة “إضافة أداة” و هي خاصة بموقع +Google و بهذه الخطوة يقوم موقع blogger التابع لشركة google العملاقة بتحسين منصة بلوغر لتتناسب مع احتياجات المستخدمين.
كما قد أضاف الموقع في وقت سابق خاصية ال Meta Tag للمواضيع بالإضافة لخدمات أخرى ستجعل المدونات تتناسب مع محركات البحث لإن إستعملت بشكل جيد. (سأقوم بوضع موضوع عن الأمر في القريب العاجل)
يمكنك أن تضيف هذه الأداة في العمود الجانبي للمدونة أو أسفل المدونة. يمكنك زيارة الموضوع الأصلي من هنا
إذا أعجبك الموضوع أرجوا أن تأخد من وقتك 5 ثوان لتشاركه مع أصدقائك.
لعبة السودوكو الشهيرة Sudoku
بسم الله الرحمن الرحيم
السلام عليكم إخوتي أخواتي الكرام اليوم سأقدم لكم تدوينة سريعة هي عبارة عن لعبة السودوكو الشهيرة. يمكنك الأن وضعها في مدونتك بطريقة سهل وبسيطة.
فهي ستساعدك على إبقاء الزوار في مدونتك لأطول فترة ممكنة، و كما تعلم أن هذا أمر مهم لتحصل على نسبة مشاهدة عالية سترجع بالإيجاب على ترتيبك في محركات البحث.
يمكنك تجربة اللعبة كما يمكنك إختيار مدى صعوبة المرحلة و الجميل أنها تحدد لك الزمن اللذي استغرقته في إنهاء المرحلة.
لتركيب اللعبة إختر إضافة أداة كما هو مشروح في المواضيع السابقة ثم ألصق الكود الموجود في الأسفل.
<br /><iframe style="width: 452px; height: 261px" height="260" src="http://www.odyssey.ie/sudoku/sudoku-google.html" frameborder="0" width="200" scrolling="no"></iframe>
<div style="text-align: center; margin: -8px 0px; width: 234px; background: #fff"><a style="color: #555; font-size: 60%; text-decoration: none" href="http://widget-blogs.blogspot.com/">مدونة أسرار بلوغر</a></div>
بعد ذالك قم بحفظ الأداة و استمتع باللعبة الشهيرة أنت و زوارك.
إذا أعجبك الموضوع أتمنى أن تمنحني 5 ثوان من وقتك و تشارك الموضوع مع أصدقائك.
تابع الموضوع »قم بإرعاب أصدقائك على ال Facebook
بسم الله الرحمن الرحيم
أهلا بزوار مدونتي المتواضعة و أسف على الغيبة الطويلة لظروف خارجة عن الإرادة. موضوع اليوم هو موضوع خفيف و مسل نوعا ما، سيجعلك تتسلى و ترعب أصدقائك على الفيس بوك.
ملاحظة: لا يجب إستعمال هذه الطريقة مع ضعاف القلوب، ستكون أنت المسؤول عن النتائج فرجاءا إستعملها بحذر.
- أثناء الدردشة مع أصدقائك على الشات، أرسل لهم الرابط بالأسفل و أخبرهم بأنها صفحة لشخص من مواليد 1947 و لا يزال على قيد الحياة.
- هذا هو رابط الصفحة Alrena Roushe's Facebook Profile
- قم بفتح الرابط الأن و سترى شيئ مثير جدا.
إذا أعجبك الموضوع أعطني من وقتك 5 ثوان و شاركه مع أصدقائك.
تابع الموضوع »صندوق Facebook LikeBox منبثق “رائع”
بسم الله الرحمن الرحيم
أهلا بكل قراء المدونة الكرام و أسف مرة أخرى لإنقطاعي الطويل عن التدوين، و أسف لكل من قام بمراسلاتي على البريد الإلكتروني و هنا في المدونة و لم أرد عليه. كل هذا بسبب ظروف خارجة عن إرادتي و أيضا بسبب تحضيري لمشروع موقع سيأخد من وقتي الكثير. لكن أعد كل القراء بألا أنقطع عن التدوين لفترة طويلة سأضع موضوع واحد في الأسبوع على الأقل و إن توفر الوقت سأضع أكثر.
و لكي أعوض عليكم سيكون موضوع اليوم حصري للمدونة و هو عبارة عن إضافة خاصة بال Facebook تتمثل في صندوق منبثق يظهر لزائر بمجرد دخوله للمدونة مع خاصية الإغلاق. يمكنك مشاهدة مثال على ذالك بالدخول للمدونة و انتظر قليلا حتى يثم تحميل الصفحة بالكامل.
كيف تعمل الإضافة
هذه الإضافة تظهر لمرة واحدة عندما يقوم شخص ما بزيارة مدونك لأنها تقوم بتخزين IP الزائر في ال Cookies الخاص بالمتصفح. و بهذا فلن تزعج زوارك، تخيل أن تظهر لك هذه النافدة المنبثقة في كل صفحة تقوم بزيارتها في المدونة ستكون مزعجة أليس كذالك. لكن هناك خاصية تتحكم في ظهور الإضافة ففي الإضافة هنا ستعاود الظهور بعد مرور 30 يوم من أول زيارة و يمكن التحكمفي هذه القيمة حسب رغبتك. سأقوم بشرحها في الأسفل.
طريقة إضافة صندوق الفيس بوك
1- إدخل للوحة تحكم المدونة / تصميم / إضافة أداة / Html/Javascript
2- الأن قم بوضع الكود بالأسفل في المكان المخصص له.
<style>
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(http://imgboot.com/images/cybersidh/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(http://imgboot.com/images/cybersidh/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #F66303;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">أحصل على جميع تحديثات المدونة على الفيس بوك. إضغط على زر أعجبني بالأسفل<center><p style="line-height:3px;" >▼</p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/username&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://widget-blogs.blogspot.com">Blogger Widgets</a></p>
</div>
</div>
3- الأن قم بتغير username بإسم صفحتك على الفيس بوك. و إن واجهتك مشكلة ما قم بزيارة المواضيع التالية: حل مشكلة صندوق الفيس بوك Like Box و إضافة مربع الفيسبوك بشكل عائم و منزلق Fan Box
4- إذا أردت أن تظهر الإضافة في كل مرة بدل 30 يوم قم بمسح القيمة التالية من الكود *30 أو غيرها بعدد الأيام التي تريدها.
الأن قم بوضع ردك بالأسفل و شارك الموضوع مع أصدقائك.
تابع الموضوع »Copyright © 2011 أسرار بلوغر