أعمالنا
الدعم الفني
إتصل بنـا
أقوى 4 حواسيب مكتبية يمكن إقتنائها
إضافة اداة " تصفح المدونة بشكل افضل " بتقنية الـ CSS3 لمدونة بلوجر
السلام عليكم ورحمة الله وبركاته
اقدم لكم اليوم اضافة تصفح المدونة بدون مشاكل
بتقنية css3 لتضيف الى مدونتك لمسة فنية
اضافة جميلة ولا غنى عنها لاى مدون
صورة من الاضافة
طريقة التركيب
اذهب الى التخطيط--اضافة اداة--html/javascript
اضافة هذا الكود
<center><div class="hovergallery"><a href="https://www.google.com/intl/ar/chrome/browser/" rel="nofollow"><img class="logo" src="http://im37.gulfup.com/YLcCM.png"></a><a href="https://www.mozilla.org/en-US/firefox/new/?utm_source=firefox-com&utm_medium=referral" rel="nofollow"><img class="logo" src="http://im37.gulfup.com/pKuJG.png"></a><a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" rel="nofollow" style="margin-left: 0px;"><img class="logo" src="http://im37.gulfup.com/Mo1Lg.png"></a></div><style type="text/css">/*Credits: Dynamic Drive CSS Library */.hovergallery img{-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/-moz-transform:scale(0.8); /*Mozilla scale version*/-o-transform:scale(0.8); /*Opera scale version*/-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/-moz-transition-duration: 0.5s; /*Mozilla duration version*/-o-transition-duration: 0.5s; /*Opera duration version*/opacity: 0.7; /*initial opacity of images*/margin: 0 10px 5px 0; /*margin between images*/}.hovergallery img:hover{-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/-moz-transform:scale(1.1); /*Mozilla scale version*/-o-transform:scale(1.1); /*Opera scale version*/box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/opacity: 1;} </style><div class="hovergallery"> <a href='http://arabetutorial.blogspot.com' style='display: none;' rel='dofollow' >المدونة التعليمية للكمبيوترe.com/safari/" rel="nofollow"><img class="logo" src="http://im37.gulfup.com/SxtCs.png"></a><a href="http://www.opera.com/ar/computer/windows" rel="nofollow" style="margin-left: 0px;"><img class="logo" src="http://im37.gulfup.com/VDQ21.png"></a><a href="http://rockmelt.com/download" rel="nofollow"><img class="logo" src="http://im37.gulfup.com/xrJcf.png"></a></div><style type="text/css"></style></center>
الى هنا نكون قد انتهينا اتمنى ان تعجبكم الاضافة
مع تحياتى اسلام محمد
أيقونات المواقع الاجتماعية بخمسة أشكال مختلفة وخصائص CSS3
لإضافة احد هته الأيقونات تابع الشرح التالي :
1- الذهاب إلى لوحة مدون .
2- انقر على تخطيط > إضافة أداة إختر اضافة اداة HTML أو جافا سكريبت .قم بنسخ ولصق كود الأداة المراد إضافتها وأنقر على حفظ لتجد ان الاداة قد تمت اضافتها.
الأداة رقم الأولى :
<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-RSS-Email-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>
الأداة الثانية :
<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Email-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S2-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>
الأداة الثالثة :
<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Subscribe on Youtube" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Youtube-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>
الأداة الرابعة :
<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Email-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S4-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>
الأداة الخامسة :
<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Subscribe on Youtube" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Youtube-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S5-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>
وأخيرا كورس تصميم قالب بلوجر من الصفر دورة كاملة مصورة بالفيديو + هدايا
تم وبحمد الله عمل نسخة كاملة . كما أنها بثمن مناسب جدا
من مميزات هاته النسخة كالتالي :
العمل على التصميم والتكويد والبرمجة .
العمل بقالب احترافي وأنيف ةاعي ما اقول ويمكنك معاينته من هنا.
العمل على 4 نماذح.
شرح الأكواد المهمة و تعمق أكثر.
تحتوي على هدايا كخطي الويب الأجمل على بلوجر.
وجود قالب احترافي xml.
ملحقات مع الدرورس.
عدد الفيديوهات 20.
الجودة Full HD 1080p.
الحجم الكامل للنسخة 700mb.
وصف ومقتطفات الكورس :
محتويات الكورس 20 درس إبتداءا من تجهيز الملحقات والبرامح المستعملة كالفوتوشوب مثلا، اول شيء سنقوم بعمل مدونة وتوفير التدوينات وتسميات إلى غير ذلك.
ثاني شيء سنقوم بحذف جميع اكواد القالب الافتراضي لتصبح صفحة التصميم على بلوجر خالية تماما وسنبدأ من الصفر، ثالث شيء سنلجأ إلى وضع بعض الأكواد التي عملتها بالملحقات ككود الترميز و و و... لتسهيل العمل عليكم ولقد قمت بعملها في ملف مستقل . رابعا سنبدأ بالتصميم والتكويد والبرمجة المباشرة على المنصة بدأ بــ :
التوزيع الكلي للقالب.
تخصيص الهيدر ( النافبار العلوية ، الشعار الأيمن ، الإعلان الأيسر و النافبار السفلية ).
العمل على القائمة الجانبية اليسري ( السايدبار ).
تخصيص احترافي لشكل التدوينات بالرئيسية مع اختصارها بإقرأ المزيد.
تخصيص المشاركات الشائعة بتصميم راقي.
تخصيص التسميات كشكل الميترو.
المرور إلى الفوتر وعمل استايل خاص به من ناحية التسميات والمشاركات الشائعة.
العودة إلى التدوينات لكن عبر تخصيصها من الداخل عبر تكويد وبرمجة نبذة عن الكاتب + تصميم خاص للتسميات + تصميم جميل وراقي للمواضيع ذات الصلة.
أخيرا تصميم راقي للتعليقات بشكل أكثر تناسبا مع القالب.
وفي الآخير أرجوا ان ينال إعجابكم وأن يزيد هذا الوصف حماسكم للتعلم وتذكر كم ستربح بعد هذا الكورس.
مقتطفات وصور للكورس :
القالب الذي تم التطبيق عليه في الكورس والذي تم وضعه هدية مجانية أيضا للمعاينة من هنا
الآن هاته الصور خير دليل على الجدية والكورس متعوب فيه والله والثمن عملته قليل لأن في الغالب من بجد صعوبة في توفير الثمن وأقدر ظرورف كل مسلم عربي والحمد لله اليوم أشعر بأنني عملت شيء جميل وحصري ويعرض لأول مرة عند العرب والأجانب الله أعلم ولانتسوا كلمة شكر حتى ولو ان الكورس بثمن لكن فقط تقديرا لأتعابي وهاته المبادرة الطيبة والسلام عليكم ورحمة الله تعالى وبركاته
الموقع الرئيسي للكورس لشراء النسخة ب40 دولار
هام : التبادل الإعلاني مفتوح سارع بحجز مساحتك
السلام عليكم ورحمة الله تعالى وبركاته
كيفكم إخوتي الكرام
احسست أنني تأخرت كثيرا عن إلقاء الدروس المتنوعة والمفيدة خاصة في مجال التصميم
وهذا أول موضوع أعود به حول بدأ موسم جديد للنهض بالمدونة
أول شيء وهو أنني أردت تغيير الإعلانات للمدونات التي تم التبدال معها مسبقا
وذلك لفتح المجال للآخرين بناءا على طلبات عديدة توصلت بها
الآن بإمكانك اخي الكريم التبدال الإعلاني معنا بناءا على الشروط التالية ويجب العمل بها واحترامها :
- ان تكون مدونتك لا تلمس الديانات السماوية
- لن نقبل التبادل مع مدونات موسيقى وأفلام تحتوي على " "
- تقدم لنا البنر الخاص بالإضافة إلى إسم ووصف ورابط مدونتك
- سيتم وضع إعلانك لدينا بعد مراجعة مدونتك
- أن يكون موقعك ذو ترتيب أليكسا أقل من مليون فقط
- نقبل المدونات والمنتديات والمواقع التي تهتم بنفس مجالنا " التعليم التقني, التقنية والتكنولوجيا"
في حال توفرت هاته الشروط
سيتم إمدادك بالبنر الخاص بنا ورابط موقعنا مباشرة
للتواصل عبر حساب المدونة من هنا
arabetutorial@gmail.com
درس تصميم أزرار ويب احترافية خاصة بك بالـ css
السلام عليكم ورحمة الله تعالى وبركاته
كيفكم إخوتي الكرام بخير إن شاء الله
لقد احببت أن أقدم لكم دروس جميلة ومفيدة بالصوت والصورة من الآن فصاعدا
لكي يكون الفهم أسهل وأفضل بإذن الله
درس تصميم أزرار ويب احترافية خاصة بك بالـ css
درسنا اليوم هو درس بسيط لكن جميل وسيفيد البعض
وخاصة لمن يريدون تغيير رابط التحميل عبر زر أجمل كما عملت انا
أرجوا ان اتوفق في الشرح وينال إعجابكم وترقبوا المزيد ‘ن شاء الله حول تصميم إضافات بلوجر
لمن لايعرف كيفية إضافة مثل هاته الاعمال على بلوجر فل يخبرني وانا لن أبخل بالشرح
لتحميل مثال للمعاينة
في انتظار تعليقاتكم أحبائي الكرام
تحياتي الخالصة
والسلام عليكم ورحمة الله عالى وبركاته
الاشتراك في:
الرسائل (Atom)
