4 أشكال مختلفة للمشاركات الشائعة بشكل إحترافى

1. إختر تخطيط وإضافة "المشاركات الشائعة" من قائمة الأدوات التى ستظهر لك 
2. إعدادات الأداة ستظهر العناوين فقط الإعدادات ستكون مثل الصورة التالية 

        #PopularPosts1 h2{
        position:relative;

        padding:8px 10px 6px 10px;

        width:100%;

        margin-bottom: 5px;

        font-size:17px;

        color:#757575; /* Color of the widget's title */

        text-align:left;

        }

        #PopularPosts1 ul{

        list-style:none;

        counter-reset:li;

        padding:10px;

        left:-8px;

        width:100%;

        }

        #PopularPosts1 li{ /* Styles of each element */

        width:100%;

        position:relative;

        left:0;

        margin:0 0 1px 12px;

        padding:4px 5px;

        }

        #PopularPosts1 ul li:before{

        content: counter(li);

        counter-increment: li;

        position: absolute;

        left: -30px;

        top: 50%;

        margin-top: -13px;

        background: #8E8E8E; /* background color of the numbers */

        height: 1.9em;

        width: 2em;

        line-height: 2em;

        text-align: center;

        font-weight: bold;

        color: #fff;

        font-size: 14px;

        }

        #PopularPosts1 ul li:after{

        position: absolute;

        content: '';

        left: -2px;

        margin-top: -.7em;

        top: 50%;

        width: 0;

        height: 0;

        border-top: 8px solid transparent;

        border-bottom: 8px solid transparent;

        border-left:10px solid #8E8E8E; /* background color of the right arrow*/

        }

        #PopularPosts1 ul li a{

        color: #444;

        text-decoration: none; 

        font-size:15px;

        }

        #PopularPosts1 ul li {

        position: relative;

        display: block;

        padding: .4em .4em .4em .8em;

        *padding: .4em;

        margin: .5em 0 .5em 0.4em;

        background: #ddd;

        transition: all .3s ease-out;

        text-decoration:none;

        transition: all .1s ease-in-out;
        }
        #PopularPosts1 ul li:hover{

        background: #eee; /* Background color on mouseover */
        } 
        #PopularPosts1 ul li a:hover{

        color:#444; /* Link color on mouseover */

        margin-left:3px;
        }

#PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px;
width:100%;
margin:0;
font-size:16px;
background:#4F4F4F; /* Background color */
color:#f2f2f2; /* Color of the widget's title */
text-align:left;
text-indent:18px;
}
#PopularPosts1 h2:before{
position:absolute;
content:"";
top:36px;
right:0px;
width: 0px;
height: 0px;
border-bottom:12px outset transparent;
border-left:12px solid #000000;
}
#PopularPosts1 h2:after{
position:absolute;
content:"";
top:-6px;
left:-5px;
width: 0px;
height: 0px;
border-bottom:24px outset transparent;
border-top:24px outset transparent;
border-left:24px solid #ffffff; /* Arrow background color on the left */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{
width:100%;
position:relative;
left:0;
margin:7px 0 16px 12px;
padding:10px  4px 0 5px;
}
#PopularPosts1 ul li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-20px;
font-size:35px;
width:20px;
color:#888888;
}
#PopularPosts1 ul li a{
display:block;
font-size:16px; /* Font size of the links */
color: #666; /* Color of the links */
text-decoration:none;
transition: all .1s ease-in-out;font-weight: bold;
}
#PopularPosts1 ul li a:hover{
color:#3366FF;
margin-left:3px;
}

#PopularPosts1 h2{
padding:8px 10px 3px 0;
width:100%;
margin:0;
font-size:16px;
position:relative;
left:-20px;
display:block;
border-bottom:2px solid #ccc;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 6px 10px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{ /* Style of the numbers */
content:counter(li);
counter-increment:li;
position:absolute;
top:3px;
left:-39px;
font-size:21px;
width:28px;
height:28px;
border-radius: 50%;
color:#777; /* Text color */
border: 2px solid #ddd; /* Rounded border color */
padding:0;
text-indent:9px;
}
#PopularPosts1 ul li a{
display:block;
position:relative;
left:-45px;
width:100%;
margin:0;
min-height:28px;
padding: 5px 3px 3px 39px;
color:#333; /* color of the links */
text-decoration:none;
font-size:14px; /* Font size of the links */
font-style: italic;
}
#PopularPosts1 ul li a:hover{
color:#3366ff;
margin-left:3px;
}