Blogger, Blogger Templates

9gag Clone Blogger Theme

Off 654

Yo Fellas! Hope you are having a great time.I have been busy with server migration and web design works lately. At last i have got some time to write a quick post. In this post, I am looking to distribute my another Blogger template called “9Gag Clone”. Yes, as the name suggests its a 9gag.com clone. I have tried to rip all the cool features of 9gag. Still I don’t think many would be thinking to have that sort of a site on blogger. However, Of course you can do so but still blogger isn’t so powerful still. I probably guess, it will get all those CMS features very sooner. Let’s see the template features and tips to customize the template work for you.

9Gag Blogger Theme

Features of 9Gag blogger theme

  • 3 different Header styles
  • Automatic Featured Posts
  • Automatic Featured Posts
  • Widget ready sidebars
  • Automatic thumbnail creator
  • Read More hack
  • Page Navigation Widget
  • Subscription box
  • Favicon Included
  • Comment form enabled
  • Author comments new style
  • Gravatar ready – Author
  • Advertisement Ready

Header Style

This template has got three different header styles. In the home page, you can have the featured posts listed with thumbnails. And in the post pages, you can either show up a list of category links or you can even show Adsense or any other network ad below the title.

I will distribute all three versions of it. You can download anyone which suits you.

Related Posts with Ad

We have implemented a better way to display the related posts widget along with ad. To insert your Ad code, Go to EDIT HTML page of your template and click “Expand widgets” check box.

Then search for the following code :

<br />
&lt;img style=&quot;background: none; border: none;&quot; src=&quot;https://smashingtips.com/wp-content/uploads/2012/06/300x300.gif&quot; alt=&quot;&quot; /&gt;<br />

Replace this code with either encoded adsense code or Banner image.

Post Title with Social Media icons

Post Thumbnail Size Management

By default, I have set the image size used in 9gag site. But if you want to use this template for a tech blog and want to customize the image size width. Then you can do that by editing the following code in your template.

Go to EDIT HTML page of the template. And look for the following code.

<br />
&lt;script type=&quot;text/javascript&quot;&gt;// &lt;![CDATA[</p>
<p>var thumbnail_mode = &amp;quot;float&amp;quot;;<br />
summary_noimg = 500;<br />
summary_img = 250;<br />
img_thumb_height = 340;<br />
img_thumb_width =460;<br />
// ]]&gt;&lt;/script&gt;<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;https://smashingtips.com/blogger/readmore.js&quot;&gt;// &lt;![CDATA[</p>
<p>

There you can find the image width and height parameters img_thumb_height = 340; and img_thumb_width =460; . Change the width and height to suit your template.

Widgetized Sidebar

I have made widgets to show recent posts with thumbnail and without thumbnail, Posts from any particular category with/without thumbnail, two columns category list and Scrolling followers box.

To include the widgets in your template, Please follow the steps mentioned here.

Let us take a look at the code for showing recent posts :

<br />
&lt;script style='text/javascript' src='https://smashingtips.com/blogger/recent.js'&gt;<br />
// ]]&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;// &lt;![CDATA[<br />
var numposts = 5;<br />
var showpostthumbnails = true;<br />
var displayseparator = true;<br />
var showcommentnum = true;<br />
var showpostdate = true;<br />
// ]]&gt;&lt;/script&gt;<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;http://domain.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=recent&quot;&gt;&lt;/script&gt;<br />

In this change , domain name to your blog domain name.

&lt;script type=&quot;text/javascript&quot; src=&quot;https://smashingtips.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=recent&quot;&gt;&lt;/script&gt;

For showing posts from particular category :

Change the last line in the code to this.

<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;http://domain.blogspot.com/feeds/posts/default/-/featured?orderby=published&amp;alt=json-in-script&amp;callback=recent&quot;&gt;&lt;/script&gt;

Here change the domain name and “featured” to the label name.

For more customization, please check the other post “Show Recent Posts With Thumbnail from Particular Label/Category in Blogger

Download 9gag Blogger Template

I have listed all 2 versions of the template, pick the one you like.

About the author / 

Mohamed Rias

I'm a programmer, photographer, and proud parent. With a passion for coding and a love of capturing life's moments through my camera lens, I'm always on the lookout for new challenges and opportunities to grow. As a dedicated parent, I understand the importance of balancing work and family, and I strive to be the best version of myself in all aspects of my life.

Related Posts

Popular

Editor’s Pick

  • Why Zero Runtime CSS-in-JS is the Future of Web Development

    A Zero runtime CSS-in-JS is a technique of writing CSS styles in JavaScript that does not require any additional runtime or library to function. This means that the styles generated by your code are immediately available and do not need to be parsed by a separate library at runtime. The topic of zero runtime CSS-in-JS…

  • Transforming Software Development: How AutoGPT is Revolutionizing Content Creation and 5 Expert Tips to Maximize Its Potential

    Are you tired of spending hours writing documentation and code comments for your software projects? Do you wish you could automate these tedious tasks and focus on more creative aspects of development? Look no further than AutoGPT. AutoGPT is a revolutionary tool that is transforming the way developers approach content creation in the software development…

  • Webpack vs Vite: Choosing the Right Build Tool for Your Next Web Project

    In web development, build tools are essential for frontend developers to efficiently organize, compile and optimize their codebase. These tools automate the process of transforming source code into a production-ready format, which saves time and makes it easier to maintain projects in the long run. Two of the most popular build tools for modern web…

  • Mastering React Context API in 2023: Best Practices and Examples

    React Context API is a feature in React that provides a way to share data between components without passing the props down manually at every level. It allows you to manage global states in your application and avoid prop drilling. Mastering React Context API in 2023 is essential for building scalable and efficient applications. It…

  • Exploring the Wonders of Gigapixel Photography: How to Achieve Stunning Detail and Clarity in Your Images

    Gigapixel photography is a technique that captures images with incredibly high resolution and detail, allowing for stunningly clear and vibrant pictures that are perfect for printing or displaying on large screens. In this article, we’ll explore some tips and techniques you can use to achieve amazing results with gigapixel photography. Definition of gigapixel photography Gigapixel…