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

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

@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; }

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

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

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

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

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

]]></b:skin>

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

/*============================*/ *, *: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; }

1.  الان نبحت عن الكود التالي <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>

1. واخيرا ابحث عن هذا الكود <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> <p class=”fb-emote__caption”>فظيع</p> </div> <div class=”fb-emote” data-emote=”bad”> <svg><use xlink:href=”#fb-emote-bad”/></svg> <p class=”fb-emote__caption”>سيئة</p> </div> <div class=”fb-emote s–active” data-emote=”okay”> <svg><use xlink:href=”#fb-emote-okay”/></svg> <p class=”fb-emote__caption”>حسنا</p> </div> <div class=”fb-emote” data-emote=”good”> <svg><use xlink:href=”#fb-emote-good”/></svg> <p class=”fb-emote__caption”>جيد</p> </div> <div class=”fb-emote” data-emote=”great”> <svg><use xlink:href=”#fb-emote-great”/></svg> <p class=”fb-emote__caption”>عظيم</p> </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 اضافات بلوجر

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

طريقة التركيب:

1. توجه إلى قالب >> تحرير
2. ثم انقر على تحرير HTML
3. ابحث عن الوسم  ]]></b:skin> و اضف الكود التالي فوقه:

#scrolltop{display:none} #rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(//ar1web-com.googlecode.com/svn/trunk/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)} #rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(//ar1web-com.googlecode.com/svn/trunk/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0} #rocketmeluncur:hover{background-position:50% -62px} #rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1} #rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none} #rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}

1. إبحث عن </body>  وضع الكود التالي فوقه



<a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a> <script type='text/javascript'> //<![CDATA[ jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)}); //]]> </script>

0 اضافات

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

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

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

.post-body img {

max-width:100%;

height:auto;

}

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

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

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

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

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

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

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

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

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

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

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

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

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

حل مشكلة الصورة والوصف الغير ملائم أثناء مشاركة التدوينات والمواضيع الخاصة ببلوجر على الفيس بوك .

اليوم وصلنى طلب بخصوص حل هذه المشكلة واليكم الحل المناسب لها .

أولًا حل مشكلة الصورة

1. تذهب إلى القالب ثم تحرير القالب
2. لتبحث عن هذا الكود </head>
3. ثم تقوم بلصق الكود التالى فوق الكود السابق مباشرةً

<b:if cond='data:blog.postImageUrl'> <meta expr:content='"" + data:blog.postImageUrl' property='og:image'/> <b:else/> <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjncSm73bd_hyY9ZG2LzdAOGHsUq6dBH6BmCKosvA-TV0Q-BgjslNDj0dWG3YAZr8Nw90RRT6OkS0u_94ZAJieDrwp_lPpCsUXVTAEaoG5_EUOyb0ttD8saMGJ0D_PWt1yysyLiP-NZGPI/s200-c/default.png' property='og:image'/> </b:if>

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

1 اضافات حصريات

إذا كنت تمتلك مدونة بنظام بلوجر و تريد تحسين الظهور فى محركات البحث بالإضافة إلى ظهور صور المواضيع فى الفيسبوك و وصف الموضوع قم بالذهاب إلى لوحة تحكم بلوجر و قم بالدخول إلى محرر 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 == &quot;item&quot;'> <meta expr:content='data:blog.metaDescription' name='Description'/> </b:if> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <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 == &quot;archive&quot;'> <meta expr:content='data:blog.pageName + &quot;archive&quot;' 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 + &quot;?m=1&quot;' 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 == &quot;item&quot;'> <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 == &quot;static_page&quot;'> <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 == &quot;item&quot;'> <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 اضافات بلوجر سيو

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

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

1. انتقل إلى لوح تحكم مدونتك،
2. إختر "تخطيط" ثم إضافة أداة ,ثم اختر HTML/Javascript
3. والآن الصق داخل المستطيل الكود التالي :

<div dir="rtl" style="text-align: right;" trbidi="on">
<div id="flatuarlina">
<ul class="flatui">
<li style="background: #5C97BF;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #5C97BF</span>
      </li>
<li style="background: #4B77BE;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #4B77BE</span>
      </li>
<li style="background: #1F3A93;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #1F3A93</span>
      </li>
<li style="background: #2574A9;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #2574A9</span>
      </li>
<li style="background: #67809F;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #67809F</span>
      </li>
<li style="background: #34495E;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #34495E</span>
      </li>
<li style="background: #3A539B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #3A539B</span>
      </li>
<li style="background: #1E8BC3;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #1E8BC3</span>
      </li>
<li style="background: #6BB9F0;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #6BB9F0</span>
      </li>
<li style="background: #22313F;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #22313F</span>
      </li>
<li style="background: #336E7B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #336E7B</span>
      </li>
<li style="background: #19B5FE;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #19B5FE</span>
      </li>
<li style="background: #89C4F4;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #89C4F4</span>
      </li>
<li style="background: #2C3E50;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #2C3E50</span>
      </li>
<li style="background: #3498DB;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #3498DB</span>
      </li>
<li style="background: #22A7F0;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #22A7F0</span>
      </li>
<li style="background: #94E0EE;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #94E0EE</span>
      </li>
<li style="background: #52B3D9;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #52B3D9</span>
      </li>
<li style="background: #59ABE3;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #59ABE3</span>
      </li>
<li style="background: #26A65B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #26A65B</span>
      </li>
<li style="background: #1E824C;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #1E824C</span>
      </li>
<li style="background: #00B16A;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #00B16A</span>
      </li>
<li style="background: #2ABB9B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #2ABB9B</span>
      </li>
<li style="background: #4DAF7C;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #4DAF7C</span>
      </li>
<li style="background: #03A678;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #03A678</span>
      </li>
<li style="background: #26C281;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #26C281</span>
      </li>
<li style="background: #019875;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #019875</span>
      </li>
<li style="background: #3FC380;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #3FC380</span>
      </li>
<li style="background: #16A085;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #16A085</span>
      </li>
<li style="background: #2ECC71;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #2ECC71</span>
      </li>
<li style="background: #C5EFF7;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #C5EFF7</span>
      </li>
<li style="background: #C8F7C5;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #C8F7C5</span>
      </li>
<li style="background: #049372;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #049372</span>
      </li>
<li style="background: #36D7B7;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #36D7B7</span>
      </li>
<li style="background: #66CC99;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #66CC99</span>
      </li>
<li style="background: #1BA39C;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #1BA39C</span>
      </li>
<li style="background: #1BBC9B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #1BBC9B</span>
      </li>
<li style="background: #65C6BB;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #65C6BB</span>
      </li>
<li style="background: #BFBFBF;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #BFBFBF</span>
      </li>
<li style="background: #ABB7B7;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #ABB7B7</span>
      </li>
<li style="background: #DADFE1;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #DADFE1</span>
      </li>
<li style="background: #95A5A6;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #95A5A6</span>
      </li>
<li style="background: #C5DCE2;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #C5DCE2</span>
      </li>
<li style="background: #BDC3C7;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #BDC3C7</span>
      </li>
<li style="background: #EEEEEE;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #EEEEEE</span>
      </li>
<li style="background: #D2D7D3;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #D2D7D3</span>
      </li>
<li style="background: #F0E2C5;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F0E2C5</span>
      </li>
<li style="background: #EB9532;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #EB9532</span>
      </li>
<li style="background: #E67E22;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #E67E22</span>
      </li>
<li style="background: #F27935;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F27935</span>
      </li>
<li style="background: #F9BF3B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F9BF3B</span>
      </li>
<li style="background: #F7CA18;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F7CA18</span>
      </li>
<li style="background: #F9690E;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F9690E</span>
      </li>
<li style="background: #F39C12;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F39C12</span>
      </li>
<li style="background: #D35400;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #D35400</span>
      </li>
<li style="background: #F4D03F;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F4D03F</span>
      </li>
<li style="background: #F5AB35;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F5AB35</span>
      </li>
<li style="background: #EB974E;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #EB974E</span>
      </li>
<li style="background: #F2784B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F2784B</span>
      </li>
<li style="background: #F4B350;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F4B350</span>
      </li>
<li style="background: #E87E04;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #E87E04</span>
      </li>
<li style="background: #E74C3C;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #E74C3C</span>
      </li>
<li style="background: #CF000F;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #CF000F</span>
      </li>
<li style="background: #C0392B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #C0392B</span>
      </li>
<li style="background: #D64541;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #D64541</span>
      </li>
<li style="background: #EF4836;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #EF4836</span>
      </li>
<li style="background: #96281B;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #96281B</span>
      </li>
<li style="background: #D91E18;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #D91E18</span>
      </li>
<li style="background: #E26A6A;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #E26A6A</span>
      </li>
<li style="background: #FF0000;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #FF0000</span>
      </li>
<li style="background: #F22613;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #F22613</span>
      </li>
<li style="background: #E08283;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #E08283</span>
      </li>
<li style="background: #9B59B6;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #9B59B6</span>
      </li>
<li style="background: #8E44AD;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #8E44AD</span>
      </li>
<li style="background: #BE90D4;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #BE90D4</span>
      </li>
<li style="background: #BF55EC;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #BF55EC</span>
      </li>
<li style="background: #9A12B3;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #9A12B3</span>
      </li>
<li style="background: #913D88;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #913D88</span>
      </li>
<li style="background: #722D6A;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #722D6A</span>
      </li>
<li style="background: #740A4E;"><span class="kodebesar"><span class="kodekecil">كود اللون</span> #740A4E</span>
      </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 الخاصة بك سيتوصل المشترك دائمًا بتحديثات مواضيعك  أول بأول حين الاشتراك بهذه الاداة هذا مثال عنا وبهذا سنبدأ على بركة الله

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

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

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

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

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

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

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

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

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

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

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

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

1. توجه الى مدونتك ، ثم قالب اختر تحرير: HTML  
2. ثم ابحث عن الكود التالي: <body>  
3. في حالة لم تعثر عليه ابحث عن هذا: body>  
4. ثم اخيرا اضف هذا الكود اسفل الكود السابق و اضغط على حفظ 

<style> #loader-wrapper {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 1000;} #loader {display: block;position: relative;left: 50%;top: 50%;width: 150px;height: 150px;margin: -75px 0 0 -75px;border-radius: 50%;border: 3px solid transparent;border-top-color: #3498db;-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */animation: spin 2s linear infinite;} #loader:before {content: &quot;&quot;;position: absolute;top: 5px;left: 5px;right: 5px;bottom: 5px;border-radius: 50%;border: 3px solid transparent;border-top-color: #e74c3c;-webkit-animation: spin 3s linear infinite;animation: spin 3s linear infinite;} #loader:after {content: &quot;&quot;;position: absolute;top: 15px;left: 15px;right: 15px;bottom: 15px;border-radius: 50%;border: 3px solid transparent;border-top-color: #f9c922;-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */animation: spin 1.5s linear infinite;} @-webkit-keyframes spin {0% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */-ms-transform: rotate(360deg); /* IE 9 */transform: rotate(360deg);} } @keyframes spin { 0% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);} } #loader-wrapper .loader-section {position: fixed;top: 0;width: 51%;height: 100%;background: #222222;z-index: 1000;} #loader-wrapper .loader-section.section-left {left: 0;} #loader-wrapper .loader-section.section-right {right: 0;} #loader {z-index: 999999999999;} .loaded #loader-wrapper .loader-section.section-left {-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);transform: translateX(-100%);} .loaded #loader-wrapper .loader-section.section-right {-webkit-transform: translateX(100%);-ms-transform: translateX(100%);transform: translateX(100%);} .loaded #loader {opacity: 0;-webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;} .loaded #loader-wrapper .loader-section.section-right, .loaded #loader-wrapper .loader-section.section-left {-webkit-transition: all 0.3s 0.3s ease-out; transition: all 0.3s 0.3s ease-out;} .loaded #loader-wrapper {-webkit-transform: translateY(-100%);-ms-transform: translateY(-100%);transform: translateY(-100%);-webkit-transition: all 0.3s 0.6s ease-out; transition: all 0.3s 0.6s ease-out;} .loaded #loader-wrapper .loader-section.section-right, .loaded #loader-wrapper .loader-section.section-left {-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);} .loaded #loader-wrapper {-webkit-transform: translateY(-100%);-ms-transform: translateY(-100%);transform: translateY(-100%);-webkit-transition: all 0.3s 1s ease-out; transition: all 0.3s 1s ease-out;} </style> <script> $(document).ready(function() { setTimeout(function(){ $(&#39;body&#39;).addClass(&#39;loaded&#39;); }, 550); }); setTimeout(function(){ $(&#39;body&#39;).addClass(&#39;loaded&#39;); }, 10000); </script> <div id='loader-wrapper' style='z-index:99999999999999;'> <div id='loader'> </div> <div class='loader-section section-left'> </div> <div class='loader-section section-right'> </div> </div>

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

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

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

1. افتح بلوجر ثم اضغط على الصفحات. 
2. ثم انشاء صفحة جديدة. 
3.  واضغط  html   واضف هذا الكود:

<div dir="rtl" style="text-align: right;" trbidi="on"> <div class="the-text"> <h3> للإتصال بنا احرص على مراعاة القواعد</h3> <div class="postdescription"> أشكرك على رغبتك في مراسلتنا، لكن رجاءً قبل ذلك، اقرأ التالي :<br /> <i class="fa fa-dot-circle-o"></i> تأكد من كتابة عنوانك البريدي على وجهه الصحيح وتوضيح الرسالة.<br /> <i class="fa fa-dot-circle-o"></i> نقوم بعمل التبادل اعلاني مع جميع المواقع،قم بتقديم طلب من <a href="http://ha1pc.blogspot.com/" target="_blank">هنا</a>.<br /> <i class="fa fa-dot-circle-o"></i> لأي مشكل فالمرجو وضعه مباشرة على <a href="http://ha1pc.blogspot.com/" target="_blank">ركن الأسئلة</a>.<br /> <i class="fa fa-dot-circle-o"></i> لا نصمم قوالب للعملاء عملنا حر، نقوم بالتعديل عليها فقط.<br /> <i class="fa fa-dot-circle-o"></i> قم بكتابة الموضوع وسنرد عليك خلال 24 ساعة!<br /> <br /></div> <div class="hello-blog"> <h4> موقعنا</h4> </div> <div class="col-lg-6 wow fadeInLeft animated" id="google-map" style="visibility: visible;"> <iframe allowfullscreen="" frameborder="0" height="250" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1692.7191199026654!2d35.9229038!3d31.9490057!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x151b5f83601a3e29%3A0xfff765b46de974b9%26amp%3Boutput%3Dembed!2sThe+Rainbow+Art+House+Theater!5e0!3m2!1sar!2sjo!4v1453415074531" style="border: 0;" width="100%"></iframe> </div> <br /></div> <div class="the-form"> <div id="ha1pc_cntct_form"> <div class="wrap-me"> <form name="contact-form"> <span class="name-bg">الاسم الكريم</span><br /> <input class="contact-form-name animated wow flipInY delay-02s animated" id="ContactForm1_contact-form-name" name="name" placeholder="ادخل اسمك هنا..." size="30" style="visibility: visible;" type="text" value="" /><br /> <br /> <span class="email-bg">بريدك الالكتروني*</span><br /> <input class="contact-form-email animated wow flipInY delay-04s animated" id="ContactForm1_contact-form-email" name="email" placeholder="ادخل بريدك هنا..." size="30" style="visibility: visible;" type="text" value="" /><br /> <br /> <span class="message-bg">رسالتك*</span><br /> <textarea class="contact-form-email-message animated wow flipInY delay-06s animated" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="اكتب رسالتك هنا..." rows="5" style="visibility: visible;"></textarea><br /> <span class="send-bg"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="أرسل" /></span> <span class="clear-bg"><input class="contact-form-button contact-form-button-submit clear-button" type="reset" value="امسح الكل" /></span> <br /> <div style="max-width: 100%; text-align: center; width: 100%;"> <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div> </div> </form> <style> i.fa.fa-home { position: absolute; top: 156px; color: #Fff; left: 940px; } #google-map { width:442px; height:260px; border:4px solid #44C6A9; margin-bottom:10px; } .topwrapper ,#Header-wrapper ,#comments ,#sidebar-wrap {display:none;} [class*="col-"] {width:100%;} body {background-image:url(https://abs.twimg.com/images/themes/theme1/bg.png);background-attachment: fixed;background-repeat: no-repeat;background-color: #C0DEED;} .wrapper{box-shadow: 0px 0px 0px 25px rgba(40, 49, 56, 0.2); padding-bottom: 10px; padding-top: 10px;margin-top: 50px;border: none;margin-bottom: 50px;} .post-body img{margin:auto;} </style> <br /> <div class="other-cnt"> <div class="phone"> 06 38 897 79 962+ </div> <div class="emailtxt"> http://ha1pc.blogspot.com/ </div> </div> </div> </div> </div> <style> #contact-logo { margin: 0 auto!important; position: absolute!important; top: 110px!important; left: 43.5%!important; background: rgba(0, 0, 0, 0.35)!important; -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .07)!important; border-radius: 280px!important; height: 125px!important; } #contact-logo img { border-radius: 251px!important; width: 125px!important; height: 125px!important; background-color: #fff!important; border: 4px solid #fff!important; } .contact-info { width: auto!important; height: 100%!important; background: #fff!important; margin: 0 auto; border: 1px solid #ddd!important; display: block!important; overflow: hidden; } .contact-form-name, .contact-form-email, .contact-form-email-message { max-width: 1000px; } .contact-bg-inside { padding-bottom: 50px; } .contact-info-inside { padding-top: 50px; } .the-text { width: 50%; float: left; padding: 20px; text-align:justify; font-family: tahoma; } .the-form { width: 50%; float: right; padding: 20px; font-family: 'Noto Sans Kufi Arabic', sans-serif; } .the-text h3 { font-family: 'Noto Sans Kufi Arabic', sans-serif; } div#ha1pc_cntct_form .wrap-me { margin: 0 auto; display: block; padding: 30px 20px; background-color: #F3F3F3; width: 100% !important; border-top: 65px solid #E83E3B; box-sizing: border-box;box-shadow: 0 0 0 1px #cccccc inset; } div#ha1pc_cntct_form .wrap-me:before { content: '\f0e0'; position: absolute; font-family: FontAwesome; font-weight: normal; margin-top: -88px; margin-left: -35px; left: 75%; display: inline-block; font-size: 28px; width: 53px; height: 53px; border-radius: 50px; text-align: center; color: #FFFFFF; box-sizing: border-box; border: 2px solid #FFFFFF; line-height: 49px; } input#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email:hover, #ContactForm1_contact-form-email:active { padding: 5px; margin-top: 4px !important; box-shadow: none!Important; width: 100%; border: 1px solid #D2D2D2; line-height: 1em; min-height: 31px; background: #FEFEFE; font-family: tahoma; margin-bottom: 15px; } .contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover { padding: 5px; margin-top: 4px !important; box-shadow: none!Important; width: 100%; border: 1px solid #D2D2D2; line-height: 1em; min-height: 80px; background: #FEFEFE; font-family: tahoma; margin-bottom: 10px; } #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus { outline: none; background: #FFFFFF !important; color: #444; border-color: rgb(236, 235, 235) !important; box-shadow: 0 0 5px rgba(241, 241, 241, 0.7) !important; transition: all 0.3s ease-in-out !important; } .contact-form-button-submit:hover { color: #FFFFFF; background: #0083FF !important; } .contact-form-button-submit { background: #19B3EA; display: table; font-size: 17px; margin: 0 !important; border-radius: 0 !important; max-width: 100%; width: 100%; min-width: 100%; height: 32px; letter-spacing: 0.5px; font-family: 'Noto Sans Kufi Arabic', sans-serif; font-weight: normal; cursor: pointer; outline: none!important; color: #FFFFFF; border: 1px solid #fff !important; text-align: center; padding: 0px 0px 0px 15px; text-transform: capitalize; transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; } .contact-form-button-submit:focus, .contact-form-button-submit.focus { border-color: #FFFFFF; box-shadow: none !important; } .contact-form-error-message-with-border .contact-form-success-message { background: #f9edbe; border: 1px solid #f0c36d; bottom: 0; box-shadow: 0 2px 4px rgba(0,0,0,.2); color: #666; font-size: 12px; font-weight: bold; padding-bottom: 10px; line-height: 19px; margin-left: 0; opacity: 1; position: static; text-align: center; } .contact-form-button-submit.disabled, .contact-form-button-submit.disabled:hover, .contact-form-button-submit.disabled:active { opacity: 0.9; } .contact-form-error-message-with-border { background: #344148; border: 1px solid #5A5A5A; bottom: 0; box-shadow: none; color: #FDFDFD; font-size: 15px; font-weight: normal; line-height: 35px; margin-left: 0; opacity: 1; position: static; text-align: center; height: 35px; margin-top: 45px; } .contact-form-cross { height: 14px; margin: 5px; vertical-align: -8.5%; float: right; width: 14px; border-radius: 50px; border: 0 !important; cursor: pointer; } .contact-form-success-message-with-border { font-weight: normal; background-color: #344148; border: 1px solid #FFF; color: #FFF; line-height: 35px; margin-left: 0; font-size: 13px; opacity: 1; position: static; text-align: center; height: 35px; margin-top: 45px; } div#ha1pc_cntct_form span.name-bg { background-color: #E8F2FF; } div#ha1pc_cntct_form span.email-bg { background-color: #FFE8E8; } div#ha1pc_cntct_form span.name-bg, div#ha1pc_cntct_form span.email-bg {font-family:Electrolize,ge_ss_threeregular;font-weight: bold; display: inline-block; line-height: 21px; width: 100%; color: #696969; padding: 3px 5px; margin: 0px 0px 4px; box-sizing: border-box; height: 30px; border: 1px solid #E4E0E0; text-align: center; } div#ha1pc_cntct_form span.name-bg:before { content: '\f007'; background-color: #60A2FF; } div#ha1pc_cntct_form span.email-bg:before { content: '\f1fa '; background-color: #FF530B; } div#ha1pc_cntct_form span.name-bg:before, div#ha1pc_cntct_form span.email-bg:before, div#ha1pc_cntct_form span.message-bg:before { font-family: FontAwesome; text-align: center; margin: -4px 0 0px 0px; font-weight: normal; padding: 0; line-height: 27px; width: 28px; height: 28px; display: table; position: absolute; margin-right: -6px !important; border: 1px solid rgba(0, 0, 0, 0.1); border-right: 0 !important; color: #FFFFFF; } div#ha1pc_cntct_form span.message-bg {font-family:Electrolize,ge_ss_threeregular;font-weight: bold; background-color: #EBFFE8; display: inline-block; line-height: 21px; width: 100%; color: #696969; padding: 3px 5px; box-sizing: border-box; height: 30px; border: 1px solid #E4E0E0; margin: 0px 0px 4px; text-align: center; } div#ha1pc_cntct_form span.message-bg:before { content: '\f0e0'; background-color: #20CC00; } div#ha1pc_cntct_form span.send-bg { height: 32px; display: inline-block; float: left; max-width: 45%; width: 100%; margin-top: 15px; transition: all 0.4s ease-in-out !important; } div#ha1pc_cntct_form span.send-bg:before { content: '\f1d8'; } div#ha1pc_cntct_form span.send-bg:before, div#ha1pc_cntct_form span.clear-bg:before { font-family: FontAwesome; text-align: center; font-weight: normal; margin: 0; background-color: #344148; padding: 0; line-height: 27px; width: 30px; height: 31px; display: inline-block; position: absolute; border: 1px solid #fff; border-right: 0 !important; color: #FFFFFF; } div#ha1pc_cntct_form span.clear-bg { display: inline-block; float: right; margin-top: 15px; max-width: 45%; width: 100%; } div#ha1pc_cntct_form span.clear-bg:before { content: '\f021'; } input.contact-form-button.contact-form-button-submit.clear-button:hover { background-color: #E83434 !important; } div#ha1pc_cntct_form .clear-button { color: #FFFFFF; border: 1px solid #FFF !important; background-color: #FF2C2C; float: right; display: table; height: 32px; font-family: 'Noto Sans Kufi Arabic', sans-serif; }#ContactForm1 {display: none;} .phone{text-align: center;}.other-cnt{margin-right: 85%;float: right;margin-top: 70px;margin-bottom: -30px;color: #919191;} <style/></style></div>

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

مرحبا بكم اصدقائي متابعين مدونة محترفي الحاسوب في إضافة جديدة وهي ازرار او ايقونات المواقع الاجتماعية v2 بعد ان قمنا بوضع "أزرار المواقع الإجتماعية بشكلها الجديد v1" ووضعنا"أزرار المواقع الإجتماعية بشكلها الجديد v2"وكانت مكونة من مجموعة من المواقع وهي فيسبوك وتويتر وجوجل+ ويوتيوب وخمسات وrss وهي نفسها الموجودة في هذه الإضافة ولكن بشكل أخر ومواقع جديدة وتأثيرات أخرى اكثر إحترافية ☺

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

1. انتقل إلى لوح تحكم مدونتك،
2. إختر "تخطيط" ثم إضافة أداة ,ثم اختر HTML/Javascript
3. والآن الصق داخل المستطيل الكود التالي :

<div class="content"><div class="tl-socialicons"><div class="tl-socialInner"><!--Facebook--><div class="tl-social"><div class="tl-facebook tl-sinn"><a href="#" target="_blank" title="Facebook"><span class="tl-sicon"><i class="fa fa-facebook"></i></span><span class="tl-scount">3.7K</span></a></div></div><!--Google Plus--><div class="tl-social"><div class="tl-googleplus tl-sinn"><a href="#" target="_blank" title="Google Plus"><span class="tl-sicon"><i class="fa fa-google-plus"></i></span><span class="tl-scount">2K</span></a></div></div><!--Twitter--><div class="tl-social"><div class="tl-twitter tl-sinn"><a href="#" target="_blank" title="Twitter"><span class="tl-sicon"><i class="fa fa-twitter"></i></span><span class="tl-scount">2.4K</span></a></div></div><!--Instagram--><div class="tl-social"><div class="tl-instagram tl-sinn"><a href="#" target="_blank" title="Instagram"><span class="tl-sicon"><i class="fa fa-instagram"></i></span><span class="tl-scount">2K</span></a></div></div><!--Pinterest--><div class="tl-social"><div class="tl-pinterest tl-sinn"><a href="#" target="_blank" title="Pinterest"><span class="tl-sicon"><i class="fa fa-pinterest"></i></span><span class="tl-scount">9.5K</span></a></div></div><!--Youtube--><div class="tl-social"><div class="tl-youtube tl-sinn"><a href="#" target="_blank" title="YouTube"><span class="tl-sicon"><i class="fa fa-youtube"></i></span><span class="tl-scount">3.8K</span></a></div></div><!--Vine--><div class="tl-social"><div class="tl-vine tl-sinn"><a href="#" target="_blank" title="Vine"><span class="tl-sicon"><i class="fa fa-vine"></i></span><span class="tl-scount">3.3K</span></a></div></div><!--SoundCloud--><div class="tl-social"><div class="tl-soundcloud tl-sinn"><a href="#" target="_blank" title="SoundCloud"><span class="tl-sicon"><i class="fa fa-soundcloud"></i></span><span class="tl-scount">1.9K</span></a></div></div><!--VK--><div class="tl-social"><div class="tl-vk tl-sinn"><a href="#" target="_blank" title="VK"><span class="tl-sicon"><i class="fa fa-vk"></i></span><span class="tl-scount">2.9K</span></a></div></div><!----><div class="tl-social"><div class="tl-foursquare tl-sinn"><a href="#" target="_blank" title="Foursquare"><span class="tl-sicon"><i class="fa fa-foursquare"></i></span><span class="tl-scount">3.9K</span></a></div></div><!--GitHub--><div class="tl-social"><div class="tl-github tl-sinn"><a href="#" target="_blank" title="GitHub"><span class="tl-sicon"><i class="fa fa-github"></i></span><span class="tl-scount">3.9K</span></a></div></div><!--Dribbble--><div class="tl-social"><div class="tl-dribbble tl-sinn"><a href="#" target="_blank" title="Dribbble"><span class="tl-sicon"><i class="fa fa-dribbble"></i></span><span class="tl-scount">4.9K</span></a></div></div></div></div></div><style>/* Social Media */.list-unstyled{padding-Right:0;list-style:none;margin:2px}.list-inline li{display:inline-block;padding-right:5px;padding-Right:5px;margin-bottom:10px}.tl-colored-social .fa,.tl-social-icons .fa{font-size:16px}.tl-colored-social .fa,.tl-social-icons .fa{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}.tl-colored-social .fa,.tl-social-icons .fa{width:35px;height:35px;line-height:35px;text-align:center;color:#FFF;color:rgba(255,255,255,0.8)}.tl-colored-social.icon-circle .fa,.tl-social-icons.icon-circle .fa{border-radius:50%}.tl-colored-social.icon-rounded .fa,.tl-social-icons.icon-rounded .fa{border-radius:2px}.tl-colored-social.icon-flat .fa,.tl-social-icons.icon-flat .fa{border-radius:0}.tl-colored-social .fa:hover,.tl-colored-social .fa:active,.tl-social-icons .fa:hover,.tl-social-icons .fa:active{color:#FFF}.tl-colored-social.icon-zoom .fa:hover,.tl-colored-social.icon-zoom .fa:active,.tl-social-icons.icon-zoom .fa:hover,.tl-social-icons.icon-zoom .fa:active,.tl-social-sidebar li:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}.tl-colored-social.icon-rotate .fa:hover,.tl-colored-social.icon-rotate .fa:active,.tl-social-icons.icon-rotate .fa:hover,.tl-social-icons.icon-rotate .fa:active{-webkit-transform:scale(1.1) rotate(360deg);-moz-transform:scale(1.1) rotate(360deg);-ms-transform:scale(1.1) rotate(360deg);-o-transform:scale(1.1) rotate(360deg);transform:scale(1.1) rotate(360deg)}.tl-colored-social .fa-dribbble,.tl-social-icons .fa-dribbble:hover,.tl-socialicons .tl-dribbble:hover .tl-sicon{background-color:#F46899}.tl-colored-social .fa-stumbleupon,.tl-social-icons .fa-stumbleupon:hover{background-color:#eb4924}.tl-colored-social .fa-reddit,.tl-social-icons .fa-reddit:hover{background-color:#5f99cf}.tl-colored-social .fa-facebook,.tl-social-icons .fa-facebook:hover,.tl-socialicons .tl-facebook:hover .tl-sicon{background-color:#3C599F}.tl-colored-social .fa-rss,.tl-social-icons .fa-rss:hover{background-color:#f26522}.tl-colored-social .fa-lastfm,.tl-social-icons .fa-lastfm:hover{background-color:#d51007}.tl-colored-social .fa-flickr,.tl-social-icons .fa-flickr:hover{background-color:#FF0084}.tl-colored-social .fa-instagram,.tl-social-icons .fa-instagram:hover,.tl-socialicons .tl-instagram:hover .tl-sicon{background-color:#685243}.tl-colored-social .fa-foursquare,.tl-social-icons .fa-foursquare:hover,.tl-socialicons .tl-foursquare:hover .tl-sicon{background-color:#0086BE}.tl-colored-social .fa-github,.tl-social-icons .fa-github:hover,.tl-socialicons .tl-github:hover .tl-sicon{background-color:#070709}.tl-colored-social .fa-google-plus,.tl-social-icons .fa-google-plus:hover,.tl-socialicons .tl-googleplus:hover .tl-sicon{background-color:#CF3D2E}.tl-colored-social .fa-instagram,.tl-social-icons .fa-instagram:hover{background-color:#A1755C}.tl-colored-social .fa-linkedin,.tl-social-icons .fa-linkedin:hover{background-color:#0085AE}.tl-colored-social .fa-pinterest,.tl-social-icons .fa-pinterest:hover,.tl-socialicons .tl-pinterest:hover .tl-sicon{background-color:#CC2127}.tl-colored-social .fa-twitter,.tl-social-icons .fa-twitter:hover,.tl-socialicons .tl-twitter:hover .tl-sicon{background-color:#32CCFE}.tl-colored-social .fa-vk,.tl-social-icons .fa-vk:hover,.tl-socialicons .tl-vk:hover .tl-sicon{background-color:#375474}.tl-colored-social .fa-soundcloud,.tl-social-icons .fa-soundcloud:hover,.tl-socialicons .tl-soundcloud:hover .tl-sicon{background-color:#FF4100}.tl-colored-social .fa-vine,.tl-social-icons .fa-vine:hover,.tl-socialicons .tl-vine:hover .tl-sicon{background-color:#35B57C}.tl-colored-social .fa-xing,.tl-social-icons .fa-xing:hover{background-color:#00555C}.tl-colored-social .fa-youtube,.tl-social-icons .fa-youtube:hover,.tl-socialicons .tl-youtube:hover .tl-sicon{background-color:#C52F30}.top-social ul li{margin:0;padding:0}div#socialicons-top{float:right}.top-social .list-unstyled{margin:0}.tl-socialicons{text-align:center;overflow:auto;font-size:22px;margin:0 -8px}.tl-socialicons .tl-socialInner{position:relative;overflow:hidden;padding-Right:8px}.tl-socialicons .tl-social{float:right;width:25%}.tl-socialicons .tl-sinn{padding-right:8px}.tl-socialicons .tl-sinn:hover .tl-sicon{color:#fff}.tl-socialicons .tl-sicon{display:block;padding:10px 0;}.tl-socialicons .tl-facebook .tl-sicon{color:#3B5998}.tl-socialicons .tl-googleplus .tl-sicon{color:#DD4B39}.tl-socialicons .tl-twitter .tl-sicon{color:#2AA9E0}.tl-socialicons .tl-instagram .tl-sicon{color:#685243}.tl-socialicons .tl-pinterest .tl-sicon{color:#CC2028}.tl-socialicons .tl-youtube .tl-sicon{color:#DE1829}.tl-socialicons .tl-vine .tl-sicon{color:#35B57C}.tl-socialicons .tl-soundcloud .tl-sicon{color:#FF4100}.tl-socialicons .tl-vk .tl-sicon{color:#45668e}.tl-socialicons .tl-foursquare .tl-sicon{color:#f94877}.tl-socialicons .tl-github .tl-sicon{color:#333333}.tl-socialicons .tl-dribbble .tl-sicon{color:#ea4c89}.tl-socialicons .tl-sicon{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease}.tl-socialicons .tl-scount{display:block;color:#eeeeee;background:#3d3d3d;padding:5px 0;position:relative;margin-bottom:8px;font-size:14px;font-weight:600}.tl-socialicons .tl-scount:after{bottom:100%;Right:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(238,238,238,0);border-bottom-color:#2e2e2e;border-width:4px;margin-Right:-4px}</style>

1. داخل القالب تحرير html 
2. ابحت عن هدا الوسم   <head/> تم ضع الكود التالي فوقه:

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

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