<style>
#open-fb{background-color: #FFFFFF; border: 4px solid rgb(210, 210, 210); bottom: 0; border-bottom: 0; float:left; height: auto; margin-bottom: 0; margin-right: 5px; position: fixed; right: 0; width: auto; z-index: 10;}
.close-fb{color: #333!important; position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 11px;}
.slideUp{
animation-name: slideUp;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
@keyframes slideUp {
0% {
transform: translateY(100%);
}
50%{
transform: translateY(-8%);
}
65%{
transform: translateY(4%);
}
80%{
transform: translateY(-4%);
}
95%{
transform: translateY(2%);
}
100% {
transform: translateY(0%);
}
}
@-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(100%);
}
50%{
-webkit-transform: translateY(-8%);
}
65%{
-webkit-transform: translateY(4%);
}
80%{
-webkit-transform: translateY(-4%);
}
95%{
-webkit-transform: translateY(2%);
}
100% {
-webkit-transform: translateY(0%);
}
}
</style>
<div class='slideUp' id='open-fb'>
<a class='close-fb' href='#close-fb-like-box' onclick='hide('open-fb')' title='Close'><i class='fa fa-times'/></a>
<div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/th3kurdi' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fth3kurdi&width=187&height=62&show_faces=false&colorscheme=light&stream=false&border_color&header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/>
</span></div></div>
<script type='text/javascript'>
function show(target) {
document.getElementById(target).style.display = 'block';
}
function hide(target) {
document.getElementById(target).style.display = 'none';
}
</script> 
<style>
/* Popular Post S1 */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background: #FFFFFF; display: block; margin: 0 0 0 0; width: 60px; height: 60px; overflow: hidden; float: right; margin-left: 10px; border: 1px solid #EAE8E8; padding: 3px;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;left:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color: #333; font-size: 14px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0; float: right;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:100;padding-bottom:.2em;padding:0 5px}
</style>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
<div id="most-comments"></div>
<style scoped='' type='text/css'>
#most-comments li,#most-comments ul,#most-comments ul li{margin:0;list-style:none;color:#444;font-size:12px}#most-comments ul li{position:relative;overflow:hidden;background:#fff;margin:3.5px 0;padding:7px 10px 7px 50px;white-space:nowrap;text-overflow:ellipsis;box-shadow:inset 0 0 #fc4f3f;border:1px solid #e6e6e6;transition:all .6s}#most-comments ul li:hover{box-shadow:inset 310px 0 #fc4f3f}#most-comments ul li a{color:#444;font-weight:700;text-decoration:none;transition:all .3s}#most-comments ul li a:hover,#most-comments ul li:hover a{color:#fff}.count-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:7px 0;background-color:#383838;color:#fff!important;text-align:center;transition:all .3s}#most-comments ul li:hover .count-most{background-color:#fc4f3f}
</style>
<script type='text/javascript'>
//<![CDATA[
var numPosts=10;
var homePage="th3kurdi.blogspot.com";
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-comments"><ul>');
function mostComment(j){var a=j.feed.entry.length;totalpost=a;
for(var f=0;f<a;f++){
var h=j.feed.entry[f];
var c=h.title.$t;var b;
var g;if(f==j.feed.entry.length){break}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}};
postTitlear.push(c);
postUrlar.push(g);
postCommentar.push(b)}sortPosts();
for(var f=0;f<numPosts;f++){var e='<li><span class="count-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a>';
document.write(e)}}
function sortPosts(){function c(d,f){var e=postTitlear[d];
postTitlear[d]=postTitlear[f];
postTitlear[f]=e;
var e=postUrlar[d];
postUrlar[d]=postUrlar[f];
postUrlar[f]=e;
var e=postCommentar[d];
postCommentar[d]=postCommentar[f];
postCommentar[f]=e}
for(var b=0;b<postTitlear.length-1;b++){
for(var a=b+1;a<postTitlear.length;a++){
if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}
document.write('<script src="http://'+homePage+'/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
document.write('</li>')
document.write('</ul>')
document.write('</div>');
//]]>
</script> 
<style>
/* CSS Recent Post Gallery By http://th3kurdi.blogspot.com */
.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .gallerytem{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.recent-gallery .gallerytem a{position:relative;float:left;margin:0 6px;text-decoration:none}
.recent-gallery .gallerytem .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:right;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-gallery .gallerytem:hover .ptitle{visibility:visible;opacity:1}
.recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-gallery a:hover img {border-color:#bbb;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+arlina_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>
<script>
var arlina_thumbs = 82;
var arlina_title = true;
</script>
<script src="/feeds/posts/summary?max-results=12&alt=json-in-script&callback=arlinagrid"></script> 
<style type='text/css'>
@media only screen and (min-width: 993px) {
.container {
width: 85%;
}
}
@media only screen and (min-width: 993px) {
.container {
width: 70%;
}
}
@media only screen and (min-width: 601px) {
.container {
width: 85%;
}
}
.container {
margin: 0 auto;
max-width: 1280px;
width: 90%;
}
.btn-space{
text-align: center;
}
.ripple {
text-align: center;
display: inline-block;
padding: 8px 30px;
border-radius: 2px;
letter-spacing: .5px;
border-radius: 2px;
text-decoration: none;
color: #fff;
overflow: hidden;
position: relative;
z-index: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.ripple:hover {
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.ink {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.4);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.animate {
-webkit-animation: ripple 0.55s linear;
-moz-animation: ripple 0.55s linear;
-ms-animation: ripple 0.55s linear;
-o-animation: ripple 0.55s linear;
animation: ripple 0.55s linear;
}
@-webkit-keyframes ripple {
100% {
opacity: 0;
-webkit-transform: scale(2.5);
}
}
@-moz-keyframes ripple {
100% {
opacity: 0;
-moz-transform: scale(2.5);
}
}
@-o-keyframes ripple {
100% {
opacity: 0;
-o-transform: scale(2.5);
}
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
.red {
background-color: #F44336;
color:#ffffff;
}
.pink {
background-color: #E91E63;
color:#ffffff;
}
.blue {
background-color: #2196F3;
color:#ffffff;
}
.cyan {
background-color: #00bcd4;
color:#ffffff;
}
.teal {
background-color: #009688;
color:#ffffff;
}
.yellow {
background-color: #FFEB3B;
color: #000;
}
.orange {
background-color: #FF9800;
color:#ffffff;
}
.brown {
background-color: #795548;
color:#ffffff;
}
.grey {
background-color: #9E9E9E;
color:#ffffff;
}
.black {
background-color: #000000;
color:#ffffff;
}
</style>
<div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<div class="container btn-space" style="font-weight: bold;">
<a class="ripple red" href="#" style="color: white;">أضغط هنا</a>
<a class="ripple blue" href="#" style="color: white;">أضغط هنا</a>
<a class="ripple cyan" href="#" style="color: white;">أضغط هنا</a>
<a class="ripple orange" href="#" style="color: white;">أضغط هنا</a>
<a class="ripple brown" href="#" style="color: white;">أضغط هنا</a>
<a class="ripple grey" href="#" style="color: white;">أضغط هنا</a>
</div>
</div> 
<style>
/* زر اظهار و اخفاء الواجهة th3kurdi.blogspot.com */
#flippy {text-align:center;}
#flippy button {margin:10px auto;cursor:pointer;font-weight:700;font-size:14px;background-color:#f48878;font-family:tahoma;color:#fff!important;padding:8px 12px!important;text-transform:uppercase;border-radius:2px;transition:all 0.3s ease-out;}
#flippy button:hover, #flippy button:focus {outline:none;background-color:#3695DB;color:#fff;}
#flippanel {padding:0;text-align:right;}
#flippanel {display:none;}
#flippanel img {margin:10px auto;}
</style> //Spoiler
$(document).ready(function() {
$("#flippy").click(function() {
$("#flippanel").slideToggle("normal");
});
}); <div id="flippy" style="text-align: center;">
<button>اظهار / اخفاء الواجهة</button></div>
<div id="flippanel" style="text-align: center;">
<img src="http://b.top4top.net/p_2294sqx1.jpg" alt="Mountain View" style="float:center;;">
</div> 
<style> .LinkList h2::before {content: "\f005" !important;} .LinkList ul { list-style: outside none none; margin: 0; padding: 0;} .LinkList li a { border-left: 3px solid #DCDCDC; border-right: 3px solid #DCDCDC; background-color: #E7E7E7; box-shadow: 0 1px 0 4px #fff; color: #2D3E50; display: block; float: right; height: 40px; line-height: 40px; margin-bottom: 5px; text-align: center; width: 274px;text-decoration: none;} .LinkList li a:hover { background-color: #3498db;color:#fff;} </style>
/* اداة انضم لموقعنا by th3kurdi.blogspot.com */
.about_blog {padding: 0; overflow: hidden; background: #FFFFFF;}
.about-ar1web-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.about-ar1web-img{position:relative;max-height:140px;overflow:hidden}
.about-ar1web-img img {max-width:100%;width:100%;transition:all .6s;}
.about-ar1web-img:hover img{transform:scale(1.2) rotate(-10deg)}
.about-ar1web-img:before{content: ''; background: #000; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 2; transition: all .3s; opacity: .3;}
.about-ar1web-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;right:22.5%;z-index:3}
.about-ar1web-float{text-align:center;display:table;width:100%;height:100%}
.about-ar1web-float a{color: #fff; padding: 8px 14px; z-index: 2; display: table-cell; width: 100%; text-transform: uppercase; vertical-align: middle; transition: all .3s; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.23); font: normal normal 18px Droid Arabic Naskh,sans-serif;}
.about-ar1web-float:hover a{color:#F7F4F4!important;}
.about-ar1web-float a i{font-weight:normal;margin-left:5px}
.about-ar1web-wrpicon{display:block;margin:15px auto;position:relative; width: 96%;}
.extender{text-align:center;font-size:16px; margin: 0 0;}
.extender .about-ar1web-icon{display:inline!important;border:0;margin:0;padding:0; border: none!important;}
.extender .about-ar1web-icon a{background: #ccc; display: inline-block; font-weight: 400; color: #fff; line-height: 32px; font-size: 14px; width: 100%; text-shadow: 0 1px 0 rgba(0,0,0,0.15); margin: 3px 0; border-radius: 1em 0 1em 0;}
.extender .about-ar1web-icon i{font-family:fontawesome;margin:0 3px 0 0}
.about-ar1web-icon.fbl a{background:#3b5998}
.about-ar1web-icon.twitt a{background:#19bfe5}
.about-ar1web-icon.crcl a{background:#d64136}
.about-ar1web-icon.fbl a:hover,.about-ar1web-icon.twitt a:hover,.about-ar1web-icon.crcl a:hover{ opacity: .7;}
.extender .about-ar1web-icon:hover a,.extender .about-ar1web-icon a:hover{color:#fff;}
.about-ar1web-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.about-ar1web-info h4{color: #95A5A6;}
.about-ar1web-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.about-ar1web-info h4:before,.about-ar1web-info h4:after {position: absolute; top: 51%; overflow: hidden; width: 50%; height: 2px; content: '\a0'; background-color: #E8EDEF;}
.about-ar1web-info h4:before {margin-right:-50%;text-align:left;}
<div class="about_blog">
<div class="inner_wrapper">
<div class="about-ar1web-img">
<img alt="alwan may" class="img-responsive" height="auto" src="https://d13yacurqjgara.cloudfront.net/users/976037/screenshots/2612975/facebook.png" width="300" />
<div class="aboutfloat-img"><span class="about-ar1web-float"><a href="#" rel="nofollow" target="_blank"> انضم لموقعنا</a></span></div>
</div>
</div>
<div class="about-ar1web-info">
<h4><span>كورد ويب</span></h4>
</div>
<div class="about-ar1web-wrpicon">
<ul class="extender">
<li class="about-ar1web-icon fbl"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-facebook fa-fw"></i> صفحتنا</a></li>
<li class="about-ar1web-icon twitt"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-twitter fa-fw"></i> تابعنا</a></li>
<li class="about-ar1web-icon crcl"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-google-plus fa-fw"></i> جوجل</a></li>
</ul>
</div>
</div>