اسم القالب TheJournal
قالب بلوجر اخبارى اكثر من رائع و يصلح ايضا للعديد من المدونات
و يتكون سلايد شو و عمدوين على اليسار
و ثلاثة اعمدة فى الاسفل
الوان القالب هى
ابيض
رمادى
احمر
للتحميل
ثم ضع الكود التالي فوقه :</head>
<!-- www.monte-escalier-prix.org Related Posts with thumbnails -->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC8K1E-fKA7ZXEVRw5OE2koPvj6QTuiLFR_09Xkbn3M9cxIXgmH1LfGb1bXaqCb_ROt95-6TnCIZ2LPvEYH9luAvwav-hPiR2vQ5UpbHYll5xpj5ZRo8Qhdq9gBzsgXqs3rhQAk3DNszA/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="مواضيع ذات صلة ";
</script>
<script src='http://sites.google.com/site/lightbox007/abuiyad/related-posts-with-thumbnails-for-blogger-pro.js.txt' type='text/javascript'/>
<!-- remove --></b:if>
<!--www.pergola-bois-terrasse.org Related Posts with thumbnails -->
فإن لم تجده إبحث عن هذا الكود :<div class='post-footer-line post-footer-line-1'>
<p class='post-footer-line post-footer-line-1'>
ملاحظة : يمكنك تغيير الرقم 5، وهو يدل على عدد المواضيع ذات الصلة التي سيتم عرضها.<!-- www.monte-escalier.org Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'><div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://abu-iyad.blogspot.com/2010/07/related-postssimilar-posts-widget-for.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='www.monte-escalier-prix.org' ><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
ثم ضع الكود التالي فوقه :]]></b:skin>
لتغير الخلفية،قم بتغير الرابط باللون الاحمر حسب رغبتك#myslides{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu2pCiNZm7-j1bqAV1TQWNjf1xuJ8U2Mz-c0yEWUTGmNis7PJg6lFJOKI0c7ZNq8D7CBwcaYpmIkXfsGv0pXesGPzAWLHldXwuHO45Ibq-nxVqxPokZg1-Q2hIZO3kTjgLliJxcDoGIA/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}
.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}
ثم ضع الكود التالي فوقه :</head>
الروابط ذات اللون الاحمر تمثل صورة السهم الى اليسار و اليمين<!-- JavaScript Slider -->
<script src='http://sites.google.com/site/mohamedabuiyad/slid-move1/abu-iyad.js' type='text/javascript'/>
<script src='http://sites.google.com/site/mohamedabuiyad/slid-move1/abu-iyad2.js' type='text/javascript'/>
<!-- End JavaScript Slider -->
<script type='text/javascript'>
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:1500, wraparound:true, persist:true},
autostep: {enable:true, moveby:1, pause:1000},
defaultbuttons: {enable: true, moveby: 4, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9X_n79xIt-co9qf4AvuzLnDuBniTIJ3w4eT_wFR3fNp59BpVlwlBPLE-RN5qTv1tpGxwBMTpKbv55GlSK_ChA7XHW2ZNmCbmvum-N9m1pZCtdC9-Kk1zGvAlzDgS_gf5nXBjDJyHzaLA/s400/left.jpg', -48, 0], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBDFRMh0RkAcR8ppsZw4d-trs2cCPb-NYgQPavYFtCqDJZ6AROyIV-tx6zhcPhQUcbSbrvpG647SaDS2l_GVWXAOPTbjzXGmK-uf4BK84KlCzC1z_Et_vNL38TDn6OLRQ115eJ6BY6Iqo/s400/right.jpg', 0, 0]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">
<!-- 1st Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D9%86%D8%B5%D8%A7%D8%A6%D8%AD%20%D9%84%D9%84%D9%85%D8%B3%D8%AA%D9%87%D9%84%D9%83?&max-results=5" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="http://pics.imagup.com/ano1/1278000007.png" height="110" /> </a>
</div>
<!-- end code of 1st -->
<!-- 2nd Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D9%83%D9%8A%D9%81%20%D8%AA%D8%B5%D9%86%D8%B9?&max-results=5" target="blank" title="Simple Blog Writing Template"> <img width="160" alt="Simple Blog Writing Template" src="http://pics.imagup.com/ano1/1278001914.png" height="110" /> </a>
</div>
<!-- end code of 2nd -->
<!-- 3th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=5" target="blank" title="Lenomag Blogger Template"> <img width="160" alt="Lenomag Blogger Template" src="http://pics.imagup.com/ano1/1278001116.jpg" height="110" /> </a>
</div>
<!-- end code of 3th -->
<!-- 4th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%BA%D8%B1%D8%A7%D8%A6%D8%A8%20%D9%88%20%D8%B9%D8%AC%D8%A7%D8%A6%D8%A8?&max-results=5" target="blank" title="Money Blogger Template"> <img width="160" alt="Money Blogger Template" src="http://pics.imagup.com/ano1/1278001691.png" height="110" /> </a>
</div>
<!-- end code of 4th -->
<!--5th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%BA%D8%B1%D8%A7%D8%A6%D8%A8%20%D9%88%20%D8%B9%D8%AC%D8%A7%D8%A6%D8%A8?&max-results=5" target="blank" title="Digital Statement Blogger Template"> <img width="160" alt="Digital Statement Blogger Template" src="http://pics.imagup.com/ano1/1278002070.jpg" height="110" /> </a>
</div>
<!-- end code of 5th -->
<!--6th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A7%D9%84%D8%B1%D8%A8%D8%AD%20%D9%85%D9%86%20%D8%A7%D9%84%D8%A5%D9%86%D8%AA%D8%B1%D9%86%D8%AA?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278002754.png" height="110" /> </a>
</div>
<!-- end code of 6th -->
<!--7th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278003649.png" height="110" /> </a>
</div>
<!-- end code of 7th -->
<!--8th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A7%D9%84%D8%AA%D8%BA%D8%B0%D9%8A%D8%A9%20%D9%88%D8%A7%D9%84%D8%B5%D8%AD%D8%A9?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278003860.png" height="110" /> </a>
</div>
<!-- end code of 8th -->
<!--9th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278004864.png" height="110" /> </a>
</div>
<!-- end code of 9th -->
<!--10th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278094671.png" height="110" /> </a>
</div>
<!-- end code of10th -->
<!--11th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278094825.png" height="110" /> </a>
</div>
<!-- end code of11th -->
<!--12th Template -->
<div class="panel">
<a href="http://abu-iyad.blogspot.com/search/label/%D8%A7%D9%84%D8%A3%D8%AB%D8%A7%D8%AB%20%D9%88%D8%A7%D9%84%D8%AF%D9%8A%D9%83%D9%88%D8%B1?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278095024.png" height="110" /> </a>
</div><!-- end code of 12th -->
</div></div></div>
قم بحذف الرموز كما هو مبين باللون الاحمر في الكود ليصبح على هذا الشكل<script type="text/javascript"><!--
google_ad_client = "xxxxxx";
/*xxxxxxxxxxxxxx */
google_ad_slot = "xxxxxxxx";
google_ad_width = xxxxxx;
google_ad_height = xxxxxxx;//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
ثم قم بحفظ القالب وإنشاء الله سوف تظهر الإعلانات بشكل سليم<script type="text/javascript">
google_ad_client = "xxxxxx";
/*xxxxxxxxxxxxxx */
google_ad_slot = "xxxxxxxx";
google_ad_width = xxxxxx;
google_ad_height = xxxxxxx;
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>