عمل تأثيرات الضل على الصناديق (بلوجر)

السلام عليكم ورحمة الله وبركاته مرحبا بكم في تدوينة جديدة على مدونة عملاق النت

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

توج 8 أشكال اختر الشكل المناسب لك

طريقة تركيب او اضافة هذه الازرار

1- من  لوحة التحكم -> قالب -> تحرير HTML 

2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 

3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

قم بالبحث عن الكود </head>واضف قبله الكود التالي

<link href='https://googledrive.com/host/0BxFbqjck0GDdWE9RNmxBT3p4MjA ' rel='stylesheet'/>

بعدها ضع  واحد من الكود الذي يعجبك في خانة html  عند كتابة أحد المواضيع

<div class="css_image_shadows">
<!-- 1 -->
    <div class="drop-shadow lifted" style="width:240px;height:70px;">
      <p>عملاق النت<br /><small>الشكل-1</small></p>
    </div>
<!-- 2 -->
    <div class="drop-shadow curled" style="width:240px;height:70px;">
      <p>عملاق النت<br /><small>الشكل-2</small></p>
    </div>
<!-- 3 -->
    <div class="drop-shadow perspective" style="width:240px;height:70px;">
      <p>عملاق النتر<br /><small>الشكل-3</small></p>
    </div>
<!-- 4 -->
    <div class="drop-shadow raised" style="width:240px;height:70px;">
      <p>عملاق النت<br /><small>الشكل-4</small></p>
    </div>
<!-- 5 -->
    <div class="drop-shadow curved curved-vt-1" style="width:240px;height:70px;">
      <p>عملاق النت<br /><small>الشكل-5</small></p>
    </div>
<!-- 6 -->
    <div class="drop-shadow curved curved-vt-2" style="width:240px;height:70px;">
      <p>عملاق النت<br /><small>الشكل-6</small></p>
    </div>
<!-- 7 -->
    <div class="drop-shadow curved curved-hz-1" style="width:240px;height:70px;">
      <p>عملاق النت<br /><small>الشكل-7</small></p>
    </div>
<!-- 8 -->
    <div class="drop-shadow curved curved-hz-2" style="width:240px;height:70px;">
      <p>عملاق النتر<br /><small>الشكل-8</small></p>
    </div>
  </div>

شاهد صورة توضيحة للإضافة حسب الكود والشكل

عملاق النت
الشكل-1

عملاق النت
الشكل-2

عملاق النت
الشكل-3

عملاق النت
الشكل-4

عملاق النت
الشكل-5

عملاق النت
الشكل-6

عملاق النت
الشكل-7

عملاق النت
الشكل-8

نلتقي في تدوينة قادمة إن شاء الله والسلام عليكم   واضف قبله الكود التالي