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

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر تعريف الكاتب سبتمبر 27, 2017

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

Admin Amer

سبتمبر 27, 2017

0 تعليقات

شاركه غرد جوجل+

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

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

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

نبدأ الشرح على بركة الله

يمكنك معاينة الاضافة من هنا

1. إبحث على  وضع هذا الكود فوقه مباشرة

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/> <style>.author_description_container span { padding: 15px; border-radius: 10px; border-top-right-radius: 0!important; position: relative; resize: none; min-width: 3rem; max-width: 32rem; background: #0ba9f4; border: 1px solid #0ba9f4; color: #fff; font-size: 13px; display: inline-block; margin-top: -3.222%; } .author_description_container span:after, .author_description_container span:before { content: ""; width: 0; height: 0; position: absolute; border-style: solid; display: block; border-top-color: rgb(11, 169, 244); border-right-color: transparent; border-bottom-color: transparent; border-left-color: rgb(11, 169, 244); } .author_description_container span:before { top: -.9px; right: -15px; border-width: 8px } .author_description_container span:after { top: 0; left: 100%; border-width: 7px } .authorboxwrap i { font-size: 15px; float: left; margin-right: 5px; color: #28c469 } .avatar-container i { position: absolute; color: #fff; font-size: 40px; background: rgba(0,0,0,.49); right: -5px; padding: 30px; border-radius: 100%; opacity: 0; transition: all .3s ease-in-out; } .avatar-container { position: relative; cursor: pointer; float: right; margin-left: 20px; margin-top: 15px; margin-right: 10px; } .authorboxwrap { background: #fff; padding: 10px; margin-bottom: 20px; overflow: hidden; border-top: 1px solid #ddd; } .avatar-container img { width: 100px; height: auto; border-radius: 100%; } .author_description_container h5 a { color: #666; } .author_description_container h5 { font-weight: 600; font-size: 13px; display: inline-block; margin: 5px; } </style>

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

<div class="authorboxwrap"><div class="authorboxfull"><div class="avatar-container"><i class="material-icons"></i><img class="author_avatar img-circle" height="92" expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' width="92"/></div><div class="author_description_container"><h5><a href="#" rel="author"><data:post.author/></a><i class="material-icons"></i></h5><p><span>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. </span></p></div></div></div>

اذا اعجبتك الاضافة فيوجد عدة اضافات في المدونة يمكنك تصفح المدونة انشالله تجد كل ما تحتاجه لذا اشترك في المدونة لكي يصلككل جديد

اضافة شريط يحمل اسم الكاتب حسب من نشر الموضوع مثل المحترف كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر تعريف الكاتب ديسمبر 17, 2016

اضافة شريط يحمل اسم الكاتب حسب من نشر الموضوع مثل المحترف كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

ديسمبر 17, 2016

0 تعليقات

شاركه غرد جوجل+

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

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

1.  توجه لقالب >> تحرير ابحث بإستعمال CTRL+F عن <[[
2. ضع الكود التالي فوقه

/* post author */
.about-authorth span a{ background:rgba(0,0,0,0.1);  display:block;  width:43px;  text-align:center;  height:48px;  line-height:54px;  font-size:20px}
.about-authorth span{ float:left}
.about-authorth a{ color:#fff;  font-size:18px;  line-height:46px;  margin:0 10px 0 0}
.about-authorth{ height:48px;  background:#D03F42;  margin:25px auto 0;  width:90%;  border-radius:5px 0 0 5px}
.about-authorth img{ width:70px;  height:70px;  float:right;  border:5px solid #D03F42;  border-radius:7px;  margin:-16px 0 0 0}

1. ابحث عن

* قد تجد الكود متكرر 4 مرات أو أقل الكود الأخير هو المقصود

1. ضع الكود التالي أسفله 

 

و شكرا

اضافة التعريف الكاتب على شكل اقتباس كتبها: المدون التقني - الخبير عامر بشير

Admin Amer لا يوجد تعليق اضافات بلوجر بلوجر تعريف الكاتب أكتوبر 26, 2016

اضافة التعريف الكاتب على شكل اقتباس كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

أكتوبر 26, 2016

0 تعليقات

شاركه غرد جوجل+

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

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

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

1. نبحث عن <[[
2. ونضع هذا الكود فوقه

/* post author */
.post-authoor p:after{ content:"\f10d";  font-family:fontawesome;  margin-right:4px}
.post-authoor p:before{ content:"\f10e";  font-family:fontawesome;  margin-left:4px}
.post-authoor p{ padding:0 28px;  font-size:15px;  color:#f3f3f3;  margin-top:4px;  line-height:26px}
.post-authoor h3{ font-size:23px;  font-weight:100}
.post-authoor .author-img-fo{ width:100px;  height:100px;  text-align:center;  border:2px solid #3d4a60;  border-radius:8px;  position:absolute;  right:0;  left:0;  top:-50px;  margin:auto}
.post-authoor:before{ content:"\f10e";  font-family:fontawesome;  margin-left:4px;  position:absolute;  right:20px;  font-size:77px;  top:14px;  color:rgba(0,0,0,0.14)}
.post-authoor:after{ content:"\f10d";  font-family:fontawesome;  margin-right:4px;  position:absolute;  left:20px;  font-size:77px;  bottom:10px;  color:rgba(0,0,0,0.14)}
.post-authoor{ border:1px solid #eee;  border-left:0;  text-align:center;  position:relative;  border-right:0;  padding:20px 0;  background:#3d4a60;  padding-top:64px;  color:#fff;  margin:42px auto;  max-width:95%;  border-radius:11px;  margin-bottom:0;margin-top: 77px;}

1. نبحث عن 
2. قد تجد الكود متكرر 4 مرات أو أقل الكود الأخير هو المقصود
3. ان لم تجد الكود ابحث عن هذا 
4. لتحميل الكود الثاني من هنا
5. لا تنسى الاشتراك في الموقع  و ان واجهتك مشاكل في التركيب ضع رابط تحميل قالبك في الفيسبوك من هنا