Translate

من يرغب في ارسال

من يرغب في ارسال اي مقال يمكنه المراسله علي الاميل goreg12@gmail.com

عنواين الرئيسيه

كشف حقيقة التربح غير المشروع لجمعيات الاسكان التعاونى وتوظيف الاموال ؟ جمع الاموال لمشروع بناء وهمى على ارض محل نزاع قضائى على الملكيه ؟-رسالة من أحد ضحايا كشف الفساد المالى والإدارى -فراد أسرة النائب العام متوغلون في إدارة شركات مكتظة بالفساد المالي -المهندس شريف سوسة رئيسا لشركة بدر الدين للبترول. -إهدار4 ملايين جنيه بشركة بدر الدين للبترول -فساد بـ4 ملايين جنيه بشركات البترول بمطروح-مذكره التي اثارت غضب بعض الافراد من شركه بدر الدين...

www.alarabiya.net

/www.islammemo.cc

الاثنين، 14 يناير 2013

Simplex Design blog : Web design and Usability Evaluation and Analyzer Tools That you Should Not Be ignoring

Simplex Design blog : Web design and Usability Evaluation and Analyzer Tools That you Should Not Be ignoring

Link to SimplexDesign - free premium blogspot template

Web design and Usability Evaluation and Analyzer Tools That you Should Not Be ignoring

Posted: 14 Jan 2013 12:16 AM PST

It is surprising to see that there are zillions of tools available to get all the details pertained to analyzing traffic, code and structure of your website but when it comes to evaluate the accessibility and design aesthetic , available tools are few and far between. Though a Google search may end up having a long list of such tools claiming to find and fix all those bugs that have been making your life miserable so far, not all of them are good enough for you. So, to simplify your task, here I am going to share some tools that will make your life a lot easier:

 

YSlow: If you are obsessively passionate about the performance of your website, YSlow is the tool that you should drooling over. This tool analyzes the performance of a website based on some set metrics. Apart from providing tools for analyzing performance,   it helps summarizing components of the page, displays page statistics and finally comes up with loads of suggestions to improve overall performance of the website.

 

Click Density: I hope you would certainly love to know exactly where your targeted visitors are clicking and which sections they are missing out on. With this tool, you will be able to track clicks and then position designing elements accordingly to get the desired outcome.

 

Pagealizer: This tool offers all the usage data that you need to make your landing page more appealing and it will go a long way to help you see more conversions. It offers amazing details like how far a page has been scrolled down by visitors, which sections draw the maximum clicks, average time spent on a page and a lot more.



Check My Colors: If you really care for your visitors, you should make sure that people with color deficits are not finding it tough to navigate your website. With this tool, you will be able to check the background and foreground colors of all DOM elements to ensure the fact that all these elements are generating desired level of contrast. This tool uses the algorithms for conducting the tests based on the suggestions of World Wide Web Consortium (W3C).



Usabilla: If you wish to get feedback direct from your targeted audience, Usabilla is the tool you should be rooting for. It will let you gather feedbacks directly from the targeted audience and with these feedbacks, hopefully you will be able to locate and fix some common usability things. Users do not need to sign up for sharing their valuable feedbacks. They just need to click anywhere in the page and share their feedback. It is as simple as that.

 

Browsershots: Are you concered about how your website rendering in different browsers and operating systems? With this amazing tool – Browsershots, you will be able to test this thing without even spending a penny for that. It is fast, simple and yes, it is absolutely free.

 

User Testing: Do you want to get feedback from human evaluators from different parts of the website before making your website live? In that, User Testing is exactly what you might be looking for. Based on the demographics of your website, UserTesting will assign human testers to review your website.

About Guest Blogger

Michael Evans is passionate about photography, web design and development. He has also written several web design tutorials and works as a part time photographer for some leading journals.

الاثنين، 7 يناير 2013

Simplex Design blog : Simplex PhoneMag - Template for phone magazine

Simplex Design blog : Simplex PhoneMag - Template for phone magazine

Link to SimplexDesign - free premium blogspot template

Simplex PhoneMag - Template for phone magazine

Posted: 06 Jan 2013 10:21 AM PST


It's been a long time since the last template released. So in this post , I will come back with a template for magazine and newsportal . Demo of this template has been instroduced for a while and thanks for your suggestions, I finish this and decide to public, hope it helpful to you. This template will be hosted in Download Section. Any update or bug fixed will be there ,so you can check the Template Download page for new available.


Live Demo

Here is step to install this template


1,Download this template .
Click on Template Download link in top navigation bar or access through this link

http://templates.thesimplexdesign.com 
 Find the name Simplex Phonemag in the list and click on that name ,you will find a link for download. Template in xml format, all scripts have been integrated in template content itself ,and all images have been uploaded and hosted in Blogger server. So at this time, I think hosting and bandwidth can be put aside. In case you want to host them yourself ,feel free to email me , I will provide separated script files and images.

2, Open template file in a word editor such as Notepad, Notepad++ .

3, To add your social network accounts

Find this code:
<b:section id='header2' showaddelement='yes'>
                 <b:widget id='HTML2' locked='false' title='share' type='HTML'>
                     <b:includable id='main'>
                         <div id='top_share'>
                             <ul class='s_sub'>
                                 <li class='s_ml_1 s_dropdown_container'>
                                     <!-- AddThis Button BEGIN -->
                                     <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=300&pubid=xa-50bad8bc309e9a2f"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
                                     <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-50bad8bc309e9a2f"></script>
                                     <!-- AddThis Button END -->
                                 </li>
                             </ul>
                             <p>Follow us:</p>
                             <a class='s_fb_fanpage s_icon' href='' target='_blank'/>
                             <a class='s_twitteracc s_icon' href='' target='_blank'/>      
                             <a class='s_rss_all s_icon' href='/feed/posts/defaults'/>
                             <a class='s_youtube_channel s_icon' href='' target='_blank'/>   
                             <a class='s_google_channel s_icon' href='' target='_blank'/>

                         </div><!-- /top_share -->
                      </b:includable>
                 </b:widget>
             </b:section>
add your link to your social network accounts in href='' .

4, To edit the main menu


Find this code
<div class='s_wrap clearfix' id='main_navigation'>
             <ul class='clearfix' id="megamenu">
                 <li class='s_ml_1 selected' id='menu_home'>
                     <a class='s_ml_1 selected' href='/'><span>Home</span></a>
                 </li>
                 <li class='s_ml_1 ' id='menu_phones'>
                     <a class='s_ml_1 ' href='/search/label/phones'><span>Phones</span></a>
                </li>

                 <li class='s_ml_1 ' id='menu_tablets'>
                     <a class='s_ml_1 ' href='/search/label/'><span>Category</span></a>
                 </li>
 
                 <li class='s_ml_1 ' id='menu_news'>
                     <a class='s_ml_1 ' href='/search/label/'><span>Category</span></a>
                 </li>
                 <li class='s_ml_1 ' id='menu_reviews'>
                     <a class='s_ml_1 ' href='/search/label/'><span>Category</span></a>
                 </li>
   
                 <li class='s_ml_1 ' id='menu_plans'>
                     <a class='s_ml_1 ' href='/search/label/'><span>Category</span></a>
                 </li>       
                 <li class='s_ml_1 ' id='menu_discussions'>
                     <a class='s_ml_1 ' href='/search/label/'><span>Category</span></a>
                 </li>
   
                 <li class='s_ml_1' id='menu_gadgets'>
                     <a class='s_ml_1 ' href='/search/label/'><span>Category</span></a>
                 </li>
       
                 <li class='s_ml_1' id='menu_jobs'>
                     <a class='s_ml_1 ' href='/search/label/'><span>Category</span></a>
                 </li>               
             </ul>
         </div><!-- /main_navigation -->
Add the links to your categories into href attribute of the code above. In general, in Blogger, link to categories has format as bellow :
http://your blog link.blogspot.com/search/label/category_name
So you can replace the text in bold in code above to your links.

5, To add your link to sub menu navigation

Do as step 4, but find the code bellow:
<div class='s_wrap s_sub_navigation clearfix' id='home_sub_navigation'>
             <ul class='s_ml_1'>
                 <li class='s_ml_1 s_label'>Sub Category</li>
                 <li class='s_ml_1 '><a class='s_ml_1' href='/'>Category</a></li>
                 <li class='s_ml_1 '><a class='s_ml_1' href='/'>Category</a></li>
                 <li class='s_ml_1 '><a class='s_ml_1' href='/'>Category</a></li>
                 <li class='s_ml_1 '><a class='s_ml_1' href='/'>Category</a></li>
                 <li class='s_ml_1 '><a class='s_ml_1' href='/'>Category</a></li>
                 <li class='s_ml_1 '><a class='s_ml_1' href='/'>Category</a></li>
                 <li class='s_ml_1 '><a class='s_ml_1' href='/'>Category</a></li>
                 <li class='s_ml_1 '><a class='s_ml_1' href='/'>Category</a></li>
             </ul>
         </div> <!-- /home_sub_navigation -->
6, To add item to Side menu navigation

Repeat step 4 for code bellow:
<div class='s_wrap' id='side_navigation'>
             <div class='s_container'>
                 <h3>Category</h3>
                 <ul class='clearfix'>
                     <li><strong><span class='s_icon s_carriers'/>Category 1</strong></li>
                     <li><a href=''>Sub Category</a></li>
                     <li><a href=''>Sub Category</a></li>
                     <li><a href=''>Sub Category</a></li>
                     <li><a href=''>Sub Category</a></li>
                     <li><a href=''>Sub Category</a></li>
                 </ul>
               
                 <ul class='clearfix'>
                     <li><strong><span class='s_icon s_carriers'/>Category 2</strong></li>
                     <li><a href=''>Sub Category</a></li>
                     <li><a href=''>Sub Category</a></li>
                     <li><a href=''>Sub Category</a></li>
                     <li><a href=''>Sub Category</a></li>
                     <li><a href=''>Sub Category</a></li>
                 </ul>
               
                   <ul class='clearfix'>
                     <li><strong><span class='s_icon s_carriers'/>Category 3</strong></li>
                     <li><a href=''>Sub Category</a></li>
                     <li><a href=''>Sub Category</a></li>
                     <li><a href=''>Sub Category</a></li>
                     <li><a href=''>Sub Category</a></li>
                     <li><a href=''>Sub Category</a></li>
                 </ul>
             </div>
         </div><!-- /side_navigation -->
7, Save templates and upload it to Blogger.  Go to Blogger Dashboard - > Layout

8, To add logo

Click on logo widget

Add the image to widget content as structure bellow
<img src="image url"/>

9, To add content to editor pick section

Click on editor pick widget

Add the name of category which you want to show in Editor pick section
For example, I want to show posts under 'review' category into Editor pick section ,so in this image, I added "review" into widget content.

10, To add content to feature stories slider


Do the same as step 9.

11, For Latest review, Latest phones and Latest articles, repeat step 9.

12, There are 4 widgets designed for advertisment : Ad1, Ad2, Ad3, wide banner 720.
To add advertisment into these sections, just click on widget and add ad script into widget content.

13, This template is 'widget ready', so you can add your own widget in anywhere you want.

14, There are two type of display in this template, one will display phones

and the other will display articles

So when using this template, you have to decide which display your post will be. If your post is for instroducing a new phone , you should display it as 'phone' style. So in post window, just need to add a label 'phone' into label dialog.

If you want to display it as normal article, do not as 'phone' label anyway. Tt will display as a normal article.

15, This template use Google Search for showing result and it need a page in your blog for showing result, so you need to create a page.
To create them, Back to Blogger Dashboard -> Pages -> New Page -> Blank page.
Name this page whatever you like ,such as 'search result' .
 And get the link to this page. It can be : http://your_blog.blogspot.com/p/search-result.html.
So in the page content, click on Edit HTML mode,  Paste the content bellow into post content
<style>
#cse-search-results iframe {width:680px;}
</style>
<div id="cse-search-results" style="width:680px;"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 800;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
Save pages.
Now back to Blogger Dashboard , click on Template - > Edit HTML ->  Click Next if necessary -> you will see template xml content. Now search for the link by press Ctrl+F (Remember to check Expand widget templates before search)
http://3funpics.blogspot.com/p/search-rs.html
And replace it with link to your search result page, in this case, it is

http://your_blog.blogspot.com/p/search-result.html.
Save template .

16, To edit Text in a template or translating it to your language, just open template in a word editor and search for the word/term which you want to translate, it will lead you to where need to changes.
That's all . Now it's time for seeing the template working .

I hope this template will work well for you. Feel free to leave me feedbacks.