أزرار الشبكات الإجتماعيه عائمه Cool Floating Social Bookmarking With hover effect

بسم الله والحمد لله والصلاة والسلام على رسول الله صلى الله عليه وسلم
موضوع اليوم عن إداه جميله مترجمه من أحدى المواقع الأجنبيه عن إضافة أزرار الشبكات الإجنماعيه عائمه أو مترجله أو Auto Scrolling كما يقال عنها بالإنجليزيه
وهى تضم Facebook , Twitter , Digg , Google plus
كما بالصوره
ويمكنك إضافتها بسهوله
طريقة الإضافه فى بلوجر
* سجل دخولك فى بلوجر
* إذهب إلى التصميم >> عناصر الصفحه >> إضافة أداه >> إختر Html Javascribt
* إنسخ الكود التالى وضعه بها وإضغط حفظ

<!-- floating share bar -->

<style type="text/css">


f0f0;

cur


.sbutton{

background:#f

0sor:pointer;

color:#fff;

text-shadow:

border:none;
padding:4px;


0,0,0.25);

-moz-border-radius:6px;

-

0 -1px 1px rgbaundefined0
,webkit-border-radius:6px;
border-radius:6px; margin-left:8px;

pageshare {position:f
font:12px sans-serif;
}
.sbutton:hover{
background:#336699;
}


#ixed; bottom:15%; margin-left:-81px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#fff;border: 1px solid #f7f7f7; padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 2px 0 5px;}
#pageshare:hover {-moz-border-radius:6px;
 -moz-box-shadow: 0 2px 4px hslaundefined0,0%,0%,.35);


_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small

-webkit-box-shadow: 0 2px 4px hslaundefined0,0%,0%,.35);border: 1px solid #ddd;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_coun
t, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}


dius:3px;font-size:8px;}
</style>


pageshare' title="">

<div cla

<div id=
'ss='sbutton' id='fb'>

="box_count" href="http:
<a name="fb_share" typ
e
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-r
a//www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div><div class='sbutton' id='su'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>

ter-share-button' data-count='vertical' h
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div class='sbutton' id='rt'>
<a class='twi
tref='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></script></div><div style="clear: both;font-size: 9px;text-align:center;"><a href=""></a></div><!-- -->


</div><div style=”clear: both;font-size: 9px;text-align:center;”> <a href=””></a></div><!– –>


<!-- floating share bar End --></!–>

إقرأ المزيد... Résuméabuiyad

إضافة أداه ( تابعنا ) كما فى ورد برس لمدونات بلوجر Wordpress like icons to blogger

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

والأن إلى الطريقه مع العلم أن هذه الإضافه لا تعمل مع المتصفح ie 6 القديم ولكن تعمل بكفائه مع جميع المتصفحات وبالأخص جوجل كروم وفايرفوكس

- سجل دخولك فى بلوجر

-إذهب إلى التصميم -->> تحرير HTML -->> خذ نسخه إحتياطيه من القالب

- إبحث عن هذا الكود التالى

]]></b:skin>

- ثم قم بنسخ الكود التالى وضعه فوق السابق مباشرة

/* subscribe widget */
#subscribe { background:#f3f3f3; width:288px; margin:0px 0px 15px 0px; padding:8px 5px; border:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; font-size:90%; }
.subscribe_icons { width:286px; margin:0px auto; }
.subscribe_icons li { display:inline; float:left; margin:0px 2px 5px 2px; width:52px; text-align:center; font-size:11px; }
.subscribe_icons a { display:block; padding:40px 0px 2px; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; color:#444 !important; }
.subscribe_icons a:hover { color:#26b !important; text-decoration:none; -moz-box-shadow:0px 2px 4px hsla(0,0%,0%,.35); -webkit-box-shadow:0px 2px 4px hsla(0,0%,0%,.35); }
.subscribe_icons .subscribe_twitter a { background:url(http://i49.tinypic.com/2mq2es5.png) center top no-repeat; }
.subscribe_icons .subscribe_facebook a { background:url(http://i49.tinypic.com/52b7yv.png) center top no-repeat; }
.subscribe_icons .subscribe_rss a { background:url(http://i47.tinypic.com/maapvk.png) center top no-repeat; }
.subscribe_icons .subscribe_email a { background:url(http://i46.tinypic.com/2e4vgwy.png) center top no-repeat; }

- ثم إبحث عن هذا الكود التالى

<div id='sidebar-wrapper'>

- ثم فوقه مباشرة ضع الكود التالى

<div align='center'>
<div id='subscribe'>
<ul class='subscribe_icons'>
<li class='subscribe_twitter'><a href='http://twitter.com/YOURUSERNAME' rel='nofollow' target='_blank'>Twitter</a></li>
<li class='subscribe_facebook'><a href='http://www.facebook.com/YOURUSERNAME' rel='nofollow' target='_blank'>Facebook</a></li>
<li class='subscribe_rss'><a href='http://feeds2.feedburner.com/YOURFEEDNAME' rel='nofollow' target='_blank'>RSS</a></li>
<li class='subscribe_email'><a href='http://feedburner.google.com/fb/a/mailverify?uri=YOURFEEDNAME&loc=en_US' rel='nofollow' target='_blank'>Email</a></li>
</ul>
<div class='clear'/>
</div>
</div>

* مع تغيير ما بالأحمر بإسم المستخدم الخاص بك فى الفيسبوك وتويتر

* أسم الخلاصات أو الإسم الذى يتبع رابط الخلاصات الخاص بك

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

أو صندوق التعليقات الخاص بالمدونه

إقرأ المزيد... Résuméabuiyad

إضافة أداة ( إشترك معنا ) فى بلوجر RSS , TWITTER , EMAIL DELIVERY

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

والأن تابع الطريقه
أولاً أخى لا تنسى أن تأخذ نسخه إحتياطيه من قالب مدونتك قبل أى شئ لتجنب وقوع أى خطأ لا قدر الله عن طريق الضغط على لينك تنزيل فالب كامل
- إنتقل ألى التصميم -->> تحرير HTML -->> ثم إبحث داخل قالب مدونتك عن هذا الكود

]]></b:skin>

ثم إستبدله بهذا الكود التالى

#subscribebox{list-style:none; margin:0px}
#subscribebox li{padding:10px 5px; position:relative; margin-top:0; margin-right:0; margin-bottom:5px; margin-left:0; height:64px; opacity:0.75; -moz-opacity:0.75}
#subscribebox li:hover{ background-color:#f4f4f4; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -khtml-border-radius:5px; opacity:1; -moz-opacity:1; -webkit-transition:opacity 1s ease-out}
#subscribebox li img{float:left; position:relative; padding:0px; margin:0px 10px 0px 0px}
#subscribebox li h4{margin:-6px 0 3px 83px; font-size:15px; line-height:26px; color:#8B3E2F; text-shadow:1px 1px 0px #fff; font-family:Helvetica,Arial,Verdana; font-weight:bold; clear:none}
#subscribebox li p{margin:0 0 0 0; font-family:Trebuchet MS,sans-serif; font-size:13px; letter-spacing:-0.02em; clear:none; text-indent:0px}
#subscribebox li a.link{background:none; border:none; top:0; left:0; right:0; bottom:0; width:100%; height:100%; position:absolute; z-index:50}
]]></b:skin>

ثم إحفظ القالب وأذهب إلى عناصر الصفحه -->> إضافة أداه -->> Html javascribt
إترك العنوان فارغاً ثم ضع الكود التالى بها

<ul id="subscribebox">
<li>
<a class="link" href="http://feeds.feedburner.com/YOUR FEED NAME" target="_blank"></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVGJrqHoVTxj6vqiaws3DhHmpX5k2YpI4MWybiRMuKKwvXTqO5DAxuqUr2EY16IDDkON7g8DfLSU38iwdCJyP77cwhLJ2iFFaWrA8hZNIUP7Ja4hrJd2wlkXxKOzGlWUsaVatza-yrxZM/s1600/rss_48.png" alt="RSS Feeds" />
<h4>RSS Feed</h4>
<p>إشترك فى خدمة الخلاصات rss</p>
</li>
<li>
<a class="link" href="http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEED NAME&loc=en_US" target="_blank"></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCdLT6grSSLxmGLr7MOYZhHu0NlwMYgtAvG5mnsg3sJwI5-jDgQ998giUTPJmD4vh0Q2B2rFTUytAHBMCRTYIVFpBWYqZmJLhIcfuLR_DfsNKPaXwVnP0KC1YYGpdtIV7utyN8LfLopfM/s1600/mail_forward_48.png" alt="RSS E-Mail Delivery" />
<h4>E-Mail Delivery</h4>
<p> ضع إيميلك ليصلك جديدنا مباشرة على بريدك الإلكترونى</p>
</li>
<li>
<a class="link" href="http://twitter.com/YOUR TWITTER HANDLE" target="_blank"></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJeX4nsawr8y9U_Dc1JfWTTci6ehBhEmj_59mfEPBQyiCiFLHMzVM2zge_6KdQzJ68Ghyphenhyphenn6tAQ3-68f9XaTFLGGi4tcPiBdGrgkFvQlaglCbnMbRkHKLBOYVG4SSPFVozOweVOMDnTxY/s1600/twitter_48.png" alt="Follow Us On Twitter" />
<h4>Twitter</h4>
<p>تابعنا على تويتر وتعرف على جديد المدونه</p>
</li>
</ul>

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

إقرأ المزيد... Résuméabuiyad

أضف لعبة السودوكو لمدونتك بلوجر How To Add Sudoku Game To Blogger

بسم الله والحمد لله
لعبة السودكو هى موضوع اليوم . فهى لعبه مسليه جداً تعتمد على القدره الزهنيه والإنجاز فى وقت أقل وهى لعبه يابانيه الأصل
طريقة اللعب
- على اللاعب إكمال الجدول بواسطة الأرقام من 1 إلى 9 بشرط إستعمال كل رقم مره واحده أفقياً أو رأسياًُ فى كل منظقه من المناطق التسعه
شاهد المثال

كيقية الإضافه فى بلوجر
- سجل دخولك فى بلوجر
-إذهب إلى التصميم -->> عناصر الصفحه -->> إضافة أداه -- >> HTML JAVASCRIBT
- ثم ضع بها الكود التالى وأضغط حفظ

<iframe src="http://www.odyssey.ie/sudoku/sudoku-google.html" frameborder="0" width="260" height="260" scrolling="no"></iframe><br/><div style="margin:-8px 0;background:#fff;text-align:center;width:234px"> <a style="font-size:60%;text-decoration:none;color:#555" href="http://blogger-templates-designs.blogspot.com/2008/10/sudoku-widgets-generates-random-puzzles.html"></a></div>

إقرأ المزيد... Résuméabuiyad

إضافه نص متعدد الألوان ألوان الطيف للمدونه بلوجر Add Rainbow Text Effect For Blogger

بسم الله والحمد لله
موضوع اليوم عن كيفية إضافه نص متعدد الألوان Rainbow Light Effect for Blogger أو كما نقول بألوان الطيف يعطى مظهراً جيداً و ملفت للنظر فمثلاً , إذا أردت كتابة رساله ترحيبيه للزوار تستطيع إستخدامها بكل سهوله بإذن الله
شاهد المثال بالأسفل

كما كنت تكلمت سابقاً عن نص مضئ نيون Neon Light Effect
والأن إليك الطريقه .. على بركة الله نبدأ
- سجل دخولك فى مدونتك بلوجر
- إذهب إلى التصميم -- >> عناصر الصفحه -- >> إضافة أداه -->> HTML JAVASCRIBT
* ثم ضع الكود التالى بها مع تغيير Welcome To Hend Moments بما تريد

<b>

<script>

/*
RAINBOW TEXT Script by Matt Hedgecoe (c) 2002
Featured on JavaScript Kit
For this script, visit http://www.javascriptkit.com
*/

// ********** MAKE YOUR CHANGES HERE

var text="Welcome To Hend Moments" // YOUR TEXT
var speed=80 // SPEED OF FADE

// ********** LEAVE THE NEXT BIT ALONE!


if (document.all||document.getElementById){
document.write('<span id="highlight">' + text + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script>
</b>

<p align="center"></p>

شارك فى التعليق ولو بكلمة شكراً

إقرأ المزيد... Résuméabuiyad