How to Create Stylish Codebox for Blog Posts

If you provide Codes to your visitors, this Codebox will help you to do that, it also contains a button to copy the Codes.

How to Create Stylish Codebox for Blog Posts

If you provide Codes to your visitors, this Codebox will help you to do that, it also contains a button to copy the Codes. Hello! Welcome to Fineshop Blog. Hope you are doing well. If you have ever provided codes to your visitors, then you must have needed a Codebox. That is why in this article we will create stylish Codebox. With its help, you will be able to provide codes to your visitors in a Stylish Codebox. A copy button has also been added to it, so the codes can be copied by clicking on this button. Before we start let's take a look at its Demo. View Demo How to create Stylish Codebox? Creating Codebox for Blog Posts will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML. Important! Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later. Step 1: First of a…

About the author

~ Hello World!

10 comments

Godssword Edet

Bagaimana cara mengatur jenis PWA Anda? Tolong beri saya file manifes
1. Deo Kumar
  
  I shall write an article on it soon. Stay connected.
2. Godssword Edet
  
  Thank you 🙂
3. Deo Kumar
  
  Read this article:
  How to build a PWA (Progressive Web App) for Blogger
Moviehit.site

How to use Html code in blogger post
1. Deo Kumar
  
  Simply switch from Compose View to HTML View
RandyTech7

Thanks for this great codebox tools.
I was really need it on my blogs.
1. Deo Kumar
  
  ☺️
Dilwar

Thanks for it
1. Deo Kumar
  
  😌

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/984859869-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY53ThN6jpl4cmdgN_0rQXoo1JZm7w:1732212063563';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3667079295234480644','//www.fineshopdesign.com/2022/02/how-to-create-stylish-codebox.html?amp\x3d1','3667079295234480644');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '3667079295234480644', 'title': 'Fineshop Design', 'url': 'https://www.fineshopdesign.com/2022/02/how-to-create-stylish-codebox.html?amp\x3d1', 'canonicalUrl': 'https://www.fineshopdesign.com/2022/02/how-to-create-stylish-codebox.html', 'homepageUrl': 'https://www.fineshopdesign.com/?amp\x3d1', 'searchUrl': 'https://www.fineshopdesign.com/search', 'canonicalHomepageUrl': 'https://www.fineshopdesign.com/', 'blogspotFaviconUrl': 'https://www.fineshopdesign.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'G-83PT0ZGCQ7', 'analytics4': true, 'encoding': 'UTF-8', 'locale': 'en-GB', 'localeUnderscoreDelimited': 'en_gb', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Fineshop Design - Atom\x22 href\x3d\x22https://www.fineshopdesign.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Fineshop Design - RSS\x22 href\x3d\x22https://www.fineshopdesign.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Fineshop Design - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/3667079295234480644/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Fineshop Design - Atom\x22 href\x3d\x22https://www.fineshopdesign.com/feeds/2516187803080340633/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/8f7002974bbf4dbb', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en_GB\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '2516187803080340633', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6h2z7JFv7TCbsmN61IaTnq6x2tGxOcdCF38ZuSuicZtmlC40_mmj9qXQFfOGf6lENi4vpJjxU00Pwv_fF8xY3H7jzXJF1S-bs0hRF5wNZfrc1dhORy2NBSnoKVmkZxvitWE619djbOAG-ubNFI3mDYGRn1chaTE2wvLjMEnOlmGZAr15AWxqTmNqVPQ/s72-c-rw/Codebox_For_Blog_Posts_%28Fineshop_Design%29.webp', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6h2z7JFv7TCbsmN61IaTnq6x2tGxOcdCF38ZuSuicZtmlC40_mmj9qXQFfOGf6lENi4vpJjxU00Pwv_fF8xY3H7jzXJF1S-bs0hRF5wNZfrc1dhORy2NBSnoKVmkZxvitWE619djbOAG-ubNFI3mDYGRn1chaTE2wvLjMEnOlmGZAr15AWxqTmNqVPQ/s0-rw/Codebox_For_Blog_Posts_%28Fineshop_Design%29.webp', 'pageName': 'How to Create Stylish Codebox for Blog Posts', 'pageTitle': 'Fineshop Design: How to Create Stylish Codebox for Blog Posts', 'metaDescription': 'If you provide Codes to your visitors, this Codebox will help you to do that, it also contains a button to copy the Codes.'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard', 'ok': 'Ok', 'postLink': 'Post link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'How to Create Stylish Codebox for Blog Posts', 'description': 'If you provide Codes to your visitors, this Codebox will help you to do that, it also contains a button to copy the Codes.', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6h2z7JFv7TCbsmN61IaTnq6x2tGxOcdCF38ZuSuicZtmlC40_mmj9qXQFfOGf6lENi4vpJjxU00Pwv_fF8xY3H7jzXJF1S-bs0hRF5wNZfrc1dhORy2NBSnoKVmkZxvitWE619djbOAG-ubNFI3mDYGRn1chaTE2wvLjMEnOlmGZAr15AWxqTmNqVPQ/s0-rw/Codebox_For_Blog_Posts_%28Fineshop_Design%29.webp', 'url': 'https://www.fineshopdesign.com/2022/02/how-to-create-stylish-codebox.html?amp\x3d1', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 2516187803080340633}}, {'name': 'widgets', 'data': [{'title': 'Fineshop Design (Header)', 'type': 'Header', 'sectionId': 'sec_Header_Title', 'id': 'Header01'}, {'title': 'Try \x27Cloudflare\x27', 'type': 'BlogSearch', 'sectionId': 'sec_Header_Search', 'id': 'BlogSearch01'}, {'title': 'Header Icon', 'type': 'TextList', 'sectionId': 'sec_Header_Icon', 'id': 'TextList01'}, {'title': 'Navigation Menu', 'type': 'HTML', 'sectionId': 'sec_Nav_Widgets_1', 'id': 'HTML01'}, {'title': 'Additional Links', 'type': 'PageList', 'sectionId': 'sec_Nav_Widgets_2', 'id': 'PageList02'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'sec_Main_Widgets', 'id': 'Blog01', 'posts': [{'id': '2516187803080340633', 'title': 'How to Create Stylish Codebox for Blog Posts', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6h2z7JFv7TCbsmN61IaTnq6x2tGxOcdCF38ZuSuicZtmlC40_mmj9qXQFfOGf6lENi4vpJjxU00Pwv_fF8xY3H7jzXJF1S-bs0hRF5wNZfrc1dhORy2NBSnoKVmkZxvitWE619djbOAG-ubNFI3mDYGRn1chaTE2wvLjMEnOlmGZAr15AWxqTmNqVPQ/s0-rw/Codebox_For_Blog_Posts_%28Fineshop_Design%29.webp', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'in'}]}, {'regionName': 'footer3', 'items': [{'name': 'location', 'label': 'Location:'}]}], 'allBylineItems': [{'name': 'author', 'label': 'Published by'}, {'name': 'timestamp', 'label': 'On'}, {'name': 'comments', 'label': 'Comment'}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': 'in'}, {'name': 'location', 'label': 'Location:'}]}, {'title': 'Table of contents', 'type': 'HTML', 'sectionId': 'sec_Main_Widgets', 'id': 'HTML11'}, {'title': 'Popular Posts', 'type': 'PopularPosts', 'sectionId': 'sec_Side_Widgets', 'id': 'PopularPosts01', 'posts': [{'title': 'How to get Channel or Group Information using Telegram API', 'id': 8664372353820550215}, {'title': 'How to permanently remove ?m\x3d1 from Blogger Blog', 'id': 4990960623216260259}, {'title': 'How to build a PWA (Progressive Web App) for Blogger Site in 2024', 'id': 5695471488630163172}, {'title': 'How to make Blogger Contact Form work without loading widgets.js', 'id': 3330393496786229586}, {'title': 'Realtime View Counter using Firebase Database', 'id': 4528218019996351282}]}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'sec_Side_Widgets', 'id': 'Label01'}, {'title': 'Take me back', 'type': 'HTML', 'sectionId': 'sec_Error_404', 'id': 'HTML404'}, {'title': 'Organization Name [BlogTitle]', 'type': 'Image', 'sectionId': 'sec_Footer_Widgets_1', 'id': 'Image21'}, {'title': 'Credit', 'type': 'HTML', 'sectionId': 'sec_Footer_Credit', 'id': 'HTML21'}, {'title': 'Labels', 'type': 'Label', 'sectionId': 'sec_Theme_Hidden', 'id': 'Label41'}, {'title': 'Contact Form', 'type': 'ContactForm', 'sectionId': 'sec_Theme_Hidden', 'id': 'ContactForm41'}, {'title': 'Pageviews last month', 'type': 'Stats', 'sectionId': 'sec_Theme_Hidden', 'id': 'Stats41'}, {'title': 'Image Uploader', 'type': 'Image', 'sectionId': 'sec_Addon_Widgets', 'id': 'Image61'}]}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header01', 'sec_Header_Title', document.getElementById('Header01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch01', 'sec_Header_Search', document.getElementById('BlogSearch01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextListView', new _WidgetInfo('TextList01', 'sec_Header_Icon', document.getElementById('TextList01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML01', 'sec_Nav_Widgets_1', document.getElementById('HTML01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList02', 'sec_Nav_Widgets_2', document.getElementById('PageList02'), {'title': 'Additional Links', 'links': [{'isCurrentPage': false, 'href': '/p/sitemap.html', 'title': 'Sitemap'}, {'isCurrentPage': false, 'href': '#', 'title': 'Disclaimer'}, {'isCurrentPage': false, 'href': '#', 'title': 'Privacy'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog01', 'sec_Main_Widgets', document.getElementById('Blog01'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/1575117483-lbx__en_gb.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/1964470060-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML11', 'sec_Main_Widgets', document.getElementById('HTML11'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts01', 'sec_Side_Widgets', document.getElementById('PopularPosts01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label01', 'sec_Side_Widgets', document.getElementById('Label01'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML404', 'sec_Error_404', document.getElementById('HTML404'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image21', 'sec_Footer_Widgets_1', document.getElementById('Image21'), {'resize': true}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML21', 'sec_Footer_Credit', document.getElementById('HTML21'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label41', 'sec_Theme_Hidden', document.getElementById('Label41'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm41', 'sec_Theme_Hidden', document.getElementById('ContactForm41'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '3667079295234480644', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'contactFormToken': 'AOuZoY4_79aAq_v_I4MC7Lo_bTthnQKKLg:1732212063564', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_StatsView', new _WidgetInfo('Stats41', 'sec_Theme_Hidden', document.getElementById('Stats41'), {'title': 'Pageviews last month', 'showGraphicalCounter': false, 'showAnimatedCounter': false, 'showSparkline': true, 'statsUrl': '//www.fineshopdesign.com/b/stats?amp\x3d1\x26style\x3dBLACK_TRANSPARENT\x26timeRange\x3dLAST_WEEK\x26token\x3dAPq4FmBYoxSDTM2P7uZaWyGcaxOpHaPvDyHzhehPCm3xgAu5Vyo6to4R2jM92CdGzK3vQPQqNC2dOAGtdTkICmbUeVRB5Lj_jg'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image61', 'sec_Addon_Widgets', document.getElementById('Image61'), {'resize': false}, 'displayModeFull'));
</script>
</body>