علاء الغزالي للمعلوميات

2020-01-12T08:46:00.000-08:00

#footerr {
background-color: #3E454C; bottom: 0;
color: #7C8EA1;
font: normal .9em 'Open Sans', sans-serif;
right: 0;
padding: 18px 0;
width: 100%;
}
#footerr a {
color: #7C8EA1; text-decoration: none;
}
#footerr a:hover {
color: #FFF;
}
.inner-wrapper {
margin: auto;
max-width: 1200px;
width: 90%;
}
#copyright {
display: inline-block;
padding: 10px 0;
}
#footer-logo {
margin: 0 5px 0 0; vertical-align: middle;
}
.site-name {
font-weight: 600;
color: #FFF;
}
.social-menu {
display: inline-block;
float: left;
/* by: www.madad2.com */ line-height: 0;
margin: 0;
padding: 0;
}
.social-menu > li{
background-color: #353B41; border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 34px;
margin: 3px;
transition: background-color .5s;
width: 34px;
}
.social-menu > li:hover {
background-color: #F2762E;
}
.clear {
clear: both;
}
@media (max-width: 767px) {
#footer-container {
text-align: center;
}
#copyright {
display: block !important;
}
.social-menu {
float: none !important;
}
}

[ CSS ] عند الضغط على الزر ينبثق صندوق

2018-07-11T13:44:00.001-07:00

[ CSS ] عند الضغط على الزر ينبثق صندوق

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته.

[ CSS ] عند الضغط على الزر ينبثق صندوق

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

معاينه

الكود :

<section class="background">
<a href="#open-modal" class="button">الكاتب</a>
<div id="open-modal" class="modal__background"> <div class="modal__content">
<a href="#close" title="Close" class="close">
<svg x="0px" y="0px" viewbox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<g id="Layer_3">
<path d="M34.421,24.02l13.318-13.268c0.188-0.187,0.294-0.44,0.294-0.706c0-0.266-0.104-0.52-0.292-0.708
l-8.983-9.018c-0.187-0.187-0.441-0.293-0.707-0.294c0,0-0.001,0-0.001,0c-0.265,0-0.519,0.104-0.706,0.292L24.027,13.587
L10.759,0.267c-0.187-0.187-0.441-0.293-0.707-0.294c0,0-0.001,0-0.001,0c-0.265,0-0.519,0.104-0.706,0.292L0.328,9.248
c-0.392,0.39-0.393,1.023-0.003,1.414L13.593,23.98L0.274,37.248c-0.391,0.39-0.392,1.023-0.003,1.414l8.983,9.018
c0.187,0.188,0.441,0.293,0.707,0.294h0.002c0.265,0,0.518-0.104,0.705-0.292l13.318-13.267l13.268,13.318
c0.195,0.196,0.452,0.294,0.708,0.294c0.255,0,0.511-0.097,0.706-0.292l9.017-8.982c0.392-0.39,0.393-1.022,0.003-1.414
L34.421,24.02z"/>
</path></g>
</svg>
</a>
<h2>اهلا وسهلا بكم في مدونة علاء الغزالي </h2>
<img class="success" src="https://d.top4top.net/p_922ioq810.png"/>
<p>مدونة علاء الغزالي : مدونة تقنية تحتوى على مجموعة دروس ودورات فى مجالات تقنية مختلفة مثل دروس انظمة التشغيل والبرامج والالعاب وبلوجر وفوتوشوب وتطبيقات اندوريد والربح من الانترنت وغيره من الشروحات المميزة تاست مدونة علاء الغزالي عام 2015 وبفضل الله نالت اعجاب الكثير مؤسس المدونة علاء الغزالي مدون العراق توصل بجديد المواضيع
<img class="success" src="https://b.top4top.net/p_922cimht0.png"/>
</p>
</div>
</div>
<style>
@import url(http://fonts.googleapis.com/css?family=Montserrat:700);
.button{
direction: rtl;
font: 100 12px tahoma,arial
}
.modal__background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: 0.10s;
transition: 0.10s;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
pointer-events: none;
z-index: 2;
direction: rtl;
font: 100 12px tahoma,arial
}
.modal__background:target {
opacity: 1;
pointer-events: auto;
}
.background {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
background: #243750;
height: 15vh;
width: 100vw;
}
.button {
-webkit-transition: 0.10s;
transition: 0.10s;
background: #fff;
border-radius: 4px;
color: #FF0014;
display: block;
margin: auto;
padding: 1rem;
text-decoration: none;
}
.button:hover {
background: #008cff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
color: #fff;
}
.modal__content {
background: #fff;
padding: 1rem;
position: relative;
z-index: 4;
}
@media screen and (max-width: 699px) {
.modal__content {
margin: 2rem;
}
}
@media screen and (min-width: 700px) {
.modal__content {
margin: 4rem auto;
max-width: 200px;
min-height: 100px;
}
}
.modal__content svg,
.modal__content path {
position: absolute;
top: 1rem;
right: 1rem;
height: 15px;
width: 15px;
-webkit-transition: all 0.15s ease-out 0s;
transition: all 0.15s ease-out 0s;
fill: #C01818;
}
.modal__content svg:hover,
.modal__content path:hover {
fill: #0c0c0c;
}
h2 {
color: #008cff;
font-family: tahoma,Montserrat,sans-serif;
font-size: 20px;
margin: 0rem 0 1rem;
text-align: center;
}
.success {
width: 100%;
}
</style></section>

صناديق بحث جميله لمدونات بلوجر جديد

2018-07-11T10:07:00.000-07:00

صناديق بحث جميله لمدونات بلوجر جديد

بسم الله الرحمن الرحيم
والصلآة والسلآم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله وصحبه افضل الصلآة واتم التسليم
السلآم عليكم ورحمة الله وبركاته

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

صورة :

.========================

كيف اضيف صناديق البحث في مدونة بلوجر ؟

ادخل الى لوحة تحكم مدونتك في بلوجر > التخطيط .
اضغط على اضافة اداة .
اختر من القائمه HTML/JavaScript .
اختر احد هذه الصناديق التي في الاسفل والصق كودها .

.=======================

الصندوق الاول

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtbo8mTaXEx66FFBi7n9c9IToDoborxgudVAFEFicghFy7OVvr7YNoggvDl11ImEhGOny6KAu9p45nKCGFfH4vhbDJkbtY2wCup1oqWzRzw0-UaD3DowBWfr1aYV3s_P-veo69ZrDMTLdW/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form action="/search" id="w2b-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" type="text" value="Search..." />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>

الصندوق الثاني

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGb8U9ArO1cTWjnNgqTKTbg3Wr_GK5vZyklerXcz2HgMpzoBXWKTkkgAuJC8pTqcPuXiVMz3C2THUPAXwH4drEH0h1Y0J7w-fjmZPM0kKRE81xEcPYVulTT63xgyvU5TGvF9pqGEEeUUd9/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form action="/search" id="w2b-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" type="text" value="Search..." />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>

الصندوق الثالث

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjaBVdBTBh196fye_tPrWAQ_tPVf95tddQXiiOSpHJHi-wUX0A2E7GBJHxq0Nr335xt3I6sKv5mDqsCMqQw7HZnlJnBaW9fSzMP_VTEa3f6bLic-mg4Fz_xtyWALJ9n4kH6EXvwAzgQs9-/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form action="/search" id="w2b-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" type="text" value="Search..." />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>

الصندوق الرابع

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMSHRtiqV855u-1ro38TAnqX2vsjRgJ5wXbQ2rTiWX430SdvdkNP0E_V-EKSaioRzdHFQh5dM4_LwAUGKFX4lRgqfQzkSi3T54_wLYvcbw8D2EXDEzc7v9nMv-w3jRScL959UpaaKHDY3f/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form action="/search" id="w2b-searchform" method="get">
<input id="s" name="q" type="text" value="" />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>

الصندوق الخامس

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm-5IK828IR79O9ukevYyfo0-AGUAiAmuCPgERNfeuBvV0BjyQvp7zdXbVmN8Tvyu0EXujbveZfkT_zAXfJ0oJ0uS884anlB1QJUv-F0ZNEBiM6VZqm-ic_1-Mhq4smOBM44zgtUcNV20A/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form action="/search" id="w2b-searchform" method="get">
<input id="s" name="q" type="text" value="" />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>

الصندوق السادس

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoc-oNUhjjyABxJAf-RGbzTFSk9Gl5mOVpheCl0c4o57efA47BjOpWZR-7d4SiA6dTzieLZwmu3sc44fkNJLZm7gmjIIAwY3FCFZNSkxQvvGVJU-sBaYpqBrVexzVTROWkON5D3Tgt_Uzg/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form action="/search" id="w2b-searchform" method="get">
<input id="s" name="q" type="text" value="" />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>

قائمة احترافيه CSS3 تحت الهيدر للموقع مع خاصيه الهوفر

2018-07-11T09:21:00.000-07:00

قائمة احترافيه CSS3 تحت الهيدر للموقع مع خاصيه الهوفر

قائمة احترافيه CSS3

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

قائمة احترافيه CSS3 تحت الهيدر للموقع مع خاصيه الهوفر

قائمة جميلة مصممه بالـ CSS3 مناسبة انشاءالله لجميع المواقع والمدونات , ايضاَ قمت بدمج خط احترافي معها غير الخطوط العاديه كي اجع منظرها اجمل .

صورة :

قائمة احترافيه CSS3

مثال مباشر : من هنا

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

ادخل مدونتك .
التخطيط .
اختر المكان الذي تريد اضافة الاداة فيه .
اختر اداة عباره عن HTML/JAVASCRIPT .
الصق الكود التالي بها مع تغير علامه الشباك برابط الخاص بك

<ul class="big_nav">
<li><a class="hdr_navi" href="#" id="home">الرئيسية</a></li>
<li><a class="hdr_navi" href="#" id="twitr">تويتر</a></li>
<li><a class="hdr_navi" href="#" id="ggl">جوجل بلس</a></li>
<li><a class="hdr_navi" href="#" id="face" rel="nofollow">فيس بوك</a></li>
</ul>
<style>
.big_nav {
float: left;
width: 408px;
}
ol, ul {
list-style: none;
}
.big_nav li {
float: right;
margin-left: 7px;
margin-bottom: 7px;
}
a#home {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -322px #df517f;
}
a#home:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -64px -322px #ffffff;
}
a#twitr {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -73px #973b86;
}
a#twitr:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -73px #ffffff;
}
a#ggl {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -235px #ed8629;
}
a#ggl:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -235px #ffffff;
}
a#face {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat 24px -151px #df517f;
}
a#face:hover {
background: url('https://lh3.googleusercontent.com/-sEETGu1m69U/UyRbX0o3TgI/AAAAAAAAAHs/_Pb9cTT_sQs/icns.png') no-repeat -60px -151px #ffffff;
}
.big_nav li .hdr_navi:hover {
background-color: #ffffff;
color: #df517f;
}
a:hover, body a:hover {
color: #df517f;
text-decoration: none;
}
a {
text-decoration: none;
}
.big_nav li .hdr_navi {
display: block;
height: 35px;
width: 95px;
background: url('img/big_ics.png') no-repeat -202px 33px #2ad0ff;
color: #fff;
font-family: goth;
font-size: 14px;
text-align: center;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
-ms-transition: all 600ms ease;
transition: all 600ms ease;
padding-top: 60px;
}
@font-face {
font-family: 'goth';
src: url(//:) format('no404'), url('https://jetara.googlecode.com/svn/trunk/DroidKufi-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>

قائمة منسدلة تقنية أحترافيه بأستخدام CSS3 والجيكوري - أربع الوان

2018-07-11T07:56:00.001-07:00

قائمة منسدلة تقنية أحترافيه بأستخدام CSS3 والجيكوري - أربع الوان

قائمة منسدلة تقنية أحترافيه

قائمة منسدلة تقنية أحترافيه بأستخدام CSS3 والجيكوري

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

اولا: معاينة مباشرة للقائمة

القائمة متوفره بأربع الوان اختر مايناسبك منها ثم اتبع الاتي :

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

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

الشكل الاول " الرمادي :

صورة :

قائمة مسندلة احترافيه لون رمادي

الكود:

#menu {
width: 100%;
max-width: 1000px;
margin: 0 auto;
background: #222;
display: inline-block;
border-bottom: 5px solid #4D4D4D;
height: 45px;
}
#menu  ul {
  padding:0;
  margin:0;
  list-style:none;
  position:relative; //مهمة
}
#menu > ul > li {
  float:right;
  padding:0;
  margin:0 0 -7px 0;
}
#menu > ul > li > a {
display: block;
min-width: 50px;
text-align: center;
padding: 10px 15px 10px 15px;
text-decoration: none;
color: #FFF;
font: 13px 'DroidKufi-Regular';
}
#menu > ul > li > a:hover {
background: #5C5B5B;
border-bottom: #5C5B5B;
}
#menu > ul > li > ul {
  position:absolute;
  top:49px;
  display:none;
  margin-left: -60px;
}
#menu > ul > li > ul > li > a {
background: #5C5B5B;
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFF;
border-bottom: 1px solid #575757;
min-width: 130px;
text-align: right;
font: 12px 'DroidKufi-Regular';
}
#menu > ul > li > ul > li > a:hover {
background: #222;
border-bottom: 1px solid #202020;
}
.gghfg a {
width: 48px !important;
min-width: 48px !important;
height: 25px;
background: #5C5B5B !important;
padding: 10px;
}
</style>

الشكل الثاني " أحمر " :

صورة :

قائمة مسندلة احترافيه لون أحمر

الكود :

#menu {
width: 100%;
max-width: 1000px;
margin: 0 auto;
background: #222;
display: inline-block;
border-bottom: 5px solid #DD395A;
height: 45px;
}
#menu  ul {
  padding:0;
  margin:0;
  list-style:none;
  position:relative; //مهمة
}
#menu > ul > li {
  float:right;
  padding:0;
  margin:0 0 -7px 0;
}
#menu > ul > li > a {
display: block;
min-width: 50px;
text-align: center;
padding: 10px 15px 10px 15px;
text-decoration: none;
color: #FFF;
font: 13px 'DroidKufi-Regular';
}
#menu > ul > li > a:hover {
background: #CC173B;
border-bottom: 4px solid #DD395A;
}
#menu > ul > li > ul {
  position:absolute;
  top:49px;
  display:none;
  margin-left: -60px;
}
#menu > ul > li > ul > li > a {
background: #CC173B;
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFF;
border-bottom: 1px solid #DD395A;
min-width: 130px;
text-align: right;
font: 12px 'DroidKufi-Regular';
}
#menu > ul > li > ul > li > a:hover {
background: #222;
border-bottom: 1px solid #202020;
}
.gghfg a {
width: 48px !important;
min-width: 48px !important;
height: 25px;
background: #CC173B !important;
padding: 10px;
}
</style>

الشكل الثالث " أزرق " :

صورة :

قائمة مسندلة احترافيه لون أزرق

الكود :

#menu {
width: 100%;
max-width: 1000px;
margin: 0 auto;
background: #222;
display: inline-block;
border-bottom: 5px solid #4BCDF7;
height: 45px;
}
#menu  ul {
  padding:0;
  margin:0;
  list-style:none;
  position:relative; //مهمة
}
#menu > ul > li {
  float:right;
  padding:0;
  margin:0 0 -7px 0;
}
#menu > ul > li > a {
display: block;
min-width: 50px;
text-align: center;
padding: 10px 15px 10px 15px;
text-decoration: none;
color: #FFF;
font: 13px 'DroidKufi-Regular';
}
#menu > ul > li > a:hover {
background: #39B8E9;
border-bottom: 4px solid #4BCDF7;
}
#menu > ul > li > ul {
  position:absolute;
  top:49px;
  display:none;
  margin-left: -60px;
}
#menu > ul > li > ul > li > a {
background: #39B8E9;
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFF;
border-bottom: 1px solid #4BCDF7;
min-width: 130px;
text-align: right;
font: 12px 'DroidKufi-Regular';
}
#menu > ul > li > ul > li > a:hover {
background: #222;
border-bottom: 1px solid #202020;
}
.gghfg a {
width: 48px !important;
min-width: 48px !important;
height: 25px;
background: #39B8E9 !important;
padding: 10px;
}
</style>

الشكل الرابع " أخضر " :

صورة :

قائمة مسندلة احترافيه لون اخضر

الكود :

#menu {
width: 100%;
max-width: 1000px;
margin: 0 auto;
background: #222;
display: inline-block;
border-bottom: 5px solid #42E27C;
height: 45px;
}
#menu  ul {
  padding:0;
  margin:0;
  list-style:none;
  position:relative; //مهمة
}
#menu > ul > li {
  float:right;
  padding:0;
  margin:0 0 -7px 0;
}
#menu > ul > li > a {
display: block;
min-width: 50px;
text-align: center;
padding: 10px 15px 10px 15px;
text-decoration: none;
color: #FFF;
font: 13px 'DroidKufi-Regular';
}
#menu > ul > li > a:hover {
background: #2ABD5F;
border-bottom: 4px solid #42E27C;
}
#menu > ul > li > ul {
  position:absolute;
  top:49px;
  display:none;
  margin-left: -60px;
}
#menu > ul > li > ul > li > a {
background: #2ABD5F;
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFF;
border-bottom: 1px solid #42E27C;
min-width: 130px;
text-align: right;
font: 12px 'DroidKufi-Regular';
}
#menu > ul > li > ul > li > a:hover {
background: #222;
border-bottom: 1px solid #202020;
}
.gghfg a {
width: 48px !important;
min-width: 48px !important;
height: 25px;
background: #2ABD5F !important;
padding: 10px;
}
</style>

اضافة ازرار التواصل الاجتماعي بتأثيرات مذهله

2018-07-11T06:29:00.000-07:00

اضافة ازرار التواصل الاجتماعي بتأثيرات مذهله

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته.

اضافة ازرار التواصل الاجتماعي بتأثيرات مذهله

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

مثال مباشر :

صورة :

الاكواد :

اكواد html :

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul class="social-nav model-0">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-1">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-2">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-3">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-4">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-5">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-6">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-7">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-8">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-9">
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="facebook"> <i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" class="pinteres"><i class="fa fa-pinterest-p"></i></a></li></ul><br/>
<ul class="social-nav model-3d-0">
<li><a href="#" class="twitter">
<div class="front"><i class="fa fa-twitter"></i></div>
<div class="back"><i class="fa fa-twitter"></i></div></a></li>
<li><a href="#" class="facebook">
<div class="fornt"><i class="fa fa-facebook"></i></div>
<div class="back"><i class="fa fa-facebook"></i></div></a></li>
<li><a href="#" class="google-plus">
<div class="front"><i class="fa fa-google-plus"></i></div>
<div class="back"><i class="fa fa-google-plus"></i></div></a></li>
<li><a href="#" class="linkedin">
<div class="front"><i class="fa fa-linkedin"></i></div>
<div class="back"><i class="fa fa-linkedin"></i></div></a></li>
<li><a href="#" class="pinteres">
<div class="front"><i class="fa fa-pinterest-p"></i></div>
<div class="back"><i class="fa fa-pinterest-p"></i></div></a></li></ul><br/>
<ul class="social-nav model-3d-1">
<li><a href="#" class="twitter">
<div class="front"><i class="fa fa-twitter"></i></div>
<div class="back"><i class="fa fa-twitter"></i></div></a></li>
<li><a href="#" class="facebook">
<div class="fornt"><i class="fa fa-facebook"></i></div>
<div class="back"><i class="fa fa-facebook"></i></div></a></li>
<li><a href="#" class="google-plus">
<div class="front"><i class="fa fa-google-plus"></i></div>
<div class="back"><i class="fa fa-google-plus"></i></div></a></li>
<li><a href="#" class="linkedin">
<div class="front"><i class="fa fa-linkedin"></i></div>
<div class="back"><i class="fa fa-linkedin"></i></div></a></li>
<li><a href="#" class="pinteres">
<div class="front"><i class="fa fa-pinterest-p"></i></div>
<div class="back"><i class="fa fa-pinterest-p"></i></div></a></li></ul><br/>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

اكواد css :

@import "compass/css3";
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
font-family:arial;
}
body{
background: #404040;;
padding:0;
margin:0;
text-align: center;
font-family: arial;
color: #fff;
}
/*=====================*/
$fb-cl:#3B579D;
$twt-cl:#00ACED;
$gp-cl:#DD4A3A;
$in-cl:#007BB6;
$pin-cl:#CB2026;
@function shadow($color) {
$val: 0px 0px $color;
@for $i from 1 through 30 {
$val: #{$val}, #{$i}px #{$i}px #{$color};
}
@return $val;
}

.social-nav{
padding: 0;
list-style: none;
display: inline-block;
margin:10px auto;
li{
display: inline-block;
}
a {
display: inline-block;
float: left;
width: 48px;
height: 48px;
font-size: 20px;
color: #FFF;
text-decoration: none;
cursor: pointer;
text-align: center;
line-height: 48px;
background: #000;
position: relative;
@include transition(.5s);
}
}

.model-0{
position: absolute;
@include transition(.5s);
left:0;
top: 50px;
li{
float: none;
display: block;
}
a{
&:hover{
padding-left: 20px;
width:65px;
}
}
.twitter{ background:$twt-cl}
.facebook{ background:$fb-cl}
.google-plus{background:$gp-cl}
.linkedin{background:$in-cl}
.pinterest{ background:$pin-cl}
}
.model-1{
li{margin:0 2px ;}
a{
background: #fff;
@include transition(transform 1s, background .4s);
@include border-radius(100%);
&:hover{
@include translateY(-10px);
}
}
.twitter{ color:$twt-cl}
.facebook{color:$fb-cl}
.google-plus{color:$gp-cl;}
.linkedin{color:$in-cl}
.pinterest{color:$pin-cl}
}
.model-2{
a{
overflow: hidden;
font-size: 26px;
@include border-radius(4px);
margin:0 5px;
&:hover{
background: #fff;
@include text-shadow( shadow(darken(#eee, 10%)));
}
}

.twitter{
background:$twt-cl;
@include text-shadow( shadow(darken($twt-cl, 10%)));
&:hover{color:$twt-cl;}
}
.facebook{
background:$fb-cl;
@include text-shadow( shadow(darken($fb-cl, 10%)));
&:hover{ color:$fb-cl}
}
.google-plus{
background:$gp-cl;
@include text-shadow( shadow(darken($gp-cl, 10%)));
&:hover{ color:$gp-cl}
}
.linkedin{
background:$in-cl;
@include text-shadow( shadow(darken($in-cl, 10%)));
&:hover{ color:$in-cl}
}
.pinterest{
background:$pin-cl;
@include text-shadow( shadow(darken($pin-cl, 10%)));
&:hover{ color:$pin-cl}
}
}
.model-3{
margin-bottom: 50px;
a{
background: #fff;
@include transition(padding .4s);
margin: 0 5px;
&:after{
content: '';
position: absolute ;
border:24px solid #fff;
z-index: -1;
border-bottom-color:transparent !important;
left: 0;
top:60%;
@include transition(transform .4s);
}
&:hover{
color: #fff;
padding-top: 10px;
&:after{
@include translateY(10px);
}
}
}

.twitter{
color:$twt-cl;
&:hover{ background:$twt-cl;
&:after{border-color: $twt-cl}
}
}
.facebook{
color:$fb-cl;
&:hover{ background:$fb-cl;
&:after{border-color: $fb-cl}
}
}
.google-plus{
color:$gp-cl;
&:hover{ background:$gp-cl;
&:after{border-color: $gp-cl}
}
}
.linkedin{
color:$in-cl;
&:hover{ background:$in-cl;
&:after{border-color: $in-cl}
}
}
.pinterest{
color:$pin-cl;
&:hover{ background:$pin-cl;
&:after{border-color: $pin-cl}
}
}
}
.model-4{
li{margin:0 2px ;}
a{
background:none;
line-height: 1.5;
font-size: 32px;
@include text-shadow(0px 0px 1px );
&:hover{
@include text-shadow(0px 0px 25px );
}
}
.twitter{ color:$twt-cl}
.facebook{color:$fb-cl}
.google-plus{color:$gp-cl;}
.linkedin{color:$in-cl}
.pinterest{color:$pin-cl}
}
.model-5{
li{float: left;}
a{background: #222;}
.twitter:hover{ color:$twt-cl}
.facebook:hover{color:$fb-cl}
.google-plus:hover{color:$gp-cl}
.linkedin:hover{color:$in-cl}
.pinterest:hover{color:$pin-cl}
}
.model-6{
li{float: left;}
a{
&:hover{background: #fff;}
}
.twitter{
background:$twt-cl;
&:hover{ color:$twt-cl}
}
.facebook{
background:$fb-cl;
&:hover{ color:$fb-cl}
}
.google-plus{
background:$gp-cl;
&:hover{color:$gp-cl}
}
.linkedin{
background:$in-cl;
&:hover{ color:$in-cl}
}
.pinterest{
background:$pin-cl;
&:hover{ color:$pin-cl}
}
}
.model-7{
li{margin:0 10px ;}
a{
background: none;
@include box-shadow(0 0 4px 3px);
@include text-shadow(0 0 1px #333);
@include transition(transform .4s, background .4s);
@include border-radius(100%);
.fa{ @include transition(transform 1s)}
&:hover{
background: #fff;
.fa{ @include transform( rotate(-10deg) scale(3))}
}
}
.twitter{ color:$twt-cl}
.facebook{color:$fb-cl}
.google-plus{color:$gp-cl;}
.linkedin{color:$in-cl}
.pinterest{color:$pin-cl}
}
.model-8{
a{
background: #FFF;
&:hover{
@include box-shadow(0 48px 0 inset);
&> .fa{color:#fff}
}
}
.twitter{
color:$twt-cl;
&:hover{ color:$twt-cl}
}
.facebook{
color:$fb-cl;
&:hover{color:$fb-cl}
}
.google-plus{
color:$gp-cl;
&:hover{ color:$gp-cl}
}
.linkedin{
color:$in-cl;
&:hover{ color:$in-cl}
}
.pinterest{
color:$pin-cl;
&:hover{color:$pin-cl}
}
}
.model-9{
li{margin:0 10px ;}
a{
color: #fff;
overflow: hidden;
@include border-radius(100%);
&:hover{
background: #fff;

}
}
.twitter{
background:$twt-cl;
&:hover{ color:$twt-cl}
}
.facebook{
background:$fb-cl;
&:hover{ color:$fb-cl}
}
.google-plus{
background:$gp-cl;
&:hover{color:$gp-cl}
}
.linkedin{
background:$in-cl;
&:hover{ color:$in-cl}
}
.pinterest{
background:$pin-cl;
&:hover{ color:$pin-cl}
}
}
.model-3d-0{
a {
background: #333;
float: left;
margin:0 10px;
@include transform-style(preserve-3d);
&:hover {
@include rotateX(-90deg);
.fornt{ @include backface-visibility (hidden);}
.back{ @include backface-visibility (visible);}
}
}
.front , .back{
width: 48px;
height: 48px;
background: #333;
position: absolute;
top: 0;
left: 0;
@include translateZ(18px);
@include backface-visibility (visible);
}
.back {
font-size: 32px;
@include transform(rotateX(90deg) translateZ(18px));
@include backface-visibility (hidden);
}
.twitter .back { background: $twt-cl }
.facebook .back { background: $fb-cl }
.google-plus .back { background: $gp-cl}
.linkedin .back { background: $in-cl}
.pinterest .back { background: $pin-cl}
}
.model-3d-1{
a {
background: #fff;
color:#666;
float: left;
margin:0 10px;
@include border-radius(100%);
&:hover {
color: #fff;
@include rotateY(-180deg);
.fornt{ @include backface-visibility (hidden);}
.back{ @include backface-visibility (visible);}
}
}
.front , .back{
width: 48px;
height: 48px;
position: absolute;
top: 0;
left: 0;
@include border-radius(100%);
@include backface-visibility (visible);
}
.back {
@include rotateY(-180deg);
@include backface-visibility (hidden);
}
.twitter .back { background: $twt-cl }
.facebook .back { background: $fb-cl }
.google-plus .back { background: $gp-cl}
.linkedin .back { background: $in-cl}
.pinterest .back { background: $pin-cl}
}

اكواد js وتوضع في اخر

</body>

<script>
$(window).scroll(function(){
var navTop = $(window).scrollTop();
$('.model-0').css("top", navTop + 50);
});
</script>

طريقة تحويل التسميات والصفحات الى قائمة منسدله لمدونات بلوجر

2018-07-09T12:48:00.000-07:00

طريقة تحويل التسميات والصفحات الى قائمة منسدله لمدونات بلوجر

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

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

طريقة تحويل التسميات والصفحات الى قائمة منسدله لمدونات بلوجر

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

اقرا ايضا : طريقة وضع وحدات إعلانية فى الشريط الجانبي بشكل احترافي

صورة من الإضافة

طريقة تحويل التسميات والصفحات الى قائمة منسدله لمدونات بلوجر

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

الأن بعد وضع الإضافة التى تريده او الإضافتين فى التخيطيط فى مدونتك سوف تتابع معى الشرح .

طريقة تحويل التسميات الى قائمة منسدله لمدونات بلوجر

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

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

<b:widget id='Label1' locked='false' title='الأقسام' type='Label' version='1'> <b:widget-settings> <b:widget-setting name='sorting'>ALPHA</b:widget-setting> <b:widget-setting name='display'>LIST</b:widget-setting> <b:widget-setting name='selectedLabelsList'/> <b:widget-setting name='showType'>ALL</b:widget-setting> <b:widget-setting name='showFreqNumbers'>false</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'> <b:loop values='data:labels' var='label'> <option expr:value='data:label.url'> <data:label.name/></option> </b:loop> </select> </div> </b:includable> </b:widget>

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

اقرا ايضا : طريقة فهرسة المواضيع مع الموقع أو المدونة فى محركات البحث Bing و Yahoo

طريقة تحويل الصفحات الى قائمة منسدله لمدونات بلوجر

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

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

<b:widget id='PageList1' locked='false' title='الصفحات' type='PageList' version='1'> <b:widget-settings> <b:widget-setting name='pageListJson'><![CDATA[{'3055799429595839769': {'href': 'https://wdbloog.blogspot.com/p/photoshop.html', 'title': 'فوتوشوب Photoshop اون لاين', 'position': 0}, '7168048324172533865': {'href': 'https://wdbloog.blogspot.com/p/blog-page_87.html', 'title': 'الإعلان على عالم المدون', 'position': 1}, '6703719989949366384': {'href': 'https://wdbloog.blogspot.com/p/index.html', 'title': 'فهرس عالم المدون', 'position': 2}, '6540983174536766983': {'href': 'https://wdbloog.blogspot.com/p/cssminifierbackgroundecf0f1positionrela.html', 'title': 'ضغط أكواد CSS', 'position': 3}, '1918760950852243376': {'href': 'https://wdbloog.blogspot.com/p/blog-page_98.html', 'title': 'محول الأكواد', 'position': 4}, '3520800301624924652': {'href': 'https://wdbloog.blogspot.com/p/request-additions-or-templates.html', 'title': 'أطلب قالب أو إضافة', 'position': 5}, '7724567441770860254': {'href': 'https://wdbloog.blogspot.com/p/commentssidebar-wrapper.html', 'title': 'إتصل بنا', 'position': 6}, '3456452093345761229': {'href': 'https://wdbloog.blogspot.com/p/blog-page_55.html', 'title': 'تطبيق عالم المدون - حمل التطبيق الأن', 'position': 7}, '7284174226634163784': {'href': 'https://wdbloog.blogspot.com/p/abdocr251gmail.html', 'title': 'Privacy Policy | سياسة الخصوصية', 'position': 8}, '5079376903104552129': {'href': 'https://wdbloog.blogspot.com/p/blog-page_7.html', 'title': 'الدعم الفنى المجانى الخاص بـ عالم المدون', 'position': 9}, '3374182273395115140': {'href': 'https://wdbloog.blogspot.com/p/blog-page_22.html', 'title': 'أكواد الألوان', 'position': 10}, '7648486801065244535': {'href': 'https://wdbloog.blogspot.com/p/blog-page_42.html', 'title': 'شروط الإستخدام وحقوق النشر', 'position': 11}, '5109231328155110337': {'href': 'https://wdbloog.blogspot.com/p/blog-page_49.html', 'title': 'مكتبة اكواد الالوان', 'position': 12}, '8545795064800921729': {'href': 'https://wdbloog.blogspot.com/p/blog-page_35.html', 'title': 'التبليغ عن رابط معطوب', 'position': 13}}]]></b:widget-setting> <b:widget-setting name='homeTitle'>الصفحة الرئيسية</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'> <b:loop values='data:links' var='link'> <option expr:value='data:link.href'> <data:link.title/></option> </b:loop> </select> </div> </b:includable> </b:widget>

مع الحرص ايضا على عدم تكرار معرفة الإضافة PageList1فى مدونتك حتى لا تحدث مشكلة فى حفظ المظهر وايضا يمكنك تكرار هذا الأمر مع أكثر من إضافة.

اقرا ايضا : تحميل برنامج فوتوشوب Photoshop CC 2018 اخر أصدار كامل مجانا

هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .

اضافة رساله تنبيه لمدونات بلوجر بلغة الماتيريال ديزاين

2018-07-09T09:20:00.001-07:00

اضافة رساله تنبيه لمدونات بلوجر بلغة الماتيريال ديزاين

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

اضافة رساله تنبيه لمدونات بلوجر بلغة الماتيريال ديزاين

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

صورة مصغرة من الإضافة

اضافة رساله تنبيه لمدونات بلوجر بلغة الماتيريال ديزاين

شرح التركيب

أول أبحث عن هذا الوسم

]]></b:skin>

ثم وقم بوضع الكود التالى فوقه.

/* Material Design Dialog Box wdbloog.blogspot.com/ */ a.waves-light.close-sf{font-size:14px;color:#fff} .blanternotif,.matilampu{visibility:hidden;opacity:0} .blanternotif{background:#fff;position:fixed;padding:25px;top:15%;transition:all .3s ease-in-out;max-width:450px;left:35%;z-index:99;border-radius:4px;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)} .blanternotif button{border:none;position:absolute;margin-top:17px;right:30px;cursor:pointer;background:#e8e8e8;padding-left:7px;outline:0} a.waves-light.close-sf{background:#3949ab;margin-top:15px;display:inline-block;padding:10px 13px;border-radius:3px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);float:right;text-transform:uppercase} .matilampu{position:fixed;top:0;background:rgba(0,0,0,.59);left:0;right:0;bottom:0;margin:0;z-index:97;transition:all .4s ease-in-out} .blantertitle{margin-bottom:15px} .blanternotif.aktif,.matilampu.aktif{visibility:visible;opacity:1} .blanternotif.aktif{top:20%} .icx{position:absolute;top:10px;left:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwJN9jX3qi6WFyaGzpl6sxlM6s7KWR8cue3HT0nosjuVu-7cAd44RLoAiEPWkSt28D1yPctxnDGL2YFZgXfo45djoGFUmpYaxHR98eFXG0EVyHH_0jr9HPJZUXy-NQNhrwfl4Bkm2d2rY/s1600/mdclose.png)no-repeat;background-size:15px;margin:10px 8px;width:15px;height:15px} .notiftext{font-size:14px;line-height:1.5} a.shownotif {background: #3949ab;margin-top: 15px;display: inline-block;padding: 10px 13px;border-radius: 3px;box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);float: right;text-transform: uppercase;color: #fff;} @media screen and (max-width:768px){.blanternotif{left:10%;right:10%}}

الأن أبحث عن الوسم

</body>

ثم قم وضع الكود التالى فوقه

<div class='blanternotif'> <div class='blantertitle'>تنبية</div> <div class='notiftext'> هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى</div> <a class='waves-effect waves-light close-sf' href='javascript:;' title='Done'>حسنا</a> <a class='waves-effect icx close-sf' href='javascript:;'></a> </div> <div class='matilampu'></div> <script type='text/javascript'> $(document).ready(function(){$(".close-sf").click(function(){$(".blanternotif,.matilampu").removeClass("aktif")})}),$(document).ready(function(){$(".shownotif").click(function(){$(".blanternotif,.matilampu").toggleClass("aktif")})}); </script>

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

<li><a class='shownotif' href='javascript:;' title='تنبيه'>تنبيه</a></li>

بعد ذلك سوف يكون عليك تغيير العبارات فى الأكواد السابق بما تريده وبعدها قم بحفظ القالب ومبروك عليك الاضافة الجديد فى مدونتك.

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

اضافة احترافيه بـ 5 أقسام تعمل يدويا بتاثير رائع جدا

2018-07-09T08:54:00.001-07:00

اضافة احترافيه بـ 5 أقسام تعمل يدويا بتاثير رائع جدا

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

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

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

صورة من الإضافة

شرح التركيب

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

سوف تقوم أول شئ بالبحث عن هذا الوسم فى قالب مدونتك

]]></b:skin>

ثم تقوم بوضع الكود التى فوقه.

.tabs-frame {

width: 100%;
overflow: hidden;
height: 440px;
}
.tabs-frame .tab {
position: relative;
float: right;
width: 50px;
height: 50px;
margin-right: 16px;
}
.tabs-frame .tab .radio {
    display: none;
}
.tabs-frame .tab .tab-button {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 15px;
height: 15px;
margin: auto;
border-radius: 100%;
border: 0 double #fff;
background: #009688;
display: block;
-webkit-transition: .15s linear;
}
.tabs-frame .tab .radio:checked + .tab-button {
    border: 6px double #d4d9e1;
    background: #fc6e51;
}
.tabs-frame .tab .tab-button:hover {
    background: #fc6e51;
}
.tabs-frame .tab .tab-frame {
position: absolute;
top: 100%;
right: 0;
width: 310px;
border-radius: 5px;
background: #01579B;
display: block;
opacity: 0;
visibility: hidden;
z-index: 0;
text-align: justify;
line-height: normal;
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .3);
-webkit-transition: opacity .3s linear, -webkit-transform .3s linear;
-webkit-transform: translate(0, -10%);
}
section#tab_frame_2 {
right: -65px;
}
section#tab_frame_3 {
right: -132px;
}
section#tab_frame_4 {
right: -200px;
}
section#tab_frame_5 {
right: -265px;
}
.tabs-frame .tab .tab-frame:before {
content: '';
position: absolute;
top: -6px;
left: 0;
right: 0;
width: 0;
height: 0;
margin: auto;
border-width: 0 6px 6px;
border-style: solid;
border-color: transparent transparent #01579B;
display: block;
}
.tabs-frame .tab .radio:checked ~ .tab-button ~ .tab-frame {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    -webkit-transform: translate(0, 0);
}
.tabs-frame .tab .tab-frame p {
padding: 20px;
color: #fff;
text-align: justify;
font-size: 14px;
}

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

<section class="tabs-frame"> <article class="tab"> <input type="radio" id="tab_1" class="radio" name="tab_group_1" /> <label for="tab_1" class="tab-button"></label> <section id="tab_frame_1" class="tab-frame"> <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً. </p> </section> </article> <article class="tab"> <input type="radio" id="tab_2" class="radio" name="tab_group_1" /> <label for="tab_2" class="tab-button"></label> <section id="tab_frame_2" class="tab-frame"> <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً. </p> </section> </article> <article class="tab"> <input type="radio" id="tab_3" class="radio" name="tab_group_1" checked /> <label for="tab_3" class="tab-button"></label> <section id="tab_frame_3" class="tab-frame"> <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً. </p> </section> </article> <article class="tab"> <input type="radio" id="tab_4" class="radio" name="tab_group_1" /> <label for="tab_4" class="tab-button"></label> <section id="tab_frame_4" class="tab-frame"> <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً. </p> </section> </article> <article class="tab"> <input type="radio" id="tab_5" class="radio" name="tab_group_1" /> <label for="tab_5" class="tab-button"></label> <section id="tab_frame_5" class="tab-frame"> <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع، ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق، هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق، أو حتى غير مفهوم. لأنه مازال نصاً بديلاً ومؤقتاً. </p> </section> </article></section>

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

هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .

5 مواقع لا غنى عنها لكل شخص فى اختيار ألالوان

2018-07-09T07:28:00.003-07:00

5 مواقع لا غنى عنها لكل شخص فى اختيار ألالوان

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

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

مكتبة اكواد الالوان

مكتبة اكواد الالوان

مواقع أختيار الالوان

Adobe Color CC

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

Color Hunt

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

Palettr

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

UD Cube

هذا الموقع لا يختلف كثيرا عن أول موقع فى نفس الأمر يمكنك من أختيار الألوان كما تريد ثم بعد ذلك يمكنك نسخة كود اللون بعد أختيارك له .

Color Combinations Tester

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

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

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

وهكذا كان موضوع اليوم بالتوفيق للجميع فى أمان الله

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

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

2018-07-09T06:58:00.001-07:00

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

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

شرح التركيب

قم بالبحث عن هذا الوسم

]]></b:skin>

فى مدونتك ثم ضع فوقه الكود التالى .

.wdbloog-moqtarhat {background-color: #fff;bottom: 10px;box-sizing: border-box;display: none;overflow: hidden;position: fixed;left: 10px;width: 251px;z-index: 9999999999;box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);} .closebq{background-color:#EF5350;color:#fff;height:35px;right:5px;position:absolute;text-align:center;top:5px;width:35px;z-index:9;font-size:16px;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 5px 0 rgba(0,0,0,.23);border-radius:50%;line-height:35px} .wdbloogranqRandomPostBS{color:#666;display:block;font:14px/1.8em tahoma;position:relative;text-align:center} .wdbloogmoqta ul{list-style:outside none none!important;margin:0!important;padding:0!important} .wdbloogmoqta a{text-decoration:none!important} .wdbloogmoqta h2{background-color:transparent!important;border:0 none!important;box-shadow:none!important;color:#009efa!important;display:block!important;font:bold 14px/1.8em droid arabic kufi!important;height:auto!important;margin:0!important;overflow:hidden;text-align:center!important} .wdbloogmoqta li img{height:200px;margin:0!important;position:absolute;right:5px;top:5px;width:290px} a.wdbloogtnoimg img{width:100%;height:215px} .wdbloogmoqta{background-color:#EF5350;text-align:center;} .wdbloogmoqta p{color:#fff;padding:15px}

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

</body>

فى مدونتك .

<script type='text/javascript'> //<![CDATA[ $(window)['scroll'](function() { if ($(document)['scrollTop']() >= $(document)['height']() / 4) { $('#wdbloogsocialslide')['show']('slow') } else { $('#wdbloogsocialslide')['hide']('slow') } }); function closewdbloogsocialslide() { $('#wdbloogsocialslide')['remove'](); $['ajax']({ type: 'POST', url: '/facebookpage.php' }) } //]]> </script>

الأن قم وضع الكود التالى فوق هذا الوسم

<body>

فى مدونتك

<div class='wdbloog-moqtarhat' id='wdbloogsocialslide'> <a class='closebq' href='javascript:void(0);' onclick='return closewdbloogsocialslide();'>X</a> <div class='wdbloogmoqta'> <a class='wdbloogtnoimg' href='/2017/05/whaff.html'> <img src='https://goo.gl/kMULvF'/> <p> ربح المال و بطاقات جوجل بلاي وايتونز و رصيد باى بال مع تطبيق whaff </p> </a> </div> </div>

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

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

الطريقة الثانية للتركيب

عليك فوق وضع الأكود كامله فوق الوسم هذا

</body>

فى مدونتك

<style> .wdbloog-moqtarhat {background-color: #fff;bottom: 10px;box-sizing: border-box;display: none;overflow: hidden;position: fixed;left: 10px;width: 251px;z-index: 9999999999;box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);} .closebq{background-color:#EF5350;color:#fff;height:35px;right:5px;position:absolute;text-align:center;top:5px;width:35px;z-index:9;font-size:16px;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 5px 0 rgba(0,0,0,.23);border-radius:50%;line-height:35px} .wdbloogranqRandomPostBS{color:#666;display:block;font:14px/1.8em tahoma;position:relative;text-align:center} .wdbloogmoqta ul{list-style:outside none none!important;margin:0!important;padding:0!important} .wdbloogmoqta a{text-decoration:none!important} .wdbloogmoqta h2{background-color:transparent!important;border:0 none!important;box-shadow:none!important;color:#009efa!important;display:block!important;font:bold 14px/1.8em droid arabic kufi!important;height:auto!important;margin:0!important;overflow:hidden;text-align:center!important} .wdbloogmoqta li img{height:200px;margin:0!important;position:absolute;right:5px;top:5px;width:290px} a.wdbloogtnoimg img{width:100%;height:215px} .wdbloogmoqta{background-color:#EF5350;text-align:center;} .wdbloogmoqta p{color:#fff;padding:15px} </style> <script type='text/javascript'> //<![CDATA[ $(window)['scroll'](function() { if ($(document)['scrollTop']() >= $(document)['height']() / 4) { $('#wdbloogsocialslide')['show']('slow') } else { $('#wdbloogsocialslide')['hide']('slow') } }); function closewdbloogsocialslide() { $('#wdbloogsocialslide')['remove'](); $['ajax']({ type: 'POST', url: '/facebookpage.php' }) } //]]> </script> <div class='wdbloog-moqtarhat' id='wdbloogsocialslide'> <a class='closebq' href='javascript:void(0);' onclick='return closewdbloogsocialslide();'>X</a> <div class='wdbloogmoqta'> <a class='wdbloogtnoimg' href='/2017/05/whaff.html'> <img src='https://goo.gl/kMULvF'/> <p> ربح المال و بطاقات جوجل بلاي وايتونز و رصيد باى بال مع تطبيق whaff </p> </a> </div> </div>

ثم تقوم ايضا بتعديل ما فى الكود وتقوم بحفظ القالب ومبروك عليك

وهكذا كان موضوع اليوم بالتوفيق للجميع فى أمان الله

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

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

2018-07-09T06:38:00.001-07:00

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

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

شرح التركيب

الإضافة سهلة التركيب ولن تجد صعبه فى تركيبها

أبحث أولا عن هذا الوسم

]]></b:skin>

ثم ضع فوقه الكود التالى

.social-follow:after { content: "\f184"; font-family: FontAwesome; margin-right: 5px; position: relative; top: 1px; } .social-followrs ul li.rss a { background: #f29a1d } .social-followrs ul li.googleplus a { background: #DD4B39 } .social-followrs ul li.twitter a { background: #55acee } .social-followrs ul li.facebook a { background: #3b5998 } .social-followrs ul li.instagram a { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); } .social-followrs ul li.youtube a { background: #cb322c } .social-followrs ul li .social-follow { float: left } .social-followrs ul li .social-name { float: right; margin-left: 8px } .social-followrs ul li a { display: block; color: #fff; padding: 10px 18px; font-size: 18px; transition: 0.2s; } .social-followrs ul li { overflow: hidden; width: 20%; float: right; } .social-followrs ul li a:hover { padding: 10px 31px } .social-followrs { display: block; overflow: hidden;
margin: 15px 0; }

الأن كود ظهور الإضافة ضع فى المكان الذى تريده

<div class='clear'/> <div class='container'> <div class='social-followrs'> <ul> <li class='facebook'> <a href='https://www.facebook.com/'> <span class='social-name'> <i class='fa fa-facebook'/> </span><span class='social-count'>+100 ألف</span> <span class='social-follow'>متابع</span></a> </li> <li class='youtube'> <a href='https://www.youtube.com/channel/'> <span class='social-name'> <i class='fa fa-youtube-play'/> </span><span class='social-count'>+100 ألف</span> <span class='social-follow'>مشترك</span></a> </li> <li class='instagram'> <a href='https://www.instagram.com/'> <span class='social-name'><i class='fa fa-instagram'/> </span><span class='social-count'>+100 k</span> <span class='social-follow'>متابع</span></a> </li> <li class='twitter'> <a href='https://twitter.com/'> <span class='social-name'> <i class='fa fa-twitter'/> </span><span class='social-count'>+1.5k</span> <span class='social-follow'>متابع</span></a> </li> <li class='rss'> <a href='https://rss.com/'> <span class='social-name'> <i class='fa fa-blogger'/> </span><span class='social-count'>+1.5k</span> <span class='social-follow'>متابع</span></a> </li> </ul> </div> </div> <div class='clear'/>

الأن عدل بالإضافة كما تريد على عدد المتابعين
وبعد ذلك قم بحفظ الإضافة ومبروك عليك الإضافة

وهكذا كان موضوع اليوم بالتوفيق للجميع فى أمان الله

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

شريط اخر الأخبار بشكل جديد رائع لمدونات بلوجر

2018-07-09T05:29:00.002-07:00

شريط اخر الأخبار بشكل جديد رائع لمدونات بلوجر

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

صورة للإضافة

شرح التركيب

قم بالبحث عن هذا الوسم فى مدونتك

]]></b:skin>

ثم ضع فوقه الكود التالى .

.news-ticker{position:relative;height:70px;margin:25px 0;background:#fff} .ticker-inner{padding:0;margin:0;list-style:none;position:Absolute;top:0} .tickercontainer{float:left;width:-webkit-calc(100% - 120px)!important;width:calc(100% - 120px)!important;height:70px;overflow:hidden;position:relative} .ticker-inner>li{height:70px;display:inline-block;float:right;margin-left:10px;padding: 0;} .ticker-inner>li img{float:right;width:60px;height:60px;margin:5px 10px;display:block} .ticker-inner>li .content{float:left;padding-top: 5px;} .ticker-inner>li .content .recentLabel{font-size:13px!important;line-height:20px!important;margin:5px 0;color:#fff;background:#F30;padding:0 10px} .ticker-inner>li .content h3{margin:0;line-height:30px!important} .ticker-inner>li .content h3 a{color:#000} .ticker-inner>li .content h3 a:hover{color:#FB3200} .ticker-label{float:right;background:#FB3200;width:120px;position:relative;height:70px;font-size:0!important;text-align:Center;color:#fff;line-height:70px!important} span.ticker-label i{font-size:15px!important} span.ticker-label:after{content:'اخر الأخبار'!important;font-size:15px!important;margin-right:5px}

الأن أبحث عن هذا الوسم

</head>

ثم ضع فوقه الكود التالى .

الان مع الكود الأخير والذى سوف تضعه فى المكان الذى تريده

<div class='ticker-style inner'> <b:section class='forNewsTicker' id='forNewsTicker' maxwidgets='1'> <b:widget id='HTML258' locked='false' title='' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'><![CDATA[<div class='news-ticker'></div>]]></b:widget-setting> </b:widget-settings> <b:includable id='main'>  <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> </b:includable> </b:widget> </b:section> </div>

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

<div class='news-ticker'></div>

واذا لم تجده سوف تقوم بوضعه من جديد ومبروك عليك

وهكذا كان موضوع اليوم بالتوفيق للجميع فى أمان الله

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

قائمة ثلاثية التبويت لتعريف الكاتب والقائمة البريدية ومواضيع ذات صله احترافيه

2018-07-09T03:42:00.000-07:00

قائمة ثلاثية التبويت لتعريف الكاتب والقائمة البريدية ومواضيع ذات صله احترافيه

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

شرح التركيب

قم بالبحث عن هذا الوسم فى مدونتك

</head>

ثم ضع فوقه الكود التالى.

اذا لم تجده أبحث عن هكذا فقط

/head

ثم ضع فوقه الكود التالى .

<script type='text/javascript'> //<![CDATA[ var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}} function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];}} relatedTitles=tmp2;relatedUrls=tmp;} function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;} function printRelatedLabels(){var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<20){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;} i++;} document.write('</ul>');document.write('<a href="" target="_blank"><font size="1" color="black"></font></a>');} //]]> </script> <style> /* CSS Tabs */ .tabs{background:#fff;width:100%;max-width:100%;float:none;list-style:none;padding:20px 0 0 0;margin:auto;display:table;overflow:hidden;} .tabs:after{content:'';display:table;clear:both} .tabs input[type=radio]{display:none} .tabs label{background:#f6f6f6;display:table-cell;float:left;width:33.3333%;color:#222;padding:12px;font-size:1.2rem;font-weight:500;text-align:center;cursor:pointer;border-top:1px solid rgba(0,0,0,0.15);border-bottom:1px solid rgba(0,0,0,0.15);border-left:1px solid rgba(0,0,0,0.15);transition:all 0.3s} .tabs label:nth-of-type(1){border-left:0} .tabs label i{padding:5px;margin-right:0} .tab-content{display:none;width:100%;float:left} .tabs [id^="tab"]:checked + label,.tabs label:hover{background:#fff;color:#e74c3c} #tab1:checked ~ #tab-content1,#tab2:checked ~ #tab-content2,#tab3:checked ~ #tab-content3{display:block} /* CSS Multi Author Box */ .authorboxwrap{margin:auto;padding:20px;overflow:hidden} .avatar-container{background:rgba(0,0,0,.03);float:right;margin:0 0 0 20px;border-radius:6px;overflow:hidden} .avatar-container img{width:100px;height:100px;max-width:100%!important;transition:all .3s ; border-radius: 6px;} .author_description_container h4{font-size:18px;display:block;margin:0;margin-bottom:2px} .author_description_container h4 a{color:#000} .author_description_container p{margin:0;font-size:14px;margin-bottom:8px;line-height:22px;font-weight:400} .author_description_container p a{color:#0279c5;}.author_description_container p a:hover{color:#000;text-decoration:underline} .social-links li{list-style:none!important;float:right} .social-links a{border-bottom:none} .social-links a:after,.social-links a:before{content:none!important} .social-links li a{background:#3498db;color:#fff;font-size:12px;text-align:center;display:inline-block;padding:9px 4px;margin:0 0 0 10px;width:32px;border-radius:2px} .social-links li a:hover{background:#2980b9;color:#fff;} /* Subscribe Footer */ #subscriber-foot{display:block;overflow:hidden;margin:0 auto;text-align:center;padding:20px;} #subscriber-foot p{margin:1em 0} #subscriber-foot .emailfooter{margin:auto;text-align:center;} #subscriber-foot .emailfooter form{margin:0;padding:0;} #subscriber-foot .emailfooter input{width:100%;background:rgba(255,255,255,1);padding:12px;color:#999;font-size:14px;margin-bottom:20px;border:1px solid rgba(0,0,0,0.3);transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s} #subscriber-foot .emailfooter input:hover{border-color:rgba(0,0,0,.24);} #subscriber-foot .emailfooter input:focus{color:#000;outline:none;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6);} #subscriber-foot .emailfooter .submitfooter{background:#7f8c8d;color:#fff;font-size:14px;cursor:pointer;border:0;border-radius:3px;overflow:hidden;transition:all .3s;padding:14px} #subscriber-foot .emailfooter .submitfooter:hover{background:#e67e22;color:#fff;outline:none;box-shadow:none} #subscriber-foot .emailfooter .submitfooter:active{color:#fff;outline:none;box-shadow:none} /* Arlina Related Post */ #related-post {margin:0;padding:20px 0 0 0;} #related-post h4{display:none;color:#111;border-bottom:1px solid rgba(0,0,0,0.15);border-top:1px solid rgba(0,0,0,0.15);padding:10px 0;font-size:20px;margin:0 0 20px 0;padding-left:8px;line-height:1em} #related-post h4 span{padding:6px;display:inline-block;vertical-align:middle} .relhead {background:#fff;font-size:100%;font-weight:normal;line-height:150%;overflow:hidden;padding:0;} ul#related-summary {margin:0;padding:0 15px;} ul#related-summary li{position:relative;float:left;list-style:none outside none;margin:0 5px 15px 5px;padding:0;overflow:hidden;height:180px;width:31.6%} ul#related-summary li img{background-color:#f1f1f1;width:100%;height:auto;max-width:100%;margin:0 auto;vertical-align:middle;} ul#related-summary li a.relinkjdulx{color:#000;display:block;font-size:14px;font-weight:400;line-height:normal;overflow:hidden;text-align:left;padding:10px 10px 10px 0} ul#related-summary li a.relinkjdulx:hover{color:#0279c5;} .overlayb {position:relative;max-height:140px;overflow:hidden;} .overlayb:before{content:'';background-color:rgba(0,0,0,0.4);position:absolute;text-align:center;top:0;left:0;right:0;bottom:0;z-index:2;opacity:0;visibility:hidden;transition:all 0.1s} .overlayb:after{content:'\f002';font-family:fontawesome;font-size:1.3rem;color:rgba(255,255,255,.8);position:absolute;top:45%;left:45%;text-align:center;z-index:2;opacity:0;visibility:hidden;transition:all 0.1s} .overlayb:hover:before,.overlayb:hover:after {opacity:1;visibility:visible;} #related-posts{margin-left:0;font-weight:100;background-color:#fff;padding:12px} #related-posts ul li{display:block;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:21px;margin-bottom:5px;line-height:2em} #related-posts ul li:before{content:'\f0a8';float:right;font-family:fontawesome;position:relative;top:9px;margin-left:8px;margin-right:8px;color:#fff;background:#465769;width:22px;text-align:center;height:22px;font-size:14px;line-height:22px;border-radius:50%} </style>

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

<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://add-b.blogspot.com/2013/08/related-posts-for-blogger-widget.html'> <img style='border: 0'/></a><h2/> <script type='text/javascript'> var maxresults=10; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> <div class='tabs'> <input id='tab3' name='tabs' type='radio'/> <label for='tab3'> <b:if cond='data:blog.isMobileRequest == "true"'><i aria-hidden='true' class='fa fa-envelope'/></b:if><span>القائمة البريدية</span> </label> <input id='tab2' name='tabs' type='radio'/> <label for='tab2'> <b:if cond='data:blog.isMobileRequest == "true"'><i aria-hidden='true' class='fa fa-user'/></b:if><span>الكاتب</span> </label> <input checked='' id='tab1' name='tabs' type='radio'/> <label for='tab1'> <b:if cond='data:blog.isMobileRequest == "true"'><i aria-hidden='true' class='fa fa-external-link-square'/></b:if><span>مواضيع ذات صله</span> </label> <div class='tab-content' id='tab-content1'> <h3></h3> <div class='clear'/> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://add-b.blogspot.com/2013/08/related-posts-for-blogger-widget.html'> <img style='border: 0'/></a><h2/> <script type='text/javascript'> var maxresults=10; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> <div class='clear'/> </div>  <div class='tab-content' id='tab-content2'> <h3></h3> <div class='authorboxwrap'> <div class='authorboxfull'> <div class='avatar-container'> <a href=''> <img class='ripplelink author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' expr:title='data:post.author' height='90' width='90'/> </a> </div> <div class='author_description_container'> <h4><a href='#' rel='author'><data:post.author/></a> <i class='fa fa-check-circle' style='color:#e74c3c;font-size:16px;margin:0 0 0 3px' title='Verified Author'/></h4> <p> <data:post.authorAboutMe/> </p> <span class='social-links'> <li><a class='ripplelink external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li> <li><a class='ripplelink external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li> <li><a class='ripplelink external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a></li> </span> </div> </div> </div> </div>  <div class='tab-content' id='tab-content3'> <h3></h3> <div class='footer-menu' id='subscriber-foot'> <h3>أشترك معنا الأن</h3> <p>أشترك معنا الأن للحصل على اخر الأخبار أول بأول</p> <div class='emailfooter'> <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=Blog-SimplifyNew', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='email' onblur='if (this.value == "") {this.value = "Email address";}' onfocus='if (this.value == "Email address") {this.value = "";}' type='text' value='ضع اييملك هنا'/> <input name='uri' type='hidden' value='SimplifyNew'/> <input name='loc' type='hidden' value='en_US'/> <input class='ripplelink submitfooter' type='submit' value='أشراك'/> </form> </div> </div> </div> </div> </b:if>

الأن غير ما تريدها فى الكود كما تريد
وضع روابط مواقع التواصل للكاتب كما تريدها
وقم بحفظ القالب مبروك عليك القائمة فى مدونتك .

وهكذا كان موضوع اليوم بالتوفيق للجميع فى أمان الله

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

تنسيق أداة الإحصائيات لمدونات بلوجر بشكل جديد

2018-07-09T02:15:00.003-07:00

تنسيق أداة الإحصائيات لمدونات بلوجر بشكل جديدجديد

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

شرح التركيب

1- قم بالبحث فى قالب مدونتك عن الوسم

]]></b:skin>

ثم قم بوضع الكود التالى فوقه.

.wdbloogstatusw { text-align: center; padding: 50px 70px; overflow: hidden; background: #0F4566; margin: 15px 0; } .wdbloogstatusw-h6 { color: #FFFFFF; text-align: center; font-size: 25px; font-weight: 100; margin-bottom: 10px; } .wdbloogspos-h1 { color: #FFFFFF; text-align: center; font-size: 19px; font-weight: 100; margin-bottom: 25px; } .wdbloogspos { float: right; padding: 0 65px; color: #fff; } #wdbloogtc { float: right; padding: 0 65px; color: #fff; } #wdbloogtcount { float: right; padding: 0 65px; color: #fff; } #wdblooguser { float: right; padding: 0 65px; color: #fff; } #wdbloogthumbs { float: right; padding: 0 65px; color: #fff; } .wdbloogspos h4 { border-radius: 5px; background: #F74047; padding: 5px 0; margin-top: 15px; font-weight: 100; } #wdbloogtc h4 { border-radius: 5px; background: #1DA1F2; padding: 5px 0; margin-top: 15px; font-weight: 100; } #wdbloogtcount h4 { border-radius: 5px; background: #23690F; padding: 5px 0; margin-top: 15px; font-weight: 100; } #wdblooguser h4 { border-radius: 5px; background: #997B04; padding: 5px 0; margin-top: 15px; font-weight: 100; } #wdbloogthumbs h4 { border-radius: 5px; background: #0B6EAB; padding: 5px 0; margin-top: 15px; font-weight: 100; } .widget ul { padding: 50px 70px; margin: 15px 0; line-height: auto; } .widget li, .BlogArchive #ArchiveList ul.flat li { padding: 0px 60px; margin: 0; text-indent: 0; } .section { margin: 0; } @media screen and (max-width : 1280px){ #wdbloogtc { padding: 0 55px; } .wdbloogspos { padding: 0px 60px; } #wdbloogtcount { padding: 0 55px; } #wdblooguser { padding: 0px 55px; } #wdbloogthumbs { padding: 0 55px; } }

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

الان قم بوضع فوق الفوتر قم بالبحث عن الوسم هذا <div

class='footer-wrapper'> ثم قم بوضعه فوقه

<b:section class='wdbloog-colu' id='wdbloog-content'> <b:widget id='Stats1' locked='false' title='' type='Stats' version='1' visible='true'> <b:includable id='main'> <div class='widget-content'> <ul class='wdbloogstatusw'> <h6 class='wdbloogstatusw-h6'> إحصائيات المدونة </h6> <h1 class='wdbloogspos-h1'>تعرف على المزيد عن مدونتنا قد تهمك</h1> <li class='wdbloogspos'> <i class='fa fa-newspaper-o'/> <span>عدد المواضيع : </span> <h4 id='wdbloogstatpost'>&hellip;</h4> </li> <li id='wdbloogtc'> <i class='fa fa-comments'/> <span>عدد التعليقات : </span> <h4 id='wdbloogstatcommen'>&hellip;</h4> </li> <li id='wdbloogtcount'> <i class='fa fa-eye'/> <span>عدد المشاهدات : </span> <h4 expr:id='data:widget.instanceId + "_totalCount"'>&hellip;</h4> </li> <li id='wdblooguser'> <i class='fa fa-user'/> <span>عدد المشرفين : </span> <h4>5</h4> </li> <li id='wdbloogthumbs'> <i class='fa fa-thumbs-up'/> <span>عدد المتابعين : </span> <h4>500</h4> </li> </ul> <script type='text/javascript'> //<![CDATA[ function totalPosts(json){document.getElementById('wdbloogstatpost').innerHTML=json.feed.openSearch$totalResults.$t};function wdbloogtc(json){document.getElementById('wdbloogstatcommen').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=wdbloogtc\"><\/script>'); //]]> </script> </div> </b:includable> </b:widget> </b:section>

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

هذا كل ما فى موضوع اليوم اتمنى انه قد اعجبكم

اضافة أزرار مواقع التواصل الاجتماعى بشكل احترافى

2018-07-08T14:56:00.003-07:00

اضافة أزرار مواقع التواصل الاجتماعى بشكل احترافى

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

شرح التركيب

اولا قم بالبحث فى قالب مدونه عن الوسم </head> ثم قم بوضع الكود التالى فوقه

<style>

.wdbloog-box {
  max-width: 753px;
  min-width: 290px;
  padding: 20px;
  text-align: center;
  position: relative;
  z-index: 5;
  margin: auto;
}
.wdbloog-box input[type="text"] {
  font-size: 0;
  letter-spacing: 0.1em;
  color: #888;
  height: 0;
  line-height: 1;
  border: 1px solid rgba(55, 58, 71, 0);
  transition: all 0.2s;
  box-sizing: border-box;
  width: 0;
  background: rgba(55, 58, 71, 0);
}
.overlay {
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background: rgba(36, 40, 66, 0.9);
 }
.overlay .overlay-close {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0px;
  top: 0px;
  border: none;
  background: #b71c1c;
  color: #FFFFFF;
  outline: none;
  z-index: 100;
  border-radius: 50%;
  font-size: 24px;
}
.overlay .dialog-inner{
 text-align: center;
 position: relative;
 top: 50%;
 height: 60%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-30%);
}
.overlay-mbl {
 opacity: 0;
 visibility: hidden;
 z-index:100;
}
.overlay-mbl.open {
 opacity: 1;
 visibility: visible;
}
#trigger-overlay {
  float: left;
  cursor: pointer;
  margin-top: 9px;
  background: #b71c1c;
  border-radius: 50%;
  width: 33px;
  text-align: center;
  line-height: 33px;
  height: 33px;
}
#trigger-overlay a {
  color: #fff;
  font-size: 17px;
}
.topleft-wdbloog ul li {
  display: block;
  float: right;
  margin: 20px 0 20px 20px;
}
.topleft-wdbloog ul li a i {
  width: 70px;
  height: 70px;
  color: #fff;
  background: #000000;
  border-radius: 50%;
  line-height: 70px;
  font-size: 25px;
}
i.fa.fa-facebook {
  transition: all .3s;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  -moz-transition: all .3s;
}
i.fa.fa-facebook:hover {
  background-color: #3b5998;
}
i.fa.fa-twitter:hover {
  background-color: #55acee;
}
i.fa.fa-instagram:hover {
  background-color: #8E5134;
}
i.fa.fa-google-plus:hover {
  background-color: #CD201F;
}
i.fa.fa-youtube:hover {
  background-color: #CD201F;
}
i.fa.fa-rss:hover {
  background-color: #f26522;
}
i.fa.fa-android:hover {
  background-color: #a4c639;
}
i.fa.fa-apple:hover {
  background-color: #fff;
  color: #000;
}
</style>

الان قم بالبحث عن الوسم <body ثم قم بوضع الكود التالى اسفل منه

هذا الكود الخاص بمواقع التواصل غير به الروابط بما تريد
الان قم بالبحث عن هذا الوسم </body> ثم قم بوضع الكود التالى فوقه

الان قم بوضع هذا الكود فى المكان الذى تريد ان تكون اللإضافة متواجده به

هذا كل ما كان فى موضوع اليوم بالتوفيق للجميع

اضافة قائمة رئيسية احترفية مع مواقع التواصل

2018-07-08T14:11:00.001-07:00

اضافة قائمة رئيسية احترفية مع مواقع التواصل

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

شرح التركيب

قم بالدخول الى قالب مدونتك

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

/* مواقع التواصل */
.socialicons{width:auto;height:65px;float:left;margin:0 0 0 0;display:block;margin-left:25px;line-height:65px}
.socialicons li{float:right;font-size:27px;text-align:center;margin:0 5px 0 5px;width:45px;background-color:#F74047}
.socialicons li:hover{background-color:#0F4566}
a.googleplus.ketchup.tooltipsocial{color:#FFFFFF}
a.facebook.ketchup.tooltipsocial{color:#FFFFFF}
a.youtube.ketchup.tooltipsocial{color:#FFFFFF}

/* القائمة الرئيسية */
.main-nav{background-color:#0B6EAB;display:block;list-style:none outside none;border-bottom:5px solid #0F4566;float:right;width:100%;height:70px}
.home-icon .fa{font-size:43px}
.home-icon .fa .home-icon:hover{background:none}
.menu li{height:72px;margin-top:-21px;list-style:none outside none;display:inline-block;position:relative;z-index:10;padding:8px 0}
.menu li a{text-align:center;list-style:none outside none;text-decoration:none;padding:0 16px;font-size:20px;:100;display:block;color:#fff;transition:all 0.2s ease-in-out 0s}
.menu li a:hover:hover>a{color:#F74047;background:none}
.menu ul{list-style:none;margin-top:10px;visibility:hidden;opacity:0;margin:0;padding:0;list-style:none outside none;width:175px;position:absolute;right:0;background:#0B6EAB;z-index:9;transform:translate(0,20px);transition:all 0.2s ease-out}
.menu ul:after{bottom:100%;right:20%;border:solid transparent;content:"";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-bottom-color:#fff;border-width:6px;margin-left:-6px}
.menu ul li{border-top:none;list-style:none;display:block;float:none;background:none;margin:0;padding:0}
.menu ul li:hover{border-top:none}
.menu ul li a{list-style:none;font-size:15px;font-weight:normal;display:block;color:#FFFFFF;line-height:38px;text-align:center;width:155px;border-bottom:5px solid #0B6EAB}
.menu ul li:hover>a{background:#FFFFFF;color:#F74047}
.menu ul ul{left:149px;top:0;visibility:hidden;opacity:0;transform:translate(20px,20px);transition:all 0.2s ease-out}
.menu ul ul:after{left:-6px;top:10%;border:solid transparent;content:"";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-right-color:#fff;border-width:6px;margin-top:-6px}
.menu li>ul ul:hover{visibility:visible;opacity:1;transform:translate(0,0)}
.menu lior{display:inline-block;position:relative;z-index:100;margin-left:10px;float:left;top:9px}
lior:before{content:'جديد';font-family:FontAwesome;font-style:normal;font-weight:normal;right:-13px;position:absolute;padding:0.4px 9px;background:#F74047;color:#FFFFFF;line-height:18px;font-family:ge_dinar_tworegular;font-size:11px;border-radius:2px}
.menu lior a{text-decoration:none;padding:13px;display:block;color:#fff;transition:all 0.2s ease-in-out 0s;margin-top:8px}
.menu lior{display:inline-block;position:relative;z-index:100;margin-left:10px;float:left;top:9px}
lior:before{content:'جديد';font-family:FontAwesome;font-style:normal;font-weight:normal;right:-13px;position:absolute;padding:0.4px 9px;background:#F74047;color:#FFFFFF;line-height:18px;font-family:ge_dinar_tworegular;font-size:11px;border-radius:2px}
.menu lior a{text-decoration:none;padding:13px;display:block;color:#fff;transition:all 0.2s ease-in-out 0s;margin-top:8px}
.msubtitle{font-size:12px;font-weight:400;display:block;margin-top:0;color:#fff;line-height:37px}
.menu li:hover>ul{visibility:visible;opacity:1;transform:translate(0,0)}
.menu ul li:hover{border-top:none}
.menu li:first-child{list-style:none outside none;margin-left:0}
.menu ul li{border-top:none;list-style:none;display:block;float:none;background:none;margin:0;padding:0}
ul.menu{height:65px;float:right;padding-right:20px}
ul#recn-b{padding:1px 5px 5px 5px}
.menu li:hover{background-color:#0F4566;height:65px}
.menu li a:hover{color:#FFFFFF}

الان سوف نضع كود اظهار الإضافاة اسفل الهيد كما فى مدونتى
اذا تريد وضعه فى مكان اخر فاذا الامر يرجع اليك

<nav class='main-nav'>
<ul class='menu'>
<li>
<a class='with-ul' href='https://goo.gl/Uu37QV' itemprop='url'>
<span itemprop='name'>قوالب بلوجر</span>
<span class='msubtitle'>أحدث قوالب بلوجر</span>
</a>
</li>
<li>
<a class='with-ul' href='https://goo.gl/1Xm8AK' itemprop='url'>
<span itemprop='name'>إضافات بلوجر</span>
<span class='msubtitle'>أفضل الإضافات</span>
</a>
</li>
<li>
<a class='with-ul' href='https://goo.gl/Uus2EH' itemprop='url'>
<span itemprop='name'>دروس وشروحات</span>
<span class='msubtitle'>كل ما تريد معرفته</span>
</a></li>
<li>
<a class='with-ul' href='https://goo.gl/ewOdqF' itemprop='url'>
<span itemprop='name'>فوتوشوب</span>
<span class='msubtitle'>جديد التصميم</span>
</a></li>
<li>
<a class='with-ul' href='https://goo.gl/CKkl4y' itemprop='url'>
<span itemprop='name'>خدمات </span>
<span class='msubtitle'>اطلب ما تريد</span>
</a></li>
<li/></ul>
<div class='headrch'>
<div class='socialicons'>
<ul>
<li><a class='facebook ketchup tooltipsocial' href='https://www.facebook.com/wdbloog' target='_blank' title='فسبوك'>
<i class='fa fa-facebook'/></a></li>
<li><a class='googleplus ketchup tooltipsocial' href='https://plus.google.com/+أخبارريالمدريدبالعربية' target='_blank' title='جوجل +'><i class='fa fa-google-plus'/></a></li>
<li><a class='youtube ketchup tooltipsocial' href='' target='_blank' title='انضم الينا'><i class='fa fa-user'/></a></li>
</ul>
</div>
</div>
</nav>

قم الان بتغير التسميات والروابط كما تريد انت
وايضا غير ومواقع التواصل اذا تريد

هذا كل شئ فى موضوع اليوم بالتوفيق لكم و فى امان الله

اضافة فوتر احترافى لمدونات بلوجر

2018-07-08T13:06:00.001-07:00

اضافة فوتر احترافى لمدونات بلوجر

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

شرح التركيب

القوتر يتمثل فى كودين فقط كود التنسيق له والكود الثانى الذى يتم وضعه فوق حقوق قالب مدونتك.

1- قم بالبحث عن الوسم

]]></b:skin>

ثم قم بوضع الكود التالى فوقه.

/*---فوتر---*/
#footer-wrapper {
clear: both;
overflow: hidden;
padding: 20px;
background: #fff;
border: 1px solid #DEDEDE;
text-align: center;
}
.bottom-nav {
text-align: center;
padding: 20px 0 5px;
margin-bottom: 10px;
overflow: hidden;
display: none;
}
#footer-wrapper #column1, #footer-wrapper #column2 {
margin-left: 1.6666667%;
margin-bottom: 10px;
}
#footer-wrapper .footer-column {
float: right;
background-color: #FFFFFF;
}
#footer-wrapper .footer-column {
color: #666;
width: 100%;
margin: 0;
padding: 0;
display: block;
}
.footer-column {
background-color: #324B65;
padding: 30px;
}
.FollowByEmail .widget-content:before {
content: "اشترك بالقائمة البريدية لمدوتنا وتوصل بجديد الدروس و المواضيع التي يتم طرحها مباشرة على بريدك الإلكتروني";
display: block;
color: #2a4057;
font-size: 16px;
margin-bottom: 21px;
}
.FollowByEmail .follow-by-email-inner {
position: relative;
}
.FollowByEmail td {
float: right;
height: 8px;
width: 100%;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-address {
padding-right: 10px;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-address {
height: 40px;
border: 1px solid #EEE;
margin-bottom: 5px;
font-size: 12px;
background: #2a4057;
width: 180px;
border-radius: 4px;
margin-bottom: -44px;
color: #FFF;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
margin-right: 248px;
margin-top: -29px;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
width: 5%;
border-radius: 2px;
height: 38px;
font-size: 12px;
color: #fff;
background-color: #D03F42;
}
div#th3-live {
padding: 30px 40px;
background: #102c46;
color: #fff;
position: relative;
overflow: hidden;
}
.right-live {
z-index: 99999999;
position: relative;
float: right;
}
.right-live img {
width: 149px;
}
.left-live {
text-align: center;
overflow: hidden;
position: absolute;
right: 0;
font-size: 17px;
left: 0;
width: 600px;
top: 66px;
margin: 0 auto;
display: block;
}
.left-live a {
margin-top: 10px;
border-radius: 3px;
transition: 0.2s;
color: #fff;
display: inline-block;
padding: 8px;
border: 2px solid #D03F42;
font-size: 16px;
}
.time-live {
float: left;
text-align: center;
z-index: 99999999;
font-size: 18px;
position: relative;
width: 129px;
font-family: Electrolize,ge_dinar_oneregular;
}
span#saaa {
font-size: 37px;
margin-right: 3px;
margin-left: 71px;
line-height: 46px;
}
span#d9i9a {
font-size: 17px;
margin-right: 39px;
}
span#saaa {
font-size: 37px;
margin-right: 3px;
margin-left: 71px;
line-height: 46px;
}
span#d9i9a {
font-size: 17px;
margin-right: 39px;
}
span#ssss2 {
margin-left: -59px;
margin-right: -56px;
}
.footer-column {
background-color: #324B65;
padding: 30px;
}
.footer-column h2 {
padding-left: 15px;
}
h2.title {
color: #fff;
font-weight: 100;
border-bottom: 1px solid #fff;
font-size: 19px;
padding-bottom: 10px;
text-indent: 5px;
}
.footer-column h2 {
display: inline-block;
font-weight: 700;
font-size: 13px;
color: #fff;
text-transform: uppercase;
}
.widget-item-control {
display: none!important;
}
.widget-item-control {
float: left;
height: 20px;
margin-top: -20px;
position: relative;
z-index: 10;
}
div#gdfdfns {
background: #324B65;
height: 80px;
}
div#footer-buttons {
clear: both;
overflow: hidden;
border-top: 2px solid #fff;
display: block;
padding-top: 8px;
margin-right: 40px;
margin-left: 40px;
}
div#footer-buttons > div {
float: right;
transition: 0.2s;
border: 2px solid #fff;
width: 31.6%;
text-align: center;
margin-right: 1%;
height: 44px;
line-height: 42px;
font-size: 18px;
color: #fff;
}

2- الان الكود الخاص بالفوتر اذا كان لديك فوتر فى مدونتك من قبل يمكنك حذفه اولا قبل وضع هذا اما اذا تريد اضافهم معا لا مشكلة فى ذلك هذا الفوتر يتم وضعه فوق حقوق قالب مدونتك ابحث فى القالب عن حقوق مدونتك ثم قم بوضع الكود التالى فوق. <footer>

<div id='cop44hts'>
<div id='footer-wrapper'>
<div class='bottom-nav row'>
</div>

<div class='row' id='footer'>
<b:section class='footer-column' id='column1' showaddelement='yes'>
<b:widget id='FollowByEmail02' locked='false' title='Follow by Email' type='FollowByEmail' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'>
<div class='follow-by-email-inner'>
<form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='"window.open(\"https://feedburner.google.com/fb/a/mailverify?uri=" + data:feedPath + "\", \"popupwindow\", \"scrollbars=yes,width=550,height=520\"); return true"' method='post' target='popupwindow'>
<table width='100%'>
<tr>
<td>
<input class='follow-by-email-address' name='email' placeholder='اأدخل بريدك الإلكتروني' type='text'/>
</td>
<td width='64px'>
<input class='follow-by-email-submit' type='submit' value='إشترك'/>
</td>
</tr>
</table>
<input expr:value='data:feedPath' name='uri' type='hidden'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>
</div>
<span class='item-control blog-admin'>
<b:include name='quickedit'/>
</span>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<div id='th3-live'>
<div class='right-live'>
<img src='http://store2.up-00.com/2016-04/145997310944891.png'/>
</div>
<div class='left-live'>
<div class='lefte'>البث المباشرة مع رغيب أمين للإجابة على تساؤلاتكم التقنية من الإثنين إلى الخميس.
</div>
<a href='http://wdbloog.blogspot.com'>شاهد الأن !</a>
</div>
<div class='time-live'>
<span id='saaa'>7</span><span id='d9i9a'>30</span>
<span id='ssss1'>بتوقيت غرينيتش</span>
<span id='saaa'>22</span><span id='d9i9a'>30</span>
<span id='ssss2'>بتوقيت مكة المكرمة</span>
</div>
</div>
<div class='footer-column'>
<h2 class='title'>عن المدونة</h2>
<div class='widget-content'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN6yzO8gBowgiWEE4I3PDfQyyvvFAIF_TFm-Uk_BjdObpQ4GtvyEEgpFX4Bikq1GuOMbv0wWPsBWHy4GmOHXUqmUK9kafzAzFlcAeokzfy64CdjcOEpAdCcsd4F56gePnudLTS3QZs2-kI/s1600/logo-almohtarif.png' style='float: right; padding: 10px; width: 155px;'/><span style='font-family:Tahoma;font-size:14px;color: #FFFFFF;'>المحترف عبارة عن مدونة ضخمة تضم عدد كبير من الفيديوهات المصورة عن طريق حلقات متسلسلة نتطرق فيها إلى مختلف المواضيع التقنية القريبة من الشباب العربي ، بالإضافة إلى مقالات . مدونة المحترف تأسست سنة 2010 حيث تستقطب الآن عدد كبير من الزوار من كافة ربوع الوطن العربي ، حيث ان مقرها الرئيسي بالمغرب و مديرها امين رغيب ،حاصلة على جائزة افضل مدونة مغربية لسنة 2012 / 2013 ومصنفة ضمن افضل 10 مدونات عربية حسب المركز الدولي للصحفيين ICFJ سنة 2013 وحاصلة على الجائزة الفضية من يوتوب (اول قناة مغربية تحصل على هذه الجائزة من يوتوب ) سنة 2014 وتم تكريم مؤسسها من طرف حاكم دبي بجائزة رواد التواصل الإجتماعي عن فئة التكنولوجيا .سنة 2015 وهو الموقع التقني الاول في المغرب والعالم العربي.</span>
</div>
<div class='clear'/>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<img alt='' height='18' src='//img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</span>
</span>
<div class='clear'/>
</div>
<div id='gdfdfns'>
<div id='footer-buttons'>
<div class='total-posts'>
<script style='text/javascript'>function mbhTotalCount(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}</script>
<p><script src='http://www.th3professional.com/feeds/posts/default?alt=json-in-script&callback=mbhTotalCount'/>9392 موضوع في المدونة </p>
</div>
<div class='call-th3'>
<a href='http://wdbloog.blogspot.com' style='color: #FFFFFF;'>للإتصال بمدونة المحترف</a>
</div>
<div class='privacy-th3'>
<a href='http://wdbloog.blogspot.com' style='color: #FFFFFF;'> للإتصال بنا:http://wdbloog.blogspot.comt</a>
</div>
</div>
</div>
</div>

3- قمكنك تغيير كل شئ فى الفوتر كما تريد وبخصوص القائمة البريدة بعد وضع اخر كود وتعديله كما تريد احفظ القالب ثم توجه الى تخطيط القالب وسوف تجد فى اسفل التخطيط اضافة جديد للقائمة البريد سوف تفتحها ثم تضغط حفظ مبروك عليك.

كيفية اضافة رابط المصدر بشكل تلقائى لمدونات بلوجر

2018-07-08T06:04:00.001-07:00

كيفية اضافة رابط المصدر بشكل تلقائى لمدونات بلوجر

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

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

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

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

وبعد ذلك سوف تقوم بتعديل أسم علاء الغزالي فى الكود بأسم مدونتك وبعد ذلك سوف تقوم بحفظ القالب ومبروك عليك

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

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

ولكى تعرف كيفية ايقاف الخلاصة فى مدونتك سوف تقوم بالدخول الى مدونتك ثم الدخول الى اعدادت مدونتك ثم خلاصة موقع الويب وفى اختيار السماح بخلاصة المدونة سوف تجعلها ( لا شئ ) كما فى الصورة التاليه

كيفية اضافة رابط المصدر بشكل تلقائى لمدونات بلوجر

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

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

إضافة تنبيه احترافي ومتحرك الى مدونة بلوجر

2018-07-08T05:47:00.001-07:00

إضافة تنبيه احترافي ومتحرك الى مدونة بلوجر

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

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

أولا نقوم بالبحث عن الوسم <head> ثم نضع أسفله الكود التالي

ثانيا, قم بالبحث عن الوسم ]]></b:skin> وضع فوقه الاكواد الخاصة بالستايل أي اكواد css

/* by nak1ha.com */
#notif-wrapper{position:fixed;width:100%;z-index:999}
.blanternotif{background:#d32f2f;color:#FFF;width:50px;height:50px;border-radius:100%;position:fixed;z-index:999;bottom:45%;left:20px;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notifklik;animation-duration:5s;animation-iteration-count:infinite;animation-name:notifklik;transition:all 5s ease-in-out}
.blanternotif i{color:#FFF;font-size:25px;margin:11px 12px 10px 13px;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notificon;animation-duration:2s;animation-iteration-count:infinite;animation-name:notificon;transition:all 2s ease-in-out}
@keyframes notifklik{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes notificon{0%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(-30deg)}}
@keyframes notifbox{0%{transform:rotateZ(-45deg);visibility:visible;opacity:0;bottom:68%;left:78px}100%{transform:none;visibility:visible;opacity:1;bottom:41%;left:110px}}
.notifbox{padding:20px;border-radius:3px;position:fixed;resize:none;line-height:1.5;z-index:999;left:110px;bottom:41%;max-width:30rem;background:#d32f2f;border:1px solid #d32f2f;color:#fff;font-size:13px;box-shadow:0 1px 1px 0 rgba(0,0,0,0.07),0 1px 1px 0 rgba(0,0,0,0.06);display:inline-block;opacity:0;visibility:hidden;transition:.4s ease-in-out}
.notifbox:before{content:"";width:0;height:0;position:absolute;top:-.7px;left:-15px;border-width:8px;border-style:solid;border-color:#d32f2f #d32f2f transparent transparent;display:block}.blanterxE5CD{display:none!important}#notif-wrapper.aktif .blanterxE5CD{display:block!important;animation-name:none!important}#notif-wrapper.aktif .blanterxE7F4{display:none!important}
.notifbox.aktif{-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-name:notifbox;animation-duration:1s;animation-iteration-count:1;animation-name:notifbox;transition:all 1s ease-in-out;opacity:1;visibility:visible}
@media screen and (max-width:680px){.notifbox:before{display:none}.notifbox{left:0%!important;bottom:0}@keyframes notifbox{0%{left:0!important}100%{left:0!important}}}

ثالثا, ابحث عن الوسم <body> او <body ثم ضع أسفله مباشرة الاكواد التالية مع تغيير العبارة الملونة بالأحمر

رابعا وأخيرا, قم بإضافة هذا السكريبت فوق الوسم </body> والذي ستجده في نهاية القالب

ثم قم بحفظ القالب, وعاين النتيجة, نتمنى أن تنال التدوينة إعجابكم إن كان هناك أي مشكلة في التركيب لا تنسو تركها لنا في التعليقات.

اضافة رساله تنبيه لمدونات بلوجر بلغة الماتيريال ديزاين

2018-07-08T05:00:00.002-07:00

اضافة رساله تنبيه لمدونات بلوجر بلغة الماتيريال ديزاين

شرح التركيب

أول أبحث عن هذا الوسم]]></b:skin>ثم وقم بوضع الكود التالى فوقه.

/* Material Design Dialog Box wdbloog.blogspot.com/ */ a.waves-light.close-sf{font-size:14px;color:#fff} .blanternotif,.matilampu{visibility:hidden;opacity:0} .blanternotif{background:#fff;position:fixed;padding:25px;top:15%;transition:all .3s ease-in-out;max-width:450px;left:35%;z-index:99;border-radius:4px;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)} .blanternotif button{border:none;position:absolute;margin-top:17px;right:30px;cursor:pointer;background:#e8e8e8;padding-left:7px;outline:0} a.waves-light.close-sf{background:#3949ab;margin-top:15px;display:inline-block;padding:10px 13px;border-radius:3px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);float:right;text-transform:uppercase} .matilampu{position:fixed;top:0;background:rgba(0,0,0,.59);left:0;right:0;bottom:0;margin:0;z-index:97;transition:all .4s ease-in-out} .blantertitle{margin-bottom:15px} .blanternotif.aktif,.matilampu.aktif{visibility:visible;opacity:1} .blanternotif.aktif{top:20%} .icx{position:absolute;top:10px;left:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwJN9jX3qi6WFyaGzpl6sxlM6s7KWR8cue3HT0nosjuVu-7cAd44RLoAiEPWkSt28D1yPctxnDGL2YFZgXfo45djoGFUmpYaxHR98eFXG0EVyHH_0jr9HPJZUXy-NQNhrwfl4Bkm2d2rY/s1600/mdclose.png)no-repeat;background-size:15px;margin:10px 8px;width:15px;height:15px} .notiftext{font-size:14px;line-height:1.5} a.shownotif {background: #3949ab;margin-top: 15px;display: inline-block;padding: 10px 13px;border-radius: 3px;box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);float: right;text-transform: uppercase;color: #fff;} @media screen and (max-width:768px){.blanternotif{left:10%;right:10%}}

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

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

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

2018-07-08T04:47:00.000-07:00

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

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

طريقة تركيب الاضافة

توجه الي مدونتك
ثم قم باختيار قالب ثمتحريرHTML
ثم قم بالبحث عن الوسم ]]></b:skin>
ثم قم باضافة هذه الاكواد فوقه

#wrap {margin:20px auto;text-align:center;} a.btn { display: inline-block; position: relative; text-decoration: none; font-weight: 100; letter-spacing: .5px; padding: 10px 20px; margin: 10px; color: #0B6EAB; font-size: 16px; text-transform: uppercase; border-radius: 3px; transition: all 0.3s ease-out; border: 1px solid #0B6EAB; } a.btn:hover { background: #30abd5; color: #fff; box-shadow: inset 0px -50px 0px #22313F; } a.btn::before { color: #0B6EAB; display: -webkit-inline-box; content: "\f06e"; font-family: fontawesome; margin: 0 0 0 5px; } a.btn:hover::before { color: #fff; } a.btn2 { display: inline-block; position: relative; text-decoration: none; font-weight: 100; background: #dd2f2f; letter-spacing: .5px; padding: 10px 20px; margin: 10px; color: #fff; box-shadow: inset 0 0 0 #22313F; font-size: 16px; text-transform: uppercase; border-radius: 3px; transition: all 0.3s ease-out; } a.btn2:hover { background: #30abd5; color: #fff; box-shadow: inset 0px -50px 0px #22313F; } a.btn2::before { color: #FFFFFF; display: -webkit-inline-box; content: "\f090"; font-family: fontawesome; margin: 0 0 0 5px; }

ثم قم بوضع هذا الكود في اي موضوع في مدونتك

كود زر التحميل

كود زر المعاينة

إضافة فوتر إحترافي مع أزرار مواقع التواصل الإجتماعي أسفل كل مدونة بلوجر

2018-07-07T14:15:00.000-07:00

إضافة فوتر إحترافي مع أزرار مواقع التواصل الإجتماعي أسفل كل مدونة بلوجر

السلام عليكم ورحمة الله وبركاته

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

مميزات الفوتر:

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

كيفية تركيب الفوتر على مدونة بلوجر:

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

بعد ذلك قم بالبحث عن الرمز ]]></b:skin> الآن أضف الكود التالي فوقه مباشرةً:

الخطوة الأخيرة قم بالبحث عن الرمز <footer>

أو <footer أو أسفل حقوق القالب قم بمسح جميع الروابط أسفل مدونتك ثم أستبدلها بالفوتر الجديد مع الكود التالي:

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

بعد أن تنتهي إضغط حفظ القالب.

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

إضافة تأثير جميل على المشاركات حجز بشكل مميز

2018-07-07T13:55:00.003-07:00

إضافة تأثير جميل على المشاركات حجز بشكل مميز

إذا كنت ترغب بتختلف شكل الألوان المشتركة بمدونتك وإمارات بعض الألوان والتأثيرات الجميلة عليها لكي تظهر لك بشكل رائع وجذاب وغير تقليدي، قدم لك بشكل جيد وجذاب وغير تقليدي، نقدم لك اليوم من خلال هذا الدرس شكلين مختلفين لتغير شكل المشاركات الشائعة فاختر منها ما تفضله وقم باضافة الكود الخاص بالتأثير. طريقة الاضافة: 1- اذهب للوحة التحكم ثم القالب ثم تحرير HTML ابحث عن هذا الكود التالي:



 ]]> </ ب: الجلد>

2- ثم ضعه كود اضافتها لموقعك من الشكلين التاليين

الشكل

كود الشكل الأول :

# PopularPosts1 ul li a: hover {color: #fff؛ زخرفة النص: لا شيء! الهامش السفلي: 0! مهم ؛}

# PopularPosts1 ul li a {-webkit-text-size-adjust: auto؛ -webkit-text-stroke-width: 0px؛ اللون: # 333333 ؛ display: block؛ font-size: 14px؛ نمط الخط: طبيعي نوع الخط: عادي الخط الوزن: عادي. تباعد حروف: طبيعي؛ خط الطول: 18 بكسل ؛ الهامش اليمين: 35px؛ الحد الأدنى للارتفاع: 30 بكسل ؛ الأيتام: 2 ؛ الحشو: 0px؛ محاذاة النص: -webkit التلقائي. زخرفة النص: لا شيء! مسافة بادئة نصية: 0 بكسل ؛ تحويل النص: لا شيء ؛ مساحة بيضاء: عادي ؛ الأرامل: 2 ؛ تباعد الكلمات: 0px؛ } # PopularPosts1 ul li .item-thumbnail {float: left؛ border: 0؛ margin-right: 10px؛ background: transparent؛ padding: 0؛ height: 51px} # PopularPosts1 ul li: الطفل الأول: بعد ، # PopularPosts1 ul li: first-child + li: after، # PopularPosts1 ul li: first-child + li + li: after، # PopularPosts1 ul li: first-child + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li: after {position: absolute؛ top: 10px؛ right: 5px؛ border-radius: 2px؛ border: 1px solid #ccc؛ background: # 353535؛ -webkit-box-shadow: 0px 0px 5px # 000؛ -moz-box-shadow: 0px 0px 5px # 000؛ width: 30px؛ height: 30px؛ line-height: 1em؛ text -align: مركز؛ حجم الخط: 28px؛ اللون: # الاتحاد الفرنسي} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li {background: # DF01D7؛ width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li: after {content: "8"} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li {background: # B041FF؛ width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li: after {content: "9"} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li + li {background: # F52887؛ width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li + li: after {content: "10"} # PopularPosts1 ul li: first-child + li + li + li + li + li {background: # 7ee3c7؛ width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li: after {content: "6"} # PopularPosts1 ul li: first-child + li + li + li + li + li + li {background: # f6993d؛ width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li + li: after {content: "7"} # PopularPosts1 ul li: first-child + li + li + li + li {background: # 33c9f7؛ width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li: after {content: "5"} # PopularPosts1 ul li: first-child + li + li + li {background: # c7f25f؛ width: 90٪} # PopularPosts1 ul li: first-child + li + li + li: after {content: "4"} # PopularPosts1 ul li: first-child + li + li {background: # ffde4c؛ width: 90٪} # PopularPosts1 ul li: first-child + li + li: after {content: "3"} # PopularPosts1 ul li: first-child + li {background: # ff764c؛ عرض: 90٪} # PopularPosts1 ul li: first-child + li: after {content: "2"} # PopularPosts1 ul li: first-child {background: # ff4c54؛ width: 90٪} # PopularPosts1 ul li: first-child: after {content: "1"} # PopularPosts1 ul {margin: 0؛ padding: 0px 0؛ list-style-type: none} # PopularPosts1 ul li {position: relative؛ margin: 6px 0؛ border-radius: 0px 0px 0px 0px؛ border: 1px solid # f7f7f7؛ -webkit-box-shadow: 2px 2px 2px # 000؛ -moz-box-shadow: 3px 3px 3px # 000؛ padding: 10px؛} # PopularPosts1 img { الحدود بين دائرة نصف قطرها: 0px؛ ماكس العرض: 60px؛ الحد الأقصى للطول: 60px؛ هامش اليسار: 4PX. }

الشكل الثاني

كود الشكل الثاني:

# PopularPosts1 ul li a: hover {color: # 000؛ زخرفة النص: لا شيء! الهامش السفلي: 0! مهم ؛}

# PopularPosts1 ul li a {-webkit-text-size-adjust: auto؛ -webkit-text-stroke-width: 0px؛ اللون: # 333333 ؛ display: block؛ font-size: 14px؛ نمط الخط: طبيعي نوع الخط: عادي الخط الوزن: عادي. تباعد حروف: طبيعي؛ خط الطول: 18 بكسل ؛ الهامش اليمين: 35px؛ الحد الأدنى للارتفاع: 30 بكسل ؛ الأيتام: 2 ؛ الحشو: 0px؛ محاذاة النص: -webkit التلقائي. زخرفة النص: لا شيء! مسافة بادئة نصية: 0 بكسل ؛ تحويل النص: لا شيء ؛ مساحة بيضاء: عادي ؛ الأرامل: 2 ؛ تباعد الكلمات: 0px؛ } # PopularPosts1 ul li .item-thumbnail {float: left؛ border: 0؛ margin-right: 10px؛ background: transparent؛ padding: 0؛ height: 51px} # PopularPosts1 ul li: الطفل الأول: بعد ، # PopularPosts1 ul li: first-child + li: after، # PopularPosts1 ul li: first-child + li + li: after، # PopularPosts1 ul li: first-child + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li: after، # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li: after {position: absolute؛ top: 10px؛ right: 5px؛ border-radius: 50٪؛ border: 2px solid #ccc؛ background: # 353535؛ -webkit-box-shadow: 0px 0px 5px # 000؛ -moz-box-shadow: 0px 0px 5px # 000؛ width: 30px؛ height: 30px؛ line-height: 1em؛ مواءمة النصوص: مركز؛ حجم الخط: 28px؛ اللون: # الاتحاد الفرنسي} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li {width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li: after {content: "8"} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li {width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li: after {content: "9"} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li + li {width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li + li: after {content: "10"} # PopularPosts1 ul li: first-child + li + li + li + li + li {width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li: after {content: "6"} # PopularPosts1 ul li: first-child + li + li + li + li + li + li {width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li + li + li: after {content: "7"} # PopularPosts1 ul li: first-child + li + li + li + li {width: 90٪} # PopularPosts1 ul li: first-child + li + li + li + li: after {content: "5"} # PopularPosts1 ul li: first-child + li + li + li {width: 90٪} # PopularPosts1 ul li: first-child + li + li + li: after {content: "4"} # PopularPosts1 ul li: first-child + li + li {width: 90٪} # PopularPosts1 ul li: first-child + li + li: after {content: "3"} # PopularPosts1 ul li: first-child + li {width: 90٪} # PopularPosts1 ul li: first-child + li: after {content: "2"} # PopularPosts1 ul li: الطفل الأول {width: 90٪} # PopularPosts1 ul li: first-child: after {content: "1"} # PopularPosts1 ul {margin: 0؛ padding: 0px 0؛ list-style-type: none} # PopularPosts1 ul li { خلفية: # FFFFFF. border: 2px solid # 777777؛ border-radius: 25px 0؛ الهامش: 6 بكسل × 0 الحشو: 10px؛ موقف: قريب } # PopularPosts1 ul li: hover {background: # F1FBFE؛ الحد: 2px solid # 06BBFD؛} # PopularPosts1 img { الحدود بين دائرة نصف قطرها: 200px؛ ماكس العرض: 60px؛ الحد الأقصى للطول: 60px؛ هامش اليسار: 4PX. }

ملحوظة:
اذا كنت تريد تغير الألوان والدور من الكود الملون أعلاه.

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

2018-07-07T13:08:00.001-07:00

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

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

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

كيف اجعل التسميات في مدونتي على شكل قائمة منسدلة؟

خذ نسخة إحتياطية من قالب مدونتك قبل أي شيء
1. يجب أن تكون قد أضفت مؤخرًا أداة "التسميات" وذلك يتم من خلال التخطيط ثم أنقر على إضافة اداة ثم اختيار أداة "التسميات".

2. لعمل قائمة التسميات على شكل قائمة منسدلة أنتقل إلى القالب ثم انقر على
3. أنتقل إلى أداة التسميات من خلال "الإنتقال إلى اداة" ثم أختر "Label"

4. حدد كامل الكود المشار إليه في الصورة السابقة وهو كالتالي:

<b:widget id='Label1' locked='false' title='أقسام المدونة' type='Label' version='1' visible='true'> <b:includable id='main'> <b:if cond='data:title'> <h2>
 <data:title/> </h2>
</b:if> <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
 <b:if cond='data:display == "list"'> <ul> <b:loop values='data:labels' var='label'>
<li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'> <data:label.name/> </span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> <data:label.name/> </a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'> ( <data:label.count/> ) </span> </b:if> </li>
</b:loop> </ul>
<b:else/> <b:loop values='data:labels' var='label'> <span expr:class='"label-size label-size-" + data:label.cssSize'> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'> <data:label.name/> </span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> <data:label.name/> </a> </b:if> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'> ( <data:label.count/> ) </span> </b:if> </span> </b:loop> </b:if> <b:include name='quickedit'/> </div>
</b:includable> </b:widget>

5. وإستبدله بالكود التالي:

6. أنقر على