خدمات الموقع
المزيد

اضافة اداة مواضيع عشوائية فى السايدبار



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


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

  1. ادهب الى لوحة التحكم ثم تحرير "HTML"  
  2. ابحث عن كلمة  <head/>  واضف فوقه مباشراً الكود التالي
<script type='text/javascript'> /*<![CDATA[* function jazairiwebgrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+jazairiweb_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+jazairiweb_thumbs+'" height="'+jazairiweb_thumbs+'"/>',p=jazairiweb_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))} /*]]>*/</script>

  1. ابحث عن كلمة  <b:skin/>  واضف فوقه مباشراً الكود التالي
 .recent-gallery {padding:0;clear:both;} .recent-gallery:after {content:&quot;&quot;;display:table;clear:both;} .recent-gallery .gallerytem{width: 80px;display:block;float:right;position:relative;margin:2px;overflow:hidden;padding:0} .recent-gallery .gallerytem a{position:relative;float:right;margin:0;overflow:hidden;text-decoration:none} .recent-gallery .gallerytem .ptitle{background:rgba(255,255,255,.95);display:block;clear:right;font-size:11px;line-height:1.3em;position:absolute;text-align:right;bottom:0;left:0;right:0;top:0;color:#444;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;transform:translate(-79px,0);backface-visibility:hidden;transition:all .2s} .recent-gallery .gallerytem:hover .ptitle{visibility:visible;transform:translate(0,0)} .recent-gallery a img{background:#fdfdfd;float:right;transition:all .3s} #HTML2 .widget-content {text-align:center;}

  1. اضف الكود التالي في التخطيط داخل ادات html  
<script> var jazairiweb_thumbs = 80; var jazairiweb_title = true; </script> <script src="/feeds/posts/summary?max-results=10&amp;alt=json-in-script&amp;callback=jazairiwebgrid"/></script>

اضافة هيدر جزائري ويب بشكل انيق لمدونة بلوجر



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



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

  1. ادهب الى لوحة التحكم ثم تحرير "HTML"  
  2. ابحث عن كلمة  <b:skin/>  واضف فوقه مباشراً الكود التالي
#header-wrap_JW {width: 1170px;background: #4A5667 url(); background-size: cover; margin: 0 auto; height: 240px; margin-bottom: 5px; margin-top: 10px; border: 5px solid #fff; overflow: hidden;}.titlewrapper-jazairiweb {margin: 20px; text-align: center; font-weight: normal; color: rgb(255, 255, 255); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.01) 1%,rgba(255, 255, 255, 0.35) 50%,rgba(255, 255, 255, 0) 100%); font-size: 26.3px; font-family: ge_dinar_tworegular; } #pb-footer { margin: auto; background: none; } #pb-footer h2 { margin-bottom: 20px; font-size: 16px; color: #fff; font-family: ge_dinar_tworegular; } #pb-footer h2:before {content: none; position: none; padding:none; background: none; color: none; line-height: none; } .footer-section { padding: 10px; border-left: 1px dashed #BFBFBF; font-weight: normal;float: right;width: 250px; } .footer-section:last-child { border: none; } .footer-section p { width: 160px; color: #BFBFBF;direction: rtl; text-align: justify; font-family: ge_dinar_tworegular; font-size: 12px; line-height: 16px; } .footer-section h4 { font-family: ge_dinar_tworegular;text-align: right; width: 300px; margin-bottom: 5px; margin-top: 5px; font-size: 13px; font-weight: normal; direction: ltr;color: #BFBFBF;} .pdn--vm { padding-top: 10px; padding-bottom: 21px; } .text-center { text-align: center; } .mrg--an { margin: 0;font-family: ge_dinar_tworegular;color: #fff;} #team { margin: 0 auto;text-align: center; }#team img {height: 60px;width: 60px;border-radius: 30px; border: 1px solid #ddd; margin-left: 15px; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #team img:hover { border-color: #3A4755; opacity: 0.80;box-shadow: 0px 0px 18px 18px rgba(80, 80, 80, 0);-webkit-transform: translateY(-4px); transform: translateY(-4px);}

  1. اضف الكود التالي في المكان الدي تراه مناسب لمدونتك
<header class='jazairiweb_wrap_jazairiweb' id='header-wrap_JW'> <div class='titlewrapper-jazairiweb '> جزائري ويب | تجمع لافضل القوالب و الملحقات المتنوعة</div> <div id='pb-footer'> <div class='footer-section'> <h2>موقع جزائري ويب!</h2> <p>مرحبا بزوار الكرام أتمنى أن تجدوا ما تبحثون عنه في | جزائري ويب</p></div> <div class='footer-section'> <h2>الدعم التقني</h2> <h4>jazairiweb@gmail.com</h4> <h4>skype : jazairiweb</h4></div> <div class='footer-section'> <h3 class='profile-name mrg--an'> فريق العمل: مدير الموقع فقط </h3> <div id='team'> <a href='https://www.facebook.com/jazairiweb.ok' target='_blank'><img alt='avatars-000116083896-j1l4i3-t500x500' src='http://a.top4top.net/p_104oqh53.png'/></a> <a href='http://jazairiweb.blogspot.com/p/join.html'><img alt='unknown-person' src='http://a.top4top.net/p_104oqh53.png' title='unknown-person'/></a> <a href='http://jazairiweb.blogspot.com/p/join.html'><img alt='unknown-person' src='http://a.top4top.net/p_104oqh53.png' title='unknown-person'/></a></div></div> <div class='footer-section'> <h2>اشترك الآن</h2> <h4>اشترك لتصلك كل المسابقات! أفضل وأرقى القوالب من بلوجر و اضافات و تصاميم وصولا للملفات المفتوحة&#1548; منها كذلك ملحقات متنوعة, كما اقدم هدايا عديدة</h4> </div></div> <div class='descriptionwrapper'> <p class='description'><span> </span></p></div> </header>

إضافة أداة النشرة البريدية وعمل الخلاصة RSS



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


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

  1. ادهب الى لوحة التحكم ثم تحرير "HTML"  
  2. ابحث عن كلمة  <b:skin/>  واضف فوقه مباشراً الكود التالي
/* Subscribe Box */ #subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px solid #eee;} .subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%} .subscribe-form{clear:both;display:block;overflow:hidden} form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden} .subscribe-css-email-field{background:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0;font-family: Electrolize,ge_dinar_tworegular;} .subscribe-css-email-button{ background: #E74C3C;color: #fff;cursor: pointer;font-weight: 700;padding: 11px 30px;text-transform: none;font-size: 16px;border: 0;border-radius: 3px;transition: all .6s;font-family: Electrolize,ge_dinar_tworegular;margin-right: 15px;} .subscribe-css-email-button:hover{background:#37b185;} #subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;font-family: Electrolize,ge_dinar_tworegular;} #subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s} #subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase} #subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none} #subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s} #subscribe-css:hover p.subscribe-note span:before{width:100%;}

  1. ضع الكود التالي في المكان الدي يناسبك
<div id='subscribe-css'> <p class='subscribe-note'><span>إشترك</span> <span class='itatu'> فى </span>النشرة البريدية</p> <div class='subscribe-wrapper'> <div class='subscribe-form'> <form action='http://feedburner.google.com/fb/a/mailverify?uri=jazairiweb' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=jazairiweb&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='jazairiweb'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='ضع بريدك الأكلترونى هنا'/><input class='subscribe-css-email-button' title='' type='submit' value='إشترك'/></form> </div> </div> </div>
يوجد فى هذا الكود الأخير كلمة jazairiweb مكرره ثلاث مرات
 سوف تقوم بتغييرها برابط الخلاصة التى سوف تقوم بعملها لموقعك.


اضافة تاثير الظل Hover لصور الموضوع بتقنية css



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


شرح طريقة التركيب :
  1. خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
  2. ادهب الى لوحة التحكم ثم تحرير "HTML"  
  3. ابحث عن كلمة  <b:skin/>  واضف فوقه مباشراً الكود التالي
.post-body img {padding: 2px; border-radius: 2px; box-shadow: 1px 30px 30px -26px #A9A7A7; border: 1px solid #D8D8D8; background: linear-gradient(to bottom,#fefefe 0%,#EDEDED 100%); }

تحميل اكواد ميتا تاج جزائري ويب لسنة 2016




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


شرح طريقة التركيب :
  1. ادهب الى لوحة التحكم ثم تحرير "HTML"  
  2. ابحث عن كلمة  <head>  والصق الاكواد التالية اسفلها :
  3. وغير ما يناسبك مثل: كلمات دلاليةاسم الدولةتعريف المدونة.....الخ.
  4. لا تنسى حدف الاكواد السابقة الموجودة في القالب.
<meta content='template blogger , template wordpress , Domaine Free gratuit , قوالب بلوجر احترافية 2015,قوالب احترافية و معربة 2015,تصميم و تطوير بلوجر, بلوجر,oriflame products' name='keywords'/> <meta content='jazairiweb@gmail.com' name='Email'/> <meta content='width=device-width, initial-scale=1' name='viewport'/> <meta content='width=device-width, maximum-scal=1' name='viewport'/> <meta content='width=device-width, user-scalable=1' name='viewport'/> <meta content='موقع جزائري ويب' name='copyright'/> <meta content='jazairiweb.officialpage' property='fb:page'/> <meta content='@jazairiweb' name='twitter:site'/> <meta content='all' name='robots'/> <meta content='index, follow' name='robots'/> <meta content='Houssem Teffahi' name='author'/> <meta content='Arabic' name='lang|uage'/> <meta content='Algeria' name='country'/> <meta content='94F92F726D2F8A5CB1B2AD7A099D6BC8' name='msvalidate.01'/> <meta charset='utf-8'/> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='blogger' name='generator'/> <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/> <meta content='IE=edge,IE=10,IE=EmulateIE10,IE=9,IE=EmulateIE9,IE=8,IE=EmulateIE8,IE=7,IE=EmulateIE7' http-equiv='X-UA-Compatible'/> <link href='https://plus.google.com/+جزائري-ويب' rel='author'/>

اضافة شريط التحميل في المدونة مثل يوتيوب



اضافة شريط التحميل في المدونة مثل يوتيوب
السلام عليكم ورحمة الله وبركاته اضافة شريط التحميل في المدونة مثل يوتيوب
 الان اصبح شريط التحميل من اهم الإضافات في المواقع و المدونات و اكثر المواقع شعبية تستعمل هذه الاضافة و وظيفته يظهر عندما تكون الصفحة في وضع التحميل و يختفي عند انتهاء تحميل الصفحة.


 معاينة الاضافة موجودة على الموقع ماعدا الرئيسية :
  1. اذهب الى لوحة التحكم ثم تحرير "HTML"  
  2. وابحث عن كلمة  <body/>  والصق الاكواد التالية فوقها :
<script type='text/javascript'> //<![CDATA[ var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width= a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el, k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}(); var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100); //]]> </script>

اضافة جميلة لمدونات بلوجر من تصميم جزائري ويب



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



كود الخط الاجنبي هدية مني لكم:

@font-face { font-family: 'Niconne'; font-style: normal; font-weight: 400; src: local('Niconne'), local('Niconne-Regular'), url(http://fonts.gstatic.com/s/niconne/v6/at9nZeERhG1mh4D7CWUJzfY6323mHUZFJMgTvxaG2iE.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;} /* latin */ @font-face { font-family: 'Niconne'; font-style: normal; font-weight: 400; src: local('Niconne'), local('Niconne-Regular'), url(http://fonts.gstatic.com/s/niconne/v6/Ci0yFRBPDqtg7EHO7VR0Zw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;}


شرح طريقة التركيب + معاينة الاضافة من هنا  :
  1. اذهب الى لوحة التحكم ثم تحرير "HTML"  
  2. وابحث عن كلمة  <head/>  والصق الاكواد التالية فوقها :
<style> #header-wrap_slider {background: linear-gradient(45deg, #34495E 0%,#F74047 100%);margin: auto 0; height: 250px; margin-bottom: 5px; margin-top: 10px; border: 5px solid #fff; overflow: hidden;}.titlewrapper-jazairiweb {margin: 20px; text-align: center; font-weight: normal; color: rgb(255, 255, 255); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.01) 1%,rgba(255, 255, 255, 0.35) 50%,rgba(255, 255, 255, 0) 100%); font-size: 26.3px; font-family: Electrolize,ge_dinar_tworegular; }#header-wrap_info { background: #fff; margin: auto 0; height: auto; overflow: hidden;margin-top: 15px; } </style> 

<style> .letter-jazairiweb { height: 215px; margin: 0; z-index: 99999; margin-top: 48px;}.letter-jazairiweb h2 { font-family: Niconne,ge_dinar_tworegular; letter-spacing: 3px; text-align: center; }.letter-jazairiweb h2 a:first-child { font-family: Niconne,ge_dinar_tworegular; } .letter-jazairiweb h2 a { display: block; font-size: 130px; line-height: 122px; margin-bottom: -34px;}.letter-jazairiweb h2 a span:nth-child(1) { animation-delay: 0s; moz-animation-delay: 0s; ms-animation-delay: 0s; webkit-animation-delay: 0s; } .letter-jazairiweb h2 a span { animation: sharpen .9s linear backwards; color: #fff; moz-animation: sharpen .9s linear backwards; moz-transition: all .3s linear; ms-animation: sharpen .9s linear backwards; ms-transition: all .3s linear; opacity: 1; o-transition: all .3s linear; text-shadow: 0 0 2px #fff,1px 1px 4px rgba(0,0,0,.7); transition: all .3s linear; webkit-animation: sharpen .9s linear backwards; webkit-transition: all .3s linear; }.letter-jazairiweb h2 a span:nth-child(2) { animation-delay: .1s; moz-animation-delay: .1s; ms-animation-delay: .1s; webkit-animation-delay: .1s; }.letter-jazairiweb h2 a span:nth-child(4) { animation-delay: .3s; moz-animation-delay: .3s; ms-animation-delay: .3s; webkit-animation-delay: .3s; }.letter-jazairiweb h2 a span:nth-child(3) { animation-delay: .2s; moz-animation-delay: .2s; ms-animation-delay: .2s; webkit-animation-delay: .2s; }.letter-jazairiweb h2 a:last-child { font-family: Niconne,ge_dinar_tworegular; font-size: 35px!important; } </style>

  1. وهدا كود الاضافة ضعه في المكان الدي يناسبك :
<b:if cond='data:blog.url == data:blog.homepageUrl'> <header class='jazairiweb_wrap_jazairiweb wow animated bounce' id='header-wrap_slider'> <div id='poster'> <div class='letter-jazairiweb' id='letter-jazairiweb'> <h2> <a href='/'><span class='char1'>JazairiWeb</span><span class='char2'> </span> <span class='char3'>2016</span><span class='char4'> </span> </a><a href='/' style='font-size:52px'> <span class='char1'>مرحبا </span> <span class='char2'/> <span class='char3'>بك </span> <span class='char4'/> <span class='char5'>في </span> <span class='char6'/> <span class='char7'>موقع </span> <span class='char8'/> <span class='char9'>جزائري </span> <span class='char10'/> <span class='char11'>ويب </span> </span></span></span></span></span></a></h2></div></div> </header> </b:if>


 لتشغيل تاثير اللمعان فقط ضع الكود التالي اسفل   <b:skin/>  
<link href='https://googledrive.com/host/0B2v7cH8soLJrOWlYOG9LSEY0eGs' rel='stylesheet' type='text/css'/>

تغير شكل التسميات في بلوجر الشكل السابق



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


شرح طريقة التركيب + معاينة الاضافة من هنا  :
    1. إذهب الى لوحة التحكم ثم تحرير "HTML"  
    2. وابحث عن كلمة  <head/>  والصق فوقها الكود التالي :
    3. ملاحظة: ادا وضعت هده الاضافة من قبل,, قم بحدفها اولا
<style> /* CSS label */ .label-size {display: inline-block;} .label-size {position:relative;text-transform:none;text-decoration:none;font-size:13px;font-family:cursive;color:#fff!important;} .label-size a {width: 140px;color:#233442;font-weight:400;padding: 5px 5px; background: #FFF;border-bottom: 1px solid #eee;float:right;display:block;text-align: right;} .label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5,.label-size-6{font-size:100%;} .label-size a:before {content: "\f02c";font-family: FontAwesome;font-style: normal;font-weight: normal; text-decoration: none;padding-left: 4px;color: #38424b;transition: .3s linear;float: right;} .label-size a:before:hover{color:#D64738} .label-count{font-size: 85%;display: inline-block; position: absolute; top: 5px; left: 8px; background: #FC5400; color: #fff; white-space: nowrap; padding: 0; width: 25px; height: 22px; line-height: 22px; border-radius: 4px; text-align: center; z-index: 1; transition: all .3s;} .label-size:hover .label-count{opacity:1;visibility:visible;left:5px} .label-size a:hover{color:#D64738;} </style>

اضافة كود التبادل الاعلاني V2 من تصميم جزائري ويب



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


شرح تركيب + معاينة الاضافة من هنا  :
    1. داخل القالب تحرير html 
    2. فوق هذا الوسم  <head/>  نضع الكود التالي:
<style> .LinkList h2::before {content: &quot;\f005&quot; !important;} .LinkList ul { list-style: outside none none; margin: 0; padding: 0;} .LinkList li a { border-left: 3px solid #DCDCDC; background-color: #E7E7E7; box-shadow: 0 1px 0 4px #fff; color: #2D3E50; display: block; float: right; height: 40px; line-height: 40px; margin-bottom: 5px; text-align: center; width: 316px;text-decoration: none;} .LinkList li a:before { content: &#39;\f127&#39;; font-family: FontAwesome; font-style: normal; font-weight: normal; right: 0;float: right;color: #FFF; background: #456B8E; padding-left: 7px; padding-right: 7px;transition: all 0.3s linear; } .LinkList li a:hover { background-color: #F74047;color:#fff;} .LinkList li a:after { content: &#39;&#39;; margin-top: 10px; border: 10px solid transparent; border-right-color: #456B8E; float: right;} .LinkList li a:hover:before{padding-left: 17px; padding-right: 17px;transition: all 0.3s linear;content: &#39;\f105&#39;;font-family: FontAwesome;} </style>

    1. داخل التخطيط على ادات جديدة  HTML/JavaScript  نضع الكود التالي:
<ul><div class='widget LinkList' style='list-style: none;' id='LinkList1'> <li><a href="http://www.elmwso3a.com/" target="_blank"> موسوعة المعلوميات</a></li> <li><a href="http://www.i3lm.com/" target="_blank">موسوعة المعلومات</a></li> <li><a href="http://qaisi1web.blogspot.com/" target="_blank"> القيسي ويب | الافضل لكم </a></li> <li><a href="http://www.th3littleprofessor.com/" target="_blank">البروفيسور الصغير</a></li> <li><a href="http://www.almohtarifdz.com/" target="_blank">المحترف الجزائري للمعلوميات</a></li> <li><a href="http://profmasterissam.blogspot.com/" target="_blank">اورتيلكس للمعلوميات</a></li> <li><a href="#style="background:#F74047;color:#fff;" target="_blank"> ضع رابط مدونتك هنا</a></li> <li><a href="#style="background:#F74047;color:#fff;" target="_blank"> ضع رابط مدونتك هنا</a></li> </div></ul><div class="clear"></div>

اضافة كود التبادل الاعلاني V1 من تصميم جزائري ويب



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


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

<style>
@-webkit-keyframes goyang{ from,to{-webkit-transform:scale(1,1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95,1.05);transform:scale(.95,1.05)}} @keyframes goyang{ from,to{-webkit-transform:scale(1, 1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95, 1.05);transform:scale(.95, 1.05)}}
.LinkList h2::before {content: &quot;\f005&quot; !important;} .LinkList ul { list-style: outside none none; margin: 0; padding: 0;} .LinkList li a { background-color: #E7E7E7; box-shadow: 0 1px 0 4px #fff; color: #2D3E50;text-decoration: none; display: block; float: right; height: 40px; line-height: 40px; margin-bottom: 5px; text-align: center; width: 316px;}.LinkList li a:before { content: &#39;\f039&#39;; font-family: FontAwesome; font-style: normal; font-weight: normal; right: 0;float: right;color: #FFF; background: #456B8E; padding-left: 5px; padding-right: 5px; }.LinkList li a:hover { background-color: #F74047;color:#fff;transition:0.4s;-webkit-animation: goyang .5s;
-moz-animation: goyang .5s;-ms-animation: goyang .5s;-o-animation: goyang .5s;animation: goyang .5s;}
</style>

    1. داخل التخطيط على ادات جديدة  HTML/JavaScript  نضع الكود التالي:
<ul><div class='widget LinkList' style='list-style: none;' id='LinkList1'> <li><a href="http://www.elmwso3a.com/" target="_blank"> موسوعة المعلوميات</a></li> <li><a href="http://www.i3lm.com/" target="_blank">موسوعة المعلومات</a></li> <li><a href="http://qaisi1web.blogspot.com/" target="_blank"> القيسي ويب | الافضل لكم </a></li> <li><a href="http://www.th3littleprofessor.com/" target="_blank">البروفيسور الصغير</a></li> <li><a href="http://www.almohtarifdz.com/" target="_blank">المحترف الجزائري للمعلوميات</a></li> <li><a href="http://profmasterissam.blogspot.com/" target="_blank">اورتيلكس للمعلوميات</a></li> <li><a href="#" style="background:#F74047;color:#fff;" target="_blank"> ضع رابط مدونتك هنا</a></li> <li><a href="#" style="background:#F74047;color:#fff;" target="_blank"> ضع رابط مدونتك هنا</a></li> </div></ul><div class="clear"></div>

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



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


شرح و كيفية تركيب + معاينة الاضافة من هنا  :
    1. داخل القالب تحرير html 
    2. فوق هذا الوسم  <b:skin/>  نضع الكود التالي:
 .jazairiwebauthor img:nth-child(1){margin:0;padding:0} .jazairiwebauthor img{float:right;height:125px;width:125px;margin-left:15px} .jazairiwebauthor{background:#FCFCFC;border-left:1px solid #DDDDDD;font-family:Droid Arabic Kufi;overflow:hidden;padding:0 0 0 5px;border-bottom:1px solid #DDDDDD} .jazairiwebauthor h3{background:#00ACED;color:#FFF;font-size:15px;margin:0 125px 0 -9px;padding:6px;line-height:27px} .jazairiwebauthor p{color:#141823;font-size:13px;margin-bottom:0;margin-top:5px;padding-right:131px;text-align: right;Line-Height:22px} .jazairiwebauthor .fa-user{margin-left:4px} .jazairiwebauthor .fa-info-circle{margin-left:1px} #jazairiwebaucohv{float:left;padding-left:10px;margin-top:4px} #jazairiwebaucohv a{color:#fff} #jazairiwebaucohv a:hover{color:#fff} #jazairiwebaucohv .fa{margin-right:3px} .fa-share-alt{color:#30B7EF} .jazairiweb-tooltip{position:relative;display:inline-block} .jazairiweb-tooltip:before,.jazairiweb-tooltip:after{position:absolute;opacity:0;z-index:1000;pointer-events:none} .jazairiweb-tooltip:hover:before,.jazairiweb-tooltip:hover:after{opacity:1} .jazairiweb-tooltip:before{content:'';position:absolute;background:transparent;border:4px solid transparent;position:absolute} .jazairiweb-tooltip:after{content:attr(data-jazairiweb-tooltip)!important;background:#555;color:#fff;padding:6px 8px;font-size:11px!important;font-family:Droid Arabic Kufi;white-space:nowrap;border-radius:2px;-webkit-backface-visibility:hidden;margin-left:initial} .jazairiweb-tooltip-top:before{bottom:140%;left:10%;margin:0 0 -9px;border-top-color:#555} .jazairiweb-tooltip-top:after{bottom:125%;left:10%;margin:0 0 3px -10px !important} .jazairiweb-tooltip-bottom:before{top:100%;left:50%;margin:-6px 0 0;border-bottom-color:#555} .jazairiweb-tooltip-bottom:after{top:100%;left:50%;margin:6px 0 0 -10px} .jazairiweb-tooltip-right:before{left:100%;bottom:50%;margin:0 0 -4px 4px;border-right-color:#555} .jazairiweb-tooltip-right:after{left:100%;bottom:50%;margin:0 0 -13px 12px} .jazairiweb-tooltip-left:before{right:100%;bottom:50%;margin:0 0 -4px;border-left-color:#555} .jazairiweb-tooltip-left:after{right:100%;bottom:50%;margin:0 8px -18px 0}

        1. قوق هذا الوسم  <data:post.body/>  نضع الكود التالي:
      <div class='jazairiwebauthor'><img alt='الكاتب : حسام تفاحي' src='https://lh3.googleusercontent.com/-yS8uGVZ0GKw/VOJaUePmjOI/AAAAAAAABM0/UBeFNmD7I_A/s100-no/imohamed.png'/><h3><i class='fa fa-user'></i>الكاتب : حسام تفاحي<ul id='jazairiwebaucohv'>
      <a class='jazairiweb-tooltip jazairiweb-tooltip-right' data-jazairiweb-tooltip='
      موقعي الإلكتروني' href='http://www.dabourphone.com' target='_blank'><i class='fa fa-globe'></i></a><a class='jazairiweb-tooltip jazairiweb-tooltip-right' data-jazairiweb-tooltip='حسابي في شبكة فيسبوك' href='https://www.facebook.com/mohamed.ibrahim.2036' rel='nofollow' target='_blank'><i class='fa fa-facebook'></i>
      </a><a class='jazairiweb-tooltip jazairiweb-tooltip-right' data-jazairiweb-tooltip='حسابي في شبكة تويتر' href='https://www.twitter.com/' rel='nofollow' target='_blank'><i class='fa fa-twitter'></i>
      </a><a class='jazairiweb-tooltip jazairiweb-tooltip-right' data-jazairiweb-tooltip='حسابي في شبكة جوجل بلس' href='https://plus.google.com/u/0/+iMohamedAbodia/posts' rel='nofollow' target='_blank'><i class='fa fa-google-plus'></i></a>
      </ul></h3><p><i class='fa fa-info-circle'></i> أنا حسام تفاحي عمري 22 سنة من الجزائر ولاية سكيكدة. خبير في مجال عالم البلوجر ومهتم بجديد أخبار التقنية والتدوين الإلكتروني. ويمكنك متابعتي عبر الروابط التالية... </p></div><div class='jazairiweb2-3' style='border-top-color:rgb(221,221,221);border-top-style:dashed;border-width:2px 0 0;box-sizing:border-box;font-family:inherit;font-style:inherit;font-weight:inherit;margin:16px 0px 0;outline:0;padding:14px 0 0;text-align:center;vertical-align:baseline;'></div>

      خدمات مدفوعة مقابل $5

      المزيد

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