2013 December 30 Archive - EXEIdeas

Since a long time, I am seeing Blogger custom modification by many codes/bloggers. But some of them share it and some not. I checked Grid Style Blogger Posts and also List Style Blogger Post that I also share but now in the new era, everyone wants to give there control to there visitor so he can do itself what he want. I saw in many temples that there is a button through which a visitor can change the blog post style in which he want it Grid/Style but they used JQuery for it that I hate as you know. But I liked it and think to avoid JQuery and use lightweight code to do this and I Found that that is shared below.In this code, Your post on Blog load will be in list style with Auto ReadMore button and your visitor will be able to see two buttons in which one will convert your blog posts n Grid View and other will make it as List View again. So your visitor can change it again and again through one click only. These button will be on the top or Blog posts and will be visible on HomePage, LablePage, SearchPage only.Now if you comes on coding then here we only used HTML, CSS and JavaScript. We added two set of CSS as one is for list view of blogger posts and other is for grid view of post. Now on load, list view CSS will be loaded now its comes to change the CSS to grid view on click via JavaScript only. So here we change CSS from one to other from JavaScript CSS Changer Code that was quit difficult to do with class and very easy with ID but still we make it and make the code short as it will become with ID and it will start conflicting with your other codes. Now on click, whole CSS of list view will be change to grid view CSS and on click on other button, It will comes to its default one.This code is fully customizable with a lot of features and works on all platform with cross browser support too. Here you can change List View CSS and Grid View CSS easily with also change AutoRead More Post test count and image size with Button CSS too. So without any more preface, here first see our live demo then see our features list below then proceed to the tutorial added below. #Demo {padding: 5px;border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; background:#F8F8F8; box-shadow: 3px 3px 3px #D44B2C; width:200px; } #Demo{margin-bottom:5px;} #Demo a{color:#D44B2C;background:#F8F8F8;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} #Demo a:hover{color:#fff;text-shadow:0px 1px 0px #000;background:#D44B2C;text-decoration:none} CLICK HERE TO SEE DEMO Features:1.) All Post Becomes List View Styled On Default.2.) Post Will Be Untouched While Editing.3.) Length Of The Post Summary Can Be Changed, But It Affects All The Posts At Home, Labels And Archive Pages.4.) Auto Read More Will Applied On All Posts(Home, Labels And Archive Pages), No Exception.5.) The First Picture In Each Post Will Be Automatically Used As A Thumbnail (On Home, Labels And Archive Pages). You Can Also Choose Not To Show Thumbnail.5.) Only Loads The Snippet At Home, Labels And Archive Pages.6.) It’s Will Make Professional Looking Blog.7.) Visitors Have To Click Read More To View The Full Post That Will Increases Your Page Views.8.) Will Decrease Your Page (On Home, Labels And Archive Pages) Loading Time.9.) Perfect For Better SEO.10.) You Don’t Have To Add -The Jump Break- In Every Post.11.) It Will Effect All Of Your Post In Your Blog (New To Old).12.) 99% Of Blogger Are Using This Code.13.) Uses HTML-Javascript Code.14.) Quick To Load And Easy To Install.15.) No Any External File Added.16.) List View To Grid View Switcher Is Also Added.17.) Your Visit Can Change Between Them Via Buttons On Top Of Posts.18.) These Button Will Only Be Displayed Where The AutoReadMore Will Work Means Home, Labels And Archive Pages.19.) You Can Change CSS Of List View And Grid View From Buttons.20.) You Can Change Unlimited CSS Of List View And Grid View.21.)Fully Customizable.22.) You Can Change Posts CSS Too.23.) It Will Not Conflict With Your Pre Added CSS To Posts.24.) No JQuery Added To Conflict Or Increasing Load Time, Will Work With Pure JavaScript.25.) This Code Will Work On Plain Blogger Template. Also Can Work On Pre AutoReadMore Code Added Blog. (Contact For This Type Of Blog)How To Add In Your Blog:1.) Go To Your www.blogger.com2.) Open Your Desire Blog.3.) Go To “Template“.4.) Click “Edit HTML“.5.) Click “CTRL+F” Inside The Template Box To Find Code.6.) Now Copy The Below Code And Paste It Before The Above Code. /* List/Grid Post Buttons----------------------------------------------- */#exe_list_grid_button {text-align:right;cursor:pointer;margin-bottom:10px;font-size: 14px;font-style: italic;}.exe_grid_button {background-color:#efefef;color:#000;padding:5px 10px;border:1px solid #000;border-radius: 5px;font-size: 12px;}.exe_list_button {background-color:#efefef;color:#000;padding:5px 10px;border:1px solid #000;border-radius: 5px;font-size: 12px;}/* List/Grid Post CSS----------------------------------------------- */.post{position:relative;width:100%;}.post-title {font-size:40px;}.exe_post_grid {width:46.7%;height:690px;float:left;margin:10px;position:relative;display: block;}.exe-post-title-grid { font-size:25px;} function exe_gridview(){if(document.getElementsByClassName(&quot;post&quot;)) {elementArray = document.getElementsByClassName(&quot;post&quot;); while (elementArray.length) {elementArray[0].className = &quot;exe_post_grid&quot;;}}if(document.getElementsByClassName(&quot;post-title&quot;)) {elementArray = document.getElementsByClassName(&quot;post-title&quot;); while (elementArray.length) {elementArray[0].className = &quot;exe-post-title-grid&quot;;}}} function exe_listview(){if(document.getElementsByClassName(&quot;exe_post_grid&quot;)) {elementArray = document.getElementsByClassName(&quot;exe_post_grid&quot;); while (elementArray.length) {elementArray[0].className = &quot;post&quot;;}}if(document.getElementsByClassName(&quot;exe-post-title-grid&quot;)) {elementArray = document.getElementsByClassName(&quot;exe-post-title-grid&quot;); while (elementArray.length) {elementArray[0].className = &quot;post-title&quot;;}}} var thumbnail_mode = &quot;yes&quot; ;summary_noimg = 1000;summary_img = 500;img_thumb_height = 250;img_thumb_width = 300; // ")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop =1){imgtag=' ';summ=summary_img}var summary=imgtag+' '+removeHtmlTag(div.innerHTML,summ)+' ';div.innerHTML=summary}//]]> 7.) After That, Find This Below Code Using "CTRL+F. 8.) You Will Find Three Of Them, Replace The Third One With The Following Code. createSummaryAndThumb("summary "); Read More... 9.) Now Click "CTRL+F" Again And Find The Below Code In Your Template. 10.) After Finding The Above Line, Copy The Below Code And Paste It Above This Line. See Our Articles In Different Styles... Grid View List View 11.) Click "Save Template" And Done.12.) Don't Forget To Keep Your Template Backup Always.Customization:1.) Change yes To no If You Don't Want To Show Image Thumbnail.2.) If Your Post Have No Images Then The Words On Main Pages (On Home, Labels And Archive Pages) Are 1000 You Can Change It With Your Desire.3.) If Your Post Have Images Then The Words On Main Pages (On Home, Labels And Archive Pages) Are 500 You Can Change It With Your Desire.4.) Height Of Thumbnail Of Your Image On The Page (On Home, Labels And Archive Pages) Is 250 You Can Change It With Your Desire.(It Is Calculated In Pixels)5.) Width Of Thumbnail Of Your Image On The Page (On Home, Labels And Archive Pages) Is 300 You Can Change It With Your Desire.(It Is Calculated In Pixels)6.) You Can Change The Words “Read More..." With Your Desire, If You Want To Show An Image Instead Of Text Then Change It With Next/Prev/Home Buttons Bugs Fixed:If You Have A Custom Template Or Blogger Official Template, There May Be A Bug After Adding The Above Code That Will Hide Your Next/Prev/Home Buttons Which Are At The Near Of End Of Blog And Move Them Anywhere Else. If You Are Watching This Bug Then Don't Feel Horriable Because Here IS The Fix For You.1.) Go To Your www.blogger.com2.) Open Your Desire Blog.3.) Go To "Template".4.) Click "Edit HTML".5.) Click "CTRL+F" Inside The Template Box To Find Code.6.) Now Copy The Below Code And Paste It Just After The Above Code. 7.) Click Save template.Note:If You Have Already Inserted -The Jump Break- Option In Your Previous Post, After Applying This Code You Will See The Two “Read More..." Link Below Every Old Post. Then Please Contact Me Or Comment Here, I Will Set It For You.Last Words:Thanks for adding this awesome code in your blog and now your blog will look more awesome then it is as now its looking professional with easy codes. If you have any quires or stuck at any step, feel free to ask us in comments and if you liked it then share it with your friends and dont forget to leave your feedback in comments. Note: This Code Is Highly Copyrighted Code/ScriptVia DMCA And Other Registered Copyright Laws And Services, You Are Free To Use For (Personal And Commercial), Edit And Share But With The HTML Design Code That Will Not Appear In Your View Mode. If Anybody Is Found To Be Thefting Or Without HTML Design Code Is Under Legal Action And If He Is Sharing Via There Site Or Bio Will Be Got Banned By DMCA With Prior Notice Because We Are Telling Yo In Advance...