كيفية إضافة تأثير على الصور في مدونتك في بلوجر
تأثير على الصور في مدونتك في بلوجر
تأثير على صور مدونتك جميل ورائع, ويجعل الصورة لها إطار جميل, وعندما يقف مؤشر الماوس عليها تدور دوران خفيف.كيفية إضافة تأثير على الصور في مدونتك في بلوجر
1 - أدخل إلى لوحة التحكم -> القالب -> تحرير HTML.2 - ضع هذا الكود فوق .
<style type = "text/css">
img
{
padding:2px !important;
border:1px solid #eeeeee !important;
transition:all 0.2s ease-in-out !important;
-o-transition:all 0.2s ease-in-out !important;
-moz-transition:all 0.2s ease-in-out !important;
-webkit-transition:all 0.2s ease-in-out !important;
}
img:hover
{
transform:rotate(-2deg) !important;
-o-transform:rotate(-2deg) !important;
-ms-transform:rotate(-2deg) !important;
-moz-transform:rotate(-2deg) !important;
-webkit-transform:rotate(-2deg) !important;
}
</style>
3 - أضغط على حفظ.
كيفية تخصيص مؤشر الماوس
تخصيص مؤشر الماوس
إذا كان عندك موقع على الويب, فأكيد تحاول تخصيص العناصر الإفتراضية التي في المتصفح مثل السكرول بار ومؤشر الماوس, ليميز موقعك عن باقي مواقع الويب.كيفية تخصيص مؤشر الماوس
1 - ضع هذا الكود في ملف الـCSS الخاص بموقعك.
*
{
cursor:url(IMG-URL),default !important;
}
2 - قم بتغيير :- IMG-URL -> رابط صورة مؤشر الماوس.
كيفية استخدام أيقونات الخطوط
استخدام أيقونات الخطوط
أيقونات الخطوط, هي عبارة عن خط يتم تركيبه على موقع الويب, لكن بدل الحروف والأرقام يتم كتابة أيقونات, وأيقونات الخطوط هي بديل للصور, وهذه هي طريقة استخدام أيقونات الخطوط, سوف نستخدم أيقونات خط Font Awesome, لكن يمكنك استخدام أي خط أيقونات آخر.كيفية استخدام أيقونات الخطوط
1 - ضع هذا الكود فوق </head>.<link href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel = "stylesheet"/>2 - ضع أي كود أيقونة من هذه الأيقونات في أي مكان تريده, مثال :
<i class="fa fa-file-text-o"></i> هذا النص هو مثال لنص يمكن أن يستبدل- وسيظهر لك هكذا :
هذا النص هو مثال لنص يمكن أن يستبدل
ما هي أيقونات الخطوط ؟
ما هي أيقونات الخطوط ؟
أيقونات الخطوط, هي عبارة عن خط يتم تركيبه على موقع الويب, لكن بدل الحروف والأرقام يتم كتابة أيقونات, وأيقونات الخطوط هي بديل للصور.مميزات أيقونات الخطوط
1 - سهلة الاستخدام.2 - لا تأخذ مساحة من الإستضافة.
3 - عالية الجودة مهما تم تكبيرها أو تصغيرها.
4 - يمكن تلوينها بسهولة باستخدام الـCSS.
أيقونات الخطوط المتوفرة مجانا
1 - Font Awesome.2 - Open Iconic.
3 - Entypo.
إضافة تابعنا على اليوتيوب لبلوجر
إضافة تابعنا على اليوتيوب لبلوجر
إضافة تابعنا على اليوتيوب, هي إضافة بسيطة لبلوجر تمكن للزائر الاشتراك بقانتك على اليوتيوب مباشرة من مدونتك, وهي من أهم الإضافات لبلوجر.كيفية تركيب إضافة تابعنا على اليوتيوب لبلوجر
1 - أدخل إلى لوحة التحكم -> التخطيط -> أضغط على إضافة أداة -> HTML/JavaScript.2 - ضع هذا الكود.
<span style = "float:left;"> <script src = "https://apis.google.com/js/platform.js"/> <div class = "g-ytsubscribe" data-channelid = "CHANNEL-ID" data-layout = "full" data-count = "default"></div> </span>3 - قم بتغيير :
- CHANNEL-ID -> الـID الخاص بقانتك على اليوتيوب.
4 - أضغط على حفظ.
إضافة الإعلانات النصية لبلوجر
إضافة الإعلانات النصية لبلوجر
إضافة الإعلانات النصية, هي إضافة لبلوجر تسمح لك بوضع إعلانات نصية في مدونتك, وهي من أهم الإضافات لانها تسمح لك بوضع إعلانات نصية مدفوعة أو تبادل إعلاني نصي...إلخ.كيفية تركيب إضافة الإعلانات النصية لبلوجر
1 - أدخل إلى لوحة التحكم -> التخطيط -> أضغط على إضافة أداة -> HTML/JavaScript.2 - ضع هذا الكود.
<style type="text/css">
#text-ads a
{
background:#f8f8f8;
color:#333333 !important;
padding:8px;
margin-top:5px;
font-size:12px;
display:block;
border:1px solid #eeeeee;
text-align:center;
text-decoration:none;
transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
}
#text-ads a:hover
{
background:#333333;
color:#ffffff !important;
border:1px solid #333333;
}
</style>
<div id="text-ads">
<a href="BLOG-URL" target="blank">BLOG-TITLE</a>
<a href="BLOG-URL" target="blank">BLOG-TITLE</a>
<a href="BLOG-URL" target="blank">BLOG-TITLE</a>
<a href="BLOG-URL" target="blank">BLOG-TITLE</a>
</div>
3 - قم بتغيير :- BLOG-TITLE -> عنوان المدونة.
- BLOG-URL -> رابط المدونة.
4 - أضغط على حفظ.
إضافة أزرار الشبكات الإجتماعية للبلوجر
إضافة أزرار الشبكات الإجتماعية لبلوجر
إضافة أزرار الشبكات الإجتماعية هي من أهم إضافات بلوجر لهذا وضعناها لكم وهذه الإضافة حصرية وجديدة, بشكل رائع وجذاب.كيفية تركيب إضافة أزرار الشبكات الإجتماعية لبلوجر
1 - أدخل إلى لوحة التحكم -> التخطيط -> أضغط على إضافة أداة -> HTML/JavaScript.2 - ضع هذا الكود.
<a href = "FACEBOOK-URL" target = "blank"><img src = "http://www.foxpic.com/V1YFOMe5.png" width = "64px"></a> <a href = "TWITTER-URL" target = "blank"><img src = "http://www.foxpic.com/Vobal4cW.png" width = "64px"></a> <a href = "GOOGLEPLUS-URL" target = "blank"><img src = "http://www.foxpic.com/V13hKoyC.png" width = "64px"></a> <a href = "YOUTUBE-URL" target = "blank"><img src = "http://www.foxpic.com/V0AR34Ss.png" width = "64px"></a>3 - قم بتغيير :
- FACEBOOK-URL -> رابط صفحتك على الفيسبوك.
- TWITTER-URL -> رابط حسابك على تويتر.
- GOOGLEPLUS-URL -> رابط صفحتك على جوجل بلس.
- YOUTUBE-URL -> رابط قناتك على اليوتيوب.
4 - أضغط على حفظ.
إضافة تابعنا عبر البريد الإلكتروني لبلوحر
إضافة تابعنا عبر البريد الإلكتروني لبلوحر
إضافة تابعنا عبر البريد الإلكتروني, هي إضافة لبلوجر بشكل جديد ورائع, تمكن الزائر من الإشتراك بالقائمة البريدية لتأتي له مواضيع المدونة الجديدة إلى بريده الإلكتروني تلقائيا, وهي من أهم الإضافات لبلوجر.كيفية تركيب إضافة تابعنا عبر البريد الإلكتروني لبلوحر
1 - أدخل إلى لوحة التحكم -> التخطيط -> أضغط على إضافة أداة -> HTML/JavaScript.2 - ضع هذا الكود.
<center> <img src = "http://www.foxpic.com/VFL5IYVn.png"> <form action = "http://feedburner.google.com/fb/a/mailverify?uri=FEED-URL" method = "post" target = "popupwindow"> <input name = "email" placeholder = "البريد الإلكتروني..." type = "email" size = "16"> <input type = "submit" value = "إشترك الآن !"> <input name = "uri" type = "hidden" value = "FEED-URL"> <input name = "loc" type = "hidden" value = "en_US"> </form> </center>3 - قم بتغيير :
- FEED-URL -> رابط القائمة البريدية مثال ( Goo4Web ).
4 - أضغط على حفظ.
إضافة الإعلانات لبلوجر
إضافة الإعلانات لبلوجر
إضافة الإعلانات, هي إضافة لبلوجر تسمح لك بوضع إعلانات في مدونتك بمقاس 125x125, وهي من أهم الإضافات لانها تسمح لك بوضع إعلانات مدفوعة أو تبادل إعلاني...إلخ.كيفية تركيب إضافة الإعلانات لبلوجر
1 - أدخل إلى لوحة التحكم -> التخطيط -> أضغط على إضافة أداة -> HTML/JavaScript.2 - ضع هذا الكود.
<style type = "text/css">
#ads
{
text-align:center;
}
#ads img
{
width:125px;
height:125px;
padding:2px;
border:4px solid #f2f2f2;
transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
#ads img:hover
{
opacity:0.8;
}
</style>
<div id="ads">
<a href = "BLOG-URL" target = "blank"><img src = "IMG-URL"></a>
<a href = "BLOG-URL" target = "blank"><img src = "IMG-URL"></a>
<a href = "BLOG-URL" target = "blank"><img src = "IMG-URL"></a>
<a href = "BLOG-URL" target = "blank"><img src = "IMG-URL"></a>
</div>
3 - قم بتغيير :- BLOG-URL -> رابط المدونة.
- IMG-URL -> رابط البنر.
4 - أضغط على حفظ.
مسابقة جو ويب الثانية
مسابقة جو ويب الثانية
هي ثاني مسابقة للموقع ويتم إختيار الفائز عن طريق قرعة, وستتم القرعة بعد إشتراك 8 مشتركين.كيفية الإشتراك
1 - الإشتراك في القائمة البريدية من هنا.2 - لايك لصفحة الموقع على الفيسبوك من هنا.
3 - ضع أسمك ورابط حسابك على الفيسبوك في تعليق.
الجائزة
إعلان 125x125 لمدة 3 أيام لمدونتك على الموقع.أكثر من 500 عضو لأي جروب على الفيسبوك.
1000 لايك لأي صفحة على الفيسبوك.
ما هو التصميم المسطح - Flat Design ؟
ما هو التصميم المسطح - Flat Design ؟
التصميم المسطح, هو أسلوب جديد من أساليب التصميم التي أنتشرت مؤخرا على باقي أساليب التصميم, وليس التصميم الجرافيك فقط, وإنما في مجالات أخرى كتصميم مواقع الويب وتطبيقات الهواتف والبرامج...إلخ, هذا التصميم الذي باختصار هو تصميم عرف ببساطته واستخدامه لألوان موحدة وبعده عن الحافات, الظلال, التدرجات في الألوان...إلخ.مميزات التصميم المسطح
يتميز التصميم المسطح عن باقي أساليب التصميم الأخرى بالبساطة وقلة التفاصيل والعناصر والمؤثرات داخل التصميم, ويتميز يسهولة قراءة التصميم والنظر إليه.أساسيات التصميم المسطح
الإبتعاد عن التأثيرات.التصميم البسيط.
عدم استخدام تدريج الالوان.
استخدام الوان مسطحة.
عدم استخدام الظلال, استخدم فقط الظل الطويل.
عدم استخدام الحواف في التصميم.
كيفية تركيب خط جذور فلات على المدونة في بلوجر
خط المدونة في بلوجر
خط المدونة من أهم العوامل لتجعل الزوار يتصفحون الموقع لمدة طويلة, لأنهم إذا فتحوا المدونة أو الموقع ووجدوا الخط غير واضح سوف يغلقونه ولن يزوروه مرة آخرى.كيفية تركيب خط جذور فلات على المدونة في بلوجر
1 - أدخل إلى لوحة التحكم -> القالب -> تحرير HTML.2 - ضع هذا الكود فوق </head>.
<style type = "text/css">
@font-face
{
font-family:"JF Flat";
src:url('http://fonts.jozoor.com/flat-font/font/JF-Flat-regular.eot');
src:url('http://fonts.jozoor.com/flat-font/font/JF-Flat-regular.eot?#iefix')format('embedded-opentype'),
url('http://fonts.jozoor.com/flat-font/font/JF-Flat-regular.svg#JF Flat')format('svg'),
url('http://fonts.jozoor.com/flat-font/font/JF-Flat-regular.woff')format('woff'),
url('http://fonts.jozoor.com/flat-font/font/JF-Flat-regular.ttf')format('truetype');
font-weight:normal;
font-style:normal;
}
*
{
font-family:'JF Flat',Helvitica !important;
}
</style>
3 - أضغط على حفظ.
قالب مدون لبلوجر
قالب مدون لبلوجر
قالب مدون, قالب بلوجر بسيط مناسب للمدونات, مصمم بالتصميم المسطح, يصلح للمدونات الشخصية أو التقنية أو الثقافية أو...إلخ.مميزات القالب
1 - متجاوب مع جميع الشاشات.2 - سريع ومنظم.
3 - اماكن الاعلانات جاهزة.
4 - قائمة منسدله.
5 - خاصية مقالات ذات صله.
6 - شكل مميز للتعليقات.
7 - تصميم مسطح.
الاشتراك في:
الرسائل (Atom)
جو ويب, موقع تم إنشاؤه بتاريخ سبتمبر 2014, تم إنشاؤه على أساس تقديم محتوى حصري عن دروس بلوجر, إضافات بلوجر, قوالب بلوجر, إضافات ووردبريس, قوالب ووردبريس, دروس تصميم, دروس سيو, هذا بالإضافة إلى بعض المسابقات والمجانيات D:
اسمي عبدالرحمن من مصر, من مدينة طنطا, محترف JQuery ,CSS ,HTML ولدي خبرة في بلوجر والووردبريس, وأنا صاحب هذا الموقع, موقع جو ويب وأنشأته لأقدم دروس حصرية عن بلوجر والووردبريس والتصميم والسيو.