0 احدث اضفات بلوجر لعام 2013 لورد برس و بلوجر جديـــد من مدونة بكرة احلى

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



اقدم لكم افضل اضافات بلوجر والورد بريس لعام 2013

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


هذا الشرح حصرى من مدونة بكرة احلى


.................................................. .................................................. ............................................
ملاحضة تعبت كثيرا في انشاء هذا الموضوع ارجو عند النقل ذكر المصدر وعدم تغيير
روابط المعاينة

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


طريقة ادراج الاضافات هي
بلوجر :: قم بالذهاب الى لوحة التحكم , من ثم التخطيط من ثم ادراج اضافة html والصق الكود

وورد بريس او اي موقع اخر

فقط قم بالصاق الكود حيث تريد ان تضهر الاضافة
.................................................. .................................................. .......................

1- اضافة الايقونات الاجتماعية بتقنية CSS

[IMG]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibYR81xU_pU2CvKfWatH70qLFc2JA2bahE5PZQX8BQYZivoysivroRXEkSPEilo7OwnMOc08GBZ8tMqSNlRbnS8s77V50VCehM2VM7jKBzX2VP_UGGkx2MF-SVpc847EUq5J65lTrCBKQ/s1600/1.PNG
[/IMG]

معاينة مباشرة هـــــــــــــــــــــنــــــــــــــــــــا


الكود::

رمز Code:

<style type="text/css" >

#followq {clear: both;width: 300px;height: 40px;margin: 10px auto;}

#followq ul { margin: 0px;padding: 0px;}

tyle-type: none;display: inline-block;}
.ikonz .ikonz-tooltip {display: block;pa

#followq ul li {position: relative;list-

sdding: 5px 10px;position: absolute;bottom: 100%;

nd-color: #141414;font: bold 12px "Trebuchet MS",Arial,Sans-Serif;
color: white;text-align: center;-webkit-box-shado

left: 0px;z-index: 77;margin-bottom: 40px;backgro

uw: 0px 1px 2px rgba(0, 0, 0, 0.4);

-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.4);box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);

 0.26s ease-out;
-moz-transition: all 0.26s ease-ou

-webkit-border-radius: 5px;-moz-border-radius: 5px;
border-radius: 5px;opacity: 0;

sition: al
visibility: hidden;-webkit-tra
n

lt;

-ms-transition: all 0.26s ease-out;
-o-transition: all 0.26s ease-out;


transition: all 0.26s ease-out;}

lor: #141414;position: absolute;top: 100%;left: 13px;}
.ikonz:hover .ikonz-tooltip {visibility:visible;opacity:1;margin-bottom:10px;z-index:99999;}
#followq .ikon

.ikonz .ikonz-tooltip:before {content: "";width: 0px;height: 0px;border: 7px solid transparent;border-top-c

oz {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAtKLuc2gqsLMn1YUiCVgh0HkQAkG8lyncKlWVdGFe5s0JVjQqu6PoC7S1DEb8jEUp-NyrdcYVECX7EhyphenhyphenA9NQ_rqG0zDNpt1SgycmtsRwcIpK1ayX8ndXvY6WMaq5kPRvAtNEufuJmwLk/s1600/social3d.png') 0 0 no-repeat;display: block;
color: #141414;float: none;height: 39px;width: 39px;line-height: 39px;position: relative;z-index: 5;}

.stumble {background-position: -200px 
#followq .ikonz:active {bottom: -2px;}
#followq .fb {background-position: 0px 0px;}
#followq .twitter {background-position: -40px 0px;}
#followq .google {background-position: -80px 0px;}
#followq .delcis {background-position: -120px 0px;}
#followq
 0px;}
#followq .mail {background-position: -280px 0px;}
#followq .rss {background-position: -360px 0px;}
</style>
<div id="followq">
<ul>

Link Facebook" class="ikonz fb"><span class="ikonz-tooltip">Facebook</span></a></li>
<li><a href=
"

li><a href="Link Twitter" class="ikonz twitter"><span class="ikonz-tooltip">Twitter</span></a></li>
<

li><a href="Link Google+" class="ikonz google"><span class="ikonz-tooltip">Google+</span></a></li>
<

li><a href="Link Delicious " class="ikonz delcis"><span class="ikonz-tooltip">Delicious</span></a></li>
<

li><a href="Link StumbleUpon" class="ikonz stumble"><span class="ikonz-tooltip">StumbleUpon</span></a></li>
<

li><a href="XXXXXXXXXX" class="ikonz mail"><span class="ikonz-tooltip">Mail</span></a></li>
<

li><a href="Link RSS " class="ikonz rss"><span class="ikonz-tooltip">RSS</span></a></li>
<
</ul>


</div>

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


.................................................. .................................................. ....................

2- ادراج شبكات التواصل الاجتماعي بطريقة رائعة

معاينة مباشرة هـــــــــــــــــــــنــــــــــــــــــــا

او هــــــــــــنـــــــــــــــــــــــا





الكود::

رمز Code:

<style type="text/css">

#buttonbg {width: 260px;margin: 10px 20px;padding: 0;}

#buttonbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none;  }

#buttonbg .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGQQm6mloBPWZVLLIOn3TmfneKDYUGuC4J0UVqWLSuoYWHmi98DPHYc-2xs8SnWcdMhG1augmkRLjnqxhK_iis7TfWoeeaCw_27kPkEQ8jsdzT1Bjuh4kdPiE4yG2lBh5BFHInX061mH0/s1600/blsocial12.png') 0 0 no-repeat;

background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;
color: #141414;float: none;height: 48px;line-height: 48px;

;
-webkit-transition: width .25s ease-in-out, background-color .25s 
margin: 5px 0;position: relative;text-align: left;text-indent: 90px;
text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 
5ease-in-out;
-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;

;
-o-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
box-shadow: rgba(0, 0, 0,
transition: width .25s ease-in-out, background-color .25s ease-in-out;
-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-moz-box-shadow: rgba(0,0,0, .28) 0 2px 3p
x .28) 0 2px 3px;
text-decoration: none;}
#buttonbg span:hover {visibility: hidden;}
#buttonbg span {display: block;top: 15px;position: absolute;left: 90px;}
#buttonbg .icon {color: #fafafa;overflow: hidden;}

color: rgba(167, 0, 0, .42); background-position: 0 -478px;}
#buttonbg .pint {backgroun
#buttonbg .fb {background-color: rgba(45,118,185, .42); background-position: 0 -382px;}
#buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;}
#buttonbg .google {background
-d-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}
#buttonbg .linked {background-color: rgba(0, 87, 114, .42);  background-position: 0 -574px;}
#buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;}

kground-color: #d91e76; }
#buttonbg li:hover .fb {background-color: #2d76b9;background-po
#buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;}
#buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;}
#buttonbg li:hover .icon {width: 250px; }
#buttonbg li:hover .icon {ba
csition: 0 2px;}
#buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; }
#buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#buttonbg li:hover .pint {background-color: #C00;background-position: 0 -142px; }

hover .rss {background-color: #EC5601;background-position: 0 -334px; }
#buttonbg .ico
#buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;}
#buttonbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;}
#buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; }
#buttonbg li
:n:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>

<ul id="buttonbg">

Link Facebook Anda" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span></li>
<li ><a href=
"

li ><a href="Link Twitter Anda" class="icon twit" >Follow us on Twitter</a><span>Follow us on Twitter</span></li>
<

li ><a href="Link Google+ Anda" class="icon google" >Follow us on Google+</a><span>Follow us on Google+</span></li>
<

li ><a href="Link Pinterest Anda" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span></li>
<

li ><a href="Link Linkedin Anda" class="icon linked" >Follow us on LinkedIn</a><span>Follow us on LinkedIn</span></li>
<

li ><a href="Link Deviant Art Anda" class="icon deviant" >Follow us on DeviantArt</a><span>Follow us on DeviantArt</span></li>
<

li ><a href="Link Youtube Anda" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span></li>
<

li ><a href="Link RSS/Feed Anda" class="icon rss" >Subscribe via RSS</a><span>Subscribe via RSS</span></li>
<

/ul>
<

* يمكنك تغير الجمل حسب ماتريد مثلا
Like us on Facebook تخليها تابعنا على فيس بوك

لادراج الاضافة فقط قم بتغيير روابط موقعك في الشبكات الاجتماعية بدلا من الكلمات الملونة

.................................................. .................................................. ..........................
3- اضافات تويتر رائعة جدا Twitter Friends Widget ver 2.0 jQuery Plugin) 

معاينة مباشرة هـــــــــــــــــــــنــــــــــــــــــــا



الكود

رمز Code:

<!-- Include javascript and CSS once -->

<link href="http://twitter-friends-widget.googlecode.com/svn/v2/light.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-2.0.min.js" type="text/javascript"></script>




<!-- Required HTML -->

nds" data-options="{ username:'RamzyatCom' }"></div>

<div class="twitter-fri

e

فقط قم بتغيير RamzyatCom الى معرفك في تويتر

.................................................. .................................................. .....

4- اضافة كرة المشاركة المتممدده


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

معاينة مباشرة هـــــــــــــــــــــنــــــــــــــــــــا
لاحض اسفل يسار الشاشة
الكود:::

اذهب الى تعديل القالب 

من ثم

ابحث عن 

رمز Code:

</head>

والصق فوقه

رمز Code:

<script type="text/javascript" src="http://w.sharethis.com/gallery/shareegg/shareegg.js"></script>

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>

<script type="text/javascript">stLight.options({publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false});</script>

<link media="screen" type="text/css" rel="stylesheet" href="http://w.sharethis.com/gallery/shareegg/shareegg.css"></link>

ابحث عن 

رمز Code:

</body>

والص فوقه

رمز Code:

<div style='position: fixed; bottom: 2%; left: 2%;'><div id='shareThisOrnament' class='shareEgg'></div>

<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisOrnament', ['facebook','twitter','googleplus','pinterest','stumbleupon','linkedin','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'holiday'});</script>

</div>

ومبروك عليك

.................................................. .................................................. .............................

الستايل الثاني

ابحث عن

رمز Code:

</head>

الصق فوقه

رمز Code:

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

ابحث عن

رمز Code:

</body>

والص فوقه

رمز Code:

<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script>

.................................................. .....

انتهى الشرح ... 
ارجو عند النقل ذكر المصدر وشكرا انتضرونا في الجزئ الثاني قريبا 

تقبلو تحياتي

0 حصريا تقدم لكم مدونة بكرة احلى كيف صنع صورة كرتونية خاصة بـــك

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

تجد هنا شرح مفصل مع الصور لكيفية عمل صورة كرتونية تشبه شخصيتك الحقيقية

كل ما عليك هو اتباع الخطوات التالية

( 1 )

اختر الجنس  ... كما في الصورة التالية

( 2 )

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

( 3 )

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

( 4 )

عندما تعتقد انك وصلت الى الشكل النهائية كل ما عليك هو ان تضغط على

FINISH

كما في الصورة التالية

( 5 )

سوف تصل الى الخطوة التالية ... وعند التأكد من انك لا تريد التراجع او التعديل اضغط على

OK

( 6 )

الان كل ما عليك هو ان تقوم بتعبئة البيانات المطلوبة
باللغة الانجليزية
كما هو موضح في الصورة التالية

هل انت جاهز الان  لعمل صورتك الرمزية

انت جاهز الان للمشاركة و اضافة الصورة في اى مكان على الانترنت 

بعد ذلك ابدا صنع صورتك الأن :

اختر نوع الجنس الان للبدء في عمل صورتك

0 صور جميلة لتزين بة مدونتك من مدونة بكرة احلى جديـــــد

جبت لكم مواقع جميـــلة 

تزين بة مدونتك 

ويارب تنال اعجابكم 

اذا اعجبك الموضوع لاتبخل علينا بتعليق او لايك فيس بوك 

مع تحياتى 

0 ضافه تعطى مؤشر الماوس الخاص بك تأثير فقاعات

 

بسم الله الرحمن الرحيم

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

للتركيب الاداه قم بالخطوات التالية:

من لوحة التحكم الخاص بك، انتقل إلى التصميم.

انتقل إلى تخطيط، ثم انقر على إضافة أداة.

انتقل لأسفل واختر HTML / جافا سكريبت.

نسخ / لصق رمز أدناه.

 <script type="text/javascript">

var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, border-right, border-bottom, border-left dan background gelembung

var bubbles=100; // jumlah maksmal gelembung

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var bubb=new Array();

var bubbx=new Array();

var bubby=new Array();

var bubbs=new Array();

window.onload=function() { if (document.getElementById) {

var rats, div;

for (var i=0; i<bubbles; i++) {

rats=createDiv("3px", "3px");

rats.style.visibility="hidden";

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="1px";

div.left="0px";

div.bottom="1px";

div.right="0px";

div.borderLeft="1px solid "+colours[3];

div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="0px";

div.left="1px";

div.right="1px";

div.bottom="0px"

div.borderTop="1px solid "+colours[0];

div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.left="1px";

div.right="1px";

div.bottom="1px";

div.top="1px";

div.backgroundColor=colours[4];

div.opacity=0.5;

if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);

bubb[i]=rats.style;

}

set_scroll();

set_width();

bubble();

}}

function bubble() { 

var c;

if (x!=ox || y!=oy){

ox=x;

oy=y;

for (c=0; c<bubbles; c++) if (!bubby[c]) {

bubb[c].left=(bubbx[c]=x)+"px";

bubb[c].top=(bubby[c]=y)+"px";

bubb[c].width="3px";

bubb[c].height="3px"

bubb[c].visibility="visible";

bubbs[c]=3;

break;

}

}

for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c); 

setTimeout("bubble()", 40);

}

function update_bubb(i) { 

if (bubby[i]) {

bubby[i]-=bubbs[i]/2+i%2;

bubbx[i]+=(i%5-2)/5;

if (bubby[i]>sdown && bubbx[i]>0) {

if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

bubb[i].width=bubbs[i]+"px";

bubb[i].height=bubbs[i]+"px";

}

bubb[i].top=bubby[i]+"px";

bubb[i].left=bubbx[i]+"px";

}

else {

bubb[i].visibility="hidden";

bubby[i]=0;

return;

}

}

}

document.onmousemove=mouse;

function mouse(e) { 

set_scroll();

y=(e)?e.pageY:event.y+sleft;

x=(e)?e.pageX:event.x+sdown;

}

window.onresize=set_width; 

function set_width() { 

if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (typeof(self.innerHeight)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

else {

swide=800;

shigh=600;

}

}

window.onscroll=set_scroll; 

function set_scroll() { 

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

function createDiv(height, width) { 

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height;

div.style.width=width;

div.style.overflow="hidden";

return (div);

}

</script> 

0 ساعة رقمية تتغير أوتوماتيك مع النهار والليل للمواقع والمدونات

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

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

فعند إضافة الساعة إلى موقعك يظهر التوقيت الرقمى على حسب جهاز المستخدم فإذا كان التوقيت صباحًا (am) تظهر الساعة الديجيتال فى مشهد الشمس أما إذا كان التوقيت مساءًا (pm) يظهر الوقت فى مشهد القمر بطريقة أوتوماتيكية.

ويمكن تجربة ذلك بنفسك بتغيير الساعة على حاسوبك ثم عمل Refresh للموضوع.

من مميزات هذه الإضافة أيضًا ظهور يوم الأسبوع و التاريخ.

معــاينة الإضافة

كود html

 إنسخ الكود التالى بموقعك

<center>
<embed height="200" src="https://dl.dropbox.com/u/80212138/%D9%85%D8%AF%D9%88%D9%86%D8%A9%20%D9%83%D9%86%20%D8%AF%D8%A7%D8%B9%D9%8A%D8%A7%20%D9%84%D9%84%D8%AE%D9%8A%D8%B1/demo/Day%26night%20clock.swf" type="application/x-shockwave-flash" width="300" wmode="transparent"></embed>
<center>
<center>
<a href="http://conda3ianllkhir.blogspot.com/" target="_blank"><img alt="Blogger widget" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDlX7eQFWUrWaMxok6sWNeQxJqVUz8A0PS6bwqMk9Qd62ZkbDksQCOmf1R6sUqw-mH9lyw0RdYiBkbCtmK-TMr1igb_z8GuP58ypklTc3Ut3WIf6ZA0CB1Zmeitl1P8yoFjNOMXt8GoqYl/s89/%25D8%25A8%25D8%25A7%25D8%25AF%25D8%25AC%2520%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9%2520%25D9%2584%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1.png" title="Blogger widget" /></a></center>
</center>
</center>

select  Calenders 

modern calener

Hijri calender

Flag clocks