wesamdev

صفحات ويب على شكل صفحات كتاب قابلة للتقليب باستخدام CSS

0 0 Elnggar الثلاثاء، 29 يونيو 2021

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

صفحات ويب على شكل صفحات كتاب قابلة للتقليب باستخدام CSS

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

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

سوف نستخدم أيضًا إضافة اسمها jScrollPane وذلك للحصول على شريط تمرير (scrollbar) يظهر عندما يكون المحتوى أطول من ارتفاع المتصفح.

وهذه قائمة بإضافات jQuery التي سوف نستخدمها:

يمكنك معاينة المثال الموضح في هذا الدرس من هنا.

كما يمكنك تحميل الملفات المصدرية.

ملف HTML

في البداية يجب أن يكون لدينا حاوٍ رئيسي لاحتواء جميع العناصر، وداخل هذا الحاوي سوف يكون هناك عنصر <div> للقائمة الجانبية وسوف نعطيه فئة (class) بالاسم "menu-panel" وسوف يكون هناك عنصر <div> آخر يحتوي على المحتوى الرئيسي للموقع وسوف نعطيه فئة بالاسم "bb-custom-wrapper". وفي داخل كل قسم سوف يكون هناك حاوٍ للمحتوى وعنصر <div> سوف نحتاجه من أجل شريط التمرير الذي ذكرناه سابقًا.

<divid="container"class="container">
 <divclass="menu-panel">
 <h3>Table of Contents</h3>
 <ulid="menu-toc"class="menu-toc">
 <liclass="menu-toc-current"><ahref="#item1">Self-destruction</a></li>
 <li><ahref="#item2">Why we die</a></li>
 <li><ahref="#item3">The honeymoon</a></li>
 <li><ahref="#item4">A drawing joke</a></li>
 <li><ahref="#item5">Commencing practice</a></li>
 </ul>
 </div>
 <divclass="bb-custom-wrapper">
 <divid="bb-bookblock"class="bb-bookblock">
 <divclass="bb-item"id="item1">
 <divclass="content">
 <divclass="scroller">
 <h2>Self-destruction</h2>
 <p>...</p>
 </div>
 </div><!-- /content -->
 </div><!-- /bb-item -->
 <divclass="bb-item"id="item2"><!-- ... --></div>
 <divclass="bb-item"id="item3"><!-- ... --></div>
 <divclass="bb-item"id="item4"><!-- ... --></div>
 <divclass="bb-item"id="item5"><!-- ... --></div>
 </div><!-- /bb-bookblock -->
 <nav>
 <aid="bb-nav-prev"href="#">←</a>
 <aid="bb-nav-next"href="#">→</a>
 </nav>
 <spanid="tblcontents"class="menu-button">Table of Contents</span>
 </div><!-- /bb-custom-wrapper --></div><!-- /container -->

سوف نقوم بربط عناصر القائمة الجانبية بصفحات الموقع (التي تحمل الفئة "bb-item)، وسوف نُضيف أيضًا سهمين في أعلى الصفحة من أجل التنقل بين الصفحات وزر يقوم بفتح وإغلاق القائمة الجانبية.

لنقم الآن بإضافة تنسيقات CSS.

تنسيقات CSS

لن نتحدث هنا عن التنسيقات التي تأتي مع إضافة BookBlock لأنك سوف تجدها داخل ملف bookblock.css، وإنّما سوف نُركّز على التنسيقات الأخرى المهمة.

لنبدأ التنسيقات بإضافة سطر يقوم بجلب الخط المسمى "Lato" من خدمة Google web fonts:

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

سوف نقوم بإعطاء الوسم <html> الخاصية height: 100% وذلك لأننا سوف نحتاج أن نجعل بعض العناصر تتمدد على ارتفاع المتصفح كاملًا:

html {
 height:100%;}

سوف نستخدم أيضًا الخاصية box-sizing: border-box وذلك حتى نستخدم قيم مئوية لكل من العرض والإرتفاع أثناء استخدام padding دون القلق حول أبعاد العناصر والقيام بعمليات حسابية نحن بغنىً عنها:

*,*:after,*:before {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 padding:0;
 margin:0;}

لنقم الآن بتعريف الخط الذي سوف نستخدمه في الموقع (العنصر body) ونُعطيه ارتفاع بقيمة 100% (تذكّر أننا نريد ارتفاع بهذه القيمة لأنه سوف يكون هناك عناصر تتموضع بشكل مطلق (absolute positioning) وسوف تحتاج أن تتمدد على ارتفاع المتصفح كاملًا):

body {
 font-family:'Lato',Calibri,Arial, sans-serif;
 font-weight:400;
 font-size:100%;
 color:#333;
 height:100%;}

سوف نستعمل أيضًا إضافة Modernizr وسوف نُضيف الفئة "no-js" إلى وسم <html>، فإذا كانت الجافاسكربت مفعّلة فإنّ Modernizr سوف يستبدل تلك الفئة بالفئة "js". وهذا سوف يساعدنا على إعطاء خصائص CSS معينة لبعض العناصر التي لا نريدها إذا كانت الجافاسكربت معطّلة.

لاحظ أيضًا أننا نحتاج أن يكون عرض الصفحة وارتفاعها بقيمة 100% فقط إذا كانت الجافاسكربت مفعّلة وعندها فقط نريد من العنصر body أن يكون له خاصية overflow: hidden:

.js body {
 overflow: hidden;}

وهذه بعض التنسيقات الخاصة بالروابط:

a {
 color:#555;
 text-decoration: none;}
a:hover {
 color:#000;}

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

دعونا إذًا نقوم بإعطاء الحاوي الرئيسي عرضًا وارتفاعًا بقيمة 100% وأن نُضيف الخاصية transition إلى الحاوي container:

.container,.bb-custom-wrapper,.bb-bookblock {
 width:100%;
 height:100%;}.container {
 position: relative;
 left:0px;
 transition: left 0.3s ease-in-out;}

عند النقر على أيقونة القائمة الجانبية فإن فئة (class) أخرى سوف يتم إضافتها إلى الحاوي container والتي سوف تحتوي على الخاصية left: 240px (نفس العرض الخاص بالقائمة الجانبية) وبالتالي فإنّ الصفحة كاملة سوف تتحرك إلى اليمين بمقدار 240px وبالتالي ظهور القائمة الجانبية:

.slideRight {
 left:240px;}

ولكن بدون الجافاسكربت لن نكون قادرين على القيام بما سبق لذلك سوف نقوم بإضافة الخاصية padding-left: 240px:

.no-js .container {
 padding-left:240px;}

ونريد أن تكون القائمة الجانبية ثابتة في الجانب الأيسر بشكل افتراضي:

.menu-panel {
 background:#f1103a;
 width:240px;
 height:100%;
 position:fixed;
 z-index:1000;
 top:0;
 left:0;
 text-shadow:01px1px rgba(0,0,0,0.1);}

وإذا كانت الجافاسكربت مفعلة فسوف نقوم بموضعة القائمة الجانبية بشكل مطلق وإلى اليسار بقيمة -240px:

.js .menu-panel {
 position: absolute;
 left:-240px;}

وهذه هي التنسيقات الخاصة بعناصر القائمة الجانبية:

.menu-panel h3 {
 font-size:1.8em;
 padding:20px;
 font-weight:300;
 color:#fff;
 box-shadow: inset 0-1px0 rgba(0,0,0,0.05);}.menu-toc {
 list-style: none;}.menu-toc li a {
 display: block;
 color:#fff;
 font-size:1.1em;
 line-height:3.5;
 padding:020px;
 cursor: pointer;
 background:#f1103a;
 border-bottom:1px solid #dd1338;}.menu-toc li a:hover,.menu-toc li.menu-toc-current a{
 background:#dd1338;}

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

.bb-custom-wrapper nav {
 top:20px;
 left:60px;
 position: absolute;
 z-index:1000;}

كما أنّ روابط السهمين وزر القائمة الجانبية سوف يتموضعان بشكل مطلق (position: absolute) وسوف نعطيها الخاصية border-radius: 50% لنجعلها تظهر كالدائرة:

.bb-custom-wrapper nav span,.menu-button {
 position: absolute;
 width:32px;
 height:32px;
 top:0;
 left:0;
 background:#f1103a;
 border-radius:50%;
 color:#fff;
 line-height:30px;
 text-align: center;
 speak: none;
 font-weight: bold;
 cursor: pointer;}.bb-custom-wrapper nav span:last-child {
 left:40px;}.bb-custom-wrapper nav span:hover,.menu-button:hover {
 background:#000;}

سوف يكون الزر الذي يفتح ويغلق القائمة الجانبية موجودًا في أعلى يسار الصفحة وسوف نقوم بإخفاء النص الموجود بداخله (نريد أن تظهر الأيقونة فقط):

.menu-button {
 z-index:1000;
 left:20px;
 top:20px;
 text-indent:-9000px;}

لنقم الآن بإنشاء أيقونة بسيطة بدون استعمال أي صور وذلك باستعمال العنصر الزائف :after واستعمال الخاصية box-shadow والتي سوف تعمل على إنشاء الخطين العلوي والسفلي للأيقونة:

.menu-button:after {
 position: absolute;
 content:'';
 width:50%;
 height:2px;
 background:#fff;
 top:50%;
 margin-top:-1px;
 left:25%;
 box-shadow:0-4px#fff, 0 4px #fff;}

وفي حالة كان الجافاسكربت معطلًا فإننا نريد أن نخفي هذه العناصر:

.no-js .bb-custom-wrapper nav span,.no-js .menu-button {
 display: none;}

لننتقل الآن إلى تنسيق الأجزاء الداخلية لكل قسم من أقسام الصفحة (bb-item). نريد أن يتم موضعة المحتوى (content) بشكل مطلق ونريد ان نستعمل الخاصية overflow: hidden، وهذا مهم لأننا نريد تطبيق شريط التمرير هنا ونريد أن نفعل ذلك فقط عند قلب/تغيير الصفحة. فإذا لم نستخدم الخاصية overflow: hidden فإنّك سوف ترى المحتوى يتداخل ببعضه. وأعيد وأكرر مرة أخرى بأنّ هذا سوف يحدث فقط إذا كان الجافاسكربت مفعلًا ولذلك سوف نستخدم الفئة "js":

.js .content {
 position: absolute;
 top:60px;
 left:0;
 bottom:50px;
 width:100%;
 overflow: hidden;}

العنصر <div class="scroller"> هو الذي سوف ينمو مع المحتوى لذلك سوف نعطيه الخاصية padding:

.scroller {
 padding:10px5%10px5%;}

لاحظ أننا استعملنا قيم مئوية للجوانب وذلك حتى نجعل الصفحة تتجاوب مع حجم الشاشة.

دعونا نتخلص من الحواف الحادة عندما نقوم بالتمرير (scroll) وذلك باستخدام العناصر الزائفة إلى أعلى وأسفل عنصر المحتوى مع استخدام تدرج بين اللون الأبيض والشّفّاف:

.js .content:before,.js .content:after {
 content:'';
 position: absolute;
 top:0;
 left:0;
 width:100%;
 height:20px;
 z-index:100;
 pointer-events: none;
 background:
 linear-gradient(
 to bottom,
 rgba(255,255,255,1)0%,
 rgba(255,255,255,0)100%
 );}.js .content:after {
 top:auto;
 bottom:0;
 background:
 linear-gradient(
 to top,
 rgba(255,255,255,1)0%,
 rgba(255,255,255,0)100%
 );}

هذا سوف يجعل النص يظهر بشكل باهت.

لنقم الآن بتنسيق عناصر النصوص:

.content h2 {
 font-weight:300;
 font-size:4em;
 padding:0010px;
 color:#333;
 margin:01%40px;
 text-align: left;
 box-shadow:010px0 rgba(0,0,0,0.02);
 text-shadow:002px#fff;}.no-js .content h2 {
 padding:40px1%20px;}.content p {
 font-size:1.2em;
 line-height:1.6;
 font-weight:300;
 padding:5px8%;
 text-align: justify;}

كل ما تبقى علينا الآن من تنسيقات CSS هو استخدام الـmedia queries. فإذا كانت الجافاسكربت معطلة فإننا لا نريد أن تظهر القائمة الجانبية إذا كان العرض أقل من 800px. كان هذا فقط مثالًا بسيطًا على كيفية التحكم بالعناصر تحت ظروف وشروط معينة.

الـmedia query الأخيرة سوف تعمل على تكبير الخط قليلًا من أجل الأجهزة صغيرة الحجم كالهواتف.

@media screen and(max-width:800px){
 .no-js .menu-panel {
 display: none;
 }
 .no-js .container {
 padding:0;
 }}@media screen and(max-width:400px){
 .menu-panel,
 .content {
 font-size:75%;
 }}

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

بعض الجافاسكربت

سوف نبدأ اولًا بتخزين (caching) بعض العناصر حتى لا نضطر إلى استدعائها في كل مرة وسوف نقوم أيضًا بتهئية/مناداة إضافة BookBlock. نُريد أيضًا أن نقوم بضبط بعض الأمور بعد كل قلب/تغيير للصفحة وهذه الأمور هي رقم الصفحة الحالية والسلوك الخاص بإضافة jScrollPane. وهذا محدد في الاستدعاء الخلفي (callback) المسمى onEndFlip والممرر إلى إضافة BookBlock.

var $container = $('#container'),// the element we will apply the BookBlock plugin to
$bookBlock = $('#bb-bookblock'),// the BookBlock items (bb-item)
$items = $bookBlock.children(),// index of the current item
current =0,// initialize the BookBlock
bb = $('#bb-bookblock').bookblock({
 speed :800,
 perspective :2000,
 shadowSides :0.8,
 shadowFlip :0.4,
 // after each flip...
 onEndFlip :function(old, page, isLimit){
 // update the current value
 current = page;
 // update the selected item of the table of contents (TOC)
 updateTOC();
 // show and/or hide the navigation arrows
 updateNavigation( isLimit );
 // initialize the jScrollPane on the content div for the new item
 setJSP('init');
 // destroy jScrollPane on the content div for the old item
 setJSP('destroy', old );
 }}),// the navigation arrows
$navNext = $('#bb-nav-next'),
$navPrev = $('#bb-nav-prev').hide(),// the table of content items
$menuItems = $container.find('ul.menu-toc > li'),// button to open the TOC
$tblcontents = $('#tblcontents'),
transEndEventNames ={
 'WebkitTransition':'webkitTransitionEnd',
 'MozTransition':'transitionend',
 'OTransition':'oTransitionEnd',
 'msTransition':'MSTransitionEnd',
 'transition':'transitionend'},// transition event name
transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],// check if transitions are supported
supportTransitions =Modernizr.csstransitions;

لنقم أولًا بربط الأحداث ببعض العناصر التي تم تهيئتها سابقًا، كما أننا نريد أن نقوم بتهيئة jScrollPane لأول عنصر (العنصر الحالي).

function init(){
 // initialize jScrollPane on the content div of the first item
 setJSP('init');
 initEvents();}

بما أننا سوف نقوم بتهيئة وإعادة تهيئة وتدمير jScrollPane فلنقم بتعريف دالة لذلك:

function setJSP( action, idx ){
 var idx = idx ===undefined? current : idx,
 $content = $items.eq( idx ).children('div.content'),
 apiJSP = $content.data('jsp');
 if( action ==='init'&& apiJSP ===undefined){
 $content.jScrollPane({verticalGutter :0, hideFocus :true});
 }
 elseif( action ==='reinit'&& apiJSP !==undefined){
 apiJSP.reinitialise();
 }
 elseif( action ==='destroy'&& apiJSP !==undefined){
 apiJSP.destroy();
 }}

سوف نحتاج إلى ربط العديد من الأحداث كالتالي:

سوف يتم استدعاء الدالتين ()next و()prev الخاصتين بإضافة BookBlock وذلك عند النقر على أزرار التنقل أو السحب باستخدام الفأرة.
سوف يظهر جدول المحتويات أو يختفي عند النقر على زر القائمة (tblcontents$).
سوف يتم استدعاء الدالة ()jump الخاصة بإضافة BookBlock وذلك عند النقر على أي عنصر من عناصر جدول المحتويات.
سوف يتم تهيئة jScrollPane عند القيام بتغيير حجم النافذة (window resize).

function initEvents(){
 // add navigation events
 $navNext.on('click',function(){
 bb.next();
 returnfalse;
 });
 $navPrev.on('click',function(){
 bb.prev();
 returnfalse;
 });
 // add swipe events
 $items.on({
 'swipeleft':function(event){
 if( $container.data('opened')){
 returnfalse;
 }
 bb.next();
 returnfalse;
 },
 'swiperight':function(event){
 if( $container.data('opened')){
 returnfalse;
 }
 bb.prev();
 returnfalse;
 }
 });
 // show TOC
 $tblcontents.on('click', toggleTOC );
 // click a menu item
 $menuItems.on('click',function(){
 var $el = $(this),
 idx = $el.index(),
 jump =function(){
 bb.jump( idx +1);
 };
 current !== idx ? closeTOC( jump ): closeTOC();
 returnfalse;
 });
 // reinit jScrollPane on window resize
 $( window ).on('debouncedresize',function(){
 // reinitialise jScrollPane on the content div
 setJSP('reinit');
 });}

ظهور أزرار التنقل من عدمه سوف يعتمد على الصفحة الحالية، فإذا كُنّا في الصفحة الأولى فإننا سوف نرى فقط زر "التالي" وإذا كُنّا في الصفحة الأخيرة فإننا سوف نرى فقط زر "السابق":

function updateNavigation( isLastPage ){
 if( current ===0){
 $navNext.show();
 $navPrev.hide();
 }
 elseif( isLastPage ){
 $navNext.hide();
 $navPrev.show();
 }
 else{
 $navNext.show();
 $navPrev.show();
 }}

عندما نفتح جدول المحتويات (القائمة الجانبية) فإننا نريد أن تختفي عناصر التنقل وأن تظهر مرة أخرى عندما نقوم بإغلاق القائمة الجانبية.

سوف نقوم بتحريك القائمة الجانبية باستخدام خاصية transition، وإذا لم تكن هذه الخاصية مدعومة من المتصفح فإننا سوف نستخدم fallback بسيط:

function toggleTOC(){
 var opened = $container.data('opened');
 opened ? closeTOC(): openTOC();}function openTOC(){
 $navNext.hide();
 $navPrev.hide();
 $container.addClass('slideRight').data('opened',true);}function closeTOC( callback ){
 $navNext.show();
 $navPrev.show();
 $container.removeClass('slideRight').data('opened',false);
 if( callback ){
 if( supportTransitions ){
 $container.on( transEndEventName,function(){
 $(this).off( transEndEventName );
 callback.call();
 });
 }
 else{
 callback.call();
 }
 }}

wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا

باركودالتدوينة

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

الاقسام

css

COMMENTS

BLOGGER

من فضلك حبا وليس امر اترك تعليقك

FACEBOOK

DISQUS

Wesam

$show=home$type=slider$meta=0$snip=0$hide=mobile$rm=0$cate=20$source=random-posts

$show=home$type=three$author=hide$hide=mobile$comment=hide$rm=hide$count=3$source=random-posts

$type=ticker$hide=mobile$cols=4

افلام هندية$type=sticky$count=4$show=home

$show=home

|روبوتات_$type=slider$source=random-posts$snippet=hide$cate=20$show=home

|اضافات بلوجر$type=three$m=0$rm=0$h=400$c=3$show=home

$show=home

صفحات ويب على شكل صفحات كتاب قابلة للتقليب باستخدام CSS

صفحات ويب على شكل صفحات كتاب قابلة للتقليب باستخدام CSS

ملف HTML

تنسيقات CSS

بعض الجافاسكربت

باركودالتدوينة

الاقسام

COMMENTS

[انظر ايضا]_$type=three$hide=mobile$comment=hide$rm=hide$count=3$source=random-posts

|حول العالم_$type=one$hide=home$source=random-posts$count=8

[قد يهمك]_$type=three$hide=mobile$hide=home$comment=hide$rm=hide$count=3$source=random-posts

تابعني علي vk

من انا$hide=mobile

wesam elngar

$show=home$type=slider

$source=random-posts$type=one$count=4$height=auto$m=hide$snippet=hide$rm=hideحيوانات

YouTube$hide=home

$show=home

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

حكمة اليوم !

التسميات$hide=home

تابعني علي $hide=mobileOK$show=home

/fa-clock-o/ WEEK TRENDING$type=list$hide=home$source=random-posts

مواضيع شيقة$type=blogging$m=0$cate=0$sn=0$rm=0$c=4$va=0

RECENT$type=list-tab$date=0$au=0$c=5$hide=home$source=random-posts

REPLIES$type=list-tab$com=0$c=4$src=recent-comments$hide=home

RANDOM$type=list-tab$date=0$au=0$c=5$src=random-posts$hide=home

[وثائقي]_$show=home$type=two$meta=0$snip=0$hide=mobile$rm=0$count=2$source=random-posts

هدف الموقع

رخصة المحتوي

$show=home$type=slider$meta=0$snip=0$hide=mobile$rm=0$cate=20$source=random-posts

$show=home$type=three$author=hide$hide=mobile$comment=hide$rm=hide$count=3$source=random-posts

$type=ticker$hide=mobile$cols=4

افلام هندية$type=sticky$count=4$show=home

$show=home

|روبوتات_$type=slider$source=random-posts$snippet=hide$cate=20$show=home

|اضافات بلوجر$type=three$m=0$rm=0$h=400$c=3$show=home

$show=home

صفحات ويب على شكل صفحات كتاب قابلة للتقليب باستخدام CSS

صفحات ويب على شكل صفحات كتاب قابلة للتقليب باستخدام CSS

ملف HTML

تنسيقات CSS

بعض الجافاسكربت

باركودالتدوينة

الاقسام

SHARE:

COMMENTS

[انظر ايضا]_$type=three$hide=mobile$comment=hide$rm=hide$count=3$source=random-posts

|حول العالم_$type=one$hide=home$source=random-posts$count=8

[قد يهمك]_$type=three$hide=mobile$hide=home$comment=hide$rm=hide$count=3$source=random-posts

تابعني علي vk

من انا$hide=mobile

wesam elngar

$show=home$type=slider

$source=random-posts$type=one$count=4$height=auto$m=hide$snippet=hide$rm=hideحيوانات

YouTube$hide=home

$show=home

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

حكمة اليوم !

التسميات$hide=home

تابعني علي $hide=mobileOK$show=home

/fa-clock-o/ WEEK TRENDING$type=list$hide=home$source=random-posts

مواضيع شيقة$type=blogging$m=0$cate=0$sn=0$rm=0$c=4$va=0

RECENT$type=list-tab$date=0$au=0$c=5$hide=home$source=random-posts

REPLIES$type=list-tab$com=0$c=4$src=recent-comments$hide=home

RANDOM$type=list-tab$date=0$au=0$c=5$src=random-posts$hide=home

[وثائقي]_$show=home$type=two$meta=0$snip=0$hide=mobile$rm=0$count=2$source=random-posts

هدف الموقع

رخصة المحتوي