هادى ستور
‏إظهار الرسائل ذات التسميات إضافات بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات إضافات بلوجر. إظهار كافة الرسائل
الأربعاء، 21 يناير 2015

0 التعليقات إضافة 5 أشكال إحترافية لآخر التدوينات لبلوجر

السلام عليكم ورحمة الله وبركاتة
إخوانى الكرام تدوينة اليوم هى عن إضافة (التدوينات الأخيرة) باكثر من شكل مختلف وجزاب وراقى وتنساب جميع الأذواق أشكال إحترافية حيث أن إضافة التدوينات الأخيرة مهمة جدا للمدون وللزائر ضف إلى ذلك سهولة فى التركيب دعنا نعرض لك الـ 5 أشكال المختلفة لكى تختار ما يناسبك .
الشكل الأول
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://hadystore.blogspot.com/" rel="nofollow">Hadystore</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>
الشكل الثانى
<div class="recentpoststyle">
<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script>
<script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://hadystore.blogspot.com/" rel="nofollow">Hadystore</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none; color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style></div>
الشكل الثالث
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://hadystore.blogspot.com/" rel="nofollow">Hadystore</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}
</style>
الشكل الرابع
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://hadystore.blogspot.com/" rel="nofollow">Hadystore</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>
الشكل الخامس
<script style="text/javascript" src="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://hadystore.blogspot.com/" rel="nofollow">Hadystore</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style>
  1. الخطوة الأولى : لوحة التحكم الرئيسية الخاصة بك
  2. الخطوة الثانية : إذهب إلى التخطيط وإختار إضافة اداة جافاسكريبت
  3. الخطوة الثالثة : ضع الكود الذى قمت بـ إختياره داخل الصندوق الذى سيظهر لك

الثلاثاء، 18 نوفمبر 2014

1 التعليقات إضافة معلومات عن الكاتب بشكل جديد 2015

بسم الله الرحمن الرحيم | السلام عليكم ورحمة الله وبركاتة
اليوم إخوانى الكرام إضافة رائعة جداً من مدونة هادى ستور معلومات عن الكاتب + أيقونات المتابعة بشكل إحترافى لا شك ان كل شخص يبحث عن المظهر اللائق والأإضافات الأكثر إحترافية التى ستزيد لمسه رائعة لمدونتة ومظهرها هذة الأإضافة رائعة جدا وشكل جديد ومطور ويتم تركيبها عن طريق أداة جافاسكريبت يتم وضعها فى أى مكان ما أينما شئت والآن مع شرح تركيب الأإضافة والجزء الذى سيتم التعديل عليه لكى تناسبك .
لوحة التحكم الرئيسية > التخطيط > إضافة اداة جافاسكريبت وضع بها الكود التالى
<style>
.wgauthr-widget {
background:#fff;
background-color:#fff;
overflow:hidden;
position:relative;
margin-bottom:30px;
padding:10px 26px;
}
.wg-crnrbckgr:before {
content:"";
position:absolute;
top:0;
right:0;
z-index:40;
background:#658E15;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
display:block;
width:0;
border-color:#fff #eee #fff #fff;
border-style:solid;
border-width:0 16px 16px 0;
}
.wg-crnrbckgr {
position:relative;
background-color:#47C2DC;
height:90px;
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size:cover!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:cover!important;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtrg
img {
height:80px;
width:80px;
padding-bottom:14px;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo
span {
display:block;
letter-spacing:1px;
text-transform:uppercase;
}
.wg-avtlninfoaa {
font-size:14px;
line-height:21px serif,font-weight:normal,color:#666;
padding:22px 25px 8px;
}
.dwnlin {
margin-top:6px;
text-align:center;
border-top:2px solid #eee;
padding:8px 25px;
}
.wgauthr-widget.wgathrlns {
background:#fff;
margin-bottom:30px;
padding:0;
}
.wg-golblue {
width:100%;
height:50px;
padding:0 0 0 30px;
}
.wg-goliconn {
background:#47C2DC;
width:44px;
height:44px;
border-radius:10000px;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
cursor:pointer;
float:left;
margin-right:5px;
}
.wg-goliconn:hover {
background:#ddd;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.wg-goliconn img {
padding-top:5px;
padding-left:5px;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtrg,.wgavtrg {
position:absolute;
bottom:-20px;
left:30px;
border-radius:50%;
overflow:hidden;
background-color:#fff;
border:5px solid #fff;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo,.wgavtinfo {
padding-left:130px;
padding-top:46px;
color:#fff;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo .wgurnaam,.wgurnaam {
font-size:14px;
line-height:16px;
padding-right:20px;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo .wgurju,.wgurju {
font-size:10px;
padding-right:20px;
}
</style>
<div class="wgauthr-widget wgathrlns"><div class="wg-crnrbckgr" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYuN2JWDkMziue6_7zNbHnU8fj1p7GvP_VyhzH_nQU-u0JDsXbd3vrvkBGw5gSi1PhxKZnJabVH0MSPyRSFsFmSZveFEswZ44796YmlkoBz2kcfEXIVGd8Rg1OoWHaG5hxifmJK2hl8j3j/s1600/authorbck.jpg)">

<div class="wgavtrg">
<img alt="هادى ستور" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTyN73jqGxZaeaWKhlP4mBnvHROszLM5k3tiN5PIVLpFtbKqICpMm6dES1teO0dy9XbHm09Eg-JKnlULr8kY2MuJ1S7eHrphiYBrnRkx7APKhsr5UlaSy9v4C_6cJeTxhLZrR4O1coM5vU/s1600/%D8%A8%D9%86%D8%B1-%D8%AE%D8%A7%D8%B5-125.jpg" /></div><div class="wgavtinfo"><span class="wgurnaam">هادى ستور</span>
<span class="wgurju">مطور ويب</span></div></div><div class="wg-avtlninfoaa">مدونة هادى ستور لخدمات بلوجر والفوتوشوب نوفر لك الأأفضل</div><div class="dwnlin"></div>

<div class='wg-golblue'>
<div class='wg-goliconn'><a href='http://www.facebook.com/hadystore' target='_blank'><img border='0' src='http://1.bp.blogspot.com/-H38kJ5PSU-k/Uin2qt9WW0I/AAAAAAAAAP8/W5Wmpt42xwY/s1600/facebook.png'/></a></div>

<div class='wg-goliconn'><a href='http://www.twitter.com/hady_store' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-B3UXsAyQbdw/Uin2scG5PKI/AAAAAAAAAQU/zcSj3UljGCw/s1600/twitter.png'/></a></div>

<div class='wg-goliconn'><a href='http://www.plus.google.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/--Pp4ZjOu4Ew/Uin2qgGT5zI/AAAAAAAAAP4/sMX3HGgzctE/s1600/google+.png'/></a></div>

<div class='wg-goliconn'><a href='http://www.youtube.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/-2KJ18EdFkdM/Uin2sS-cP1I/AAAAAAAAAQQ/7Vv8-WQWRQo/s1600/youtube.png'/></a></div>
<div class='wg-goliconn'><a href='http://feeds.feedburner.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-aVX-dCRSr-A/Uin2qzynvOI/AAAAAAAAAQI/l-Mn8lg6sPs/s1600/rss.png'/></a></div>
</div></div>
تغيير بعض الأأشياء لكى تناسبك 
اللون         وهو وضع أسماء حساباتك على المواقع الإجتماعية الخاصة بك
اللون         وهو تغيير إسمى بالإسم الخاص بك 

هنا نكون وصلنا لنهاية موضوعنا اليوم إلى اللقاء