BBlogger Tutorials: Gadget

Home » Semua post berkategori Gadget

Showing posts with label Gadget. Show all posts

How to Add a Shining CSS3 Horizontal Menu For Blogger

Horizontal menu best alternative option for labels or sections.
The importance of horizontal menu including: reducing the space occupied by the sections/labels and distort the appearance of blog, coordinate and beautify the style of blog.
This widget is designed by CSS3 technology, And you can add this gadget to your blog with very easy way:

Adding the widget to Blogger blog:

1. Go to Blogger Dashboard → Layout → click on "Add a gadget".

2. Select "html/java script" and add the code given below:

<li><a href="#">Features</a></li>

<li><a href="http://bbloggertutorials.blogspot.com/p/blogger-tools.html">Products</a></li>

<li><a href="http://bbloggertutorials.blogspot.com/p/contact-me.html">Contact</a></li>

<li><a href="http://bbloggertutorials.blogspot.com/p/terms-and-conditions.html">Tricks</a></li>

<li><a href="#">About</a></li>

</ul>

</div>

NOTE

3. - Replace the URL in blue with your own.

- Replace the tab name in red with your own.

4. Finally click on save.

Now you can see the result (o)

How to Add Metro Style Social Widget for Blogger

Today I will give you a very nice addition to your blog and frankly I liked this widget a lot. It is a social networking sites widget on the form of Metro as in windows 8.

Adding the widget in Layout

1. Go to Blogger Dashboard → Layout → click on "Add a gadget".

2. Select "html/java script" and add the code given below.

</div>

<style>

/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs

Web link to gadget code:

Distributed under license CC BY-NC-ND 3.0 INT

Please keep license information intact while using this widget*/

.metro-social{width:285px}

.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}

.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}

.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}

.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}

.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}

.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}

.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}

.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}

.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}

.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}

</style>

<br />

3. Replace "Your ..... URL here" with Your URL.

4. Click on save.

I hope you enjoy & happy blogging! :)

How To Add Related Posts Widget To Blogger With Summary

I wrote a previous blog post about How To Add Related Posts Widget To Blogger With Thumbnails.We already know the importance of the widget, but in this tutorial I'll show you the best related posts widget to your blog , If you want to add this widget to your blog please follow me:

1. Go to Blogger Dashboard --> Template

2. Please! download a copy of your template
3. Now click on Edit HTML
4. Use Ctrl+F to find </head>

5. Then copy and paste the below code just above/before it ( </head> ):

//<![CDATA[

var relatedTitles = new Array();

var relatedUrls = new Array();

var relatedpSummary = new Array();

var relatedThumb = new Array();

var relatedTitlesNum = 0;

var relatedPostsNum = 4; // number of entries to be shown

var relatedmaxnum = 75; // the number of characters of summary

var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHzzs0ZW_PjZye3fdfCtUZecfnD52RlVW2ZuGrSAPIVwmpdaMlnPyG7sY6CEPrhBCx10_-Zk71hIDLAVG25QmzwG5Cim8jGvnwa9CCFwtbMl7HgubVryWCORyNmV8gz-WlMgg3tUdI1sWQ/s1600/no_image.jpg"; // default picture for entries with no image

function readpostlabels(json) {

var entry, postimg, postcontent, cat;

for (var i = 0; i < json.feed.entry.length; i++) {

entry = json.feed.entry[i];

if (i==json.feed.entry.length) { break; }

relatedTitles[relatedTitlesNum] = entry.title.$t;

postcontent = "";

if ("content" in entry) {

postcontent = entry.content.$t;

} else if ("summary" in entry) {

postcontent = entry.summary.$t;

}

relatedpSummary[relatedTitlesNum] = removetags(postcontent,relatedmaxnum);

if ("media$thumbnail" in entry) {

postimg = entry.media$thumbnail.url;

} else {

postimg = relatednoimage;

}

relatedThumb[relatedTitlesNum] = postimg;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

relatedUrls[relatedTitlesNum] = entry.link[k].href;

break;

}

relatedTitlesNum++;

}

function showrelated() {

var tmp = new Array(0);

var tmp2 = new Array(0);

var tmp3 = new Array(0);

var tmp4 = new Array(0);

for(var i = 0; i < relatedUrls.length; i++) {

if(!contains(tmp, relatedUrls[i])) {

tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i];

tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];

tmp3.length += 1; tmp3[tmp3.length - 1] = relatedpSummary[i];

tmp4.length += 1; tmp4[tmp4.length - 1] = relatedThumb[i];

}

relatedTitles = tmp2; relatedUrls = tmp; relatedpSummary = tmp3; relatedThumb = tmp4;

for(var i = 0; i < relatedTitles.length; i++){

var index = Math.floor((relatedTitles.length - 1) * Math.random());

var tempTitle = relatedTitles[i]; var tempUrls = relatedUrls[i];

var tempResum = relatedpSummary[i]; var tempImage = relatedThumb[i];

relatedTitles[i] = relatedTitles[index]; relatedUrls[i] = relatedUrls[index];

relatedpSummary[i] = relatedpSummary[index]; relatedThumb[i] = relatedThumb[index];

relatedTitles[index] = tempTitle; relatedUrls[index] = tempUrls;

relatedpSummary[index] = tempResum; relatedThumb[index] = tempImage;

}

var somePosts = 0;

var r = Math.floor((relatedTitles.length - 1) * Math.random());

var relsump = r;

var output;

var dirURL = document.URL;

while (somePosts < relatedPostsNum) {

if (relatedUrls[r] != dirURL) {

output = "<div class='relatedsumposts'>";

output += "<a href='" + relatedUrls[r] + "' rel='nofollow' target='_self' title='" + relatedTitles[r] + "'><img src='" + relatedThumb[r] + "' /></a>";

output += "<h6><a href='" + relatedUrls[r] + "' target='_self'>" + relatedTitles[r] + "</a></h6>";

output += "<p>" + relatedpSummary[r] + " ... </p>";

output += "</div>";

document.write(output);

somePosts++;

if (somePosts == relatedPostsNum) { break; }

}

if (r < relatedTitles.length - 1) {

r++;

} else {

r = 0;

}

if(r==relsump) { break; }

}

function removetags(text,length){

var pSummary = text.split("<");

for(var i=0;i<pSummary.length;i++){

if(pSummary[i].indexOf(">")!=-1){

pSummary[i] = pSummary[i].substring(pSummary[i].indexOf(">")+1,pSummary[i].length);

}

pSummary = pSummary.join("");

pSummary = pSummary.substring(0,length-1);

return pSummary;

}

function contains(a, e) {

for(var j = 0; j < a.length; j++) if (a[j]==e) return true;

return false;

}

//]]>

</script>

Note:

- To change the default picture, replace the URL in pink with your own
- For displaying more than 4 posts or less, replace , modify the value in red (4)
- To change the number of characters to be shown in posts summary, modify the value in blue (75)

5. Now Search the following code:

6. Just after it, copy and paste the below code:

<b:if cond='data:blog.pageType == "item"'>

</b:if>

7. Now find the following code:

</b:includable>
<b:includable id='postQuickEdit' var='post'>

8. Then copy and paste the below code just above/before it

<b:if cond='data:blog.pageType == "item"'>

<div id='relatedpostssum'><div style='text-align: left; font-size: 15px; margin-bottom: 10px; font-weight: bold;'>RELATED POSTS</div>

</div>

</div>

</b:if>

9. Finally search for this tag: ]]></b:skin>

10. Add below CSS code just above it,

<relatedsumposts {

float: left;

margin: 0px 5px;

overflow: hidden;

text-align: center;

/* width and height of the related posts area */

width: 120px;

height: 210px;

}

.relatedsumposts:hover {

background-color: #F3F3F3; -webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

.relatedsumposts img:hover {

-khtml-opacity:0.4;

-moz-opacity:0.4;

opacity:0.4;

}

.relatedsumposts a {

/* link properties */

color: #linkcolor;

display: inline;

font-size: 10px;

line-height: 1;

}

.relatedsumposts img {

/* thumbnail properties */

margin-top: 2px;

height: 82px;

padding: 5px;

width: 82px;

border: 1px solid #fff;

-webkit-border-radius: 100px;

-moz-border-radius: 100px;

border-radius: 100px;

-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);

-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);

box-shadow: 0 1px 2px rgba(0, 0, 0, .4);

}

.relatedsumposts h6 {

/* title properties */

display: table-cell;

height: 5em;

margin: 5px 0 0;

overflow: hidden;

padding-bottom: 2px;

vertical-align: middle;

width: 130px;

}

.relatedsumposts p {

/* summary properties */

border-top: 1px dotted #777777;

border-bottom: 1px dotted #777777;

color: #summarycolor;

font-size: 10px;

height: 4em;

line-height: 1;

margin: 5px 0 0;

overflow: hidden;

padding: 5px 0 15px 0;

text-align: left;

}

Note:

-Modify the values in red to adjust the width (120) and height (210) of the widget area

-Replace #linkcolor with the hex value of your color to change the color of post titles

-To change the size of thumbnails, modify the values marked in pink (82)

-To determine the border roundness, modify the values in green (100)

-To change the color of the post snippet, change #summarycolor with color hex value

11. Now take a preview and save your template.

How To Remove Blogger Attribution Gadget in Blogger Blog

Some of the templates in blogger, we find some tools that can not be deleted, and unfortunately, these tools can distort the form template.The reason is that the template designer making tool locked so as to protect it, and to unlocked it follow me:

1. Go to Blogger Dashboard --> Template
2. Please! download a copy of your template
3. Now click on Edit HTML
4. Use Ctrl+F to find Attribution
5. We change the option 'true' to option 'false' ( Look the screen )

6. To become like this <b:widget id='Attribution1' locked='false' title='' type='Attribution'>

7. Finally click on Save template

Now go to gadget which you want remove it.

How to Add Blogger`s Official Contact Form to Your Blog

Blogger launches officially This is a wonderful very important gadget for any blogger,If your blog visitors need any help or suggestion regarding your posts or articles, they will try to contact with you.

Demo

How to Add Contact Form To Your Blog

Step 1

1. Login to your blogger dashboard--> Layout-->'Add A Gadget'

2. Now click on More Gadget--> Select Contact Form

3. Click save.

Step 2
1. Login to your blogger dashboard--> Pages
2. Now click on New Page--> Select Blank Page

3. Now Click on HTML an Paste below code in it.

<p></p>

<p></p>

<p></p>

<p></p>

</div>

</form>

</div>

4. Publish that Page.

Step 3
1. Now go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click on Edit HTML
4. Find below code in your template (Press Ctrl + F)
]]></b:skin>
5. Add below code just above it,

#ContactForm1

{

display: none ! important;

}

6. Now Search for </head> (Press Ctrl + F)
7. Paste below code just before </head>

<b:if cond='data:blog.pageType == "static_page"'>

<style>

#ContactForm1{ display:none!important;}

</style>

</b:if>

<style>

/*---- Compatible contact Form by WG -----*/

.contact-form-name, .contact-form-email, .contact-form-email-message {

max-width: 220px;

width: 100%;

font-weight:bold;

}

.contact-form-name {

background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvpK_gMmNRFPPc40o0_oW57KnKKaBKJSHDu75roGMU54EbBeBbd6sKHvRcnfVbqppfE3kAKH_ELgU0Zo7QwclgGvMQ_g1RsoFGKvLTLo0d_hrxqXZPGkevvBo-9wWfVa0IKkKTWEsgHUw/s320/name.png) no-repeat 7px 8px;

background-color: #FFF;

border: 1px solid #ddd;

box-sizing: border-box;

color: #A0A0A0;

display: inline-block;

font-family: Arial,sans-serif;

font-size: 12px;

font-weight:bold;

height: 24px;

margin: 0;

margin-top: 5px;

padding: 5px 15px 5px 28px;

vertical-align: top;

}

.contact-form-email {

background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_htSTOC91CpNjG6mKVaNskqH20-4aJgc5SzbweAIvBg9lDLCLO-SMC4ESpDNrZKCx4TjS0JqQB9mQjfGCBSqOAlSzXvqjxUFdAMHy-oQAxgX8U4hBHMOiHejfoB03GGq4zlIfUtEsEno/s320/email.png) no-repeat 7px 10px;

background-color: #FFF;

border: 1px solid #ddd;

box-sizing: border-box;

color: #A0A0A0;

display: inline-block;

font-family: Arial,sans-serif;

font-size: 12px;

font-weight:bold;

height: 24px;

margin: 0;

margin-top: 5px;

padding: 5px 15px 5px 28px;

vertical-align: top;

}

.contact-form-email:hover, .contact-form-name:hover{

border: 1px solid #bebebe;

box-shadow: 0 1px 2px rgba(5, 95, 255, .1);

padding: 5px 15px 5px 28px;

}

.contact-form-email-message:hover {

border: 1px solid #bebebe;

box-shadow: 0 1px 2px rgba(5, 95, 255, .1);

padding: 10px;

}

.contact-form-email-message {

background: #FFF;

background-color: #FFF;

border: 1px solid #ddd;

box-sizing: border-box;

color: #A0A0A0;

display: inline-block;

font-family: arial;

font-size: 12px;

margin: 0;

margin-top: 5px;

padding: 10px;

vertical-align: top;

max-width: 350px!important;

height: 150px;

border-radius:4px;

}

.contact-form-button {

cursor:pointer;

height: 32px;

line-height: 28px;

font-weight:bold;

border:none;

}

.contact-form-button {

display: inline-block;

zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */

*display: inline;

vertical-align: baseline;

margin: 0 2px;

outline: none;

cursor: pointer;

text-align: center;

text-decoration: none;

font: 14px/100% Arial, Helvetica, sans-serif;

padding: .5em 2em .55em;

text-shadow: 0 1px 1px rgba(0,0,0,.3);

-webkit-border-radius: .5em;

-moz-border-radius: .5em;

border-radius: .5em;

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);

box-shadow: 0 1px 2px rgba(0,0,0,.2);

}

.contact-form-button:hover {

text-decoration: none;

}

.contact-form-button:active {

position: relative;

top: 1px;

}

.WG-btnLogin

{

-moz-border-radius:2px;

-webkit-border-radius:2px;

border-radius:15px;

background:#a1d8f0;

background:-moz-linear-gradient(top, #badff3, #7acbed);

background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";

border:1px solid #7db0cc !important;

cursor: pointer;

padding:11px 16px;

font:bold 11px/14px Verdana, Tahomma, Geneva;

text-shadow:rgba(0,0,0,0.2) 0 1px 0px;

color:#fff;

-moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;

-webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;

box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;

margin-center:12px;

float:center;

padding:7px 21px;

}

.WG-btnLogin:hover,

.btnLogin:focus,

.btnLogin:active{

background:#a1d8f0;

background:-moz-linear-gradient(top, #7acbed, #badff3);

background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3));

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";

}

.WG-btnLogin:active

{

text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;

}

</style>

<!--[if IE 9]>

<style>

.contact-form-name {

}

.contact-form-email {

}

</style>

<![endif]-->

<style>

@media screen and (-webkit-min-device-pixel-ratio:0) {

.contact-form-name {

padding: 15px 15px 15px 28px;

}

.contact-form-email {

padding: 15px 15px 15px 28px;

}

.contact-form-email:hover, .contact-form-name:hover{

padding: 15px 15px 15px 28px;

}

.contact-form-button {

height: 28px;

}

</style>

8. Save the Template ,And you're done!
Enjoy and happy blogging!

BBlogger Tutorials

Iklan

How to Add a Shining CSS3 Horizontal Menu For Blogger

How to Add Metro Style Social Widget for Blogger

How To Add Related Posts Widget To Blogger With Summary

How To Remove Blogger Attribution Gadget in Blogger Blog

How to Add Blogger`s Official Contact Form to Your Blog

Label

Entri Populer