طريقة إضافة أسماك متحركة في مدونات بلوجر

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

هذه هي المعاينة:-

الشرح:-

قم بالتوجه إلي التخطيط

 ثم اضف أداة جديدة

ثم اضغط علي المزيد من الأدوات

وابحث عن كلمة "Fish"

واضغط عليها

بعد الضغط عليها ستظهر عليها هذه القائمة 

يمكنك تحديد ما تريد واضغط  "حفظ"

اقرأ المزيد..

صندوق الأشتراك بالبريد الإلكتروني

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

نتجه إلي الطريقة

أولاً توجه إلي الرابط التالي

https://www.blogger.com

ثانياً أذهب إلي التخطيط

ثالثاً اضف أداة جديدة

ثم اختر أداة

“HTML/Javascript”

ثم ادخل الكود التالي:-

مع تغير رابط المدونة برابط مدونتك

<!--- Thesis Email Subscribe Widget by th3skill.blogspot.com ---> <style type="text/css">#sidebar-subscribe-box { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDiHb8-AbXSqRUzM7ZQULtN-fB8rNk-CZxnooUjqE2L_QDhfTjblB5GGR793fF-7V0rTy1QgYRMbCRXoPRhzd5tMBRVOb-xXkyLrz4h7u4iejLaojt92s2hyEeXsglYs2faUBTXRbUsk_5/s1600/colored-strip.png) repeat scroll 0 0 transparent; border: 1px solid #aaa; border-radius: 3px; padding: 3px 0; } .sidebar-subscribe-box-wrapper { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9GcRs-FcPgo5XXAobMERiiwHBjMQd6yUre2M0i8YJOcobK1D5Si4PULroCjLzTLND4bLbx3cjMorq5eft3JB1VL09TJpsvrqs_YfyFTPpDrrCBj0txWIq71xBqEmhIy376n6XfighBDgH/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7; color: #111; font-size: 14px; line-height: 20px; padding: 1px 20px 10px; text-align: center; text-transform: uppercase; } .sidebar-subscribe-box-form { clear: both; display: block; margin: 10px 0; } form.sidebar-subscribe-box-form { clear: both; display: block; margin: 10px 0 0; width: auto; } .sidebar-subscribe-box-email-field { -moz-border-radius: 4px; -webkit-border-radius: 4px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHZdR8mfKidVyzOpg48GQlmfzGAr-dSVN0W4sWQ1wek_dKiJv2oak-WEwuUqwwJFads_9A5N1VggYkoKhyphenhyphenbXr7JoU0e1DYsClvCFv08JVbd0qZV209V65Y0NFvfipOApLuWynQXAoP6yh-/s1600/sprites.png) no-repeat 0 -27px; border: 1px solid #ccc; border-radius: 4px; color: #444; margin: 0 0 15px; padding: 10px 40px; width: 68%; } .sidebar-subscribe-box-email-button { background: #09f; border: 1px solid #007fff; box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent; color: #fff; cursor: pointer; font-family: Helvetica; font-weight: 700; font-size: 20px; padding: 5px; text-shadow: 1px 1px 0 rgba(0,0,0,.4); text-transform: uppercase; width: 100%; } .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus { background: #1ca4ff; } .sidebar-subscribe-box-email-button:active { -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset; box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset; outline: 0; } iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table { width: 100%; } embed { border-radius: 3px; -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2); background: #FFF; border: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0,0,0,0.2); margin: 0; padding: 4px 4px 4px; } #footer-section { background: #f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8cMaaNlSfX1OM6ViGdLvCUpjTx_-kXEPhW2LaAuoNC-lC6QPDkz2f9HvkulCTtv5gpw62HBxFB2sCBxdOygX9kMUguIGp-35YcYxq7DQrAghWRlXCoNe26iQ2mkYAqk6tY65aZzMDj-M/s0/bg-pattern.png) repeat top left; border-top: 1px solid #aaa; box-shadow: inset 0 4px 6px -3px #aaa; font-size: 14px; height: 100px; margin: 10px -30px 5px; padding: 0 30px; text-align: center; width: 100%; }</style> <div id="sidebar-subscribe-box"> <div class="sidebar-subscribe-box-wrapper"> <div class="sidebar-subscribe-box-form"> <form action="http://feedburner.google.com/fb/a/mailverify?uri=th3skill" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=th3skill', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="uri" value="th3skill" type="hidden" /><input name="loc" value="en_US" type="hidden" /> <input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="أدخل بريدك الإلكتروني..." /> <input class="sidebar-subscribe-box-email-button" title="" value="اشترك الآن" type="submit" /></form> </div> المرجو تأكيد البريد الإلكتروني بعد الإشتراك</div> </div> <!--- Thesis Email Subscribe Widget by th3skill.blogspot.com --->

ثم اضغط حفظ

اقرأ المزيد..

طريقة إضافة قائمة جانبية بتقنية CSS

من المهم الإهتمام بشكل الموقع وتسهيل العديد من الخدمات للمستخدم لذلك هذه قائمة جانبية بتقنية Css نبدأ باسم الله 

أولاً توجه إلي الرابط التالي

https://www.blogger.com

ثم ادخل علي قالب

ثم اضغط علي تحرير HTML

 قم بالبحث عن 

]]></b:skin>

 

ثم ادخل الكود التالي فوقه مباشرة كما في الصورة

الكود:-

<#navigationMenu span{ /* Container properties */ width:0; left:38px; padding:0; position:absolute; overflow:hidden; /* Text properties */ font-family:'Myriad Pro',Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:39px; /* CSS3 Transition: */ -webkit-transition: 0.25s; /* Future proofing (these do not work yet): */ -moz-transition: 0.25s; transition: 0.25s; } #navigationMenu a{ /* The background sprite: */ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnslZCScQujYMAjB75RrSmdKewMQt5V08ZgwdYiMMa0WwrKUwgsnSynGR0oBqGugxxOOrP7x5jMuG3kbvb75WG_x7CtNXMYcTx_aOoig1J2wIZRzlEdkLHkI8WCrJMQAuGvJjFSl1rWZk/s1600/navigation.jpg') no-repeat; height:39px; width:38px; display:block; position:relative; } /* General hover styles */ #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; } #navigationMenu a:hover{ text-decoration:none; /* CSS outer glow with the box-shadow property */ -moz-box-shadow:0 0 5px #9ddff5; -webkit-box-shadow:0 0 5px #9ddff5; box-shadow:0 0 5px #9ddff5; } /* Green Button */ #navigationMenu .home { background-position:0 0;} #navigationMenu .home:hover { background-position:0 -39px;} #navigationMenu .home span{ background-color:#7da315; color:#3d4f0c; text-shadow:1px 1px 0 #99bf31; } /* Blue Button */ #navigationMenu .about { background-position:-38px 0;} #navigationMenu .about:hover { background-position:-38px -39px;} #navigationMenu .about span{ background-color:#1e8bb4; color:#223a44; text-shadow:1px 1px 0 #44a8d0; } /* Orange Button */ #navigationMenu .services { background-position:-76px 0;} #navigationMenu .services:hover { background-position:-76px -39px;} #navigationMenu .services span{ background-color:#c86c1f; color:#5a3517; text-shadow:1px 1px 0 #d28344; } /* Yellow Button */ #navigationMenu .portfolio { background-position:-114px 0;} #navigationMenu .portfolio:hover{ background-position:-114px -39px;} #navigationMenu .portfolio span{ background-color:#d0a525; color:#604e18; text-shadow:1px 1px 0 #d8b54b; } /* Purple Button */ #navigationMenu .contact { background-position:-152px 0;} #navigationMenu .contact:hover { background-position:-152px -39px;} #navigationMenu .contact span{ background-color:#af1e83; color:#460f35; text-shadow:1px 1px 0 #d244a6; }</a>

ثم توجه بعدها إلي التخطيط

ثالثاً اضف أداة جديدة

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

ثم اختر أداة

“HTML/Javascript”

ثم ادخل الكود التالي:-

<div style='position: fixed; top: 40%; left: 0%;'/> <ul id="navigationMenu"> <li> <a class="Home" href="YOUR URL"> <span>الرئيسية</span> </a> </li> <li> <a class="about" href="YOUR URL"> <span>عن المدون</span> </a> </li> <li> <a class="services"YOUR URL"> <span>خدمات</span> </a> </li> <li> <a class="portfolio" href="YOUR URL"> <span>تابعنا علي الفيسبوك</span> </a> </li> <li> <a class="contact" href="YOUR URL"> <span>إتصل بنا</span></a></li> </div> <a href="http://th3skill.blogspot.com/2013/05/Add-Sidebar-CSS-technology.html" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

مع استبدال YOUR URL برابط الصفحة المراد إدخالها

ثم اضغط حفظ

اقرأ المزيد..

إضافة إنسان آلي متجول في موقعك

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

الشرح:-

أولاً توجه إلي الرابط التالي

https://www.blogger.com

ثانياً أذهب إلي التخطيط

ثالثاً اضف أداة جديدة

ثم اختر أداة

“HTML/Javascript”

ثم ادخل الكود التالي:-

<div style="position: fixed;
bottom: 5px;
width: 100%;">
<marquee direction='left' id='suster-ngesot-gue-galau-luar' scrollamount='7'>
<img id='gbr-suster-ngesot-gue-galau' src='http://im27.gulfup.com/2012-09-14/1347653484401.gif'/></marquee>
</div>

مع وضع روابطك

ثم اضغط حفظ

اقرأ المزيد..