شرح ربط منتدى زينفورو xenforo مع Google 2020

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

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

الخطوة رقم 1: سجِّل الدخول إلى حسابك في Blogger وانتقل إلى Dashboard

الخطوة رقم 2: من الخيارات الرأسية ، انقر على القالب -> تحرير HTML->

الخطوة رقم 3: الآن ابحث عن هذا الكود]]> </ b: skin> بالضغط على Ctrl + F Windows أو CMD + F Mac

الخطوة رقم 4: (اختياري) إذا كان نموذج Blogger يحتوي بالفعل على ملف FontAwesome ، فما عليك سوى تخطي هذه الخطوة ، وإذا لم يتم دمجها بعد ، أضف البرنامج النصي FontAwesome أدناه / أعلى </ head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

الخطوة # 5: بمجرد إضافة البرنامج النصي FontAwesome ، قم بنسخ كتلة التعليمات البرمجية أدناه وقم بلصقها قبل / أعلاه]]> </ b: skin>

#themefeatures{text-align:left;padding-top:20px;padding-bottom:10px;border-bottom:3px solid #FAFBF9;border-top:3px solid #FAFBF9}
.themefeature{width:44%;display:inline-block;vertical-align:top;margin-right:10px;margin-left:10px;margin-bottom:15px}
.themefeature:nth-child(2n+2){margin-right:0}
.themefeature .fa{margin-left:10px;float:left;font-size:38px;color:#FA5356}
.themefeaturetext{margin-left:70px;margin-top:-40px;float:left}
.themefeature h2{color:#243746;font-size:22px;margin-bottom:20px}

الخطوة # 6: يمكنك ببساطة تغيير لون أيقونة متعدد الأعمدة عن طريق تغيير اللون: # FA5356 رمز اللون. بمجرد تغيير رمز اللون ، انقر فوق حفظ القالب من الأعلى.

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

<><>

الخطوة رقم 1: انتقل إلى لوحة معلومات Blogger الخاصة بك انقر فوق الوظائف -> مشاركة جديدة ستتوجه إلى محرر النشر.

الخطوة رقم 2: الآن انتقل إلى محرر HTML من محرر الإنشاء. هنا يجب عليك إضافة أيقونات الكود في المشاركات.
الخطوة # 3: قم بنسخ البرنامج النصي HTML من الأسفل. تذكر أنه في بعض مواقع المدونين بعد إضافة النص البرمجي ، إذا قمت بالتبديل إلى محرر Compose وقمت بنشر المنشور ، فيمكن كسر البرنامج النصي. لذا ، قم أولاً بكتابة مشاركتك في "محرر الإنشاء" ، ثم قم بالتبديل إلى محرر HTML وإضافة البرنامج النصي للأداة.

<div id="themefeatures">
<div class="themefeature">
<i class="fa fa-check-square-o"></i>
<div class="themefeaturetext">
<h2>
Compatible with Latest Blogger</h2>
We continuously test our templates so you will know they are always compatible with the latest version of Blogger Platform.</div>
</div>
<!-- End Themefeature -->
<div class="themefeature">
<i class="fa fa-code"></i>
<div class="themefeaturetext">
<h2>
No Encrypted Scripts</h2>
All our Premium template will be deliver to you without Encrypted Scripts</div>
</div>
<!-- End Themefeature -->
<div class="themefeature">
<i class="fa fa-file-o"></i>
<div class="themefeaturetext">
<h2>
Extensive Documentation Files</h2>
We have written detailed documentation which guides you through the process of using your new template.</div>
</div>
<!-- End Themefeature -->
<div class="themefeature">
<i class="fa fa-support"></i>
<div class="themefeaturetext">
<h2>
Customer Support</h2>
We have customer support system, if you ever need any help with your template.</div>
</div>
<!-- End Themefeature -->
<div class="themefeature">
<i class="fa fa-laptop"></i>
<div class="themefeaturetext">
<h2>
Fully Responsive Design</h2>
All our templates are responsive so they look great no matter what size screen you are viewing them on.</div>
</div>
<!-- End Themefeature -->
<div class="themefeature">
<i class="fa fa-list"></i>
<div class="themefeaturetext">
<h2>
Widgetized Areas</h2>
We include just the right amount of useful widget areas and sidebars so you can place your content.</div>
</div>
<!-- End Themefeature -->
<div class="themefeature">
<i class="fa fa-cogs"></i>
<div class="themefeaturetext">
<h2>
Template Customizer</h2>
Upload a logo, change your theme colors, change footer text and add tracking scripts all in real-time.</div>
</div>
<!-- End Themefeature by www.bloggerspice.com -->
<div class="themefeature">
<i class="fa fa-font"></i>
<div class="themefeaturetext">
<h2>
Icons and Fonts</h2>
We include FontAwesome Icons &amp; Hundreds of Google Fonts to Choose from to customize your site.</div>
</div>
<!-- End Themefeature -->
<div class="themefeature">
<i class="fa fa-columns"></i>
<div class="themefeaturetext">
<h2>
Custom Widgets</h2>
We include our own widgets for Social Media, Displaying Advertising and showing off your Flickr images.</div>
</div>
<!-- End Themefeature -->
<div class="themefeature">
<i class="fa fa-globe"></i>
<div class="themefeaturetext">
<h2>
Localized and Multi Language Compatible</h2>
All our template are fully localized so you can translate them into any language you choose.</div>
</div>
<!-- End Themefeature -->
</div>

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