codings

how to to Add Comment Counter to Post Header Titles in Blogger

Oleh bcoded - January 12, 2017

Add Comment Counter to Post Header Titles in Blogger: By Default quantities of Comments is appeared beneath the every post in Comment Section.As it is put underneath post , so the greater part of us never saw it.

Now If you are occupied with adding this Comment Counter to Header it will truly move your blog perusers and will socially constrain them to comment.It's a reality , in the event that you add Comment Counter close to Blog post Title it will be thoroughly better then the underneath area.

And it will without a doubt rouse your Blog Readers to Comment on your Posts.What Do You Think this Counter is better perfect to Post Titles? On the off chance that Yes, Then take after the accompanying strides.

Go To Blogger

Tap On Template

Alter HTML

Scan for ]]></b:skin>

Presently Copy the Below Script and include it simply above ]]></b:skin>

.comment-count {
float : right;
width : 47px;
height : 47px;
background : url( SPECIFIC IMAGE URL );
background-repeat: no-repeat;
font-size : 19px;
position:absolute;
margin-top : -16px;
margin-right : 2px;
text-align : center;
}

Presently Chose the Comment Counter Background
Presently Copy the Image URL and Replace SPECIFIC IMAGE URL in the script with the picture URL Presently Add Comment Count Code

For That Again Go To Blogger Dashboard >> Template >> Edit HTML >> Search For

<h2 class='post-title section title' itemprop='name'> OR class='post-title passage title'

Presently Copy the Below Script and include it underneath the Above said Code

<b:if cond='data:post.allowComments'> <a class='comment-number' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

Presently Save Template and That's it !

So What's Up : If You Liked this tut , Please Share it and Express your perspectives in Comments . Remain Blessed ,Happy Blogging!

Useful Social phishing Toolkitt From Scratch

Oleh bcoded - January 02, 2017

Hi: in this instructional exercise you will figure out how to Hacking Some Social-media Using Phishing Method and Prevention using Wapka that send the passwords,Gmail id,browser and IP deliver of the casualty to your email id.

About Wapka :
Wapka is free site creation stage with free site facilitating where we can make phising site in moment and fortunate thing about wapka is that it is exceptionally easy to understand and we don't have to much profound data about PHP or MySql.

An enormous favorable position gave by wapka is that it doesn't hinder our record while we are playing out our phishing assault as other free facilitating sites does.

➠YOU MIGHT LOVE TO READ: Lastest Facebook Phishing Code Shared

Group of onlookers
This instructional exercise is intended for everybody who like hacking yet would prefer not to learn high coding abilities.

Necessities:

A mail represent enlistment.
Fundamental information of HTML.
Fundamental information of Gmail.
Fundamental information of Website Creation.
A Victim

➠YOU MIGHT LOVE TO READ: Ultimate Rar Password Cracker .Bat (Ferizi-Codex)

Diagram
We will make a phishing site which will looks like 2Go portable site and send us casualty subtle elements in our email id with passwords , email id , IP address and program data.

Reason for this instructional exercises and by what means will it profit to you.
I generally need to take in hacking from youth however the primary issues is hacking is difficult at its shows in film .It require a great deal of specialized information like coding abilities , programming and significantly more.

This is the circumstance when we require this instructional exercise come into light. Phishing is the most straightforward strategy to hack Facebook and Gmail account.Phishing needn't bother with a specialized learning. You can make a phishing site just by duplicate and glue in a basic page of HTML code.

Well ordered Guide Hacking 2Go Using Phishing Method and Prevention:
download the total Tutorials From the picture underneath. take after the guidelines and make certain not to put the codes wrongly.

for different inquiries and enquiry benevolently utilize the remark box. in our next instructional exercises we will take instructional exercises on instagram phisphing/clone make certain not to miss our redesigns. stick your remarks down beneath to aknowladge us on more Tutorials

instructions to Add Yahoo Smileys To Blogger Threaded Comments

Oleh bcoded - December 31, 2016

This is a guest post compiled by Jessyfabulous for Codedforum

Composing an extremely productive substance is a thing and individuals remarking on the post is something else. Most perusers really don't care for remarking on online journals, particularly on the off chance that they discovered your blog so exhausting,

yet this hack means to build your odds of getting more remarks on your blog, as perusers will love to see the usefulness of the smileys by remarking your blog which will brings you more introduction.

This hack works with blogger strung remark and on all blogger format. Presently take after the basic strides beneath.

Go to your blogger dashboard

NOTE: Straightforward Ways To Secure Your Blog From Hackers

Tap on Template > Edit HTML > Proceed (Mark/Tick Expand Widget Template)

Utilize crtl F to discover ]]></b:skin> and glue the accompanying code above it

img.realcombiz {
height: auto !important;
vertical-align: middle !important;
width: auto !important;
border:0px !important;
}

➽Search for </body> and paste the following code above </body>

<script src='http://rbcode.googlecode.com/files/yahoosmileys.js' type='text/javascript'/>

➽Now search for this line <div class='post-footer-line post-footer-line-3'>
Find the next </b:includable> and paste the following code above </b:includable>

<b:if cond='data:blog.pageType == "item"'>
<div class='realcombiz' id='ysmile' style='
background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -o-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -ms-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);border-radius: 3px;width:100%; padding:10px; height:65px;'>
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^
</div><a href="http://realcombiz.com"></a></b:if>

Save your template That's all

We hope this hack brings more positive effect to your blog. peace out pals

This post was written by +Jessyfabulous . She blogs on Thephoenix-Blog and you can follow her on Twitter @Jessyfabulous2 Or Like Her Page On Fb Facebook here. Follow Her On IG: @jessyfabulous

Instructions to Add Blogger Related Links to Below Blog Posts

Oleh bcoded - December 18, 2016

In this instructional exercise im going to clarify, how to include blogger related connection list underneath posts.So, this is the correct one of codedforum.com.ng related post. without design, By utilizing this trick,It keeps your perusers in your site too long.It more vital for increment online visits and SEO as well.Few weeks prior i posted about Thumbnail View With Related Post For blogger. In this way, the individuals who are not keen on connections style, you can go for thumbnail impact.

Each means are clarified well.If you have an issue, recently remark below.And im not going to make new demo for this instructional exercise like i do.You can get a demo, end of this article.happy blogging. :)

The most effective method to Add Blogger Related Links to Below Blog Posts

1. Go to Blogger Dashboard > Template

2. Reinforcement your layout

3. Tap on Edit HTML

4. Find ]]></b:skin> and include underneath code just beneath it

/* The CSS Code for the menu starts here codedforum.com.ng

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;}
#related-posts a{color:#0c0080;}
#related-posts a:hover{color:#0ab0fd;}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:12px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi03oTiLV1YAeAF_Hm8JOh84x1iSjq0w-uIg0BVtQWZTmWQ_S-KlP6ettv6PAskh_SFDgciYPvia0hESqonyrm5uQAcAPwHwKptjSwVz-F5ceuK8aVfZ88SvEKLigbLoMkkbUEqLxQE4Yc/s1600/btrix_arrow-icon.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;
height: 20px;
margin-top: -5px;}

#related-posts ul li:hover{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdUNWD5ThOSM7WWFOGX54-DxjYHvQw7rrUoKk2Qduzz-XCXRzsg3tGHqOtKljN70KuBMVhHX-nuOlhNWbuu8vcNu7ozybf6hgoEBkm539xHXjG2CopABFgDCq3qwO-5YrLzROrNmQDP_8/s1600/btrix_arrow-icon2.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}</style>

. Again Find <div class='post-footer-line post-footer-line-3'> and add below code just below it

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var maxresults=10;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
</b:if>

You can change maxresult as your like ( what number of related presents require on unmistakable)

8. Presently spare your Template.

You are finished. In the event that you have any issue identified with How to Add Blogger Related Links to Below Blog Posts. Simply leave a comment.I will help to you.

Instructional exercise on Site Building Tutorial

Oleh bcoded - December 13, 2016

Transferring Files To Webservecom

Really we can partition them into two noteworthy techniques;

Making Website Using Wizard.

Making Website Yourself.

➜Presently on the off chance that you have outlined your site through the wizard then this page is not for you, Why?

➜This is on the grounds that the webservers which furnish you with wizards planner additionally have your site themselves.

Be that as it may, in the event that you have made your pages your self utilizing editorial manager or html or by page layouts then I might want to guide you about transferring your site documents on webservers.

In the first place let me show some webservers which gives free webspace to its clients to transfer documents:
Free-web-host
Bravent-web-host
50Megs-com
Geocities-com
Absolutely-free
Nazukka
Kilude-de
Bugs3-com
Presently:⇄ what you need to do is to make a record in any of them and you will have a restricted however enough space to transfer your documents.

In the wake of marking into the record, open the File Manager in your record.

There you will see that you have choice to transfer, erase and adjust records furthermore you have alternative to make and erase catalogs.

A registry is another name for Folder. Envelope and registry are a similar word in programming language. What you need to do here is to transfer every one of the records in an indistinguishable way from you have set them in your hard plate.

For instance you have set your picture records in a registry/organizer named Images, now make an envelope Images on your webserver account and transfer the picture documents there.

Essentially in the root/parent catalog put the file record. Remember that when you set up a site, the file document ought to be in the principal index.

Initially registry is the simple interpretation of root or parent catalog. For instance; expecting you made an envelope MyFolder and place every one of the documents and organizers under this organizer,

MyFolder can be known as the root registry of your site however remember that when you begin transferring records, don't make another organizer with a similar name of the root organizer on the webserver.

Space Name Of The Website
A space name ought to be anything but difficult to recall and distinct, all the site which give free webspace likewise give you area name.

For instance; expecting you made a blogspot.com site and you don't care for the blogspot space then you can pick an area name to divert.

Some site give great space names to free yet don't give any webspace. So what you need to do is to transfer your records on various site and take area name from any free space name supplier and information exchange for their record.

Some will ask for IP and DNS servers while some will ask your past site address and give you another deliver to your site,

➠now your documents are put away on a similar site yet your site has another name now. Here is a rundown of site that give free space name.
Freedomain-com
Freenom-com
V3-com
➠Site Marketing
Well you can pull in clients by some promoting strategies which are free of cost.

➠Web index Submission: There are numerous sites which present your site to real web crawlers for nothing. The rundown of such sites incorporate;
Submit-site-express
Add-me
Add-pro
Free-web-submission
➵Note: read more about SEO Here

➠Gatherings And Communities: Join popular discussions and groups which permit clients to show their own sites on their posts.

➠Pamphlet: Create your own particular bulletin for your site and post redesigns of your sites in the pamphlet. Yippee gathering is a decent free pamphlet accessible for this reason.

➠Genuine Ads: Place little pennants of your site in your college or school or any open place, regardless of the possibility that you can do it in a net bistro.

Show Recent Posts With Featured Thumbnails in Blogger

Oleh bcoded - December 12, 2016

We have talked about in detail how you can utilize JavaScript to concentrate information from Blogger JSON Feed API and utilize it to manufacture devices, for example, "Late Posts Widget" and "Latest Comments Widget". The JSON instructional exercise arrangement would help a designer to make quality gadgets for blogspot blogging stage.

Today's instructional exercise will demonstrate to you the finished result of what should be possible utilizing JSON nourish for posts. I will impart to you a propelled gadget that will show late posts in dropping request (most recent at top)⇪ alongside post thumbnails, post rundown, timestamp, remark number, mark label, creator name and alter interface.

You can add it to your blogger sites to show most recent posts in an interesting style. This is the main gadget of its kind with so much elements.

Upgrade: A more conservative, adaptable and completely utilitarian variant of this gadget has been discharged. Checkout:

Late posts Label Gadget with Avatars, Animated Thumbnails and Labels!
What is a Blogger Recent Posts Widget? ⇙⇙

A latest posts gadget shows your most recent posts in sliding request with freshest at top. It demonstrates a rundown of your most recent blog entries alongside thumbnails, post passage and post meta data. It works with all blogspot online journals. Duplicate the code and glue it inside a HTML/JavaScript contraption, that straightforward!

You can likewise utilize it to show posts by name by posting late posts from a particular mark. You can modify it to show posts in magazine style form with vertical, level, exhibition style posting. I will examine all such conceivable outcomes in my coming instructional exercises. Designers at themeforest utilize a similar strategy to make magazine style blogger layouts. You will figure out how to code it sans preparation through our JSON arrangement.

Full elements are the accompanying:

Post Title
Highlighted Image - With outsider picture bolster and YouTube Thumbnails bolster
Post outline
Perused more connection
Creator Name
Name/Category/Tag name
Remarks Count
Distribute date
Alter connect tooltip that will demonstrate post Update Date and Time.
Lightweight
Liquid and responsive

Shows the accompanying GIF preloader which turns and throbs when the gadget loads or when information is asked for by program from JSON bolster.

preloader for blogger websites ⇣
Once completely stacked the blog entries are shown in dropping request (Latest at top)

Lets get to coding!
Add Recent Posts Widget To Your Blog

Take after these simple strides to add this contraption to your blogspot web journals:

⤰ Go To Blogger ➥ Template

⤯ Backup your format

⤯ Click Edit HTML

⤮ Paste the accompanying code simply above </head> tag

Take note of: This progression is discretionary. Skip it on the off chance that you have as of now added jQuery library source connections to your blogger template

<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

Next glue the accompanying template joins for FontAwesome and Oswald text style simply above </head>. Skip adding the links if you already have added them inside your templates

Presently glue the accompanying CSS code simply above ]]></b:skin>

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/><link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Now paste the following CSS code just above ]]></b:skin>

/*############Recent Posts Widget##################*/.mbtlist {list-style-type:none;overflow:hidden; padding:10px!important;} .mbtlist li {margin:0px auto 20px auto; clear:both; color:#666; font-family:helvetica; font-size:12px; } .mbtlist i{color:#999; padding-right:4px; } .mbtlist .iline{line-height:2em; clear:both; border:1px solid #eee; margin-top:10px; padding: 0px 4px; font-size: 12px;} .mbtlist div span{margin:0 10px 0 0; display:inline-block;} .mbtlist span {display:block; margin:5px 0px 0px; padding-right:5px;} .mbtlist .icon {color: #999;font-family: verdana;font-size: 12px;text-align: justify;} .mbtlist img {float:left; margin:0px 10px 10px 0px; border:6px solid #fff; padding:0px; width:150px; height:100px; box-shadow:-1px -1px 4px #777; } .mbtlist .mbttitle {font-family:oswald; font-size:18px; color:#0080ff; font-weight:normal; text-decoration:none; line-height: 1.4em;} .mbtlist .mbttitle:hover, .mbtlist .itotal a:hover {color:#00A5FF;} .mbtlist .iedit a{text-decoration:none; color:#999; cursor:pointer} .mbtlist .iedit:before, .mbtlist .iauthor:before, .mbtlist .itag:before, .mbtlist .icomments:before, .mbtlist .idate:before, .mbtlist .itotal span:before{font-family:fontAwesome; position:relative; padding-right:5px;} .mbtlist .iauthor:before {content:'\f007';} .mbtlist .itag:before {content:'\f02c';} .mbtlist .icomments:before {content:'\f086';} .mbtlist .idate:before {content:'\f017';} .mbtlist .iedit:before {content:'\f040';}.mbtlist .imore {font-size:12px; font-weight:bold; text-decoration:none; color:#999;}.mbtlist .itotal {color:#333; padding:5px 10px; border:1px solid #eee;}.mbtlist .itotal a {font-family:oswald; font-size:12px; font-weight:normal; color:#0080ff; text-decoration:none}.mbtlist .itotal span:before {content:'\f07c';}.mbtlist .itotal span font {padding:0px 3px; color:#333; font-family:georgia; font-size:15px; font-weight:bold}#mbtloading1{ margin: 20% auto; background: url('http://downloads.mybloggertricks.com/Spin%20and%20pulsate.gif') no-repeat left center;width: 80px;height: 80px;}/*------ CSS3 Tooltip Shortcode -------------*/ .tooltip1{outline:none;text-decoration:none!important;position:relative;color: orange!important; font-weight: bold;}.tooltip1:hover {border-bottom: none;}.tooltip1 strong{line-height:30px}.tooltip1 > span{max-width:300px;width:115px;padding:5px 8px;opacity:0;bottom:170%;left:0px; visibility:hidden;z-index:10;position:absolute;font-family:helvetica;font-size:12px;font-weight:bold;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}.tooltip1 > span img{float:right;width:110px;margin:0 0 30px 10px;padding: 0;border: none;}.tooltip1:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:-90px}.tooltip1 span b{width:15px;height:15px;right:25px;bottom:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}.tooltip1 > span{color:#fff;background:orange;border:1px solid #ffffff}.tooltip1 span b{background:orange;border-bottom:1px solid #ffffff;border-left:1px solid #ffffff}

Alter the hues:
To change the blue shade of the post title supplant #0080ff with your preferred connection shade and supplant #00A5FF to change the connection shading for mouse float.

To change the alter connect shading change orange
To change the tooltip shading change orange with a hexadecimal shading code of your inclination.
To change the width and stature measurements of the highlighted thumbnail alter: width:150px; height:100px;

⟹ Save your format and you are practically done!

⟹Finally go to Layout area and snap "Include a Gadget".

⟹Choose HTML/JavaScript gadget and glue the accompanying code inside it:

<div id="mbtloading1" ></div> <script type="text/javascript">//#################### Defaults var ListBlogLink = window.location.hostname; var ListCount = 5; var ChrCount = 150; var TitleCount = 66; var ImageSize = 200; //################ Function Start function mbtlist(json) { document.write('<ul class="mbtlist">'); for (var i = 0; i < ListCount; i++) { //################### Variables Declared var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = ListMonth = Y = D = M = m = YY = DD = MM = mm = TT = "";//################### Category if (json.feed.entry[i].category != null) { for (var k = 0; k < json.feed.entry[i].category.length; k++) { ListTag += json.feed.entry[i].category[k].term; if(k < json.feed.entry[i].category.length-1) { ListTag += ", ";} } }//################### URL for (var j = 0; j < json.feed.entry[i].link.length; j++) { if (json.feed.entry[i].link[j].rel == 'alternate') { break; } } ListUrl= "'" + json.feed.entry[i].link[j].href + "'";//################### Info TotalPosts = json.feed.openSearch$totalResults.$t; if (json.feed.entry[i].title!= null) { ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount); } if (json.feed.entry[i].thr$total) { ListComments= json.feed.entry[i].thr$total.$t; } ListAuthor= json.feed.entry[i].author[0].name.$t.split(" "); ListAuthor=ListAuthor.slice(0, 1).join(" ");
//################### Content CheckListConten = json.feed.entry[i].content.$t; ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);//################### Date FormatListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];ListDate= json.feed.entry[i].published.$t.substring(0,10); Y = ListDate.substring(0, 4); m = ListDate.substring(5, 7); D = ListDate.substring(8, 10); M = ListMonth[parseInt(m - 1)]; ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16); YY = ListUpdate.substring(0, 4); mm = ListUpdate.substring(5, 7); DD = ListUpdate.substring(8, 10); TT = ListUpdate.substring(11, 16); MM = ListMonth[parseInt(mm - 1)]; //################### Thumbnail Check // YouTube scanif (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null) { var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop(); if (youtube_id.length == 11) { var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'"; } }else if (json.feed.entry[i].media$thumbnail) { thumbUrl = json.feed.entry[i].media$thumbnail.url; sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/"); ListImage= "'" + sk.replace("?imgmax=800","") + "'"; }else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null) { // Support For 3rd Party Images ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1]; } else { ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyCY3b3c8cQ4hMX_2Vc01VML2lOWOJsQPTSgFOhXRY1Ss9EPP6ip_HpxpIt45VNDP1VKyP3E7qT13xdzmcJe1V0DN17_wlILY7_8fFvTKO-QCCvNeBv08tWFxypQf_WBw51CFUbv9t2zM/s200/Icon.png'"; } //################### Printing Listvar listing = "<li class='node"+[i]+"' ><a href=" + ListUrl+ "><img src=" +ListImage+ "/></a><a class='mbttitle' href=" + ListUrl+ "target='_blank'>" + ListTitle+ "</a> <span class='icon'>" +ListContent+ " ... <a href=" +ListUrl+ " class='imore'>more »</a></span><div class='iline'><span class='iauthor'>" +ListAuthor+ "</span><span class='itag'>" +ListTag+ "</span><span class='icomments'>" + ListComments+ "</span><span class='idate'>" + M + " " + D + ", " + Y +"</span><span class='iedit'> <a class='tooltip1'>Edited<span><b></b>On ► " + MM + " " + DD + ", " + YY + " at ► " +TT+ " </span></a> </span></div></li>"; document.write(listing); } document.write("<div class='itotal'><span> <a href='"+ListBlogLink+"/search'>View all <font>"+TotalPosts+"</font> posts</a></span></div></ul>"); } </script><script> var ListBlogLink = "http://www.codedforum.com.ng"; var ListCount = 5; </script><script> document.write("<script src='"+ListBlogLink+"/feeds/posts/default?alt=json-in-script&callback=mbtlist'></"+"script>"); </script><script> document.getElementById("mbtloading1").style.display = "none";</script>

You can roll out these improvements:
Supplant http://www.codedforum.com.ng this with your blog URL

To increment or diminishing the quantity of posts sections, alter: ListCount = 5

To lessen the length of title characters alter TitleCount = 66

To build the picture determination quality (angle proportion) if incase you wish to show vast included thumbnails then alter ImageSize = 200

To choose what number of characters to show as post outline (passage) edit:ChrCount = 150

⟹ Save your gadget and see it play in real life! =)

Could You Guess How To Display Posts By Label?
At Codedforum we go for instructing the perusers to take in the center essentials of programming rather than simply sharing an ordinary howto instructional exercise. In the above code you simply need to roll out a basic improvement keeping in mind the end goal to show most recent posts by a particular name. I have as of now talked about how to do that in the JSON arrangement. Do read that and get back here proposing your answer saying all the fundamental strides.

I will sit tight for your answers, I will share it in my next instructional exercise and connection to your blog in the event that you addressed effectively. =)

Include Adsense, Banner, Search Box Or New Widget Section In Header

Oleh bcoded - December 10, 2016

I saw a question in a discussion concerning how to include adsense pennant inside the header range, in which nobody answer to the inquiry, however i later gave her an answer for it, and i think i ought to impart the trap behind it to my reliable perusers as well.

This instructional exercise will be base on the best way to include new gadget segment in your header. Really you can include any gadget of your decision to the new gadget area.

Instructions to Add New Widget Section Beside Header
Go to your blogger dashboard (move down your format)

Tap on Template > Edit HTML > Proceed (Don't Mark/Tick Expand Widget Template)

Utilize ctrl F to locate the accompanying line

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>

➜Now add the following new widget section code below the code above

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

➜The final code should look like the following:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/></b:section> <b:section id='header-right' showaddelement='yes'/><div style='clear: both;'/>

You will need to style the new widget section with CSS so as to position it beside the header

Search for ]]></b:skin> and paste the following code above/before ]]></b:skin>

#header, body#layout #header {width:50%;display:inline-block;float:left;}#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}#header-right .widget {margin:0;}

Now Save your template.

Putting in New Widget
To include gadget adjacent to the header segment, essentially go to Layout ➞and tap on Add a Gadget .

You can include any gadget of your decision alongside header be it an advertisements flag, look box, social gadgets and so on.

Trust you like this hack buddies? We are additionally considering including/supplanting the gadget inside our header segment, which gadget do you think it will be reasonable for that position. We will love to get notification from you.

Cheerful hacking!

Progressed Multi Column Footer Widget For Blogger

Oleh bcoded - December 08, 2016

In many web journals/site, you may have discovered distinctive sorts of segment footers which are extraordinary likewise, however am conveying to you, the new propelled variant of section footers.

In this new form, you can grow/fall the section to three, four or even five. As a matter of course the footer is four section, yet don't surpass it more than five, to make it look more expert.

Go to your blogger dashboard ⏬⏬
Tap on "Outline" > "Alter HTML" (For old interface)

Tap on "Format" > "Alter HTML" > "Continue" (For new interface)

Utilize ctrl F to discover ]]></b:skin> and glue the accompanying code above/before it.

/*----- Advanced Multi Column Footer By www.codedforum.com.ng -----*/
#lower { margin:auto; padding: 0px 0px 10px 0px; width: 100%; background:#333333; } #lower-wrapper { background:#333333; margin:auto; padding: 20px 0px 20px 0px; width: 960px; border:0; } #lowerbar-wrapper { background:#333333; float: left; margin: 0px 5px auto; padding-bottom: 20px; width: 23%; text-align: justify; color:#ddd; font: normal 12px Arial, Tahoma, Verdana; line-height: 1.6em; word-wrap: break-word; overflow: hidden; } .lowerbar {margin: 0; padding: 0;} .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} .lowerbar h2 { margin: 0px 0px 10px 0px; padding: 3px 0px 3px 0px; text-align: left; border:0; color:#ddd; text-transform:uppercase; font: bold 14px Arial, Tahoma, Verdana; } .lowerbar ul { color:#fff; margin: 0 auto; padding: 0; list-style-type: none; } .lowerbar li { display:block; color:#fff; line-height: 1.6em; margin-left: 0 !important; padding: 6px; border-bottom: 1px solid #222; border-top: 1px solid #444; list-style-type: none; } .lowerbar li a { text-decoration:none; color: #DBDBDB; } .lowerbar li a:hover { text-decoration:underline; } .lowerbar li:hover { display:block; background: #222; }

Now find </body> and paste the following code above/before </body>

<div id='lower'>    <div id='lower-wrapper'>

    <div id='lowerbar-wrapper'>    <b:section class='lowerbar' id='lowerbar1' preferred='yes'>    </b:section>    </div>

    <div id='lowerbar-wrapper'>    <b:section class='lowerbar' id='lowerbar2' preferred='yes'>    </b:section>    </div>

    <div id='lowerbar-wrapper'>    <b:section class='lowerbar' id='lowerbar3' preferred='yes'>    </b:section>    </div>

    <div id='lowerbar-wrapper'>    <b:section class='lowerbar' id='lowerbar4' preferred='yes'>
    </b:section>
    </div>

    <div style='clear: both;'/>    </div> </div>

Customization

The general width of the segment footer is spoken to by width: 960px; and the width of every section is spoken to by width: 23%;, you can alter any of this to your own particular fulfillment.

Taking a gander at the code above painstakingly, you ought to comprehend the structure of the section footer, the code underneath speak to every segment.⇩⇩

<div id='lowerbar-wrapper'>

<b:section class='lowerbar' id='lowerbar4' preferred='yes'>

</b:section>

</div>

In the event that you need to include the fifth section, basically include the above code, above <div style='clear: both;'/> and supplant lowerbar4 with lowerbar5, as it speak to the segment number.

Done! Trust you like this post?

CDF

Labels : codings

how to to Add Comment Counter to Post Header Titles in Blogger

Useful Social phishing Toolkitt From Scratch

instructions to Add Yahoo Smileys To Blogger Threaded Comments

Instructions to Add Blogger Related Links to Below Blog Posts

Instructional exercise on Site Building Tutorial

Show Recent Posts With Featured Thumbnails in Blogger

Include Adsense, Banner, Search Box Or New Widget Section In Header

Progressed Multi Column Footer Widget For Blogger

Trending Post

how to to Add Comment Counter to Post Header Titles in Blogger

Useful Social phishing Toolkitt From Scratch

instructions to Add Yahoo Smileys To Blogger Threaded Comments

Instructions to Add Blogger Related Links to Below Blog Posts

Instructional exercise on Site Building Tutorial

Show Recent Posts With Featured Thumbnails in Blogger

Include Adsense, Banner, Search Box Or New Widget Section In Header

Progressed Multi Column Footer Widget For Blogger

Archive