هادى ستور
الأربعاء، 28 يناير 2015

0 التعليقات إضافة قائمة منسدلة علوية بشكل إحترافى

بسم الله الرحمن الرحيم | السلام عليكم ورحمة الله وبركاتة
أهلاً بكم إخوانى الأعزاء قائمة مسندلة بشكل أكثر من رائع وإحترافى جداً القائمة تعمل بالجى كويرى كما تتميز انها تضم اكثر من إضافة فى مكان واحد القائمة تضم (التسجيل فى القائمة البريدية - أيقونات المتابعة - صندوق البحث - نبذة مختصرة عن الكاتب - قائمة بأهم الأقسام لديك او اهم الروابط ) كما إنها تمتاز بشكل إحترافى فى فتح وغلق القائمة والآن مع شرح التركيب.
اولاً قم بالدخول إلى الصفحة الرئيسية لبلوجر وإختار قالب - تحرير Html
قم قم بالبحث عن هذة الكلمة بإستخدام ctrl + f وإبحث عن <head> وضع الكود التالى أسفلة مباشرة
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});
});</script>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #slide-top-panel {display:none !important;}
</style>
</b:if>
الآن نبحث عن هذا الوسم بإستخدام ctrl + f نبحث عن الوسم  ]]></b:skin> ونضع الكود التالى قبلة مباشرة
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}
.tab {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ78dU4M05P0tYUw5uLsdb4eol217IRif5c1CHPNK57Oaf-HugKpF0lLnL7ofxQPJOku98LZxI7N2PKXkwrkhw3Q_hMjDlhLfAv5tfM3oQEnfSooL2GkqgP3QBseiNfgN14YUSnacba_Me/s1600/sliding-panel-tab-0.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMMZ0ke-LXmgz6zo3xTzW0XtFK8sZSO63nujSDa5eUrW5_uctx_a4LmJkZrJ_FdwEjmfL9jdXZMVaRsPfyjrcCA4Z0rYaFaEe3iGHF40ohMSoe-2jJbhAS-rhD6YZazyq6LQTGblBpDVbO/s1600/sliding-panel-tab-left.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfMrYHz6RK0eeT8Cg723ePv6sXfjpiD36uBkUQe6p178vc8GXwMLHVmPYCCTnfDp8T_z_bvqKq_KkmEk_zh-IkEK2aeESP4BiX4hnYRHAgK-7q5CEKJScXYZs-uWzvOrgg0WCNkAotEczW/s1600/sliding-panel-tab-right.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE4MJjj7SeKAnvdkwaGFcUrIaYnW9gbLwN98weSfdWRX6nbNRwdYJq7Dn-ruIy2NHOQGtkPg_GOjtbzHGfypwXgbVsg9UieXyJUZk3MGw6exEf4bCa9U538_Q_vM1u-tqO2N9T9V_RUAEO/s1600/sliding-panel-tab.png) repeat-x 0 0;
}
.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}
.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQMebq_dxeN8kWsmCnUEtpbQzdDDplmY0sQsrtWPuNcFASu2vQS07SKRKu_KIb8BiVvK4rwdZAUhTbw0uNmzSo13i3U_FpQlYb7gm2dSGS3Cty6BQTFWLY3N16-Cxv6y8_5fcI2Go6cNw/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK0XoHcqMnq9Mn6IQrFRClpd0tMhwE6lCyhK4FgjcuNuHed9AzyM6s8DmNKSrXVsQHYA2NVVmEDFrNxjKscEdTohrnMw5YAwXVv4Af4dCAM6mMO6uLCMOxS4ZL3GdAuczKsyQUPwy5-lJa/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQMebq_dxeN8kWsmCnUEtpbQzdDDplmY0sQsrtWPuNcFASu2vQS07SKRKu_KIb8BiVvK4rwdZAUhTbw0uNmzSo13i3U_FpQlYb7gm2dSGS3Cty6BQTFWLY3N16-Cxv6y8_5fcI2Go6cNw/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK0XoHcqMnq9Mn6IQrFRClpd0tMhwE6lCyhK4FgjcuNuHed9AzyM6s8DmNKSrXVsQHYA2NVVmEDFrNxjKscEdTohrnMw5YAwXVv4Af4dCAM6mMO6uLCMOxS4ZL3GdAuczKsyQUPwy5-lJa/s1600/button-close.png) no-repeat left -19px;}

#slide-top-panel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 230px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 18px;
color: #F2F2F2;
text-align: center;
padding: 5px 0 10px;
margin: 0;
}
#panel p {
margin: 5px 0;
padding: 0px;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #545454;
border-radius: 10px;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 18px;
}
#panel .content input:focus.field {
background: #7F7F7F;
}
#panel .content input.button-register {
display: block;
clear: both;
height: 24px;
width: 94px;
color: white;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4WswzMPaKL6ZQpMhFZ_m_BasZOqlkdL8nI6WakHc7hmzhmJjd9up5ZtI3TryWtznWGJAvN2D76X9kacgFeMOskuLYzkPgiu1EqMciq6LJ4mAvK6b6rMedhsCyinTV627iLzbneB5RoBL3/s1600/button-register.png) no-repeat 0 0;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px auto;
}
#sliding-panel {
width: 160px;
float: left;
}
#sliding-panel2 {
width: 160px;
float: right;
}
#sliding-panel ul, #sliding-panel2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#sliding-panel ul li a, #sliding-panel2 ul li a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzk4Uls-Dw0rG04-x28KN4nOcnrdvWdHHXh3vkOfNnQKHS0X8k6S0I9C34W2_SO1krJnHK2v-5jeshO9UJjMeakywWPlgRlrL9xPHyT5bvmNjt89nc72H9qxudeR7X6gj6OKqv9s6FKagP/s1600/star-bullet.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#sliding-panel li, #sliding-panel2 li {
display: inline;
}
#sliding-panel a, #sliding-panel2 a{
color: #999999;
text-decoration: none;
font-size: 11px;
display: block;
padding: 3px;
width: 160px;
}
#sliding-panel a:link, #sliding-panel a:visited, #sliding-panel2 a:link, #sliding-panel2 a:visited {
color: #999999;
text-decoration: none;
}
#sliding-panel a:hover, #sliding-panel2 a:hover {
color: #FFFFFF;
}
#search-box22{
margin-top: 20px;
}
#search-box22 input[type="text"] {
float: right;
background: 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 160px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#search-box22 input[type="text"]:focus {
width: 190px;
}

.about-author {
width: 100%;
text-transform: none;
margin-top: 15px;
}
.authorbox {
overflow: hidden;
padding: 0;
width: 100%;
}
.authorbox .authorinfo {
}
.authorbox .authorinfo img {
float: left;
margin: 4px 10px 4px 5px;
border-radius: 100%;
width: 20%;
background: #222;
padding: 5px;
}
.authorbox .authorinfo p {
margin: 0;
padding: 0 5px;
text-align: left;
}
.authorinfo p a {
text-decoration:none;
}
.authorbox h3 {
margin: 0;
display: inline-block;
}
h3.boxtitle {
font-size: 14px;
}
الخطوة الأخيرة نبحث عن هذا الوسم <body> ونضع الكود التالى أسفلة مباشرة
<!-- Start sliding panel -->
<div id='slide-top-panel'>
<div id='panel'>
<div class='content clearfix'>
<!-- first section -->
<div class='left' style='width:240px !important'>
<h4>مرحبا&#1611; بكم فى مدونتى</h4>
<div class='about-author'>
<div class='authorbox'>
  <div class='authorinfo'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNvuVibk3SWUciElWfmbAUhsjorgUzs6iYfpGGE1KBd-3SwDB8I3PJZtWmWupkVS8PPgrTyU3Xr9uA_qbD8_PLXJrh04YeDkq0nuhRZ4LCtZxs2crf82Lh1pSEfsCDSCgMaJXvk0GpPuju/s1600/profile-pic.png'/>
<h3 class='boxtitle'>هادى ستور</h3>
<p>اهلا بك فى مدونة هادى ستور </p>
</div>
</div>
</div>
<p align='right' style='margin-top: 10px;'>إبحث</p>
<form action='/search' id='search-box22' method='get'>
  <input name='q' placeholder='بحث...' size='40' type='text'/>
</form>
</div>
<!-- second section -->
<div class='left' style='width:320px !important'>
<h4>الأقسام</h4>
<div id='sliding-panel'>
<ul>
<li><a href='Link URL'>رابط جديد</a></li>
<li><a href='Link URL'>رابط جديد</a></li>
<li><a href='Link URL'>رابط جديد</a></li>
<li><a href='Link URL'>رابط جديد</a></li>
<li><a href='Link URL'>رابط جديد</a></li>
<li><a href='Link URL'>رابط جديد</a></li>
<li><a href='Link URL'>رابط جديد</a></li>
</ul>
</div>
<div id='sliding-panel2'>
<ul>
<li><a href='Link URL'>رابط جديد</a></li>
<li><a href='Link URL'>رابط جديد</a></li>
<li><a href='Link URL'>رابط جديد</a></li>
<li><a href='Link URL'>رابط جديد</a></li>
<li><a href='Link URL'>رابط جديد</a></li>
</ul>
</div>
</div>
<!-- third section -->
<div align='center' class='left right'>
<h4>التسجيل</h4>
<p style='padding:0px 30px;'>ضع بريدك لكى يصلك كل ما هو جديد</p>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=Feed-Name' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Feed-Name'/>
<input name='lang' type='hidden' value='en_EN'/>
<input class='button-register' type='submit' value='سجل'/></form>
<div align='center' style='clear: both;'>
<a href='http://www.facebook.com/هادى ستور'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCLuBxQ6hZ8vg6zpctQGD5L4XPNTc61xtX1spS1GVFn1fx3JxCi6yNvCTUvWAlULRmKCU5Lsu8l5N8W05krLtoqrlekp3_wDlQxe1qcLHyzhg3SuKZ49wS-t4t1M7AKgocfhsPqet0iSvP/s1600/Facebook.png' style='padding:5px;' title='Follow on Facebook' width='32'/></a>
<a href='هادى ستور'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghInoy2n-xETUzG3VTZOaKR1CWZtLelxn22tDrxW6QGNjRGJuDNKV3k6aPFdqGq-hVhz10U8QH7u2lW5jqpYxu5ZjHWTqKxVS-WGkx9tiKpjXScxq8Y_P0vTfS2aPIXQZx0-d0tFK-Ilob/s1600/RSS.png' style='padding:5px;' title='RSS Feed' width='32'/></a>
<a href='https://plus.google.com/هادى ستور'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt_m3K_buHuDl9fiCNF0fOezmaxWI1FdbAc8LXZyEuC_OgrfUqxPMf5-lezOkZAsPbaVn_-xFaVP39Ycpk_ghv11tTQj3HLkVJDqYFpxidwiil0N3FyZQ6NIWTgUhzKq5JN4zefuQKD3ch/s1600/Google-plus.png' style='padding:5px;' title='Follow on Google' width='32'/></a>
<a href='http://twitter.com/هادى ستور'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8I6CePKsh2SOFdPKhIMw3sqGOLtrojZm4d0bNd0OOkE55yhwx75RZxfGhSgYH7t7Y9iQtBRouXPnYX676vkh7olCkNjkvMlNRwQjmXWNKQEIDJeqp2wUIo3-v0w6OG4DU6Qs0y47e0Qk3/s1600/Twitter.png' style='padding:5px;' title='Follow on Twitter' width='32'/></a>
</div>
</div>
</div>
</div>
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>أهلا&#1611; بك</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>إفتح القائمة</a>
<a class='close' href='#' id='close' style='display: none;'>أغلق القائمة</a>
</li>
<li class='right'/>
</ul>
</div>
</div>

ملاحظات:

  1. غير اللون        بما يناسبك
  2. لتغيير الصورة الشخصية فى القائمة إبحث عن هذا الرابط https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNvuVibk3SWUciElWfmbAUhsjorgUzs6iYfpGGE1KBd-3SwDB8I3PJZtWmWupkVS8PPgrTyU3Xr9uA_qbD8_PLXJrh04YeDkq0nuhRZ4LCtZxs2crf82Lh1pSEfsCDSCgMaJXvk0GpPuju/s1600/profile-pic.png
الثلاثاء، 27 يناير 2015

0 التعليقات أيقونات المالتى ميديا بشكل إحترافى وجزاب للتحميل

بسم الله الرحمن الرحيم | السلام عليكم ورحمة الله وبركاتة
حمداً لله دائماً أسعى لتقديم الأفضل أقدم لكم فى هذة التدوينة أيقونات المالتى ميديا بشكل إحترافى وتصميم أنيق وجزاب 45 أيقونة خاصة بالمالتى ميديا جودة عالية حجم الأيقونة 1024x1024 px حملهم الآن مجاناً فقط على مدونة هادى ستور.
الأحد، 25 يناير 2015

0 التعليقات شعار جديد إحترافى للتحميل psd

بسم الله الرحمن الرحيم | السلام عليكم ورحمة الله وبركاتة
لوجو إحترافى جداً داخل ملف psd للتعديل عليه كما تشاء العديد لا يجيد الفوتوشوب او أى برنامج آخر مخصص للتصميم لتصميم لوجو أو شعار خاصة به مدونة هادى ستور تقدم لك هذا الشعار مجاناً للتحميل وليس هذا فقط هناك المزيد من الشعارات الأكثر إحترافية.
الجمعة، 23 يناير 2015

0 التعليقات تحميل خط بيكرسفيلد الأنيق والإحترافى

بسم الله الرحمن الرحيم | السلام عليكم ورحمة الله وبركاتة
خط بيكرسفيلد من أفضل الخطوط لانه خط انيق وجميل للمصممين حيث يتوفر باكثر من وزن مختلف وهو يصلح للعناوين وجميع التصميمات خط جميل وانيق وسينال إعجاب الكثيرين حمله الآن فقط من مدونة هادى ستور .
معاينة خط بيكرسفيلد (1)
معاينة خط بيكرسفيلد (2)
معاينة خط بيكرسفيلد (3)
الأربعاء، 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. الخطوة الثالثة : ضع الكود الذى قمت بـ إختياره داخل الصندوق الذى سيظهر لك