معي كل اضافه مشاهده وتنزيل

 البحث عن

]]></b:skin>

فوقه

.zr-download,.zr-demo,.zr-url{display: inline-flex;position: relative;direction: rtl;justify-content: space-between;flex-direction: row-reverse;align-items: center;column-gap: 20px;color: #ffffff!important;text-decoration: none;font-weight: bolder;padding: 10px 15px 10px 15px;font-size: 16px;border-radius: 20px;transition: .25s all;border-bottom: solid 3px #00000050;overflow: hidden;box-shadow: 0 0 2px #000;margin: 5px;}

.zr-download{background: linear-gradient(45deg,#7aa5e6,#0041a3);}

.zr-demo{background: linear-gradient(45deg,#3ee07c,#1e9600);}

.zr-url{background: linear-gradient(45deg,#f5af19,#f12711);}

.zr-download:before{background:no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 512 512' fill='%23000' %3E%3Cpath d='M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zM432 456c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z'/%3E%3C/svg%3E");}

.zr-demo:before{background: no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 576 512' fill='%23000' %3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z'/%3E%3C/svg%3E");}

.zr-url:before{background:no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 448 512' fill='%23000' %3E%3Cpath d='M288 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h50.7L169.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L384 141.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H288zM80 64C35.8 64 0 99.8 0 144V400c0 44.2 35.8 80 80 80H336c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v80c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16h80c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E");}

.zr-download:before,.zr-demo:before,.zr-url:before {content: "";display: block;width: 20px;height: 20px;padding: 5px;border-radius: 100%;box-shadow: 0 0 10px #fff;background-color: #fff!important;}

.zr-download:active,.zr-demo:active,.zr-url:active{border-bottom: solid 1px #00000050;inntransform: translate(0px,3px);}

.zr-download:after,.zr-demo:after,.zr-url:after{content: "";display: block;position: absolute;left: -10%;top: 0;width: 0;height: 100%;box-shadow: 0 0 20px 5px #fff;transition: unset;}

.zr-download:hover:after,.zr-demo:hover:after,.zr-url:hover:after{left: 120%;transition: 1s all;}

عند كل اضافه تضع هذا

<a class="zr-download" href="#" target="_blank">زر التحميل</a>

<a class="zr-demo" href="#" target="_blank">زر المعاينة</a>

<a class="zr-url" href="#" target="_blank">زر الزيارة او التوجه</a>

المربع

# تضيف الرابط

وسلامتكم

قائمه المقاله رصاصي

 يمكنك تغير الخلفيه للون وغيرها

البحث عن

<b:include data='top' name='status-message'/>

تحته

<b:include data='posts' name='breadcrumb'/>

والبحث عن

<b:includable id='main' var='top'>

الاسبدال ب

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- No breadcrumb on home page -->

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == "true"'>  » <a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

</b:loop>

<b:else/>

»Unlabelled

</b:if>

» 

<span><data:post.title/></span>

</b:loop>

</span>

</p>

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>

<!-- breadcrumb for the label archive page and search pages.. -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>

</span>

</p>

<b:else/>

<b:if cond='data:blog.pageType == "index"'>

<p class='breadcrumbs'>

<span class='post-labels'>

<b:if cond='data:blog.pageName == ""'>

<a expr:href='data:blog.homepageUrl'>Home</a>

 » All posts

<b:else/>

<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>

</b:if>

</span>

</p>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

<b:includable id='main' var='top'>

والاستايل

البحث عن

]]></b:skin>

فوقه

.breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height: 1.4em;

}

وعندك الثاني

.breadcrumbs {

font-size: 14px;

background: #eeeeee;

background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));

background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);

background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%);

background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);

background: linear-gradient(top, #eeeeee 0%,#cccccc 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );

height: 25px;

line-height: 25px;

color: #454545;

border: solid 1px #cacaca;

width: 100%;

overflow: hidden; 

margin-bottom: 25px; 

padding: 0px

}

تحتاج لتعديل وتعريب فقط

خط وتغطيه المقاله كود

 كودين اختر اللى يناسبك

1- خط غير اللون

البحث عن

]]></b:skin>

فوقه

.post-title {

    text-align: center; /* توسيط النص */

    font-size: 24px; /* حجم الخط */

    color: #333; /* لون النص */

    margin-bottom: 10px; /* التباعد السفلي */

    text-transform: uppercase; /* تحويل النص إلى حروف كبيرة */

    border-bottom: 2px solid #1aa1e2; /* خط أسفل */

    padding-bottom: 5px; /* التباعد الداخلي للجزء السفلي */

    font-weight: bold; /* سمك الخط */

    /* أنماط أخرى حسب الحاجة */

}

2- مغطئ بلون غير

البحث عن

]]></b:skin>

فوقه

.post-title {

    text-align: center; /* توسيط النص */

    font-size: 28px; /* حجم الخط */

    color: #fff; /* لون النص */

    background-color: #1aa1e2; /* لون الخلفية */

    padding: 10px; /* التباعد الداخلي */

    border-radius: 5px; /* زاوية الحواف */

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* ظل */

    /* أنماط أخرى حسب الحاجة */

}

وسلامتكم

توسيط العناصر في Flexbox لأجهزة الجوال

 البحث عن

]]></b:skin>

فوقه

/* توسيط العناصر في Flexbox لأجهزة الجوال */

@media screen and (max-width: 768px) {

    .flex-container {

        flex-direction: column; /* توسيط العناصر رأسيًا على الهواتف */

    }

}

وسلامتكم

توزيع العناصر بشكل مرن

 البحث عن

]]></b:skin>

فوقه

/* توزيع العناصر بشكل مرن */

.flex-container {

    display: flex;

    justify-content: space-between; /* توزيع العناصر بالتساوي بينها */

    align-items: center; /* توسيط العناصر عموديًا */

}

وسلامتكم

توسيط العنوان

 البحث عن

]]></b:skin>

فوقه

/* توسيط العنوان */

h1 {

    font-size: 2.5rem;

    margin-bottom: 20px;

}

وسلامتكم

توسيط الصور

 البحث عن

]]></b:skin>

فوقه

/* توسيط الصور */

img {

    display: block;

    margin: 0 auto; /* توسيط الصور داخل العناصر المحتوية */

    max-width: 100%; /* جعل الصور تأخذ عرضاً كاملاً وتناسب الشاشات */

    height: auto;

}

وسلامتكم

تخطيط الشبكة بستة أعمدة متساوية

 البحث عن

]]></b:skin>

فوقه

/* تخطيط الشبكة بستة أعمدة متساوية */

.grid-container {

    display: grid;

    grid-template-columns: repeat(3, 1fr); /* ثلاثة أعمدة متساوية */

    gap: 20px;

    margin-top: 20px;

}

.grid-item {

    background-color: #fff;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    padding: 20px;

    text-align: center;

}

وسلامتكم