محترفي الحاسوب: بلوجر

30 أكتوبر 2016

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

نتوجه الى القالب ونبحث عن الكود التالي ]]></b:skin>
وبعدها اضف الكود التالي فوقه

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); .boxy { font-family: “Open Sans”; font-weight: 400; font-size: 1.5em; color: rgba(255, 255, 255, 0); display: inline-block; cursor: pointer; text-decoration: none; padding: 0.6em 1.6em; margin: 0.6em; border-style: solid; border-width: 1px; transition: all 0.2s ease; border-image: linear-gradient(155deg, #fb83fa 0%, #31bcb8 100%) 1 round; background: linear-gradient(155deg, #fb83fa 0%, #31bcb8 100%); background-clip: text; -webkit-background-clip: text; } .boxy:hover { box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(49, 188, 184, 0.4), -2px -2px 6px rgba(251, 131, 250, 0.4); } .boxy:hover { color: rgba(255, 255, 255, 0.1); text-shadow: 0 0 1px rgba(255, 255, 255, 0.4); } .boxy.red { border-image: linear-gradient(155deg, #fc5c3c 0%, #ffb638 100%) 1 round; background: linear-gradient(155deg, #fc5c3c 0%, #ffb638 100%); background-clip: text; -webkit-background-clip: text; } .boxy.red:hover { box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(255, 182, 56, 0.4), -2px -2px 6px rgba(252, 92, 60, 0.4); } .boxy.green { border-image: linear-gradient(155deg, #06e5de 0%, #AAFFA9 100%) 1 round; background: linear-gradient(155deg, #06e5de 0%, #AAFFA9 100%); background-clip: text; -webkit-background-clip: text; } .boxy.green:hover { box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(170, 255, 169, 0.4), -2px -2px 6px rgba(6, 229, 222, 0.4); } .boxy.la { text-transform: uppercase; font-weight: 300; letter-spacing: 0.05em; font-size: 3em; padding: 0.3em; border-width: 2px; display: block; width: 70%; margin: 0.6em auto; border-image: linear-gradient(155deg, #F0C27B 0%, #ad1ba3 100%) 1 round; background: linear-gradient(155deg, #F0C27B 0%, #ad1ba3 100%); background-clip: text; -webkit-background-clip: text; } .boxy.la:hover { box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(173, 27, 163, 0.4), -2px -2px 6px rgba(240, 194, 123, 0.4); } p { color: rgba(255, 255, 255, 0.7); margin: 30px; }

قم بحفظ القالب وهذا هو كود html اضفه بداخل المشاركة في تبويب html

<a class=”boxy” href=”#”> للتحميل </a> <a class=”boxy red” href=”#”> للمعاينة </a> <a class=”boxy green” href=”#”> للتحميل </a>

1 اضافات بلوجر

حصريا | اضافة وجوه تعبيرية لتقييم التدوينة في مدونات بلوجر

العديد من المدونين المحترفين والمبتدئين ترغب دائما اضافة العديد من الامور التي تكون لها جاذبية للزوار ، كما انها ترغب باضافتها دون ان تؤثر او تجعل المدونة تقيلة في التحميل ، ومن بين هذه الاضافات التي يتم اضافتها في المدونة خصوصا داخل المواضيع هي وجوه تعبيرية لتقييم المشاركة التي قمت بكتابتها ، وفي الحقيقة هذه الاضافة تبين لك تعابير الزوار حول الموضوع الذي قمت بنشره هل معجب به او فظيع بنسبه له .

لا تنسى حفظ نسخة للقالب
اول شيئ نقوم به وهو التوجه الى :
لوحة التحكم >> قالب >> تحرير html
قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

]]></b:skin>

واضف الكود التالي فوقه مباشرة

/*============================*/ *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } .fb-cont { overflow: hidden; position: relative; margin: 100px auto; width: 800px; padding: 75px; padding-bottom: 140px; background: #fff; } .fb-cont__inner { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .fb-cont__inner:before { content: “”; position: absolute; left: 50%; top: 50%; width: 90%; height: 4px; margin-top: -2px; background: rgba(200, 206, 211, 0.5); border-radius: 2px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .fb-cont__drag-cont { z-index: 2; position: absolute; left: 50%; top: 0; width: 574px; height: 100%; margin-left: -287px; pointer-events: none; -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } .fb-heading { margin: 0 auto 60px; font-size: 30px; text-align: center; color: #737b7b; } .fb-emote { z-index: 1; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 76px; height: 76px; cursor: pointer; } .fb-emote svg { display: block; margin-bottom: 15px; width: 100%; height: 100%; background: #c8ced3; border-radius: 50%; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .fb-emote.s–active svg { -webkit-transform: scale(0.7); transform: scale(0.7); } .fb-emote__caption { text-align: center; font-size: 26px; font-weight: 700; color: #c8ced3; -webkit-transition: all 0.5s; transition: all 0.5s; } .fb-emote.s–active .fb-emote__caption { color: #655e53; -webkit-transform: translateY(15px); transform: translateY(15px); } .fb-emote__eye { stroke: none; fill: #fff; } .fb-emote__smile { stroke: #fff; stroke-width: 10; stroke-linecap: round; fill: none; } .fb-active-emote { position: absolute; left: 0; top: 50%; width: 110px; height: 110px; margin-left: -55px; margin-top: -55px; background: #ffd68c; border-radius: 50%; } .fb-active-emote svg { width: 100%; height: 100%; } .fb-active-emote__eye { stroke: none; fill: #655e53; } .fb-active-emote__smile { stroke: #655e53; stroke-width: 10; stroke-linecap: round; fill: none; } .icon-link { position: absolute; left: 5px; bottom: 5px; width: 32px; } .icon-link img { width: 100%; vertical-align: top; } .icon-link–twitter { left: auto; right: 5px; }

الان نبحت عن الكود التالي <body/> تم نضع فوقه الكود اسفله

<script type=’text/javascript’> function $$(selector, context) { var context = context || document; var elements = context.querySelectorAll(selector); var nodesArr = [].slice.call(elements); return nodesArr.length === 1 ? nodesArr[0] : nodesArr; }; var $emotesArr = $$(‘.fb-emote’); var numOfEmotes = $emotesArr.length; var $dragCont = $$(‘.fb-cont__drag-cont’); var $activeEmote = $$(‘.fb-active-emote’); var $leftEye = $$(‘.fb-active-emote__eye–left’); var $rightEye = $$(‘.fb-active-emote__eye–right’); var $smile = $$(‘.fb-active-emote__smile’); var emoteColors = { terrible: ‘#f8b696’, bad: ‘#f9c686’, default: ‘#ffd68c’ } var animTime = 0.5; $emotesArr.forEach(function($emote, i) { var progressStep = i / (numOfEmotes – 1); $emote.dataset.progress = progressStep; $emote.addEventListener(‘click’, function() { var progressTo = +this.dataset.progress; var type = this.dataset.emote; var $target = document.querySelector(‘#fb-emote-‘ + type); var $lEye = $target.querySelector(‘.fb-emote__eye–left’); var $rEye = $target.querySelector(‘.fb-emote__eye–right’); var leftEyeTargetD = $lEye.getAttribute(‘d’); var rightEyeTargetD = $rEye.getAttribute(‘d’); var smileTargetD = $target.querySelector(‘.fb-emote__smile’).getAttribute(‘d’); var bgColor = emoteColors[type]; if (!bgColor) bgColor = emoteColors.default; $$(‘.fb-emote.s–active’).classList.remove(‘s–active’); this.classList.add(‘s–active’); TweenMax.to($activeEmote, animTime, {backgroundColor: bgColor}); TweenMax.to($dragCont, animTime, {x: progressTo * 100 + ‘%’}); TweenMax.to($leftEye, animTime, {morphSVG: $lEye}); TweenMax.to($rightEye, animTime, {morphSVG: $rEye}); TweenMax.to($smile, animTime, {attr: {d: smileTargetD}}); }); });</script>

واخيرا ابحث عن هذا الكود <data:post.body/> ستجد اكثر من واحد الاخير هو المقصود الان اضف الكود التالي :

<svg class=”fb-emotes-svg” style=”display: none;”> <symbol id=”fb-emote-terrible” data-emote=”terrible” viewBox=”0 0 100 100″> <path class=”fb-emote__eye fb-emote__eye–left” d=”M32,25 l10,10 a10,10 0 0,1 -20,0 a10,10 0 0,1 10,-10″/> <path class=”fb-emote__eye fb-emote__eye–right” d=”M58,35 l10,-10 a10,10 0 0,1 0,20 a10,10 0 0,1 -10,-10″/> <path class=”fb-emote__smile” d=”M30,68 q20,-13 40,0 M30,68 q20,-13 40,0″/> </symbol> <symbol id=”fb-emote-bad” data-emote=”bad” viewBox=”0 0 100 100″> <path class=”fb-emote__eye fb-emote__eye–left” d=”M22,35 l10,-10 a10,10 0 0,1 0,20 a10,10 0 0,1 -10,-10″/> <path class=”fb-emote__eye fb-emote__eye–right” d=”M68,25 l10,10 a10,10 0 0,1 -20,0 a10,10 0 0,1 10,-10″/> <path class=”fb-emote__smile” d=”M30,68 q20,-10 40,0 M30,68 q20,-10 40,0″/> </symbol> <symbol id=”fb-emote-okay” viewBox=”0 0 100 100″> <path class=”fb-emote__eye fb-emote__eye–left” d=”M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20″/> <path class=”fb-emote__eye fb-emote__eye–right” d=”M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20″/> <path class=”fb-emote__smile” d=”M35,73 q20,-4 35,-8 M35,73 q20,-4 35,-8″/> </symbol> <symbol id=”fb-emote-good” viewBox=”0 0 100 100″> <path class=”fb-emote__eye fb-emote__eye–left” d=”M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20″/> <path class=”fb-emote__eye fb-emote__eye–right” d=”M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20″/> <path class=”fb-emote__smile” d=”M30,68 q20,10 40,0 M30,68 q20,10 40,0″/> </symbol> <symbol id=”fb-emote-great” viewBox=”0 0 100 100″> <path class=”fb-emote__eye fb-emote__eye–left” d=”M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20″/> <path class=”fb-emote__eye fb-emote__eye–right” d=”M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20″/> <path class=”fb-emote__smile” d=”M30,68 q20,15 40,0 M30,68 q20,0 40,0″/> </symbol> </svg> <div class=”fb-cont”> <div class=”fb-heading”>كيفية المساعدة التي حصلت عليها؟ </div> <div class=”fb-cont__inner”> <div class=”fb-emote” data-emote=”terrible”> <svg><use xlink:href=”#fb-emote-terrible”/></svg> فظيع </div> <div class=”fb-emote” data-emote=”bad”> <svg><use xlink:href=”#fb-emote-bad”/></svg> سيئة </div> <div class=”fb-emote s–active” data-emote=”okay”> <svg><use xlink:href=”#fb-emote-okay”/></svg> حسنا </div> <div class=”fb-emote” data-emote=”good”> <svg><use xlink:href=”#fb-emote-good”/></svg> جيد </div> <div class=”fb-emote” data-emote=”great”> <svg><use xlink:href=”#fb-emote-great”/></svg> عظيم </div> <div class=”fb-cont__drag-cont”> <div class=”fb-active-emote”> <svg viewBox=”0 0 100 100″> <path class=”fb-active-emote__eye fb-active-emote__eye–left” d=”M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20″/> <path class=”fb-active-emote__eye fb-active-emote__eye–right” d=”M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20″/> <path class=”fb-active-emote__smile” d=”M35,73 q20,-4 35,-8 M35,73 q20,-4 35,-8″/> </svg> </div> </div> </div> </div>

0 اضافات بلوجر

28 أكتوبر 2016

حصريا | تحميل قالب محترفي الحاسوب (ha1pc) النسخى السابعة v7 مجانا !!

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

اهم المميزات بالقالب + معاينة القالب من هنا :

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

شرح الحصول على القالب

يجب عليك الانضمام الى اعضاء المدونة من هنا

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

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

151 بلوجر قوالب

23 أكتوبر 2016

كيفية جعل صور مواضيع مدونتك اكثر استجايبة : اكيد انك لاحظت خروج الصور في كثير من المدونات عن قالبها الاصلي حيث تكون في بعض الاحيان مزعجة للزوار , كما انها من الاسباب التي تاتر على الزوار , لانه كلما زادت اناقة موقعك و ترتيبه زادت نسبة الزيارات و المعجبين , تذكر ان مدونك كامرأة يجب الاعتناء بها .

ان كنت اخي الكريم تعاني هذا المشكل في مدونتك يرجى فقط اضافة رمز CSS الذي سيجعل جميع الصور لا تتعدى القالب الخاص للمواضيع بمدونتك و يرجى تتبع الخطوات التالية :

.لوحة التحكم >> إضغط على قالب >> ثم تحريرhtml
إبحث بالضغط على CTRL+F عن الكود التالي : ]]></b:skin> او </style>
.ثم ضع قبله الكود التالي مباشرةً :

.post-body img {
max-width:100%;
height:auto;
}

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

1 اضافات بلوجر

السلام عليكم متابعي وزوار موقع محترفي الحاسوب اليوم في هدا الدرس اعود ليكم بطريقة عمل صفحة ايقونات Awesome احترافية بمعنى الكلمة اولا اود ان اتقدم اليكم بالاتدار نتيجة غيابنا عن التدوين لكن انشالله سنحاول ان نوازن ما بين العمل والتدوين حتى لا ا\يل عليكم ننتقل الى الشرح ...

شرح تركيب الاضافة

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

ثم عليك تحميل الأكواد من هنا ولصقها بـ HTML الصفحة
ثم اضغط على نشر ومبروك عليك الصفحة

1 اضافات بلوجر

16 أكتوبر 2016

بلوجر | شرح اعطاء وسم نوفلو (nofollow) لجميع الروابط الخارجية في موقعك !!

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

كود نوفولو (Nofollow) سوف يضع علامة rel="nofolow" على جميع الروابط الخارجية في مدونتك بالإضافة إلى علامة target="_blank" والتي تعمل على فتح الرابط الخارجي في علامة تبويب جديدة.

نستطيع أيضا تضمين هذا الكود في أي موقع غير منصة بلوجر حيث يجب أن يكون الكود التالي فوق الرمز </body> في المجلد الرئيسي للموقع سواء كان منتدى او منصة ووردبريس.

أدخل لوحة تحكم مدونتك --> القالب
أنقر على تحرير html ثم ابحث عن الرمز </body>
ثم أضف الكود التالي فوق الرمز </body> مباشرةً

<script type='text/javascript'> //<![CDATA[ $("a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank'); //]]> </script>

0 اضافات بلوجر

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

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

1 – موقع codotvu.co

3 مواقع للحصول على دومين مجاني و ربطه بموقعك أو مدونتك

يعتبر موقع codotvu.co من بين اقوى و اشهر المواقع التي تتيح للمستخدمين إمكانية الحصول على دومين مجاني بنطاق CO.VU و قد سبق ان تحدثنا عن هذا الموقع و قمنا بشرحه بشكل تفصيلي بداية من طريقة الحصول على الدومين إلى غاية ربطه بمدونة بلوجر أو الوورد بريس ، و للرجوع إلى الشرح قم بالضغط هنا ، أما للدخول إلى موقع codotvu.co قم بالنقر أسفله .

الدخول إلى موقع codotvu.co

2 – موقع dot.cf

موقع dot.cf من بين ابرز المواقع التي تقدم ايضا دومين مجاني فريد من نوعه ن حيث أن طريقة إستعمال موقع dot.cf نفس طريقة إستخدام الموقع السابق و يمكنك ايضا عبر dot.cf حجز النطاق الخاص بك مجانا و ربطه بموقعك بكل سهولة جدا ، و للولوج إليه أنقر على رابط الدخول أدناه .

الدخول إلى موقع dot.cf

3 – موقع point.ml

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

الدخول إلى موقع point.ml

0 بلوجر حلقات

13 سبتمبر 2016

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

<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

قم باستبدال الكود السابق بالكود التالى الجديد

<b:if cond='data:blog.url == data:blog.homepageUrl'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> - <data:blog.title/></title> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'> <meta expr:content='data:blog.metaDescription' name='description'/> </b:if> <b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.metaDescription' name='Description'/> </b:if> <b:if cond='data:blog.pageType == "static_page"'> <meta expr:content='data:blog.metaDescription' name='Description'/> </b:if> <b:if cond='data:blog.searchLabel'> <meta expr:content='data:blog.pageName' name='Description'/> </b:if> <b:if cond='data:blog.pageType == "archive"'> <meta expr:content='data:blog.pageName + "archive"' name='Description'/> <meta content='noindex, follow' name='robots'/> </b:if> <meta content='text/html; charset=utf-8' http-equiv='Content-Type'/> <link href='/favicon.ico' rel='icon' type='image/x-icon'/> <link expr:href='data:blog.canonicalUrl' rel='canonical'/> <link expr:href='data:blog.canonicalUrl + "?m=1"' media='handheld' rel='alternate'/> <meta expr:content='data:blog.title' property='og:site_name'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <meta expr:content='data:blog.metaDescription' property='og:description'/> <b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.pageName' property='og:title'/> <meta content='article' property='og:type'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> </b:if> <b:else/> <meta content='website' property='og:type'/> <meta content='رابط صورة للظهور فى الفيسبوك و تويتر عند عدم وجود صورة' property='og:image'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'> <meta expr:content='data:blog.title' property='og:title'/> </b:if> <b:if cond='data:blog.pageType == "static_page"'> <meta expr:content='data:blog.pageName' property='og:title'/> </b:if> <meta content='ar_AR' property='og:locale'/> <meta content='summary' name='twitter:card'/> <b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.pageName' name='twitter:title'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/> </b:if> <b:else/> <meta expr:content='data:blog.title' name='twitter:title'/> <meta content='رابط صورة للظهور فى الفيسبوك و تويتر عند عدم وجود صورة' name='twitter:image:src'/> </b:if> <meta expr:content='data:blog.metaDescription' name='twitter:description'/> <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>

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

تدوينات دات صلة:

تحميل أكواد ميتا تاغ محترفي الحاسوب لسنة 2016

أفضل كود ميتا تاج لسنة 2016

2 اضافات بلوجر سيو

23 أغسطس 2016

السلام عليكم ورحمة الله تعالى وبركاته عدت لكم بعد غياب دام 4ايام عن المدونة ودلك بسبب اني ارتاح مثل اي انسان المهم العودة واليوم احضرت لي معكم مفاجئة وهي قالب ألماس الاحترافي والرائع هو قالب بلوجر بتصميم أنيق، متجاوب مع مختلف الشاشات و متوافق مع أغلب المتصفحات، ما يميزه هو أنه متعدد الاستعمالات و يصلح لشتى أنواع المدونات...القالب مدفوع تمنه 10$ وهو حصري ~~10$~~ لدا مدونة محترفي الحاسوب فقط.

اهم مميزات القالب + معاينة القالب من هنا :

متجاوب مع مختلف الشاشات، معاينة
متوافق مع جل المتصفحات: أنترنت إكسبلورر بدءا من الإصدار العاشر، جوجل كروم، موزيلا فيرفوكس، سافاري، مايكروسوفت إدج.
يدعم شاشات الدقة العالية (الريتينا)،
خطوط عربية أنيقة،
يتوفر على أحدث أكواد الميتا تاغ لتعزيز الأرشفة.
لوحة تحكم كاملة، تسهل التعديل على القالب، دون الحاجة للتعامل مع الأكواد،
3 سكربتات أنيقة لجلب المواضيع حسب التسميات، مما يجلع الصفحة الرئيسية تظهر بشكل أنيق و متميز،
إضافة شاملة لمختلف مواقع التواصل الاجتماعي على السايدبار،
يدعم القوائم المنسدلة، مع إمكانية إضافتها من التخطيط فقط!
نموذج الاتصال بشكل منبثق + صفحة اتصال مخصصة
زر الصعود للأعلى
زر البحث المميز على يسار القائمة،
أزرار مشاركة الموضوع على مواقع التواصل الاجتماعي في الصفحة الرئيسية، دون الحاجة لفتحه،
أزرار المشاركة على مواقع التواصل الاجتماعي أسفل كل موضوع،
أداة الموضوع السابق و الموضوع التالي،
أداة مواضيع ذات صلة أسفل كل موضوع،
تعليقات بشكل أنيق، مع نظام التعليقات بلوجر و تعليقات الفيسبوك،

شرح الحصول على القالب :

عليك أولاُ عليك الأشتراك فى المدونة للحصول على القالب من هنا
ثانيا أترك تعليق على الموضوع وقم بوضع به رابط بريدك الألكترونى وسوف يتم ارسال اليك القالب فى اقرب وقت ممكن

معاينة القالب
Alam3arb

تحميل مباشر
165.01KB

40 بلوجر حصريا حصريات قوالب

15 أغسطس 2016

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

شرح الحصول على القالب

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

شرح الحصول على القالب

يجب عليك الانضمام الى اعضاء المدونة من هنا

يجب عليك الاعجاب بصفحتنا على الفيسبوك من هنا

أترك تعليق على الموضوع وقم بوضع به رابط بريدك الألكترونى وسوف يتم ارسال اليك القالب فى اقرب وقت ممكن
فيما يخص رابط المعاينة فيتم ارفاقها مع القالب في رسال خاصة تحياتي ^_^

معاينة القالب

HuHu

تحميل مباشر

165.01KB

16 بلوجر حصريات قوالب

14 أغسطس 2016

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

شرح الحصول على القالب

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

114 بلوجر قوالب

10 أغسطس 2016

السلام عليكم .... , كثراً من يلاحظ بعض المدوانت تمتلك صفحة ثابته بمدونتها بأسم " الوان فلات " او صفحة الالوان او غير ذالك , اليوم سوف اشرح لكم كيفية اضافة هذه الصفحة في مدونتك وبأفضل الوان الفلات الاحترافية وبتاثيرات احترافي , غاية في الروعة , قمنا بتجربتها في مدونتنا ونالت اعجاب الكثير واليوم نشرحها لكم بالتفصيل

شرح و كيفية تركيب + معاينة الاضافة من هنا :

انتقل إلى لوح تحكم مدونتك،

إختر "تخطيط" ثم إضافة أداة ,ثم اختر HTML/Javascript

والآن الصق داخل المستطيل الكود التالي :

<div dir="rtl" style="text-align: right;" trbidi="on">
<div id="flatuarlina">
<ul class="flatui">
<li style="background: #5C97BF;">كود اللون #5C97BF
</li>
<li style="background: #4B77BE;">كود اللون #4B77BE
</li>
<li style="background: #1F3A93;">كود اللون #1F3A93
</li>
<li style="background: #2574A9;">كود اللون #2574A9
</li>
<li style="background: #67809F;">كود اللون #67809F
</li>
<li style="background: #34495E;">كود اللون #34495E
</li>
<li style="background: #3A539B;">كود اللون #3A539B
</li>
<li style="background: #1E8BC3;">كود اللون #1E8BC3
</li>
<li style="background: #6BB9F0;">كود اللون #6BB9F0
</li>
<li style="background: #22313F;">كود اللون #22313F
</li>
<li style="background: #336E7B;">كود اللون #336E7B
</li>
<li style="background: #19B5FE;">كود اللون #19B5FE
</li>
<li style="background: #89C4F4;">كود اللون #89C4F4
</li>
<li style="background: #2C3E50;">كود اللون #2C3E50
</li>
<li style="background: #3498DB;">كود اللون #3498DB
</li>
<li style="background: #22A7F0;">كود اللون #22A7F0
</li>
<li style="background: #94E0EE;">كود اللون #94E0EE
</li>
<li style="background: #52B3D9;">كود اللون #52B3D9
</li>
<li style="background: #59ABE3;">كود اللون #59ABE3
</li>
<li style="background: #26A65B;">كود اللون #26A65B
</li>
<li style="background: #1E824C;">كود اللون #1E824C
</li>
<li style="background: #00B16A;">كود اللون #00B16A
</li>
<li style="background: #2ABB9B;">كود اللون #2ABB9B
</li>
<li style="background: #4DAF7C;">كود اللون #4DAF7C
</li>
<li style="background: #03A678;">كود اللون #03A678
</li>
<li style="background: #26C281;">كود اللون #26C281
</li>
<li style="background: #019875;">كود اللون #019875
</li>
<li style="background: #3FC380;">كود اللون #3FC380
</li>
<li style="background: #16A085;">كود اللون #16A085
</li>
<li style="background: #2ECC71;">كود اللون #2ECC71
</li>
<li style="background: #C5EFF7;">كود اللون #C5EFF7
</li>
<li style="background: #C8F7C5;">كود اللون #C8F7C5
</li>
<li style="background: #049372;">كود اللون #049372
</li>
<li style="background: #36D7B7;">كود اللون #36D7B7
</li>
<li style="background: #66CC99;">كود اللون #66CC99
</li>
<li style="background: #1BA39C;">كود اللون #1BA39C
</li>
<li style="background: #1BBC9B;">كود اللون #1BBC9B
</li>
<li style="background: #65C6BB;">كود اللون #65C6BB
</li>
<li style="background: #BFBFBF;">كود اللون #BFBFBF
</li>
<li style="background: #ABB7B7;">كود اللون #ABB7B7
</li>
<li style="background: #DADFE1;">كود اللون #DADFE1
</li>
<li style="background: #95A5A6;">كود اللون #95A5A6
</li>
<li style="background: #C5DCE2;">كود اللون #C5DCE2
</li>
<li style="background: #BDC3C7;">كود اللون #BDC3C7
</li>
<li style="background: #EEEEEE;">كود اللون #EEEEEE
</li>
<li style="background: #D2D7D3;">كود اللون #D2D7D3
</li>
<li style="background: #F0E2C5;">كود اللون #F0E2C5
</li>
<li style="background: #EB9532;">كود اللون #EB9532
</li>
<li style="background: #E67E22;">كود اللون #E67E22
</li>
<li style="background: #F27935;">كود اللون #F27935
</li>
<li style="background: #F9BF3B;">كود اللون #F9BF3B
</li>
<li style="background: #F7CA18;">كود اللون #F7CA18
</li>
<li style="background: #F9690E;">كود اللون #F9690E
</li>
<li style="background: #F39C12;">كود اللون #F39C12
</li>
<li style="background: #D35400;">كود اللون #D35400
</li>
<li style="background: #F4D03F;">كود اللون #F4D03F
</li>
<li style="background: #F5AB35;">كود اللون #F5AB35
</li>
<li style="background: #EB974E;">كود اللون #EB974E
</li>
<li style="background: #F2784B;">كود اللون #F2784B
</li>
<li style="background: #F4B350;">كود اللون #F4B350
</li>
<li style="background: #E87E04;">كود اللون #E87E04
</li>
<li style="background: #E74C3C;">كود اللون #E74C3C
</li>
<li style="background: #CF000F;">كود اللون #CF000F
</li>
<li style="background: #C0392B;">كود اللون #C0392B
</li>
<li style="background: #D64541;">كود اللون #D64541
</li>
<li style="background: #EF4836;">كود اللون #EF4836
</li>
<li style="background: #96281B;">كود اللون #96281B
</li>
<li style="background: #D91E18;">كود اللون #D91E18
</li>
<li style="background: #E26A6A;">كود اللون #E26A6A
</li>
<li style="background: #FF0000;">كود اللون #FF0000
</li>
<li style="background: #F22613;">كود اللون #F22613
</li>
<li style="background: #E08283;">كود اللون #E08283
</li>
<li style="background: #9B59B6;">كود اللون #9B59B6
</li>
<li style="background: #8E44AD;">كود اللون #8E44AD
</li>
<li style="background: #BE90D4;">كود اللون #BE90D4
</li>
<li style="background: #BF55EC;">كود اللون #BF55EC
</li>
<li style="background: #9A12B3;">كود اللون #9A12B3
</li>
<li style="background: #913D88;">كود اللون #913D88
</li>
<li style="background: #722D6A;">كود اللون #722D6A
</li>
<li style="background: #740A4E;">كود اللون #740A4E
</li>
</ul>
</div>
<style scoped="" type="text/css">
#flatuarlina ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatuarlina ul.flatui li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}
#flatuarlina ul.flatui li:hover{z-index:4}
#flatuarlina ul.flatui li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}
#flatuarlina ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatuarlina ul.flatui li:after{content:'اضغط مرتين لنسخ الكود';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}
#flatuarlina ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatuarlina ul.flatui li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatuarlina ul.flatui li .kodekecil{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}
@media screen and (max-width:800px){#flatuarlina ul.flatui li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatuarlina ul.flatui li{width:50%}}
@media screen and (max-width:480px){#flatuarlina ul.flatui li{width:100%}}
</style>
</div>

0 اضافات بلوجر

السلام عليكم .... , لانختلف في ان مواقع gov وتعني ( المواقع الحكومية ) هي أفضل مواقع يثق بها جوجل وبالروابط التي تأتي منها , لذالك اليوم جمعت لكم أقوي وأفضل 50 موقع gov للحصول على باك لينك قوي عالي الجودة , حتي تتسلق محركات البحث والحصول على اعلي المراتب في جوجل وفي اي محرك بحث اخر .

http://www.dhs.gov/journal/leadership
http://www.ncptt.nps.gov
http://forum.webcontent.gov/news
http://ahc.ehawaii.gov/openedit/blog
http://blog.gallegly.house.gov/
http://www.volunteerlouisiana.gov/blog
http://www.nysenate.gov/markup
http://www.rib.uscourts.gov/externalkb20
http://www.ncbi.nlm.nih.gov/pubmed
http://www.tsa.gov/blog
http://teens.drugabuse.gov/blog
http://www.geostor.arkansas.gov/G6/Home.html
http://townhall.virginia.gov/L/Forums.cfm
http://blog.pittsburghsummit.gov/index.php/site/index
http://www.majorityleader.gov/blog/blog.cfm
http://www.connectcontest.state.gov/contests/change-your-climate-change-ourworld
http://cce.nasa.gov
http://blog.library.ca.gov
http://your.kingcounty.gov/votes
http://www.burton.house.gov/posts
http://www.nlc.nebraska.gov/system/republican
http://ideas.cio.ny.gov
http://blogs.loc.gov
http://tokyo.usembassy.gov/zblog/e/zblog-emain.html
http://libraries.idaho.gov/blogs/anne-abrams
http://www.news.hs.utah.gov
http://blog.epa.gov/blog
http://skyview.gsfc.nasa.gov/blog
http://change.gov/open_government/yourseatatthetable
http://roberts.senate.gov/public/index.cfm
http://www.arts.gov/bigreadblog
http://www.muskegon-mi.gov/videos-of-muskegon

1 اضافات بلوجر حصريات سيو مواقع seo

السلام عليكم .... , اليوم سوف نشرح لكم إضافة مهمة لمدونتك وهي عمل خلاصة Rss لموقعك او لمدونتك من موقع FeedBurner , هذه الاداة تجذب أكبر عدد من الزوار لمدونتك والحصول على زوار دائمين يتابعون جديد مدونتك، بحيث اذا اشترك احد في خلاصة Rss الخاصة بك سيتوصل المشترك دائمًا بتحديثات مواضيعك أول بأول حين الاشتراك بهذه الاداة هذا مثال عنا وبهذا سنبدأ على بركة الله

شرح طريقة التركيب

- ندخل إلى هذا الموقع : www.feedburner.com
- سيطلب منك تسجيل الدخول عبر حسابك Gmail
- سيفتح لك واجهة الموقع بعدها اتبع الصور التالية

- إذا ظهرت لك نفس الصورة التالية إختر الخيار 2 ( كما بالصورة )

- يمكنك تغيير ما بالخانة 1 بعنوان للخلاصة
أو أتركه كما هو أما الخانة 2 فهي خاصة برابط خلاصة موقعك أتركها كما هي ( كما بالصورة )

- تهانينا لقد أنشأت رابط خلاصة لموقعك قم بنسخ رابط خلاصتك

واحتفظ به ثم اضغط على Next ( كما بالصورة )

- تجاوز الصفحة التالية بالضغط على Next

وستظهر لك الواجهة بتوضيح أخضر أنك هيئة رابط الخلاصة بنجاح! ( كما بالصورة )

إلي هنا ينتهي درسنا , وفي درس أخر بأذن الله سوف نعرض أفضل صناديق الاشترك في النشرة البريدي

والتي سوف تكون مبنية على هذا الدرس

0 اضافات بلوجر

قالب لعرض المنتجات التجارية - خصص هذه القالب بواجهة احترافية لاصحاب الشركات، مقدمي الاعمال والمنتجات التجارية يمكن من خلال هذه القالب التعريف بمنتجك او ماتقدمه على اكمل وجه ان كنت من محبي هذه القواب حتما سوف يعجبك هذه القالب لما يوفره من اضافات وميزات احترافية يمكنك التعرف عليها من خلال المميزات اسفله.

اهم المميزات بالقالب + معاينة لقالب من هنا :

سريع التحميل - اماكن لتعريف عن منتجك

نموذج اتصال احترافي - تاثيرات حركية

متجاوب - هيدر احترافي

صديق لمحركات لبحث - الوان هادئه للعين

والمزيد...

شرح الحصول على القالب

يجب عليك الانضمام الى اعضاء المدونة من هنا

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

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

4 بلوجر قوالب

محترفي الحاسوب

30 أكتوبر 2016

28 أكتوبر 2016

23 أكتوبر 2016

16 أكتوبر 2016

13 سبتمبر 2016

23 أغسطس 2016

15 أغسطس 2016

14 أغسطس 2016

10 أغسطس 2016

أقسام المدونة

أحدث التعليقات

pub

المتابعون

راسلنا

مواقع ندعمها

30 أكتوبر 2016

28 أكتوبر 2016

23 أكتوبر 2016

16 أكتوبر 2016

13 سبتمبر 2016

23 أغسطس 2016

15 أغسطس 2016

14 أغسطس 2016

10 أغسطس 2016

الأكثر زيارة

أقسام المدونة

أحدث التعليقات

pub

المتابعون

راسلنا

مواقع ندعمها