Search This Blog

Loading...

OnlineLahTauke! Bring Your Business Online!

Tuesday, 23 April 2013

Customize Theme Background Typography Colors

thumb Add to Cart
Item Name How to change background gradients and colors.
Price RM00.00
Sizes (Select Before Checkout)
Description Tutorial on how to change theme background color, link color, background gradient color and more
More Details Edit background color.
Add gradient background color.
Background color code.
Change theme background.
Customize theme link and typography colors.

We made it super easy for you to customize the whole look of your blog store. With the NEW and improve Blogger Template editor, now customizing your template has become much easier.

Since that our template codes structured to meet design purposes and maximize page optimization, each areas of customization is fairly quite easy to pin-point. For instance:-

Change Header Background Gradient


Go to Template > Backup your Templatee > Edit HTML.

Now expand blogger CSS styles by clicking the small triangle on the left. It should be near Line 41.

Scroll down to Line 170 indicate Header. Change these pieces of codes to customize the Header background:-

background: #cb60b3;
background: -moz-linear-gradient(-45deg,  #cb60b3 0%, #a80077 25%, #c146a1 26%, #db36a4 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#cb60b3), color-stop(25%,#a80077), color-stop(26%,#c146a1), color-stop(100%,#db36a4));
background: -webkit-linear-gradient(-45deg,  #cb60b3 0%,#a80077 25%,#c146a1 26%,#db36a4 100%);
background: -o-linear-gradient(-45deg,  #cb60b3 0%,#a80077 25%,#c146a1 26%,#db36a4 100%);
background: -ms-linear-gradient(-45deg,  #cb60b3 0%,#a80077 25%,#c146a1 26%,#db36a4 100%);
background: linear-gradient(135deg,  #cb60b3 0%,#a80077 25%,#c146a1 26%,#db36a4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#db36a4',GradientType=1 );


A good on-line tool for CSS gradients we seldom use is here at http://www.colorzilla.com/gradient-editor/ the Ultimate CSS Gradient Generator, which you can quickly customize and select your gradient color of choice, web browser safe colors too!

Alternatively you can also add an image for your Header background by replacing the codes above with the code below:-

background: url('http://url_to_your_uploaded_image') no-repeat center center;


Note that for best rendering, make sure your image is more than 960px wide and centered height which would accomodate the height of widgets you have installed in the header area.
Changing your links color

In Edit HTML section, find Line 127 - 134. Change this code to your color code of selection:-

color: #a80077;


Changing Typography colors


For Header tags ie H1, H2, H3, H4 etc find this code at line 105 - 111. Change the below code to color selection:-

color: #a80077;


For paragraphs color find Line 120 - 125. Change these code below:-
color: #555; <


Note that there will be certain pages which uses its own style referencing. By using the new Blogger tmplate editor search bar ( Ctrl F) you can type in H1 (etc) and press enter, to search for all H1 references in the template. Use the same techniques to pin point your element for customization.

Changing Main Menu Background


Find Line 308 - 365 with Main-Nav indicators.

Find elements in between that line of codes with the " background " tag/s. Change to preferred color selection.

Customizing Drop- Down Menu Colors


Find the elements styles in Line 366 - 467. with Drop-Down Menu indicators.

Find elements in between that line of codes with the " background " tag. Change to preferred color selection.

Thursday, 18 April 2013

Add Cool Social Icons Effect Feature

Add to Cart
Item Name Include awesome social icon effects using CSS 
Price RM42.50
Sizes (Select Before Checkout)
Description Tutorial and code snippet  on how to include an awesome social icon and effect in Blogger HTML widget.
More Details Blogger new styled social icon widget.
Custom install Blogger social icon set.
Spinning Blogger social icon tutorial.
Create social icon effect.
On-hover social icon effect in Blogger. 

Firstly, got to Template Edit HTML > click on the first black triangular icon located on the left of the editor screen. This will expand your theme CSS code snippets.

Now press Ctrl F and type in below code in the template search bar.

]]></b:skin>


Press enter then your template will now  position at the highlighted code (in yellow)

Now, copy below code and paste above/before the code above:-

#social a:hover {
background-color: transparent;opacity:0.7;
}
#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg); transform: rotate(360deg);
}

Click Save Template and now you can go to Layout section.

In Layout > Add a Widget > select HTML/Javascript widget.

Copy below code in the widget body:-

<div id="social">
<!--Start Rss Icon-->
<a title="Grab Our Rss Feed" href="Enter-YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> 
<!--End Rss Icon-->

<!--Start Email Rss Icon-->
<a rel="nofollow" title="Subscribe on Youtube" href="Enter-YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Youtube-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Email Rss Icon-->

<!--Start Facebook Icon-->
<a rel="nofollow" title="Like Our Facebook Page" href="Enter-YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Facebook-48x48.png" style="margin-right:1px;" alt="Icon"/></a>
<!--End Facebook Icon-->

<!--Start Twitter Icon-->
<a rel="nofollow" title="Follow Our Updates On Twitter" href="Enter-YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Twitter-48x48.png" style="margin-right:1px;" alt="Icon"/></a> 
<!--End Twitter Icon-->

<!--Start Google+ Icon--> 
<a title="Follow Us On Google+" rel="nofollow" href="Enter-YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Google-Plus-48x48.png"/></a>
<!--End Google+ Icon-->

<!--Start Pinterest Icon--> 
<a title="Follow Our Pins" rel="nofollow" href="Enter-YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://www.hamidshahzad.com/wp-content/uploads/2013/03/S3-Www.HamidShahzad.Com-Pinterest-48x48.png" alt="Follow Me on Pinterest" /></a> 
<!--End Pinterest Icon-->
</div>

Now change the URL to your social profile link as indicated in the codes above. Once finished, click Save.

For this theme, you can drag the widget right below the Posr body widget. Click Save Arrangement > and Preview.

Special thanks to hamidshahzad.com for sharing this hacks and codes to easily create an awesome social icon on-mouse over effect by using only CSS.

Do take note that this effect works brilliantly with webkit browsers ie Google, Safari, FireFox etc. You'ed guessed it, the effects does not work with old IE 7, 8, 9 but the icons renders as expected.

1. Installation Theme Guide and Steps

Add to Cart
Item Name Installation Guide
Price RM86.00
Sizes (Select Before Checkout)
Description How to install theme by uploading in Blogger template UI.
More Details
  1. Download this theme.
  2. Extract the theme .zip file which includes theme.xml, REDME.txt and LICENSE.txt
  3. At your Blogger Template > Back-Up/Restore > click upload file.
  4. Select the .xml file from your local PC.
  5. Click upload and template will install automatically.
  6. Please browse through addition steps to fully utilize the theme functions.
Detail download page have been updated.
Please forward to My Blogshop Gallery official installation page with current updates and add ons at http://blog.irsah.com/2013/05/official-my-blogshop-gallery-blogger.html

1.1 Blogshop Widget Layout Example

Add to Cart
Item Name An example of the blogshop layout.
Price (example) RM45.90
Sizes (Select Before Checkout)
Description An example of the blogshop layout for widgets and blog posts.
More Details By clicking the thumbnail image above, you will get a general idea how the widget is set too.

This image will roughly guide you on the setting of the widgets which are pre-installed with this theme.

For more installation guide detail download page have been updated. Please forward to My Blogshop Gallery official installation page with current updates and add ons at designers blog http://blog.irsah.com/2013/05/official-my-blogshop-gallery-blogger.html

Wednesday, 17 April 2013

2. Add Blogshop Post Product Page Template

Item Name Add Product Page Template
Price (indicators) RM50.00
Sizes (Select Before Checkout)
Description Tutorial on how to add post pages auto template to Blogshop theme and customizations.
More Details Use below codes to install automated product post tables and image thumbnail setting. Very useful to quickly build your blog store/shop product pages.

Updated 05/2013

For more installation guide detail download page have been updated. Please forward to My Blogshop Gallery official installation page with current updates and add ons at designers blog http://blog.irsah.com/2013/05/official-my-blogshop-gallery-blogger.html

Add 404 Page Not Found Search Page

Add To Cart
Item Name Blog store 404 Page Not Found Template
Price RM50.00
Sizes (Select Before Checkout)
Description Install a page not found template for blog store products  not listed or removed in blog store.
More Details Install 404 Page Not Found, Re-direct B;logger 404 Page Not Found, Create custom 404 Page Not Found Blogger

We have already included the necessary code snippets in theme template.

Now go to Setting > Search Preference > Custom Page Not Found > click Edit.

Paste these code snippet below in the box provided:-


Ooops! Something weird happened. We're Sorry!</h1>
Possible to many users coming in 
or
Maybe the page you're looking for must have been moved due to recent upgrade.<br />
+++++++++++++++++++++++++++++++++++++++++++++++++++++
Use the internal search bar above to find searched topic 
or
 Click our Current Items Link to visit our Homepage.<br />
<h1>
Thank You!</h1>


Click Save Changes and type a FALSE url from your blog store to preview the 404 page.

Edit to desire design, but make sure it is simple and the total amount of codes can only reach 10k characters or the page will not render.

A sample 404 Page Not Found page for this theme will lokk like this http://myblogshop-gallery/page-not-found.html

Product Title Customization and Display Tips

Item Name Customize Gallery Display Product Title
Price RM12.60
Sizes (Select Before Checkout)
Description A quick how to customize the H3 title tag display on gallery product pages.
More Details Customize H# title tags for Blog Store/Shop.
Edit H3 tags title product page.
Blog product page title tips and hacks.
Arrange H3 title tags with Blogger Store Theme.

Since that the initial design is to save certain web page estate, the H3 product title tags caan be diplayed between 4-6 word count.

To help you customize the display and get more title view, go to Template > Edit HTML and find code snippets below (between line 1062 and line 1077 )

Before beginning, save or backup your template to you PC.

Find this code snippets:-

h3.post-title {
    font-family: Arial;
    position: absolute;
    top: 140px;
    left: 0;
    bottom: 0;
    text-align: left;
    border: 0;
    height: 30px;
    line-height: 1.4;
    margin: 0;
    padding: 5px;
    overflow: hidden;
    display: block;
    background: #fff;
    width: 120px;
    border-radius: 3px;
    letter-spacing: none;
  }
  h3.post-title:hover { background: #f0f0f0; } 
h3.post-title a, h3.post-title a:visited, h3.post-title strong {
    font-size: 12px;
    font-weight:700;
    line-height: 1.4em;
    display: block;
    color: #a80077;
  }


Now change:-

height: 30px;



To your preferred height to display the title.

In addition, if there is an overlap, adjust this piece of codes between line 1004 and line 1042

.post-body {
    height: 290px;
    width: 132px;
    background: #fff;
    border-bottom: 0 none;
    padding:0;
    margin:0;
  }
th.thumb_image, .thumb_image img, th#thumb img, .post img, .post img a, .item_thumbimg img {
    height: 128px!important;
    width: 130px!important;
    border: 1px solid #ccc;
    padding: 0;
    margin: 0;
    text-align: left;
    float: left;
  }

-- more codes --

.post {
    color: #fff !important;
    margin: 10px 10px 30px;
    height: 290px;
    padding: 0;
    list-style: none;
    list-style-type: none;
    width: 132px;
    float: left;
    position: relative;
    background: #fff;
    overflow: hidden!important;
    border-bottom: 0 none;
  }


Change the height value which equals the value of the amount changed with your H3 title tags above.

Save template and preview your changes.

Responsive BlogStore Theme - A Quick Peek

Item Name A Responsive Blogger STore Theme
Price (indications) RM55.90
Sizes (Select Before Checkout)
Description A quick look on the development of a responsive blogshop or store theme with shopping cart pre-installed.
More Details A soon to be released responsive mobile friendly Blogger Store theme and search engine optimized.

Still under development and testing, we are making sure that all systems are go, to ease your installations.

A powerful lightweight responsive Blogshop theme with loads of premium online store features.
Helps you to setup your blogshops in minutes!

Resize your PC browser window and test it. Look great in mobile (with/without Blogger mobile switch), iPads, iPhones etc.

Theme design feature includes:-

  1. CSS/Media Queries responsive Blogger theme.
  2. Minimal styling approach with standard and advance widget integration.
  3. Uses the current SimpleCart js shopping cart integration.
  4. E-mail notifications/invoice.
  5. Search engine friendly with pre-installed meta tags scripts/codes ie custom 404 page not found code etc.
  6. Fast page rendering and lightweight.
  7. Wordpress inspired Tab drawer sidebar widgets.
  8. Configure gallery style Home product page to desire amount of post/pages..
  9. Product breadcrumbs navigation links included.
  10. Recent product slider.
  11. Clean and readable XML codes with loads of tutorials for customizations.
  12. And many more...
View responsive blog store theme here!

H3 Title Tags Displays Awkward Workaround

h3 product title tags not displaying
Item Name Title not displaying in Homepage
Price (indicators only) RM89.00
Sizes (Select Before Checkout)
Description Common theme issue and simple workaround
More Details Awkward H3 title issues.
Adjust product page title tags.
How to display title tags alignment.
Align H3 title tag.

The cause:
Since the product pages are optimized even for homepages and archived pages, duplicate H3 tags is the cause of awkward homepage title links displays, as shown in thumbnail above.

and simple workaround:
Make sure there are no duplicate H3 titles in your product pages. Select "Sub-Menu" option to highlight your sub-titles in the body of your product pages content. (refer image below)

added feature:
Make sure you have activated the description meta tags in Dashboard > Settings > Search Settings > Meta Description > Edit > Insert your blogshop description in not more than 150 chars. Unique descriptions makes your blogshops more likeable in search result pages.

examples:
awkward display of H3 title tags
Example awkward display of blogshop H3 title tags

Blog Store Theme Heartbreakers

simplecart for Blogger
Item Name Some Known Facts for Theme use.
Price (indicators only) RM125.00
Sizes (Select Before Checkout)
Description Not a warning but just some simple facts you need to know on theme best workflow.
More Details Custom theme tends to get a bit tricky, but we tried our best in making sure this theme is fully functioned on first start up. Here's some of known facts we think you need to know:-

  1. All images size is best in squared pixels ie 200px X 200px etc but images size can range to the maximum width of your PC screen. Do consider page load and optimization. Best image file size below 300kb for performance purposes. For best view, images are to be set to "medium size" via Blogger editor UI.
  2. Although you can use PAYPAL, GOOGLE WALLET and AMAZON checkout features with simplecart, this theme is dedicated to handle auto e-mail invoicing data/s. You can simply switch the checkout method/s with simple tweaks and documentation can be obtained from http://simplecartjs.org. From time to time we will also update and publish tutorials on the simple and easy steps. We've already tested with various payment gateway stated above and it is working as expected..
  3. E-mail is handled externally via PHP e-mailing script, which we have developed, tested and it is also working LIVE with existing blogshops. We have already considered on various e-mail provider validation. FYI, this theme is actually in full real use, which you can find out in some of the links in this demo page. Do check it out!
  4. If you want to customize your auto e-mail notification, you can use the tutorial provided, which is self explanatory. Use the example as guidance or, you can send a mock up checkout to your own mail and see it in action! Note that we or this script or any part of this blog store/site does not store data. Our PHP script is a single mailto file to help you post customers checkout info to your sender's mail and blogshop owner.
  5. You can customize the checkout form to whatever design you like but do make sure the form classes are intact. We will provide more tutorial in future releases and updates.
  6. The drop down product size is not included. Please contact us for simple integration, which you can utilize with the simplecart checkout features.
  7. Colors is fun and playing with fonts and paragraphs can sometimes be tricky. We have excluded Blogger advance template mode, so it will require for you to edit manually  In time to come, we will provide the necessary tutorials in making this blog store your own.
  8. As this theme is FREE, the footer links are required to be intact. Offenders will be notified and if not acceptable, further action will be prosecuted via DMCA "take down". Please respect the developer's/designer's/author's hard work and sponsors support for the development of this theme and to enhance bloggers social-economy. It is stated in theme download file and embeded in theme template.
  9. We tried our best in using custom plug-ins and javasrcipt libraries, which, to our knowledge, comes with the correct license of use. Upon usage of theme, the stated license  will be kept to safeguard original author's rights and your modification rights for this theme. Please read the dual license attached.
  10. We will update accordingly, from time to time and if you have dropped your contact info, you will receive upfates automatically.
  11. We have also locked few Blogger widgets to ease your customization and installation for best blog and e-commerce integration. Please follow through the guides we've provided in helping out your theme install.
  12. As far as we know of, we have never included unwanted links or bad inclusions in any of our themes and we hope you do not too! We have also took the initiative to thoroughly check each snippets to our best knowledge.
  13. We have made all necessary measures in making this theme cross browser friendly. Due to javascriript and jquery library restrictions with older browser, especially IE 6, 7, 8, some features will not be fully operational. We made sure that the web pages renders consistently and heavily tested. This themes works best with webkit browsers ie, Chrome, Firefox, Safari and functioned well in IE 10 and above.
  14. Contact us if you require for e-mail customizations.

General Blog Store Feature

blogger blog store theme
Item Name Features included with BlogShop theme
Price (for demo purposes) RM48.50
Sizes (Select Before Checkout)
Description Some of the great features included in blog store theme for Blogger. Set-up your blogshop in minutes.
More Details
blogshop email invoicing
Fancy Zoom activated - click to enlarge
  1. Minimal styling approach with standard and advance widget integration inspired by e-commerce management system Open Cart..
  2. Uses current SimpleCart js shopping cart script (simplecart v3.0.5 minified library plug-in installed) with user end customization features.
  3. Configure your blog store auto e-mail notifications/invoice with simple editing.
  4. Included code snippets to easily install blogshop custom checkout form. (copy and paste only)
  5. Google fonts included with browser safe common fonts on pages and paragraphs.
  6. Minimalistic styled checkout and auto e-mail responder/invoice for quick customer response and reply to.
  7. Search engine friendly with pre-installed meta tags scripts/codes ie custom 404 page not found code etc.
  8. Quick browser response with fast page rendering and lightweight.
  9. Pre-installed Google fonts included.
  10. Tab styled shopping cart Wordpress inspired widget to maximize page real estate.
  11. Configure gallery style Home product page to desire amount of post/pages which can exceed 500 pages!
  12. Pre-installed and tested breadcrumbs navigation with major search engines..
  13. Product/item search customized search bar included.
  14. Minimalist lightweight jquery Recent Product slider with captions (based on newest post pages  in blogger).
  15. Move/add blogger widgets with pre-installed styles included with blog store design.
  16. Conditional CSS styles included to enhance/optimize webpage rendering and page loading.
  17. Uses standard Link-List widget for main navigation link and customized pre-styled drop down menu (color coded included) - copy and paste codes.
  18. Clean and readable XML codes and scripts with reference indicators/statements to ease mods and customization.
  19. Take a look through out the blog store and use its functions...

Tuesday, 16 April 2013

BlogShop Theme - An Introduction

Item Name Blog Store Theme Introduction
Price for Demo Purposes RM45.50
Sizes (Select Before Checkout)
Description A brief look of some of  Blogger e-commerce auto email notification checkout theme
More Details A gallery styled display feature of products inspired by the open source E-Commerce management system, Open Cart. User and blog store/shop owner friendly, using Blogger features as best as it can.

Easy to install with step-by-step tutorials, copy and paste of common HTML codes. You can even customized to your own favorite styling with indicators and as bonus, pre-installed styles and colors included.

Using the NEW and improved Blogger editing UI, the designers have also included line-number references/indicators as best they can to guide you on your customization journey.

Shopping cart tab featured pre-installed powered by simplecart.js (inclusive minified simplecart js file), the lightest and most versatile javascript plugin/kit for an e-commenrce featured Blog or website.



No database stored or needed, lightweight, quick loading, simple integration, and we already handle the hard work for you. Integration with auto e-mail invoicing, auto notification to sender and blog store owner, all via e-mail, with less form filling.

You control data sent for your personalized e-mail notification by simple tweaks in theme code snippets, which is also pre-installed and included when uploading.

Please browse through and checkout theme features and hope it will fulfill your needs to start building or maybe cloning your shop or blog store in just several minutes.

A totally NEW re-designed and re-structured Blog Shop theme using valid HTML and CSS and minimal jquery plugin, to optimize and dynamically produce cool minimalist styled features for your Blog store.

This theme is also lightweight with moderate use of conditional Blogger XML formatting to maximize page load and rendering, exclusively for Blogger themes. Checkout our web page test here to find out what's going on behind the scene!

We took a great deal in making sure that this theme basic functionality (and user friendliness) in order for you to provide more info and contents for your future products, without ever to concern on page load and experiences in the later stages.

SEO ready with meta tags and products breadcrumb style pre-installed and validated by major search engines. Most Blogger post tags has been customized to suit the e-commerce layout and design.

Threaded comments pre-installed and using the latest Blogger valid code snippets, which includes social sharing icons, ewhich can also be turned on or off using the same functionality as standard  Blogger themes do.

Customization on links and drop down menus using Blogger widgets provided in theme installation page with little to less knowledge of basic HTML. Only copy, paste and change title required.

Let the tutorial guide you in the steps to fully install the theme. Or better yet, use the comments/review form anywhere in demo blog store and we would happily assist you as best we can.

We are also active in this forum, helping out users like you but with more advance techniques which is using content management system (CMS).

And yes, this software is open source too, and you can also checkout its demo with your own personal log-in, password, dashboard (control panel) and setup a sample site . Have a go and play around, creating websites is fun though!

 

2013 myblogshop-gallery

Designed by | Irsah inDesigns ~ Supported By: Sop My Name

Domain + Hosting | NetKL Domains

Receive all updates via Facebook. Just Click the Like Button Below