اداة المشاركة الشائعة الجديدة بشكل جديد وتاثيرات رائعة جدا عند المرور على المصغرات الخاصة بالمشاركات الشائعة كل من تجاهل هذة الاداة فقد جزء من اناقة مدونتها واليكم معاينة مباشرة


معاينة
معاينة



طريقة التركيب
اولا : نذهب الى لوحة تحكم المدونة ← التخطيط ← اضافة المشاركات الشائعة
ثانيا : اضافة كود الـ Css هذا قبل ]]></b:skin>

#PopularPosts1 img {background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;border-radius: 110px 110px 110px 110px;padding: 4px;} #PopularPosts1 img:hover{border-radius: 10px;transition: 1s;border-radius: 10px;transition: all 0.5s ease 0s;border-radius: 10px;transition: all 0.5s ease 0s;background-image: url("https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/1118154_100003231162465_790988940_q.jpg");backgrou nd-attachment: fixed;background-position: center center;}

ثالثا : كود المشاركات الشائعة
نبحث عن هذا الكود <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>⋯</b:widget>
استبدله بهذا الكود

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

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

المصدر :
المشاركات الشائعة بشكل جديد وجميل