This time I want to share a theme called PinkTong. No need to ask the origin of the name, I just took it. There is no special message in it.
This template in terms of layout like most templates, consists of two columns, the posting column and the sidebar column on the right. The default color scheme is purple.
Knowing the use of smartphones for browsing in the internet has increased significantly, so I made this template human-friendly as possible for smartphone devices both in appearance and function.
As for the features themselves, you can say that they are minimal, which I included only the important ones such as sharing buttons and related posts.
And do not include font icons like Font Awesome but instead replace it with svg, understandably I'm speed-oriented.
For the loading speed of this blog based on testing Google PageSpeed Insights and GTmetrix.
In testing using Google PageSpeed Insights for index page 3 times, blogs that use this template get a score 95/100, 98/100, 98/100 for the desktop version. And 94/100, 97/100, 99/100 for the mobile version.
Whereas the testing on GTmetrix obtained page speed score of 100/100 and YSlow 86/100. But keep in mind that high scores are influenced not only by templates but also by other factors such as images.
The score below will only be obtained if the displayed image is optimized first.
To maximize the speed of this template, javascript and css are only used as needed. There is no javascript library like jQuery or external css that I use.
Also on this template, blogger's default CSS and javascript are removed so maybe some built-in features like archive dropdown don't work.
PinkTong Theme Features
- Responsive
- Fast loading index page, check [PageSpeed] [GTmetrix]
- Fast loading posting page, check [PageSpeed] [GTmetrix]
- Structured data (schema.org), check here
- Breadcrumb
- Sticky sidebar
- Lazy load image
- 2 ads in middle article
- Lazy load YouTube
- Share buttons
- Related posts
- Disqus comment system
- and others
Since I didn't have chance to make a documentation file, I will write here the major elements that you might want to change.
Documentation
1. Meta Tag
If you usually modify the template, you should know what needs to be changed. Please adjust the content.
<meta content='YOUR KEYWORD 1 HERE, YOUR KEYWORD 2 HERE, YOUR KEYWORD 3 HERE, YOUR KEYWORD 4 HERE' name='keywords'/>
<meta content='XXXXX' name='google-site-verification'/>
<meta content='XXXXX' name='alexaVerifyID'/>
<meta content='XXXXX' name='p:domain_verify'/>
<meta content='XXXXX' name='yandex-verification'/>
<meta content='XXXXX' name='msvalidate.01'/>
<meta content='https://www.facebook.com/XXXXX' property='article:author'/>
<meta content='https://www.facebook.com/XXXXX' property='article:publisher'/>
<meta content='XXXXX' property='fb:app_id'/>
<meta content='XXXXX' property='fb:admins'/>
<meta content='XXXXX' property='fb:profile_id'/>
<meta content='XXXXX' property='fb:pages'/>
<meta content='@YOUR_TWITTER_USERNAME_HERE' name='twitter:creator'/>
2. Header background, label, subscription column, buttons, and link colors.
Please look for color code 75539e then replace it with the color code of your choice. For header colors using gradients, please change manually the #header code.
Lazy Load Images and YouTube Videos
For images, please enter html mode when creating a post, then add the lazy load class, change the src to data-src, and add a new src with a base64 image url. Example:
Before:
<img border="0" data-original-height="455" data-original-width="640" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsYJMdIzKMydWpDCUNNG5_01Yirvw83oq8gPZBYUMz_-LGMHV38CxO7HqYdxosdbVazgmkTQOUclMsNEgb_Ovk9jtxCC7E_Et1KcgoY_vSzoLFZjyZ33HRmN83-NVRpduoIQ3_o5gi8us/s400/vegetables-1584999_640-min.jpg" width="400" />
After:
<img border="0" data-original-height="455" data-original-width="640" height="284" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsYJMdIzKMydWpDCUNNG5_01Yirvw83oq8gPZBYUMz_-LGMHV38CxO7HqYdxosdbVazgmkTQOUclMsNEgb_Ovk9jtxCC7E_Et1KcgoY_vSzoLFZjyZ33HRmN83-NVRpduoIQ3_o5gi8us/s400/vegetables-1584999_640-min.jpg" width="400" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEXz8/SVuXQoAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==' />
For YouTube lazy load, please read this article
4. Comment
4.1 Use Disqus Comments
Please press the CTRL + F key and look for text "santheme" then replace it with your disqus shortname.
Do not forget to hide blogger comments by going to the Settings > Post, comments, and sharing > comment location then select hide (optional)
4.2 Replacing Disqus Comments With Blogger Comments
Please find the following code
<b:include data="post" name="disqus-comments"/>
then change it to
<b:include data="post" name="comments"/>
5. Subscription Box
Look for the code uri=Pinktong then replace pinktong with your feedburner name.
6. Advertisement
Please search text <!--pasang kode iklan disini--> then there is a code like below, replace the code with your ad code.
<div class='testad' style='width:100%;height:200px;background:#eee'/>
7. Move Image To The Top Post Title
To move image above the post title please enter html mode, find image to be moved then add id='desc'. Example:
<a id="desc" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOkqCweudO1b-UTvrZvabIQhqcdynv0ldRGAsBs0aQrcYQqiPS_y2uuBHcWjb4IQm-9Ggc5vLDoCiifjhuyylIYyg6mVSGS_4WseM6KzmQ1lmSg87hClwdzYjNP0L_iq57CQBJruSveD0/s1600/food-1239423_640-min.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="348" data-original-width="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOkqCweudO1b-UTvrZvabIQhqcdynv0ldRGAsBs0aQrcYQqiPS_y2uuBHcWjb4IQm-9Ggc5vLDoCiifjhuyylIYyg6mVSGS_4WseM6KzmQ1lmSg87hClwdzYjNP0L_iq57CQBJruSveD0/s1600/food-1239423_640-min.jpg" /></a>
8. Mobile Display
In the Theme section of blogger dashboard, select "No. Show desktop theme on mobile devices." In the cellular theme settings.
9. WhatsApp Contact
For WhatsApp contact on the footer please look for this NO-WAMU number then replace it with your WhatsApp number.
10. Changelog
Version 1.0 (12/02/19)
- Release
Version 1.1 (03/04/19)
- WhatsApp button improvements
- Fix some css views
- Remove Google Plus link
Version 1.2 (27/06/19)
- Meta tags improvements
- Theme color change
- Improved navigation buttons and comment buttons
- Add button to send WhatsApp message
- Sharing buttons improvements
- Subscribe column style changed
Version 1.3 (03/10/19)
- Improved navigation buttons and comment buttons
- Related post fix
- WhatsApp sharing button modify
- Profile widget get better
- Add dropdown menu
- Some minor improvements
11. Etc
Apparently many people add standard widgets such as archive, contact, and others. While on this pinktong theme the default javascript and css blogger is blocked. As a result, standard widget display will fall apart.
In this update I removed blocking for default blogger widget Javascript because it seems blogger has done an update, seen from the results of speed testing via GTmetrix or Google PageSpeed Insights. Pinktong theme remains fast even though default blogger widget Javascript is loaded.
More about features and other improvements will be updated on the latest version.