تحميل أفضل 3 عناصر واجهة مستخدم CSS أنيقة للتنقل في صفحات بلوجر

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

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

Numbered page navigatiion widget

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

واجهة المستخدم بأرقام أنيقة

أول شيئ تقوم به أخد نسخة إحتياطية لقالب الخاص بك ، ثم أنقر فوق تعذيل HTML إضغط في أي مكان في الذاخل الأن إلى لوحة المفاتيح ، أنا شخصيا أستعمل الهاتف فقط لوحة المفاتيح لذي hack keybord للأندرويد ، أنقر على ctrl+f تظهر معك خانة البحث ، لننتقل إلى أكواذ جافا سكريبت CSS.

كيف تطيفه في بلوجر

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


<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’>

هذا كوذ الأداة لك الحرية في تعديل الأرقام الظاهرة معك 5.5

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="https://sites.google.com/site/noctblogsite/script/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

الأن الكوذ الثاني إبحث على هذا الخط وستبذله بالكوذ.


<!– navigation –>
<b:include name=’nextprev’/>

الكوذ.


<b:if cond="data:blog.pageType == &quot;index&quot;">
<b:include name="page-navi">
<b:else>
<b:if cond="data:blog.pageType == &quot;archive&quot;">
<b:include name="page-navi">
</b:include>
</b:if>
</b:else>
</b:include>
</b:if>

وأخيرا لننتقل إلى مظهر الأزرار المرقمة على صفحات المدونة CSS ، إبحث على هذا الوسم على /b:skin ، النمظ الأول.



.pagenavi {clear: both؛ margin: 10px auto؛ text-align: center}
 .pagenavi span، .pagenavi a {font-size: 12px؛ padding: 2px 4px 2px 4px؛ margin: 2px؛ border: 1px solid #dfdfdf؛ color: # 000؛} 
.pagenavi a: visit {} 
.pagenavi a: hover، .pagenavi .current {color: #FFF؛ background-color: # e81d1d؛ border: 1px solid # fb1515؛ text-decoration: none؛}

النمظ الثاني.



.pagenavi {clear: both؛ margin: 10px auto؛ text-align: center} 
.pagenavi span، .pagenavi a {padding: 4px 7px؛ margin-right: 2px؛ font-size: 11px؛ color: # 555؛ background: # e8e8e8؛ border: solid 1px #ccc؛} 
.pagenavi a: visit {} 
.pagenavi a: hover، .pagenavi .current {color: #FFF؛ background-color: # e81d1d؛ border: 1px solid # fb1515؛ text- زخرفة: لا شيء ؛} 
.pagenavi .pages {display: none}

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


.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a {border: 1px solid #BFBFBF;padding: 3px 6px;margin: 2px;font-size:11px;color:#4a77ae;background:#e8e8e8;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px; }
.pagenavi a:hover,.pagenavi .current{color:#000;background:#f6f6f6;border: 1px solid #ccc;text-decoration:none;}