popular post
كيفية اضافة سلايدر (slider) للمواضيع الاكثر قراءة فب مدونتك او الاكثر شهرة هذه الاضافة موجودة في بلوجر ولكن بشكل غير جذاب اليوم ساتركم مع اضافة جديدة تستطيع من خلالها عرض اكثر مواضيعك تصفحا من قبل الزوار في مدونتك وبطريقة جذابة وجميلة* للمعاينة : موجودة في مدونتي كا التي اعلى هذه التدوينة
* الاضافة :
1 - اذهب الى لوحة التحكم في المدونة ثم الى القالب ثم الى تحرير HTML ( نزل نسخة من مدونتك احتياطياً )
---------------------------------------
2 - ابحث عن الكود التالي :
]]></b:skin>
-------------------------------------
3 - انسخ الكود التالي وضعه فوقه مياشرة :
#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR8_vvXGI2Iofll3txTm8XLxGcc2q-nQ0py0mi9ahOoy08oq22hq5dCAJK-LGuz-oddZ63E67yv6pXcUZAZHNC0ILAzoC6w8Gt2az4ZYzpN1pfwxa4gPvW5mIkSlWsutGwDzgzNTJhFVN_/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
-------------------------------------------
4 - ابحث عن هذا الكود :
</head>
------------------------------------------
5 - انسخ الكود التالي وضعه فوقه مباشرة :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNQmkeP3I-Dg7yRAApC3v1wRBXxoB3jiI4dPYqBi5tgEs1Y07P-bn66IvE1LddVsgcanalVMyRgQmDAOh2VU5B5G5bj2MyPAUAyVgyKjVLvNLaZAy6808WVg13sLeNyYwgj5WCyQTxC34-/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMaOJD07uFhVqhUyGNfXymocOGqNqBwgVwd3IDh12KJZCPNJJnPS_6lszVaRFJFOggionrJUuwf-GodgI7ws5S0ihohqmduPnoY12LraFsI0nABv0gs6ctQPhTr8EGK4-_6Mbs9ZjLR06l/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>
----------------------------------------
6 - الآن ابحث عن المكان التي تريد ان يظهر به السلايدر واليك بعض الاماكن التي تستطيع وضعه فيها (باقي خطوة واحدة) :
الاول : ابحث عن هذا الاسم اذا اردت ان تضعه فوق مواضيع مدونتك كما الحال معي : ( <b:section class='main' id='main' showaddelement='no'> ) ان لم تجده فقط ابحث عن الكلمة ( main' id='main' )
الثاني : اسفل كل تدوينة او فوقها على حسب وضعك الكود ابحث عن هذا :
<data:post.body/>
من المحتمل ان تجد اكثر من واحد في العادة يكون الثاني ........ لكن للدقة حاول ان تحدد الكود الذي يكون بعده اي كلمة موجودة بالفعل اسفل التدوينة الخاصة بك ........ مثلا : في حالتي القالب يوجد به اسفل التدوينة كلمة "هل اعجبك الموضوع" ....... بحثت عن الكود الذي باسفله هذه الكلمة ووضعت بجواره هذا الكومنت او الكود " <-- البوست --!> " لانك ستحتاجه مرارا بعد ذلك في عمل التعديل في مدونتك .......
وهناك اماكن عديدة مثل اضافة اداة HTML عن طريق التخطيط ثم اضافة اداة ثم اداة HTML
لكن هذه هي الافضل
----------------------------------
7 - اخر خطوة انسخ هذا الكود وضعه في المكان الذي يناسبك :
<center>
<style>#att{ background-color:#6E6E6E; color:#000000; width:400px; }
</style>
<div id='att'>
<center><h2 style='font-size:30px;font-family: 'Droid Arabic Kufi';'> المواضيع الأكثر قراءة</h2> </center></div></center>
<div style='margin-top:20px;margin-bottom:10px;margin-left:-20px;'>
<div id='gallery'>
<ul class='belt'>
<b:loop values='data:posts' var='post'>
<li class='panel'>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<div class='item-title'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' src='https://lh3.googleusercontent.com/-Badbj81aByg/UhbrCGUB1fI/AAAAAAAAAxE/lojx8t35ATc/s72-no/photo.jpg'/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div></div>
شكرا لمتابعتكم ......... نرجو ارسال التعليقات والاستفسارات في صندوق التعليقات اسفل التدوينة
</head>
------------------------------------------
5 - انسخ الكود التالي وضعه فوقه مباشرة :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNQmkeP3I-Dg7yRAApC3v1wRBXxoB3jiI4dPYqBi5tgEs1Y07P-bn66IvE1LddVsgcanalVMyRgQmDAOh2VU5B5G5bj2MyPAUAyVgyKjVLvNLaZAy6808WVg13sLeNyYwgj5WCyQTxC34-/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMaOJD07uFhVqhUyGNfXymocOGqNqBwgVwd3IDh12KJZCPNJJnPS_6lszVaRFJFOggionrJUuwf-GodgI7ws5S0ihohqmduPnoY12LraFsI0nABv0gs6ctQPhTr8EGK4-_6Mbs9ZjLR06l/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>
----------------------------------------
6 - الآن ابحث عن المكان التي تريد ان يظهر به السلايدر واليك بعض الاماكن التي تستطيع وضعه فيها (باقي خطوة واحدة) :
الاول : ابحث عن هذا الاسم اذا اردت ان تضعه فوق مواضيع مدونتك كما الحال معي : ( <b:section class='main' id='main' showaddelement='no'> ) ان لم تجده فقط ابحث عن الكلمة ( main' id='main' )
الثاني : اسفل كل تدوينة او فوقها على حسب وضعك الكود ابحث عن هذا :
<data:post.body/>
من المحتمل ان تجد اكثر من واحد في العادة يكون الثاني ........ لكن للدقة حاول ان تحدد الكود الذي يكون بعده اي كلمة موجودة بالفعل اسفل التدوينة الخاصة بك ........ مثلا : في حالتي القالب يوجد به اسفل التدوينة كلمة "هل اعجبك الموضوع" ....... بحثت عن الكود الذي باسفله هذه الكلمة ووضعت بجواره هذا الكومنت او الكود " <-- البوست --!> " لانك ستحتاجه مرارا بعد ذلك في عمل التعديل في مدونتك .......
وهناك اماكن عديدة مثل اضافة اداة HTML عن طريق التخطيط ثم اضافة اداة ثم اداة HTML
لكن هذه هي الافضل
----------------------------------
7 - اخر خطوة انسخ هذا الكود وضعه في المكان الذي يناسبك :
<center>
<style>#att{ background-color:#6E6E6E; color:#000000; width:400px; }
</style>
<div id='att'>
<center><h2 style='font-size:30px;font-family: 'Droid Arabic Kufi';'> المواضيع الأكثر قراءة</h2> </center></div></center>
<div style='margin-top:20px;margin-bottom:10px;margin-left:-20px;'>
<div id='gallery'>
<ul class='belt'>
<b:loop values='data:posts' var='post'>
<li class='panel'>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<div class='item-title'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' src='https://lh3.googleusercontent.com/-Badbj81aByg/UhbrCGUB1fI/AAAAAAAAAxE/lojx8t35ATc/s72-no/photo.jpg'/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div></div>
شكرا لمتابعتكم ......... نرجو ارسال التعليقات والاستفسارات في صندوق التعليقات اسفل التدوينة
