إذا كنت تستخدم مدون كمنصة لجهودكم الشخصية أو التجارية بلوق، وربما كنت تبحث عن سبل لتخصيص وجعلها بنفسك. بهذه الطريقة، سيكون لجعل صفحات الويب الخاصة بك فريدة من نوعها لافتة للنظر والتأكد من أنها سوف تبرز من العديد من الصفحات الأخرى على شبكة الإنترنت. عليك أيضا لفت انتباه السوق التي تستهدفها، وتشجيعهم على تصفح من خلال بلوق الخاص بك وتصبح القراء المخلصين وأتباعه.
لحسن الحظ، هناك الكثير من الطرق لتخصيص الخاص بك مدون بلوق، واحد من هؤلاء هو تخصيص شعبية المشاركات القطعة. لم تقم بتثبيت هذا حتى الآن؟ لا داعي للقلق منذ وضعه في بلوق الخاص بك سهلة.
المشاركات الشائعة القطعة مدون
واضاف ان شعبية المشاركات القطعة للمدون
فقط اضغط على عنوان بلوق الخاص بك، والوصول إلى القائمة تخطيط، انقر فوق "إضافة القطعة" واختيار "شعبية وظيفة". ستظهر نافذة تطلب منك لتكوين القطعة عن طريق اختيار الوظائف التي سوف ميزة (مثل تلك التي كانت الأكثر مشاهدة خلال 7 أيام الماضية أو 30 يوما أو من بداية بلوق الخاص بك). عليك أيضا أن يطلب إلى اختيار عدد المشاركات فسوف يشارك في الشعبية قسم الوظائف وتحديد ما إذا كان عليك عرض عنوان آخر فقط أو جنبا إلى جنب مع صورة مصغرة و / أو المتكررة. (تذكر أن كل نمط القطعة متطلبات مختلفة، لذلك اتبع التعليمات بدقة لمعرفة ما إذا كان ستحتاج إلى قصاصة وصورة مصغرة أو لا).
تكوين شعبية المشاركات القطعة للمدون
مرة واحدة كنت قد اتبعت هذه التعليمات، سوف تحصل على رؤية النسخة الأساسية من شعبية المشاركات القطعة للمدون في بلوق الخاص بك. يمكنك العصا مع هذا إذا كان يتطابق مع تصميم بلوق الخاص بك، ولكن إذا تمسكت بها مثل قرحة الإبهام أو لا تناسب ذوقك، وليس هناك حاجة لتأكل حيث يمكنك تخصيص ذلك. يمكنك الاختيار من بين الأنماط التالية - راجع التجريبي بلوق:
بلوق تجريبي
شعبية المشاركات ستايل 1 - صندوق داخل مربع
هذا هو أسلوب القطعة مثيرة للاهتمام لأنه يستخدم المتكررة وصورة مصغرة بطريقة فريدة من نوعها. هو مكتوب المقتطف في النص مبهمة ووضعها في صندوق شفاف صغير. وهذا، بدوره، يتم وضعها في صندوق مستطيل أكبر، حيث يستخدم صورة مصغرة لديك كخلفية. يمكن اختيار هذا شعبية المشاركات القطعة للمدون أن يكون خيار كبير إذا كنت تريد أن سطع بلوق الخاص بك، ولفت انتباه القراء مع الصور الملونة الخاصة بك.
المشاركات الشائعة القطعة مدون
كود CSS:
<نوع النمط = "نص / المغلق '>
.sidebar .PopularPosts المجاهدين {
هامش: 0؛
الحشو: 0؛
}
.sidebar .PopularPosts المجاهدين لى {
على غرار قائمة: لا شيء مهم.
الحشو: 0 أهمية.
هامش القاع: 10px؛
}
.sidebar .PopularPosts. البند-المصغرات {
الطول: 190px؛
هامش: 0؛
تجاوز: مخفي.
عرض: 100٪؛
}
.sidebar .PopularPosts. البند-لقب {
موقع: نسبي.
}
.sidebar .PopularPosts IMG {
الطول: 100٪؛
عرض: 100٪؛
كائن صالح: غطاء.
}
.sidebar .PopularPosts. البند، عنوان و{
اللون: # FFFFFF.
الخط: 15px "أوزوالد"، بلا الرقيق؛
النص تحويل: الأحرف الكبيرة.
FONT-SIZE: 20px؛
الحشو: 10px؛
الموقف: مطلقة؛
الحق: 0؛
اليسار: 0px؛
هامش: 0px السيارات.
مواءمة النصوص: المركز؛
النص الديكور: لا شيء؛
أعلى: 40px؛
العرض: 60٪؛
الطول: 26px؛
تجاوز: مخفي.
ض مؤشر: 2؛
}
.sidebar .PopularPosts. البند-قصاصة {
خلفية: رغبا (0، 0، 0، 0.35)؛
الحدود بين كبار: رغبا بصلابة 6px (0، 0، 0، 0.1)؛
الحدود القاع: رغبا 6px الصلبة (0، 0، 0، 0.1)؛
اللون: # FFFFFF.
اليسار: 0px؛
اليمين: 0px؛
هامش: 0px السيارات.
الحشو: 65px 10px 10px؛
الموقف: مطلقة؛
الخط: 13px ومثل، تايمز نيو رومان ومثل،، تايمز، FreeSerif، الرقيق.
مواءمة النصوص: المركز؛
أعلى: 35px؛
العرض: 60٪؛
ض الفهرس: 1؛
}
.sidebar .PopularPosts. البند المحتوى {
موقع: نسبي.
}
</ النمط>
شعبية المشاركات ستايل 2 - الصور المصغرة كبيرة مع وظيفة صغيرة العناوين تحت
هذا يستخدم نفس الكود كما مدون شعبية المشاركات القطعة الأساسية مع بضعة تعديلات. شعبية من قبل بلوق المعروفة، وهذا الاسلوب هو لافتة للنظر لأنه يركز على الصور، التي لا تلخص فقط محتوى المشاركات 'ولكن أيضا إضافة الدراما البصرية إلى الصفحة بأكملها. وهذا مفيد بشكل خاص لبلوق التي تركز على الملابس والماكياج والفن وغيرها من الموضوعات التي تعتمد بشكل كبير على عرض مرئي للتعبير عن أفضل الأفكار.
المشاركات الشائعة القطعة مدون
كود CSS:
<نوع النمط = "نص / المغلق '>
.sidebar .PopularPosts المجاهدين {
مكافحة إعادة تعيين: popularcount.
هامش: 0؛
الحشو: 0؛
}
.sidebar .PopularPosts المجاهدين لى {
عرض: 100٪؛
على غرار قائمة: لا شيء مهم.
الحشو: 0 أهمية.
هامش القاع: 20px؛
موقع: نسبي.
الحدود: 0؛
}
.sidebar .PopularPosts. البند-المصغرة ل{
كليب: لصناعة السيارات.
العرض محجوب؛
الطول: السيارات.
الطول: 120px؛
}
.sidebar .PopularPosts. البند-المصغرات {
عرض: 100٪؛
موقع: نسبي.
هامش القاع: 15px؛
}
.sidebar .PopularPosts. البند-المصغرات :: قبل {
خلفية: رغبا (0، 0، 0، 0) أي تكرار التمرير 0 0؛
الحدود القاع: 29px # الاتحاد الفرنسي الصلبة.
الحدود اليسرى: 29px صلبة شفافة.
الحدود اليمين: 29px صلبة شفافة.
أسفل: 0px؛
المحتوى: ومثل؛ & مثل ؛؛
الطول: 0؛
عرض: 0px؛
اليسار: 0px؛
اليمين: 0px؛
هامش اليسار: السيارات.
الهامش اليمين: السيارات.
الموقف: مطلقة؛
ض الفهرس: 3؛
}
.sidebar .PopularPosts. البند-مصغرة: بعد {
اللون: # 000؛
المحتوى: مكافحة (popularcount، عشري).
مكافحة الزيادة popularcount.
الخط: 13px ومثل، تايمز نيو رومان ومثل،، تايمز، FreeSerif، الرقيق.
قائمة النمط من نوع: لا شيء؛
الموقف: مطلقة؛
أسفل: 0؛
مواءمة النصوص: المركز؛
هامش: 0px السيارات.
اليسار: 0px؛
اليمين: 0px؛
ض الفهرس: 4؛
}
.sidebar .PopularPosts. البند-المصغرات IMG {
موقع: نسبي.
عرض: 100٪؛
الطول: 120px؛
كائن صالح: غطاء.
}
.sidebar .PopularPosts. البند-لقب {
الخط: 15px "أوزوالد"، بلا الرقيق؛
النص تحويل: الأحرف الكبيرة.
مواءمة النصوص: المركز؛
هامش: 0px السيارات.
الحشو القاع: 10px؛
الحدود القاع: 1PX الصلبة # 000؛
}
.sidebar .PopularPosts. البند، عنوان و{
اللون: # 000؛
النص الديكور: لا شيء؛
}
.sidebar .PopularPosts. البند-قصاصة {
الحشو: 10px 15px؛
الخط: 13px ومثل، تايمز نيو رومان ومثل،، تايمز، FreeSerif، الرقيق.
مواءمة النصوص: المركز؛
}
</ النمط>
شعبية المشاركات ستايل 3 - علب ملونة
إذا بلوق الخاص بك تحتاج البوب من لون، وهذا هو الخيار الصحيح بالنسبة لك. ويعرض هذا النمط عنصر واجهة المستخدم المشاركات الشعبية في العديد من الصناديق التي تحتوي على الصورة المصغرة ولها مشرق، وظلال لافتة للنظر مثل الضوء الأخضر، مغرة الأصفر وحية البرتقال. كل مربع يحتوي على ألوان مختلفة، ويمكنك إضافة ما يصل إلى أربعة صناديق.
المشاركات الشائعة القطعة مدون
كود CSS:
<نوع النمط = "نص / المغلق '>
.sidebar .PopularPosts المجاهدين {
الحشو: 0؛
هامش: 0؛
}
.sidebar .PopularPosts. البند-المصغرة ل{
كليب: لصناعة السيارات.
العرض محجوب؛
الطول: السيارات.
تجاوز: مخفي.
}
.sidebar .PopularPosts. البند-المصغرات {
العرض: 130px؛
الطول: 130px؛
الحدود اليمين: # الاتحاد الفرنسي الصلبة 5px؛
هامش: 0px 0px 0px 10px أهمية.
موقع: نسبي.
}
.sidebar .PopularPosts. البند-المصغرات IMG {
موقع: نسبي.
الطول: 100٪؛
عرض: 100٪؛
كائن صالح: غطاء.
}
.sidebar .PopularPosts المجاهدين لى {
تطفو: اليسار،
هامش القاع: 5px؛
الحد الأقصى للطول: 130px؛
مين العرض: 250px؛
تجاوز: مخفي.
}
.sidebar .PopularPosts ماي لي: أول طفل {
خلفية: # D9EDF7.
}
.sidebar .PopularPosts ماي لي: أول طفل + لى {
خلفية: # F2DEDE.
}
.sidebar .PopularPosts المجاهدين لى: أولا الطفل + + لى لى {
خلفية: # DFF0D8.
}
.sidebar .PopularPosts ماي لي: الطفل الأول + لى لى + + لى {
خلفية: #FFEEBC.
}
.sidebar .PopularPosts ماي لي: الطفل الأول + لى لى + + + لى لى {
خلفية: # E0E0E0.
}
.sidebar .PopularPosts. البند-لقب {
الخط: 13px "أوزوالد"، بلا الرقيق؛
النص تحويل: الأحرف الكبيرة.
الحشو: 10px 5px 10px؛
}
.sidebar .PopularPosts. البند، عنوان و{
اللون: # 000؛
النص الديكور: لا شيء؛
}
.sidebar .PopularPosts. البند-قصاصة {
الخط: 13px ومثل، تايمز نيو رومان ومثل،، تايمز، FreeSerif، الرقيق.
الحشو اليمين: 5px؛
}
.sidebar .PopularPosts .widget-المحتوى المجاهدين لى {
! الحشو: 0px 0px 0px 5px من الأهمية بمكان؛
}
</ النمط>
شعبية المشاركات أسلوب 4 - تخطيط الشبكة
تماما مثل أسلوب القطعة-الصورة الكبيرة، وتخطيط الشبكة هو خيار ممتاز إذا كنت ترغب في عرض الصور الخاصة بك أو إذا بلوق الخاص بك يعتمد على المعلومات البصرية. ومع ذلك، لن يتم تضمين عنوان مشاركاتك في التخطيط، ليستطيع القراء سيكون لتحوم يصطاد الفئران على الصور لقراءة العناوين.
المشاركات الشائعة القطعة مدون
كود CSS:
<نوع النمط = "نص / المغلق '>
.sidebar .PopularPosts المجاهدين {
الحشو: 0؛
}
.sidebar .PopularPosts ماي لي: أول طفل {
عرض: 100٪؛
الحد الأقصى للطول: 100٪؛
التعتيم: 0.9.
}
.sidebar .PopularPosts المجاهدين لى: الألف الطفل (حتى) {
الهامش الأيمن: 2٪.
}
.sidebar .PopularPosts المجاهدين لى {
مربع التحجيم: مربع الحدود؛
موقع: نسبي.
! الحشو: 0px من الأهمية بمكان؛
العرض: 49٪؛
الحد الأقصى للطول: 120px؛
التعتيم: 0.4.
تجاوز: مخفي.
تطفو: اليسار،
هامش القاع: 2٪.
-webkit الانتقالية: كل 0.5S سهولة 0S.
-moz الانتقالية: كل 0.5S سهولة 0S.
-ms الانتقالية: كل 0.5S سهولة 0S.
-o الانتقالية: كل 0.5S سهولة 0S.
الانتقال: كل 0.5S سهولة 0S.
}
.sidebar .PopularPosts المجاهدين لى: تحوم {
التعتيم: 1؛
}
.sidebar .PopularPosts. البند-المصغرات {
هامش: 0؛
عرض: 100٪؛
}
.sidebar .PopularPosts المجاهدين لى IMG {
مربع التحجيم: مربع الحدود؛
عرض: 100٪؛
الطول: 100٪؛
كائن صالح: غطاء.
الحشو: 0؛
}
.sidebar .PopularPosts. البند المحتوى: تحوم. البند-لقب لذلك،
.sidebar .PopularPosts. البند-المصغرة فقط: تحوم. البند، عنوان و{
الرؤية: مرئي.
التعتيم: 1؛
}
.sidebar .PopularPosts. البند، عنوان و{
اللون: # الاتحاد الفرنسي.
خلفية: رغبا (0، 0، 0، 0) الخطية التدرج (إلى أسفل، رغبا (0، 0، 0، 0) 0٪، رغبا (0، 0، 0، 0.93) 100٪، رغبا (0، 0 ، 0، 0.85) 100٪)؛
النص الديكور: لا شيء؛
الموقف: مطلقة؛
مواءمة النصوص: المركز؛
الخط: 13px "أوزوالد"، بلا الرقيق؛
اليسار: 0؛
الحق: 0؛
أسفل: 0٪؛
الحشو: 100px 10px 10px؛
التعتيم: 0؛
الرؤية: مخفي.
}
.sidebar .PopularPosts. البند-قصاصة {
عرض: لا شيء؛
}
</ النمط>
شعبية المشاركات أسلوب 5 - المشاركات رقمية
إذا كنت تحب القوائم المرقمة، أو إذا كنت ترغب في جعل بلوق الخاص بك أكثر تنظيما، وهذا يمكن أن يكون الخيار الأمثل. باستخدام رمز لهذا النمط القطعة، لديك شعبية وظيفة سوف يتم ترقيم تلقائيا وسيظهر نظيفة، وصناديق أضيق الحدود التي تشمل قصاصة وصورة مصغرة.
المشاركات الشائعة القطعة مدون
كود CSS:
<نوع النمط = "نص / المغلق '>
.sidebar .PopularPosts المجاهدين {
مكافحة إعادة تعيين: popularcount.
هامش: 0؛
الحشو: 0؛
}
.sidebar .PopularPosts المجاهدين لى {
تطفو: اليسار،
الحد الأقصى للطول: 130px؛
مين العرض: 250px؛
موقع: نسبي.
}
.sidebar .PopularPosts. البند-المصغرات :: بعد {
اللون: رغبا (255،255،255، 0.63)؛
المحتوى: مكافحة (popularcount، عشري).
مكافحة الزيادة popularcount.
الخط: 70px "أوزوالد"، بلا الرقيق؛
قائمة النمط من نوع: لا شيء؛
الموقف: مطلقة؛
اليسار: 5px؛
أعلى: -5px.
ض الفهرس: 4؛
}
.sidebar .PopularPosts. البند-المصغرات :: قبل {
خلفية: رغبا (0، 0، 0، 0.3)؛
أسفل: 0px؛
المحتوى: ومثل؛ & مثل ؛؛
الطول: 100px؛
العرض: 100px؛
اليسار: 0px؛
اليمين: 0px؛
هامش: 0px السيارات.
الموقف: مطلقة؛
ض الفهرس: 3؛
}
.sidebar .PopularPosts. البند-المصغرة ل{
كليب: لصناعة السيارات.
العرض محجوب؛
الطول: السيارات.
تجاوز: مخفي.
}
.sidebar .PopularPosts. البند-المصغرات {
العرض: 100px؛
الطول: 100px؛
هامش: 0px 0px 0px 10px أهمية.
موقع: نسبي.
}
.sidebar .PopularPosts. البند-مصغرة: تحوم: قبل {
عرض: لا شيء؛
}
.sidebar .PopularPosts. البند-المصغرات IMG {
موقع: نسبي.
الحشو اليمين: 0px من الأهمية بمكان؛
الطول: 100٪؛
عرض: 100٪؛
كائن صالح: غطاء.
}
.sidebar .PopularPosts. البند-لقب {
الخط: 13px "أوزوالد"، بلا الرقيق؛
النص تحويل: الأحرف الكبيرة.
الحشو: 0px 5px 10px؛
}
.sidebar .PopularPosts. البند، عنوان و{
اللون: # 000؛
النص الديكور: لا شيء؛
}
.sidebar .PopularPosts. البند-قصاصة {
الخط: 13px ومثل، تايمز نيو رومان ومثل،، تايمز، FreeSerif، الرقيق.
}
.sidebar .PopularPosts .widget-المحتوى المجاهدين لى {
! الحشو: 0px 0px 0px 5px من الأهمية بمكان؛
}
.sidebar .PopularPosts. البند المحتوى {
الحشو: 5px 0px؛
الحدود القاع: 1PX #dedede منقط.
تجاوز: مخفي.
الطول: 100px؛
موقع: نسبي.
}
</ النمط>
هذه ليست سوى بعض من الأساليب القطعة يمكنك الاختيار من بينها. عندما كنت قد التقطت على النمط الذي تريد، وتأكد من نسخ رمز المغلق لها. بمجرد القيام بذلك، انتقل إلى بلوق الخاص بك، انقر فوق "قالب" على الجانب الأيسر واختر "تحرير HTML" تحت معاينة القالب.
تحتاج هذه الرموز التالية ليتم لصقها فوق "</ رأس>" أو "</ body>" العلامات، لذلك الاختيار تعليمات لنعرف بالضبط أين تحتاج إلى وضع التعليمات البرمجية.
إضافة CSS
عندما فتحت محرر قالب، انقر في أي مكان داخل منطقة رمز وضرب CTRL + F أو قيادة F للبحث في العلامة التالية:
</ رأس>
فقط فوق </ رأس> العلامة، نسخ لصق رمز المغلق واحدة من الأساليب المذكورة أعلاه.
هام: إذا كان موجودا في شعبية المشاركات القطعة في تذييل بلوق الخاص بك، وإزالة الطبقة .sidebar وجدت في رمز المغلق من أجل العمل على انجاحه.
يرجى ملاحظة أن معظم أساليب تستخدم الخط أوزوالد التي تحتاج إلى إضافة إلى رمز القالب الخاص بك أيضا.
لذلك، والبحث عن هذه العلامة:
<رئيس>
فقط أقل من ذلك، إضافة هذا السطر:
<رابط = أ href "HTTPS: //fonts.googleapis.com/css الأسرة = أوزوالد: 400700" يختلط = "أنماط" نوع = "نص / المغلق '/>
إضافة جافا سكريبت
تتطلب هذه الأنماط أيضا رموز جافا سكريبت لتغيير حجم المشاركات شعبية الصورة / الصور المصغرة وتقليم مقتطف للمشاركة وعنوان. لإضافة جافا سكريبت، ابحث في </ body> العلامة ولصق النص التالي فوقه فقط:
<النصي SRC = "// ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js '/>
<نوع النصي = "نص / جافا سكريبت">
$ ( '. شعبية-المشاركات img الصورة). ATTR (' SRC "، وظيفة (ه، ر) {
العودة t.replace ( '/ S72-ج /'، '/ S350-ج /')
})؛
$ ( '. شعبية-المشاركات المجاهدين لى. البند-قصاصة'). كل (وظيفة () {
. فار النص = $ (هذا) .text () SUBSTR (0،60)؛
فار ي = txt.lastIndexOf ( '')؛
إذا (ي و GT و 10)
$ (هذا) .text ([؟! \ .- :؛] txt.substr (0، ي) .replace (/ * $ /، '...'))؛
})؛
$ ( '. شعبية-المشاركات المجاهدين لى. البند المحتوى على'). كل (وظيفة () {
. فار النص = $ (هذا) .text () SUBSTR (0،60)؛
فار ي = txt.lastIndexOf ( '')؛
إذا (ي & GT؛ = 6)
$ (هذا) .text ([؟! \ .- :؛] txt.substr (0، ي) .replace (/ * $ /، '...'))؛
})؛
</ script>
ملاحظة: إذا كان لديك بالفعل المكتبة مسج في القالب الخاص بك، وإزالة خط باللون الأحمر.
مرة واحدة قمت بإضافة كافة رموز في المكان المناسب، اضغط على "حفظ القالب" الزر لحفظ التغييرات.
هذا هو!
الخمسة شعبية المشاركات الحاجيات للمدون ظهرت اليوم كلها حلول كبيرة لإضافة قسم آخر شعبية لبلوق الخاص بك. لديهم كل مظهر مختلف لتحديد ما الذي يجعل وظيفة شعبية، ولكن النتيجة النهائية هي نفسها: الزوار هم دائما نقرة واحدة بعيدا عن محتوى افضل ما لديكم. حاول بعض من هذه الأساليب، تجد المفضلة لديك، ومعرفة كيفية تأثيرها على أداء بلوق الخاص بك.
لحسن الحظ، هناك الكثير من الطرق لتخصيص الخاص بك مدون بلوق، واحد من هؤلاء هو تخصيص شعبية المشاركات القطعة. لم تقم بتثبيت هذا حتى الآن؟ لا داعي للقلق منذ وضعه في بلوق الخاص بك سهلة.
المشاركات الشائعة القطعة مدون
واضاف ان شعبية المشاركات القطعة للمدون
فقط اضغط على عنوان بلوق الخاص بك، والوصول إلى القائمة تخطيط، انقر فوق "إضافة القطعة" واختيار "شعبية وظيفة". ستظهر نافذة تطلب منك لتكوين القطعة عن طريق اختيار الوظائف التي سوف ميزة (مثل تلك التي كانت الأكثر مشاهدة خلال 7 أيام الماضية أو 30 يوما أو من بداية بلوق الخاص بك). عليك أيضا أن يطلب إلى اختيار عدد المشاركات فسوف يشارك في الشعبية قسم الوظائف وتحديد ما إذا كان عليك عرض عنوان آخر فقط أو جنبا إلى جنب مع صورة مصغرة و / أو المتكررة. (تذكر أن كل نمط القطعة متطلبات مختلفة، لذلك اتبع التعليمات بدقة لمعرفة ما إذا كان ستحتاج إلى قصاصة وصورة مصغرة أو لا).
تكوين شعبية المشاركات القطعة للمدون
مرة واحدة كنت قد اتبعت هذه التعليمات، سوف تحصل على رؤية النسخة الأساسية من شعبية المشاركات القطعة للمدون في بلوق الخاص بك. يمكنك العصا مع هذا إذا كان يتطابق مع تصميم بلوق الخاص بك، ولكن إذا تمسكت بها مثل قرحة الإبهام أو لا تناسب ذوقك، وليس هناك حاجة لتأكل حيث يمكنك تخصيص ذلك. يمكنك الاختيار من بين الأنماط التالية - راجع التجريبي بلوق:
بلوق تجريبي
شعبية المشاركات ستايل 1 - صندوق داخل مربع
هذا هو أسلوب القطعة مثيرة للاهتمام لأنه يستخدم المتكررة وصورة مصغرة بطريقة فريدة من نوعها. هو مكتوب المقتطف في النص مبهمة ووضعها في صندوق شفاف صغير. وهذا، بدوره، يتم وضعها في صندوق مستطيل أكبر، حيث يستخدم صورة مصغرة لديك كخلفية. يمكن اختيار هذا شعبية المشاركات القطعة للمدون أن يكون خيار كبير إذا كنت تريد أن سطع بلوق الخاص بك، ولفت انتباه القراء مع الصور الملونة الخاصة بك.
المشاركات الشائعة القطعة مدون
كود CSS:
<نوع النمط = "نص / المغلق '>
.sidebar .PopularPosts المجاهدين {
هامش: 0؛
الحشو: 0؛
}
.sidebar .PopularPosts المجاهدين لى {
على غرار قائمة: لا شيء مهم.
الحشو: 0 أهمية.
هامش القاع: 10px؛
}
.sidebar .PopularPosts. البند-المصغرات {
الطول: 190px؛
هامش: 0؛
تجاوز: مخفي.
عرض: 100٪؛
}
.sidebar .PopularPosts. البند-لقب {
موقع: نسبي.
}
.sidebar .PopularPosts IMG {
الطول: 100٪؛
عرض: 100٪؛
كائن صالح: غطاء.
}
.sidebar .PopularPosts. البند، عنوان و{
اللون: # FFFFFF.
الخط: 15px "أوزوالد"، بلا الرقيق؛
النص تحويل: الأحرف الكبيرة.
FONT-SIZE: 20px؛
الحشو: 10px؛
الموقف: مطلقة؛
الحق: 0؛
اليسار: 0px؛
هامش: 0px السيارات.
مواءمة النصوص: المركز؛
النص الديكور: لا شيء؛
أعلى: 40px؛
العرض: 60٪؛
الطول: 26px؛
تجاوز: مخفي.
ض مؤشر: 2؛
}
.sidebar .PopularPosts. البند-قصاصة {
خلفية: رغبا (0، 0، 0، 0.35)؛
الحدود بين كبار: رغبا بصلابة 6px (0، 0، 0، 0.1)؛
الحدود القاع: رغبا 6px الصلبة (0، 0، 0، 0.1)؛
اللون: # FFFFFF.
اليسار: 0px؛
اليمين: 0px؛
هامش: 0px السيارات.
الحشو: 65px 10px 10px؛
الموقف: مطلقة؛
الخط: 13px ومثل، تايمز نيو رومان ومثل،، تايمز، FreeSerif، الرقيق.
مواءمة النصوص: المركز؛
أعلى: 35px؛
العرض: 60٪؛
ض الفهرس: 1؛
}
.sidebar .PopularPosts. البند المحتوى {
موقع: نسبي.
}
</ النمط>
شعبية المشاركات ستايل 2 - الصور المصغرة كبيرة مع وظيفة صغيرة العناوين تحت
هذا يستخدم نفس الكود كما مدون شعبية المشاركات القطعة الأساسية مع بضعة تعديلات. شعبية من قبل بلوق المعروفة، وهذا الاسلوب هو لافتة للنظر لأنه يركز على الصور، التي لا تلخص فقط محتوى المشاركات 'ولكن أيضا إضافة الدراما البصرية إلى الصفحة بأكملها. وهذا مفيد بشكل خاص لبلوق التي تركز على الملابس والماكياج والفن وغيرها من الموضوعات التي تعتمد بشكل كبير على عرض مرئي للتعبير عن أفضل الأفكار.
المشاركات الشائعة القطعة مدون
كود CSS:
<نوع النمط = "نص / المغلق '>
.sidebar .PopularPosts المجاهدين {
مكافحة إعادة تعيين: popularcount.
هامش: 0؛
الحشو: 0؛
}
.sidebar .PopularPosts المجاهدين لى {
عرض: 100٪؛
على غرار قائمة: لا شيء مهم.
الحشو: 0 أهمية.
هامش القاع: 20px؛
موقع: نسبي.
الحدود: 0؛
}
.sidebar .PopularPosts. البند-المصغرة ل{
كليب: لصناعة السيارات.
العرض محجوب؛
الطول: السيارات.
الطول: 120px؛
}
.sidebar .PopularPosts. البند-المصغرات {
عرض: 100٪؛
موقع: نسبي.
هامش القاع: 15px؛
}
.sidebar .PopularPosts. البند-المصغرات :: قبل {
خلفية: رغبا (0، 0، 0، 0) أي تكرار التمرير 0 0؛
الحدود القاع: 29px # الاتحاد الفرنسي الصلبة.
الحدود اليسرى: 29px صلبة شفافة.
الحدود اليمين: 29px صلبة شفافة.
أسفل: 0px؛
المحتوى: ومثل؛ & مثل ؛؛
الطول: 0؛
عرض: 0px؛
اليسار: 0px؛
اليمين: 0px؛
هامش اليسار: السيارات.
الهامش اليمين: السيارات.
الموقف: مطلقة؛
ض الفهرس: 3؛
}
.sidebar .PopularPosts. البند-مصغرة: بعد {
اللون: # 000؛
المحتوى: مكافحة (popularcount، عشري).
مكافحة الزيادة popularcount.
الخط: 13px ومثل، تايمز نيو رومان ومثل،، تايمز، FreeSerif، الرقيق.
قائمة النمط من نوع: لا شيء؛
الموقف: مطلقة؛
أسفل: 0؛
مواءمة النصوص: المركز؛
هامش: 0px السيارات.
اليسار: 0px؛
اليمين: 0px؛
ض الفهرس: 4؛
}
.sidebar .PopularPosts. البند-المصغرات IMG {
موقع: نسبي.
عرض: 100٪؛
الطول: 120px؛
كائن صالح: غطاء.
}
.sidebar .PopularPosts. البند-لقب {
الخط: 15px "أوزوالد"، بلا الرقيق؛
النص تحويل: الأحرف الكبيرة.
مواءمة النصوص: المركز؛
هامش: 0px السيارات.
الحشو القاع: 10px؛
الحدود القاع: 1PX الصلبة # 000؛
}
.sidebar .PopularPosts. البند، عنوان و{
اللون: # 000؛
النص الديكور: لا شيء؛
}
.sidebar .PopularPosts. البند-قصاصة {
الحشو: 10px 15px؛
الخط: 13px ومثل، تايمز نيو رومان ومثل،، تايمز، FreeSerif، الرقيق.
مواءمة النصوص: المركز؛
}
</ النمط>
شعبية المشاركات ستايل 3 - علب ملونة
إذا بلوق الخاص بك تحتاج البوب من لون، وهذا هو الخيار الصحيح بالنسبة لك. ويعرض هذا النمط عنصر واجهة المستخدم المشاركات الشعبية في العديد من الصناديق التي تحتوي على الصورة المصغرة ولها مشرق، وظلال لافتة للنظر مثل الضوء الأخضر، مغرة الأصفر وحية البرتقال. كل مربع يحتوي على ألوان مختلفة، ويمكنك إضافة ما يصل إلى أربعة صناديق.
المشاركات الشائعة القطعة مدون
كود CSS:
<نوع النمط = "نص / المغلق '>
.sidebar .PopularPosts المجاهدين {
الحشو: 0؛
هامش: 0؛
}
.sidebar .PopularPosts. البند-المصغرة ل{
كليب: لصناعة السيارات.
العرض محجوب؛
الطول: السيارات.
تجاوز: مخفي.
}
.sidebar .PopularPosts. البند-المصغرات {
العرض: 130px؛
الطول: 130px؛
الحدود اليمين: # الاتحاد الفرنسي الصلبة 5px؛
هامش: 0px 0px 0px 10px أهمية.
موقع: نسبي.
}
.sidebar .PopularPosts. البند-المصغرات IMG {
موقع: نسبي.
الطول: 100٪؛
عرض: 100٪؛
كائن صالح: غطاء.
}
.sidebar .PopularPosts المجاهدين لى {
تطفو: اليسار،
هامش القاع: 5px؛
الحد الأقصى للطول: 130px؛
مين العرض: 250px؛
تجاوز: مخفي.
}
.sidebar .PopularPosts ماي لي: أول طفل {
خلفية: # D9EDF7.
}
.sidebar .PopularPosts ماي لي: أول طفل + لى {
خلفية: # F2DEDE.
}
.sidebar .PopularPosts المجاهدين لى: أولا الطفل + + لى لى {
خلفية: # DFF0D8.
}
.sidebar .PopularPosts ماي لي: الطفل الأول + لى لى + + لى {
خلفية: #FFEEBC.
}
.sidebar .PopularPosts ماي لي: الطفل الأول + لى لى + + + لى لى {
خلفية: # E0E0E0.
}
.sidebar .PopularPosts. البند-لقب {
الخط: 13px "أوزوالد"، بلا الرقيق؛
النص تحويل: الأحرف الكبيرة.
الحشو: 10px 5px 10px؛
}
.sidebar .PopularPosts. البند، عنوان و{
اللون: # 000؛
النص الديكور: لا شيء؛
}
.sidebar .PopularPosts. البند-قصاصة {
الخط: 13px ومثل، تايمز نيو رومان ومثل،، تايمز، FreeSerif، الرقيق.
الحشو اليمين: 5px؛
}
.sidebar .PopularPosts .widget-المحتوى المجاهدين لى {
! الحشو: 0px 0px 0px 5px من الأهمية بمكان؛
}
</ النمط>
شعبية المشاركات أسلوب 4 - تخطيط الشبكة
تماما مثل أسلوب القطعة-الصورة الكبيرة، وتخطيط الشبكة هو خيار ممتاز إذا كنت ترغب في عرض الصور الخاصة بك أو إذا بلوق الخاص بك يعتمد على المعلومات البصرية. ومع ذلك، لن يتم تضمين عنوان مشاركاتك في التخطيط، ليستطيع القراء سيكون لتحوم يصطاد الفئران على الصور لقراءة العناوين.
المشاركات الشائعة القطعة مدون
كود CSS:
<نوع النمط = "نص / المغلق '>
.sidebar .PopularPosts المجاهدين {
الحشو: 0؛
}
.sidebar .PopularPosts ماي لي: أول طفل {
عرض: 100٪؛
الحد الأقصى للطول: 100٪؛
التعتيم: 0.9.
}
.sidebar .PopularPosts المجاهدين لى: الألف الطفل (حتى) {
الهامش الأيمن: 2٪.
}
.sidebar .PopularPosts المجاهدين لى {
مربع التحجيم: مربع الحدود؛
موقع: نسبي.
! الحشو: 0px من الأهمية بمكان؛
العرض: 49٪؛
الحد الأقصى للطول: 120px؛
التعتيم: 0.4.
تجاوز: مخفي.
تطفو: اليسار،
هامش القاع: 2٪.
-webkit الانتقالية: كل 0.5S سهولة 0S.
-moz الانتقالية: كل 0.5S سهولة 0S.
-ms الانتقالية: كل 0.5S سهولة 0S.
-o الانتقالية: كل 0.5S سهولة 0S.
الانتقال: كل 0.5S سهولة 0S.
}
.sidebar .PopularPosts المجاهدين لى: تحوم {
التعتيم: 1؛
}
.sidebar .PopularPosts. البند-المصغرات {
هامش: 0؛
عرض: 100٪؛
}
.sidebar .PopularPosts المجاهدين لى IMG {
مربع التحجيم: مربع الحدود؛
عرض: 100٪؛
الطول: 100٪؛
كائن صالح: غطاء.
الحشو: 0؛
}
.sidebar .PopularPosts. البند المحتوى: تحوم. البند-لقب لذلك،
.sidebar .PopularPosts. البند-المصغرة فقط: تحوم. البند، عنوان و{
الرؤية: مرئي.
التعتيم: 1؛
}
.sidebar .PopularPosts. البند، عنوان و{
اللون: # الاتحاد الفرنسي.
خلفية: رغبا (0، 0، 0، 0) الخطية التدرج (إلى أسفل، رغبا (0، 0، 0، 0) 0٪، رغبا (0، 0، 0، 0.93) 100٪، رغبا (0، 0 ، 0، 0.85) 100٪)؛
النص الديكور: لا شيء؛
الموقف: مطلقة؛
مواءمة النصوص: المركز؛
الخط: 13px "أوزوالد"، بلا الرقيق؛
اليسار: 0؛
الحق: 0؛
أسفل: 0٪؛
الحشو: 100px 10px 10px؛
التعتيم: 0؛
الرؤية: مخفي.
}
.sidebar .PopularPosts. البند-قصاصة {
عرض: لا شيء؛
}
</ النمط>
شعبية المشاركات أسلوب 5 - المشاركات رقمية
إذا كنت تحب القوائم المرقمة، أو إذا كنت ترغب في جعل بلوق الخاص بك أكثر تنظيما، وهذا يمكن أن يكون الخيار الأمثل. باستخدام رمز لهذا النمط القطعة، لديك شعبية وظيفة سوف يتم ترقيم تلقائيا وسيظهر نظيفة، وصناديق أضيق الحدود التي تشمل قصاصة وصورة مصغرة.
المشاركات الشائعة القطعة مدون
كود CSS:
<نوع النمط = "نص / المغلق '>
.sidebar .PopularPosts المجاهدين {
مكافحة إعادة تعيين: popularcount.
هامش: 0؛
الحشو: 0؛
}
.sidebar .PopularPosts المجاهدين لى {
تطفو: اليسار،
الحد الأقصى للطول: 130px؛
مين العرض: 250px؛
موقع: نسبي.
}
.sidebar .PopularPosts. البند-المصغرات :: بعد {
اللون: رغبا (255،255،255، 0.63)؛
المحتوى: مكافحة (popularcount، عشري).
مكافحة الزيادة popularcount.
الخط: 70px "أوزوالد"، بلا الرقيق؛
قائمة النمط من نوع: لا شيء؛
الموقف: مطلقة؛
اليسار: 5px؛
أعلى: -5px.
ض الفهرس: 4؛
}
.sidebar .PopularPosts. البند-المصغرات :: قبل {
خلفية: رغبا (0، 0، 0، 0.3)؛
أسفل: 0px؛
المحتوى: ومثل؛ & مثل ؛؛
الطول: 100px؛
العرض: 100px؛
اليسار: 0px؛
اليمين: 0px؛
هامش: 0px السيارات.
الموقف: مطلقة؛
ض الفهرس: 3؛
}
.sidebar .PopularPosts. البند-المصغرة ل{
كليب: لصناعة السيارات.
العرض محجوب؛
الطول: السيارات.
تجاوز: مخفي.
}
.sidebar .PopularPosts. البند-المصغرات {
العرض: 100px؛
الطول: 100px؛
هامش: 0px 0px 0px 10px أهمية.
موقع: نسبي.
}
.sidebar .PopularPosts. البند-مصغرة: تحوم: قبل {
عرض: لا شيء؛
}
.sidebar .PopularPosts. البند-المصغرات IMG {
موقع: نسبي.
الحشو اليمين: 0px من الأهمية بمكان؛
الطول: 100٪؛
عرض: 100٪؛
كائن صالح: غطاء.
}
.sidebar .PopularPosts. البند-لقب {
الخط: 13px "أوزوالد"، بلا الرقيق؛
النص تحويل: الأحرف الكبيرة.
الحشو: 0px 5px 10px؛
}
.sidebar .PopularPosts. البند، عنوان و{
اللون: # 000؛
النص الديكور: لا شيء؛
}
.sidebar .PopularPosts. البند-قصاصة {
الخط: 13px ومثل، تايمز نيو رومان ومثل،، تايمز، FreeSerif، الرقيق.
}
.sidebar .PopularPosts .widget-المحتوى المجاهدين لى {
! الحشو: 0px 0px 0px 5px من الأهمية بمكان؛
}
.sidebar .PopularPosts. البند المحتوى {
الحشو: 5px 0px؛
الحدود القاع: 1PX #dedede منقط.
تجاوز: مخفي.
الطول: 100px؛
موقع: نسبي.
}
</ النمط>
هذه ليست سوى بعض من الأساليب القطعة يمكنك الاختيار من بينها. عندما كنت قد التقطت على النمط الذي تريد، وتأكد من نسخ رمز المغلق لها. بمجرد القيام بذلك، انتقل إلى بلوق الخاص بك، انقر فوق "قالب" على الجانب الأيسر واختر "تحرير HTML" تحت معاينة القالب.
تحتاج هذه الرموز التالية ليتم لصقها فوق "</ رأس>" أو "</ body>" العلامات، لذلك الاختيار تعليمات لنعرف بالضبط أين تحتاج إلى وضع التعليمات البرمجية.
إضافة CSS
عندما فتحت محرر قالب، انقر في أي مكان داخل منطقة رمز وضرب CTRL + F أو قيادة F للبحث في العلامة التالية:
</ رأس>
فقط فوق </ رأس> العلامة، نسخ لصق رمز المغلق واحدة من الأساليب المذكورة أعلاه.
هام: إذا كان موجودا في شعبية المشاركات القطعة في تذييل بلوق الخاص بك، وإزالة الطبقة .sidebar وجدت في رمز المغلق من أجل العمل على انجاحه.
يرجى ملاحظة أن معظم أساليب تستخدم الخط أوزوالد التي تحتاج إلى إضافة إلى رمز القالب الخاص بك أيضا.
لذلك، والبحث عن هذه العلامة:
<رئيس>
فقط أقل من ذلك، إضافة هذا السطر:
<رابط = أ href "HTTPS: //fonts.googleapis.com/css الأسرة = أوزوالد: 400700" يختلط = "أنماط" نوع = "نص / المغلق '/>
إضافة جافا سكريبت
تتطلب هذه الأنماط أيضا رموز جافا سكريبت لتغيير حجم المشاركات شعبية الصورة / الصور المصغرة وتقليم مقتطف للمشاركة وعنوان. لإضافة جافا سكريبت، ابحث في </ body> العلامة ولصق النص التالي فوقه فقط:
<النصي SRC = "// ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js '/>
<نوع النصي = "نص / جافا سكريبت">
$ ( '. شعبية-المشاركات img الصورة). ATTR (' SRC "، وظيفة (ه، ر) {
العودة t.replace ( '/ S72-ج /'، '/ S350-ج /')
})؛
$ ( '. شعبية-المشاركات المجاهدين لى. البند-قصاصة'). كل (وظيفة () {
. فار النص = $ (هذا) .text () SUBSTR (0،60)؛
فار ي = txt.lastIndexOf ( '')؛
إذا (ي و GT و 10)
$ (هذا) .text ([؟! \ .- :؛] txt.substr (0، ي) .replace (/ * $ /، '...'))؛
})؛
$ ( '. شعبية-المشاركات المجاهدين لى. البند المحتوى على'). كل (وظيفة () {
. فار النص = $ (هذا) .text () SUBSTR (0،60)؛
فار ي = txt.lastIndexOf ( '')؛
إذا (ي & GT؛ = 6)
$ (هذا) .text ([؟! \ .- :؛] txt.substr (0، ي) .replace (/ * $ /، '...'))؛
})؛
</ script>
ملاحظة: إذا كان لديك بالفعل المكتبة مسج في القالب الخاص بك، وإزالة خط باللون الأحمر.
مرة واحدة قمت بإضافة كافة رموز في المكان المناسب، اضغط على "حفظ القالب" الزر لحفظ التغييرات.
هذا هو!
الخمسة شعبية المشاركات الحاجيات للمدون ظهرت اليوم كلها حلول كبيرة لإضافة قسم آخر شعبية لبلوق الخاص بك. لديهم كل مظهر مختلف لتحديد ما الذي يجعل وظيفة شعبية، ولكن النتيجة النهائية هي نفسها: الزوار هم دائما نقرة واحدة بعيدا عن محتوى افضل ما لديكم. حاول بعض من هذه الأساليب، تجد المفضلة لديك، ومعرفة كيفية تأثيرها على أداء بلوق الخاص بك.
0 التعليقات:
إرسال تعليق