Breaking

Showing posts with label Blog. Show all posts
Showing posts with label Blog. Show all posts

Friday, June 19, 2020

June 19, 2020

How To Add New Layout below Header in Blogger

1.Log in to your blog dashboard--> layout- -> Edit HTML
2.Scroll down and search for </head> tag.
3.Add below code to your template just above the </head> tag.
#belowheader-wrapper {
width:890px;
margin:0 auto 10px;
overflow: hidden;
}
Note : You can change width:890px to equal the width of  your header-wrapper.

4.Now Scroll down to  see this:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your header title' type='Header'/>
</b:section>
</div>

5.Now paste the below code just after the above code.
<div id='belowheader-wrapper'>
<b:section class='belowheader' id='belowheader' preferred='yes'/>
</div>
6.Click on "Save Templates" and you are done.

Thursday, June 18, 2020

June 18, 2020

How To Hidden Blogger Header and Replace Image Instead

1.Log in to your blog dashboard--> layout- -> Edit HTML
2.Scroll down to  see header-wrapper code block.It will  look like this:

#header-wrapper {
width:800px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Note :- width:800px can be different value.

3.Now add "display:none;" into your header-wrapper code block.Look like at below:
#header-wrapper {
width:800px;
margin:0 auto 10px;
border:1px solid $bordercolor;
display:none;
}
 Done. the above code hides your blog header. 

4.To use a image instead of header,find the below code.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='your header title' type='Header'/>
</b:section>
</div>

5.Now paste the below given code just after the above code.

<a href="URL_OF_YOUR_BLOG"><img src="URL_OF_THE_IMAGE" alt="Home" /></a>
Note : Replace URL_OF_YOUR_BLOG and URL_OF_THE_IMAGE with your own content.
6.Click on "Save Templates" and you are done.
June 18, 2020

How To Add Digg Button to Every Blogger(Blogspot) Posts

How To Add Digg Button to Every Blogger(Blogspot) Posts

1. Login to your Blogger Dashboard. Go to Settings-> Archiving, set “Enable Post Pages” to “Yes” and save the settings.
2. Now go to Blogger Dashboard -> Layout-> Edit HTML
3. Check the "Expand Widget Templates" box. Find the follow code now.

<p><data:post.body/></p>

If you want the button to show at the top right corner of your post, replace the above code with this code.

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div><p><data:post.body/></p>

If you want the button to show at the end of your post, replace the above code with this code.

<p><data:post.body/></p>
 <div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div>

If you want the button to show at top left corner of your post, replace the above code with this code.

<div style='float:left; margin-right:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div>
 <p><data:post.body/></p>
June 18, 2020

How To Add Reactions widget in your blogger blog

How To Add Reactions widget in your blogger blog
To configure the reactions widget follow given steps.
1.Sign in to your blogger account.

2.Go to layout Page.
  3. Click the "Edit" link below the blog posts.
4. Check the "Reactions" widget on the pop-up window. Click Save.


How To Add Reactions widget in your blogger blog

If you're using the default Blogspot template, a widget will appear in your blog. If you do not want to include some code in your blog template, follow these steps.
1. Go to edit Html page  of blog.
2.Check the "Expand widget templates" option.
3.search the following code in your template:
<data:post.body/>
4.Then immediately after this code add the following code.
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' width='100%'><tr>
<td valign='center'><span class='reactions-label'>
<data:top.reactionsLabel/></span>
</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>
Save and view your blog.
June 18, 2020

How To Add a Border to your Posts and Sidebar

This is a fairly simple task. I'm working with a minima template, so the vocabulary of your template may be a little different. You will find the sidebar area in your CSS style sheet.
यह काफी सरल कार्य है। मैं मिनिमा टेम्प्लेट से काम कर रहा हूं, इसलिए आपकी टेम्प्लेट शब्दावली थोड़ी अलग हो सकती है। आप अपनी CSS style sheet  में साइडबार क्षेत्र की तलाश करेंगे।
Look for this code in your template.
 इसके लिए अपने टेम्पलेट में देखें।
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}

Then you will replace it with this code:
तब आप इसे इस कोड से बदल देंगे:
.sidebar .widget, .main .widget {
background:#ffffff;
margin:1.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid $bordercolor;
border-bottom:1px solid $bordercolor;
border-width:1px 1px 1px;
border-bottom:1px line $bordercolor;
}

.main .Blog {
background:#ffffff;
margin:1.5em 0 1.5em;
padding:8px 8px 8px;
border:1px solid $bordercolor;
border-bottom:1px solid $bordercolor;
border-width:1px 1px 1px;
border-bottom:1px line $bordercolor;
}
That will give you a awesome border around your posts and your sidebar widgets!
You can change your border width by editing above code.
जो आपको आपके पोस्ट और आपके साइडबार विजेट के चारों ओर एक अच्छी border प्रदान करेगा!
आप कोड के ऊपर अपनी सीमा चौड़ाई संपादन बदल सकते हैं।
June 18, 2020

How to find the width of your blog Header, Sidebar and Main column

To find the width of the blog Header, sidebars, main column, sign into Dashboard. In the section for the blog, click LAYOUT, then click EDIT TEMPLATE. This will open the template editor window tab. Search through the templates for the following code:
ब्लॉग की चौड़ाई प्राप्त करने के लिए हैडर, साइडबार, मुख्य कॉलम, डैशबोर्ड में साइन इन करें। संबंधित ब्लॉग के section में, LAYOUT पर क्लिक करें, फिर EDIT TEMPLATE पर क्लिक करें। इससे टेम्प्लेट एडिटर विंडो खुल जाएगी। निम्नलिखित के लिए टेम्पलेट्स के माध्यम से खोजें:
#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#main-wrapper {
width: 400px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

These codes are from the template of the blog. The first block of code tells me that the width of the header is 750 pixels. The second block states that the width of the main column is 400 pixels. The last two blocks of code tell me that both sidebars are 150 pixels wide.
 ये कोड इस ब्लॉग के टेम्पलेट से हैं। कोड का पहला ब्लॉक मुझे बताता है कि हेडर की चौड़ाई 750 पिक्सेल है। दूसरा ब्लॉक कहता है कि मुख्य कॉलम की चौड़ाई 400 पिक्सेल है। कोड के अंतिम दो ब्लॉक मुझे बताते हैं कि दोनों साइडबार 150 पिक्सल की चौड़ाई के हैं।

Tuesday, June 16, 2020

June 16, 2020

How To Disable Right Click in Blogger(blogspot) or Webpage

This post explains how to disable right click on Blogger (Blogspot) or any other webpage using an HTML (JavaScript) code.
यह पोस्ट बताती है कि HTML (जावास्क्रिप्ट) कोड का उपयोग करके ब्लॉगर (ब्लॉगस्पॉट) या किसी अन्य वेबपेज पर राइट क्लिक को कैसे निष्क्रिय किया जाए।
It is very annoying if someone copies (steals) your blog posts, articles, pictures and some other kind of information that says they are the real owners of the content.
But, 'disabling right click' is not the right solution for that.
यदि कोई आपके ब्लॉग पोस्ट, लेख, चित्र और आपके द्वारा स्वामित्व की गई जानकारी को यह कहते हुए कॉपी करता है कि वे सामग्री के मूल स्वामी हैं, तो यह बहुत कष्टप्रद है। लेकिन, मुझे लगता है कि 'राइट क्लिक को disable करना' उसके लिए सही समाधान नहीं है।
Most people come to your site to read information and a very small percentage of people come to your site to steal your work, images, etc. Therefore, most people find it insulting and I think it is very unethical to do so. -Business is the thing.
If you want to protect your data,my suggestion is to add a Watermark(logo) with your sitename,or your name on the images,pictures,etc.
अधिकांश लोग आपकी साइट पर जानकारी पढ़ने के लिए आते हैं और बहुत कम प्रतिशत लोग आपकी साइट पर आपके काम, चित्र आदि को चुराने के लिए आते हैं। इसलिए, अधिकांश लोग इसे अपमानजनक मानते हैं और मुझे लगता है कि यह करना बहुत ही अव्यवहारिक बात है यदि आप अपनी छवियों को सुरक्षित रखना चाहते हैं, तो मेरा सुझाव है कि आप अपने साइटनेम के वॉटरमार्क (लोगो), या चित्रों, चित्रों आदि पर अपना नाम जोड़ें।
Note:By using this javascript code,you only disable the right click by warning the visitors that the content is copyrighted.
नोट: इस जावास्क्रिप्ट कोड का उपयोग करते हुए, आप केवल आगंतुकों को चेतावनी देकर राइट क्लिक को अक्षम करते हैं कि सामग्री कॉपीराइट है।
the code for this is below.
<SCRIPT language=JavaScript>
<!-- http://www.spacegun.co.uk -->
var message = "function disabled";
function rtclickcheck(keyp){ if (navigator.appName == "Netscape" && keyp.which == 3){ alert(message); return false; }
if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) { alert(message); return false; } }
document.onmousedown = rtclickcheck;
</SCRIPT>
Where to put it in blogger ?
Sign in to your blogger dashboard-->layout-->Page Elements-->Add a Gadget-->html/javascript and paste the above javascript code and Save the changes.
इसे ब्लॉगर में कहाँ पेस्ट करें?  अपने ब्लॉगर डैशबोर्ड में साइन इन करें ->layout-->Page Elements-->Add a Gadget-->html/javascript और उपरोक्त जावास्क्रिप्ट कोड पेस्ट करें और परिवर्तनों को  Save करे

How it works?
यह कैसे काम करता है
If you right click anywhere on the webpage,a pop upmassage will on screen saying "function disabled".If you want to change the message to you own one like "sorry....this work is copyrighted" or something like that,replace the "funtion disabled" text with your own message in the Javascript code.
यदि आप वेबपृष्ठ पर राइट क्लिक करते हैं, तो एक संदेश स्क्रीन पर "फ़ंक्शन disabled" कहकर पॉप जाएगा। यदि आप संदेश को अपने आप बदलना चाहते हैं जैसे "sorry.... काम कॉपीराइट है" या ऐसा कुछ, प्रतिस्थापित करें जावास्क्रिप्ट कोड में अपने संदेश के साथ "funtion disabled" 

Sunday, June 14, 2020

June 14, 2020

How To Add Pop-Up Warning to Blog HTML Code

How To Add Pop-Up Warning to Blog HTML Code
How To Add Pop-Up Warning to Blog HTML Code

This can be done using JavaScript code. So if the viewer has disabled JavaScript on their blog, it can't work. In addition, many viewers have pop-up blockers that may prevent them from displaying this message.
Follow these steps to include it in your blog:

1. Login to Blogger.com.
2. On the Blogger Dashboard after a successful login click the 'Layout' link.
3. The Page Elements subtab of Template tab will open.
4. Click on the Edit Html subtab of Template tab.
5. On the Edit Html subtab scroll down to the Template Code box.
6. Copy the code given below :
<script language='JavaScript'>
//
alert ("This is a Demo Pop Up Window where you can put any Messages to viewers!")
</script>

7. Paste the code above just before </head> and in the template. Replace "This is a Demo Pop Up Window where you can put any Messages to viewers!" with your personal message.
8. Save the template.
9. Clear Cache then View Blog
June 14, 2020

How to add "Email Subscription Form" to Blogger/wordpress

 
How to add "Email Subscription Form" to Blogger
How to add "Email Subscription Form" to Blogger

If you are a new blogger, you may have seen an email subscription form as shown below in other blogs while browsing.
This has been deleted by FeedBurner. When people subscribe, they will receive an email with your blog posts whenever your blog is updated. It's a very easy thing to do and to get your visitors back to your blog over and over again.

So,Let's see how to add a "Email Subscription form" in your blog:
1.First,Sign in into your FeedBurner account.If you don't have a FeedBurner account then you can register it here
2.Click on the "My Feeds"  at the top of the page and next ,click on your blog name
3.Next,Click on the 'Publicize' tab  below.
4.Select the "Email Subscriptions" option.
5.Next,Click on 'Activate'
6.Under the Email Subscriptions column are some other options such as subscription management, communication preferences, email branding and delivery options. Edit them according to your needs.
Now,Click on the Subscription Managemant option and copy the code shown there
7.Sign in to your blogger dashboard>layout>add a page element>html/javascript and paste the code and click on SAVE THE CHANGES.That's it!

यदि आप एक नए ब्लॉगर हैं, तो आपने ब्राउज़ करते समय अन्य ब्लॉग्स में नीचे की तरह एक ईमेल सबक्रिकेटीयन फॉर्म देखा होगा।

यह फीडबर्नर द्वारा दिया गया है। जब लोग सदस्यता लेते हैं, तो वे आपके ब्लॉग पोस्ट के साथ एक ईमेल प्राप्त करेंगे जब भी आपका ब्लॉग अपडेट किया जाता है। यह एक बहुत आसान बात है और आपके आगंतुकों को आपके ब्लॉग पर बार-बार वापस आना है।

तो, आइए देखें कि आपके ब्लॉग में "Email Subscription form" कैसे जोड़ा जाए:

1. फ़र्स्ट, अपने फीडबर्नर खाते में साइन इन करें। यदि आपके पास अभी तक फीडबर्नर खाता नहीं है, तो आप इसे यहाँ पंजीकृत कर सकते हैं

2. पृष्ठ के शीर्ष पर "मेरा फ़ीड्स" लिंक पर क्लिक करें और अगला, अपने ब्लॉग नाम पर क्लिक करें

3.Next, नीचे दिखाए गए 'प्रचार' टैब पर क्लिक करें।

4. "ईमेल सदस्यता" विकल्प का चयन करें

5. अगला, 'सक्रिय' पर क्लिक करें

6. ईमेल सदस्यता कॉलम के तहत कुछ और विकल्प हैं, जैसे सदस्यता प्रबंधन, संचार प्राथमिकताएं, ईमेल ब्रांडिंग और वितरण विकल्प। अपनी आवश्यकताओं के अनुसार उन्हें चुनें।

अब, सदस्यता प्रबंधन विकल्प पर क्लिक करें और उनके द्वारा प्रदान कोड को कॉपी करें

7. अपने ब्लॉगर डैशबोर्ड> लेआउट> साइन इन करें> एक ​​पृष्ठ तत्व> html / जावास्क्रिप्ट जोड़ें और कोड पेस्ट करें और CHANGES को सेव करें!

Saturday, June 13, 2020

June 13, 2020

HTML code for "Contact Us" form for Blogger/Wordpress

HTML code for "Contact Us" form for Blogger/Wordpress
HTML code for "Contact Us" form for Blogger/Wordpress

This contact us form is completely customizable!
JavaScript validates required fields; and there is a verification on the server-side.
Captcha image protects the form against SPAM from spamers.
Captcha image can be reloaded many times.



How to use this Basic Captcha code

1. Copy and paste the code  into your webpage.
2. Change the address of email your@email.com to your own email address.
3. Change the return address http://www.YourWebsiteAddress.com/ThankYouPage.html to your own website address.
4. You can change the email subject - Contact Us Captcha Form.


 Download HTML code : 
https://earndone.com/AcbfgjxW
 Screenshoot:
HTML code for "Contact Us" form for Blogger/Wordpress

Friday, June 12, 2020

June 12, 2020

How To Add Page Elements to Posts Column and Blog Header

How To Add Page Elements to Posts Column and Blog Header
How To Add Page Elements to Posts Column and Blog Header
ब्लॉगर आपके ब्लॉग के साइडबार में पेज एलिमेंट्स को जोड़ने के लिए एक विधि देता है। आपको Blogger.com पर लॉग इन करना होगा और डैशबोर्ड पर लेआउट लिंक पर क्लिक करना होगा और फिर साइडबार के शीर्ष पर Page Add a Page Element ’लिंक पर क्लिक करना होगा।

हालाँकि, पोस्ट कॉलम या हैडर और ब्लॉग के footer में पृष्ठ तत्व जोड़ने की कोई विधि नहीं है। इसके लिए वर्कअराउंड है। पृष्ठ तत्वों को नए ब्लॉगर लेआउट टेम्प्लेट में widget codes द्वारा दर्शाया गया है।

 उदाहरण के लिए आपका ब्लॉग हैडर पेज एलिमेंट widget codes इस तरह दिखता है:

<b:widget id='Header1' locked='true' title='MY BLOG (Header)' type='Header'/>

आप इसे Blogger.com पर लॉगिन करके डैशबोर्ड पर लेआउट लिंक पर क्लिक कर देख सकते हैं। फिर टेम्पलेट टैब का Edit Html सबटैब पर क्लिक करें। ऊपर कोड देखने के लिए टेम्प्लेट कोड बॉक्स में नीचे स्क्रॉल करें। इस कोड को हेडर सेक्शन कोड में wrapped किया जाता है:जो इस तरह दीखता है -

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

जैसा कि आप पहली पंक्ति में देख सकते हैं कि हेडर अनुभाग में अधिकतम विजेट की संख्या एक पर सेट है। इससे हेडर में नए विजेट जोड़ना आपके लिए असंभव हो जाता है। इसके अलावा Show add element नंबर पर सेट है
header में अधिक page elements जोड़ने के लिए इस कोड को निम्न में बदलें:

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='MY BLOG (Header)' type='Header'/>
</b:section>

अधिकतम उन maxwidgets को सेट करें जिन्हें आप header सेक्शन प्लस वन में रखना चाहते हैं। इससे header में widget order को फिर से व्यवस्थित करना आसान हो जाता है। showaddelement को भी yes में बदलें। यह Layouts page  पर header में "Add Page Element" लिंक जोड़ देगा।

आप Blog Posts section code के साथ भी ऐसा कर सकते हैं:


<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Change this to as below:
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

एक maxwidgets = x कोड जोड़ें और showaddelement को yes में बदलें। टेम्प्लेट सेव करे और Template tab के Page Elements subtab पर क्लिक करें। अब आप header और Blog posts में किसी भी page Elements को जोड़ सकते हैं।footer के लिए भी ऐसा ही करें।
June 12, 2020

How To Change Blogger Favicon icon ब्लॉगर फेविकॉन को कैसे बदलें

How To Change Blogger Favicon ब्लॉगर फेविकॉन को कैसे बदलें
How To Change Blogger Favicon ब्लॉगर फेविकॉन को कैसे बदलें



फ़ेविकॉन क्या है? IE फ़ायरफ़ॉक्स या ओपेरा का उपयोग करते समय आप टैब पर एक आइकन देखेंगे जब आप किसी पृष्ठ पर जाते हैं। इसे फ़ेविकॉन कहा जाता है। लेकिन डिफ़ॉल्ट ब्लॉगस्पॉट ब्लॉगों में फ़ेविकॉन होता है जो बदसूरत दिखता है। इसे पोस्ट के शीर्ष पर देखें। इसे कैसे निकालें यह? Goto Blogger Template>Edit Html
What is a favicon? When using IE Firefox or Opera you will see an icon on the tab when you visit a page. This is called a favicon. The default Blogspot blogs have a favicon that looks ugly. See here at the top of the post. How to remove This? Goto Blogger Template>Edit Html 
 find the following  title tag which looks like

 <title>
<data;blog.pageTitle/>
</title>

and immediately after closing the tag </title>, add the code given below.

<link href='URL-OF-YOUR-FAVICON' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Remember to replace "URL-OF-YOUR-FAVICON" with your own icon file's url.
Now save your template and you done.
June 12, 2020

How To Create Scrolling Text Boxes in Blog/Wordpress स्क्रोलिंग टेक्स्ट बॉक्स कैसे बनाये

How To Create Scrolling Text Boxes in Blog/Wordpress
 How To Create Scrolling Text Boxes in Blog/Wordpress

You may want to create a scrolling text box with the code to duplicate your audience. Here's how to do it. Copy the following code into your Post Editor's HTML section:

<textarea style="WIDTH: 332px; HEIGHT: 70px" onfocus="this.select();" name="textarea" cols="14">PUT CONTENT HERE</textarea>

  it will look like the following :


If you want use background :
<textarea rows="10" cols="40" style="background:#6699ff;">PUT CONTENT HERE</textarea>

it will look like the following :

Thursday, June 11, 2020

June 11, 2020

How To Add Marquee text in Blog/Wordpress ब्लॉग / वर्डप्रेस में marquee टेक्स्ट कैसे जोड़ें

 
How To Add Marquee text in Blog/Wordpress
How To Add Marquee text in Blog/Wordpress

Marquee text useful  in web designing.To add a moving text or marquee use the codes given below :
CODE 1:
<marquee>1.ADD YOUR TEXT HERE....</marquee>
RESULT:
1.ADD YOUR TEXT HERE....
CODE 2:
<marquee direction="right">2.ADD YOUR TEXT HERE....</marquee>
RESULT:
2.ADD YOUR TEXT HERE....
CODE 3:
<marquee direction="left">3.ADD YOUR TEXT HERE....</marquee>
RESULT:
3.ADD YOUR TEXT HERE....
CODE 4:
<marquee direction="right" width="100%" style="background:#EC4F52"><font color="white">1.ADD YOUR TEXT HERE....</font></marquee>
RESULT:1.ADD YOUR TEXT HERE....
CODE 5:
<marquee direction="left" width="100%" style="background:#EC4F52"><font color="white">2.ADD YOUR TEXT HERE....</font></marquee>
RESULT: 2.ADD YOUR TEXT HERE....


Download complete HTML code of marquee text

how to add marquee text in html in blogger or wordpress