تدوينة تجريبيه في القالب

نص عبارة عن H1

نص عبارة عن H2

نص عبارة عن H3

تجربة رابط

نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي نص عادي .

+

إضافة أيقونات المشاركة أسفل التدوينة

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

لكي لا أطيل عليك ندخل في صلب الموضوع

الأن قم بالدخول لقالب المدونة و ابحث عن الكود التالي <data:post.body/> قد تجد أكثر من كود حسب القالب سيكون الثاني و إن لم يعمل جربه على باقي الأكواد الموجودة فسيعمل مع أحدها.

بعد ذالك قم بلصق الكود التالي تحث الأول مباشرة

<style> 

/*--------Flipper Sharing Widget ------*/ 

.flipper a { 

display:block; 

height:48px; 

width:48px; 

padding:0 4px; 

float:left; 

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg6ECCXs1brX6qzs4Dx9jru1udkXry69rbB2MoBoMoQFBiBoEooyoj68Fkss3HQSVj7QHgJR8DI-LTgfkMlTdUS7rGYmNKh7ZW5xEHt4xDFAPkMJ5CAvAKBCCDCQQI5VUKmE7cv5HDJofj/s1600/flipper.png) no-repeat; 

-webkit-transition: ease-in 0.15s all;    

-moz-transition: ease-in 0.15s all;    

-o-transition: ease-in 0.15s all;    

-ms-transition: ease-in 0.15s all;    

transition: ease-in 0.15s all; 

cursor:pointer;

}

.flipper a.googleplus { 

background-position: 0px -348px;

} 

.flipper a.googleplus:hover { 

background-position: 0px -406px;

}

.flipper a.pinterest { 

background-position: 0px -464px; 

} 

.flipper a.pinterest:hover { 

background-position: 0px -522px;

}

.flipper a.delicious { 

background-position: 0px 0px; 

} 

.flipper a.delicious:hover { 

background-position: 0px -58px;

} 

.flipper a.digg { 

background-position: 0px -116px;

} 

.flipper a.digg:hover { 

background-position: 0px -174px;

} 

.flipper a.stumbleupon { 

background-position: 0px -812px;

} 

.flipper a.stumbleupon:hover { 

background-position: 0px -870px;

} 

.flipper a.technorati { 

background-position: 0px -928px;

} 

.flipper a.technorati:hover { 

background-position: 0px -406px;

} 

.flipper a.twitter { 

background-position: 0px -928px;

} 

.flipper a.twitter:hover { 

background-position: 0px -986px;

} 

.flipper a.facebook { 

background-position: 0px -232px;

} 

.flipper a.facebook:hover { 

background-position: 0px -290px;

} 

.flipper a.reddit { 

background-position: 0px -580px;

} 

.flipper a.reddit:hover { 

background-position: 0px -638px;

}

.flipper a.rss { 

background-position: 0px -696px;

} 

.flipper a.rss:hover { 

background-position: 0px -754px;

}

.Pleaseshare{ 

margin:10px 0px; 

color:#333333; 

font-weight:bold; 

font-size:20px; 

font-family:sans-serif;

} 

</style>

<div class='flipper'> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class="Pleaseshare"> 

إن أعجبك الموضوع قم بنشره) </div>

<!--Google Plus--> 

<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>

<!--Facebook--> 

<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

<!-- Twitter --> 

<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>

<!-- Pinterest --> 

<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>

<!-- Delicious --> 

<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>

<!--DIGG--> 

<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>

<!--Stumble--> 

<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>

<!-- Reddit --> 

<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>

<!--RSS --> 

<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/> 

</b:if></div>

<div style="clear:both"/>

1. ما هو باللون البرتقالي يمكنك تغيره بما تريد فهو لون النص.
2. أما الكلام باللون الأحمر يمكنك كتابة ما تريد أو تركه كما هو.
3. بعد ذالك قم بحفظ القالب و اذهب للمدونة لترى النتيجة.

+

طريقة إنشاء شريط الشبكات الإجتماعية العائم

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

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

إبحث عن الكود التالي (لمن ليس له خبرة في منصة بلوجر يزور هذا الرابط فسيساعده أساسيات بلوجر

</body> و قم بوضع الكود الموجود بالأسفل فوقه مباشرة. 

<!-- import Scripts -->

<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/mblsocialbar.js"></script>

<div id="scolder">

<script type="text/javascript" src=" http://mbl-flipper-google-blogger.googlecode.com/files/socialflipmin.js"></script></div>    

<link href='http://mybloggerlab.com/StyleSheet/mblsocialbar.css' rel='stylesheet' type='text/css'/>

<!-- Social Media Bar For Blogger  -->  

<script type="text/javascript">

$(document).ready(function(){

$.mblSocialBar({

items: {

twitter: { url: '#', text: 'تابعني على تويتر' },

facebook: { url: '#', text: 'تابعني على الفيسبوك' },

rss: { url: '#', text: 'الخلاصات' },

google: { url: '#', text: 'تابعني على جوجل +' },

youtube: { url: '#', text: 'قناتي على اليوتيوب' },

orkut: { url: '#', text: 'تابعني على أوركيت' },

myspace: { url: '#', text: 'تابعني على مايسبيس' },

digg: { url: '#', text: 'تابعني على دييغ' },   

},

show: 8,

position: "left",

skin: "clear"

});  

});

</script>

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

بعد التغير قم بحفظ القالب و إذهب لمعاينته على مدونتك.

+

تكبير شعار المدونة بتقنية CSS3

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

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

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

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

لنفترض أن لدينا صورة بحجم 1024px في العرض و 768px في الإرتفاع و تريد تقليل حجمها دون فقد جودتها. فإذا كنت تريد أن يكون عرض الصورة الجديدة 500px فما هي قيمة إرتفاع الصورة؟؟؟

ولكي نحصل على القيمة الصحيحة سنقوم بإجراء عملية حسابية بسيطة و معروفة، و هي لمعرفة القيمة X نضرب القيمة A في B و نقسمها على Y.

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

نقوم بضرب قيمة عرض الصورة الجديدة و هي 500 في إرتفاع الصورة الأصلية و هو 768 و النتيجة ستكون 384,000px بعد ذالك نقوم بقسمة النتيجة على عرض الصورة الأصلية و هو 1024 و النتيجة المحصل عليها ستكون 375px و هي القيمة لإرتفاع الصورة الجديدة.

و إذا كنت تريد معرفة العرض بدل الإرتفاع قم بنفس العملية لكن بالإتجاه المعاكس، بضرب الإرتفاع في العرض الأصلي لصورة و النتيجة تقسمها على الإرتفاع الأصلي لصورة.

الأن إنتهينا من العمليات الحسابية و ننتقل لتطبيق ما تعلمناه على شعار المدونة ليظهر بالشكل المرغوب. عندما تقوم بتصميم تعار مدونتك صممه بحجم كبير لكي يظهر جيدا عندما يتم تكبيره، الكود الموجود بالأسفل هو نفس الكود اللذي أضعه في مدونتي لتفهم أكتر.


- الأن توجه للوحة التحكم ثم تحرير HTML و ابحث عن الكود التالي  ]]></b:skin> و ضع الكود قبله.

#header img
{ 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> و نتهى الأمر

#header h1
{ -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> ثم ضع فوقه الكود التالي:


  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <br /><script type='text/javascript'> <br />//<![CDATA[ <br />$(document).ready(function(){ <br />$("#oscuridad").css("height", $(document).height()).hide(); <br />$(".lightSwitcher").click(function(){ <br />$("#oscuridad").toggle(); <br />if ($("#oscuridad").is(":hidden")) <br />$(this).html("إطفاء النور").removeClass("turnedOff"); <br />else <br />$(this).html("تشغيل النور;).addClass("turnedOff"); <br />}); <br />}); <br />//]]> <br /></script>


2- ثم بعد ذالك إبحث عن الوسم ]]></b:skin> و أضف قبله الكود التالي:


  /* turn off lights <br />----------------------------------------------- */ <br />#videoLuces { <br />position:relative; <br />z-index:102; <br />} <br />#apagador { <br />max-width:640px; <br />text-align:left; <br />position:relative; <br />height:25px; <br />display:block; <br />margin: 25px 0 0 60px; <br />} <br />.lightSwitcher { <br />position:absolute; <br />z-index:101; <br />background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_m8Zb2d6NHhNUG3Y7t81wGGmCpgvNYrrHSRaqxHLHtIVOZxjXe8lnijBIHwaKz685UZd6zZwmiNQSxh6gMGclMhr47URq6Mgbe_FZirH2Pb3Jcqinjgiqug1RKRnjqCwklHfiQa0pclU/s16/luces-on.png); <br />background-repeat:no-repeat; <br />background-position:left; <br />padding: 0 0 0 20px; <br />outline:none; <br />text-decoration:none; <br />} <br />.lightSwitcher:hover {text-decoration:underline;} <br />.turnedOff { <br />color:#ffff00 !important; <br />background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdpCAosqxkjw_MSMTY0zi5x6UoJ7HMnmrCSdrrUdRZSfIIwCl4kYoi5dn6A2DqxvWQ5u6XSAW0-3yFE026MJIsRkv7WmbiUFrj3L9Y9yXS_WBYs0LxFMPzIFBECMSMry6xCqCDHNk9yrs/s16/luces-off.png); <br />} <br />#oscuridad { <br />background:#000; <br />opacity:0.9; <br />filter:alpha(opacity=90); <br />position:absolute; <br />left:0; <br />top:0; <br />width:100%; <br />z-index:100; }


3- و أخيرا ابحث عن الوسك </body> و أضف قبله الكود التالي:


  <div id='oscuridad'/>


4- الأن نأتي للخطوة الأخيرة و هي إضافة الفيديو و أعتقد أن الجميع يعرفون الطريقة. الأن بعد أن تضيف الفيديو في موضوع جديد نتجه لتبويب تحرير HTML و نضع الكود التالي بحيث يكون الفيديو بينه.


  <center> <div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">إطفاء النور;/a></div> <div id="videoLuces"> ...سيكون الفيديو في هذا المكان... </div> </center>


بهذا نكون قد انتهينا من هذه الإضافة الجميلة كما اتمنى أن تروق لك.


إن أعجبك الموضوع فأرجوا ألا تبخل علينا ب 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 ثوان من وقتك و تشارك الموضوع مع أصدقائك.

+