Top 5 Awesome Design Blogger Label Widget Style

Top 5 Awesome Design Blogger Label Widget Style

Top 5 Awesome Design Blogger Label Widget Style for Blogspot

Blogger Label Widget Style: इस पोस्ट मे आपको Top 5 Awesome Design Blogger Label Widget Style मिलेगी और Blogger Label Widget Style को अपने Blogger Template मे कैसे Add करना है ये भी इस पोस्ट मे बताया गया है। अगर आपने Blogger पर Free में Blog बनाया है और अपने Blog के लिए कोई Blogger Template Install भी कर लिया है लेकिन उस Blogger Template ke Lebal Widget Style को Change करना चाहते हैं इस पोस्ट को ध्यान से पढ़ना होगा और समझना होगा तभी आप Blogger Label Widget Style Change कर सकते हैं अपने Blogger Site में , नहीं तो आपका Blogger Template खराब भी हो सकता है इसके लिए पहले आप अपने Blogger Template का Backup जरूर रख लें । 

Top 5 Awesome Design Blogger Label Widget Style
Top 5 Awesome Design Blogger Label Widget Style

Stylish Blogger Label Style Design Css Code

Blogger Lebal Widget क्या है ?

दोस्तों Blogger Lebal Widget ऐसा Widget है जो आपके ब्लॉग के Article/Post में Add किए गए सभी प्रकार के lebals को एक जगह पर Show कराता है जिससे आपके Blog पर आने वाले Visiters को मालूम होता है की आपने अपने blog पर किन-किन Topic/Category पर Article लिखा है । 


Blogger Template में Blogger Lebel Widget Style को Change कैसे करे?

अपने Blogger Site के Template में Blogger Label Widget Styles को Add करने से पहले ये सुनिश्चित कर ले की आपके blog में Label/Category Add है अगर नहीं है तो आप Design पहले Label Widget को Add कर लीजिये । 

Label Widget को Add करने के लिए ये step Follow कीजिये :-

  1. Open Blogger Dashboard
  2.   Layout Tab 
  3. Click on "Add a Gadget" then select "Label" Widget (Select Cloud/List Style)

Blogger Label Style Design


अगर आपने अपने Blog में Label Widget को Add कर लिया है तो उसे अच्छा सा Design देने के लिए नीचे 5 Awesome Design Blogger Label Widget Style दिया गया है इसमे से कोई भी Blogger Label Design को Select कीजिये । 

अब इसे अपने Blogger Template में Add करने के लिए आप ये Step को Follow कीजिये -

  1.  Blogger Dashboard को Open करें 
  2. Theme पर Click करके Edit Html पर Click करें 
  3. नीचे दिये हुये किसी भी Code को Copy करें और </head> के पहले paste कर दें । 
  4. अब Save कर दें । 

Blogger Label Floating Style Design 1


Blogger Label Style Design 1


Guide Video: How to Add Blogger Label Widget Style


Blogger Label Floating Style Design 1 CSS/JavaScript Code



<!-- [www.akhelppoint.in] -->
<style type='text/css'>
#sidebar-wrapper{margin:auto;max-width:400px;}
.widget-content.cloud-label-widget-content {display:inline-block;width:100%;}
.widget-content.cloud-label-widget-content {display:inline-block;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:10px;margin:10px 10px 5px 10px}
.label-count {white-space:nowrap;display:inline-block;}
#sidebar-wrapper .Label li{position:relative;background:#FFFEFC;color:#333;padding:0px;margin:5px;text-align:left;width:97%;transition:all .8s ease-out;text-transform:none;border:1px solid #fff;box-shadow:0px 0px 1px rgba(0,0,0,0.4);}
#sidebar-wrapper .Label li:hover {color:#0074D9;transition:all 0s ease-out;}
#sidebar-wrapper .Label li:before {content:&quot;&quot;;position:absolute;width:0;height:98%;background:#4fafe9;transition:all .8s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;transition:all 0s ease-out}
#sidebar-wrapper .Label li a{padding:0 0 0 10px;display:block;position:relative;line-height:35px;color:#787878;text-decoration:none;transition:all .8s ease-out}
#sidebar-wrapper .Label li a:before {font-family: fontawesome;content: &quot;\f07c&quot;;padding-right: 10px !important;}
#sidebar-wrapper .Label li a:hover {color:#fff;transition:all 0s ease-out}
#sidebar-wrapper .Label li span{float:right;height:98%;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#CF000F;}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#961126;}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
#sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
#sidebar-wrapper .label-size a{background:#fff;display:inline-block;color:#666;padding:5px 8px;font-weight:400;border:1px solid #ccc;transition:all .3s}
#sidebar-wrapper .label-count{backface-visibility:hidden;opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-5px;right:-10px!important;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:25px;height:22px;line-height:22px;border-radius:4px;text-align:center;z-index:1;transition:all .3s}
#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;right:-15px!important}
#sidebar-wrapper .label-size a:hover{color:#666;border-color:#4fafe9}
.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
.sidebar ul {
    list-style: none;
    margin: 0;
    padding: 5px 0;
}
</style>
<script type='text/javascript'>
 (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://use.fontawesome.com/e3eb25f65e.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script> 

Blogger Label Style Design 2


Blogger Label Style Design 1 CSS

Blogger Label Style Design 2 CSS Code

<!-- [www.akhelppoint.in] -->
<style type='text/css'>
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:1}.cloud-label-widget-content{text-align:left;padding:0}.label-count{white-space:nowrap;display:inline-block}#sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;border-radius:99em;transition:all .3s}#sidebar-wrapper .label-size a{position:relative;overflow:hidden;background:#e74c3c;color:#fff;display:inline-block;padding:4px 8px;font-weight:500;border-radius:3px}#sidebar-wrapper .label-count{display:inline-block;background:#f39c12;color:#fff;padding:2px 4px;border-radius:5px;font-size:11px;text-align:center;float:right;opacity:0;visibility:hidden;transition:all .3s}#Label1 ul li:hover .label-count{opacity:1;visibility:visible}#sidebar-wrapper .label-size a:hover{background:#f36253;color:#fff;box-shadow:0 2px 0.8rem -0.8rem rgba(0,0,0,0.8),0 0 0 1px rgba(0,0,0,0.05);transition-delay:0s;}.list-label-widget-content ul{column-count:2;column-gap:8px}.list-label-widget-content ul li{list-style:none;padding-bottom:5px;margin:0;padding-top:5px;border:0;font-weight:500}.list-label-widget-content ul li::before{content:&quot;\f292&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;margin-right:6px;color:#f39c12}.list-label-widget-content ul li:hover::before{content:&quot;\f0a4&quot;;color:#222;margin-right:6px}.list-label-widget-content ul li a{color:#222}.list-label-widget-content ul li a:hover{color:#222}.Night .list-label-widget-content ul li a:hover{color:#fff}
</style>  


Blogger Label Cloud Style Design 3 

Blogger Label Cloud Style Design 3 CSS Code


Blogger Label Cloud Style Design 3 CSS Code


<!-- [www.akhelppoint.in] -->
<style type='text/css'>
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
background:#0dd7b4;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#333333;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}</style>  

Blogger Label Cloud Style Design 4


Blogger Label Cloud Style Design 3


Blogger Label Cloud Style Design 3 CSS Code

<!-- [www.akhelppoint.in] -->
<style type='text/css'>
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border-radius:30px;
background:#FA0830;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
border-radius:30px;
background:#333333;
}
.label-count {
white-space:nowrap;
border-radius:30px;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}
</style>  

Blogger Label Cloud Style Design 5


Blogger Label Cloud Style Design 3 CSS Code


Blogger Label Cloud Style Design 5 CSS Code



<!-- [www.akhelppoint.in] -->
<style type='text/css'>
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border:5px dashed #000000;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
background:#FA0830;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
border:5px dashed #FA0830;
background:#000000;
}
.label-count {
white-space:nowrap;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}
</style> 

Where are Uploaded Images on Blogger Stored?

Where are Uploaded Images on Blogger Stored?

Where are Uploaded Images on Blogger Stored?


Hello Blogger Friends, Wherever you, I hope you are doing well. Do you want to know where the uploaded images are stored on your blogger site, so this time I am going to tell you all where are the uploaded images stored on the blogger site?

Where are Uploaded Images on Blogger Stored



Where are Uploaded Images on Blogger Stored?

To know where uploaded images are stored on your blogger First, make sure you are logged into your Google account in your browser.

Open the link below and use the same Gmail id as your blogger account to log in.


https://get.google.com/albumarchive/ 

Then a page like this will appear and select Photos from Blogger

Where are Uploaded Images on Blogger Stored?

Then it will bring up a row of Photo albums from Blogger from each blog that you create.

Where are Uploaded Images on Blogger Stored?


If you want to download photo albums from certain blogs, please click the button with the three-dot icon then click Download Album.

Where are Uploaded Images on Blogger Stored?


Please be careful, if you delete one of the photos that are in the photo album it will automatically delete the photos that are already in your blog post. Because the album serves as a place to store photo files that you previously uploaded on blogger.

 

Where are Uploaded Videos on Blogger Stored?


Then, what about where the uploaded video is stored? for videos here you can see through the Setting Menu >>  click the Videos from your blog Button.



Where are Uploaded Videos on Blogger Stored?




Conclusion:

Now you have learned Where are Uploaded Images on Blogger Stored, If you have any doubt regarding Blogger, you can ask me in the comment section or join our Telegram Channel


Download Eid Mubarak Wishing WhatsApp Viral Script 2021 for Blogger

Download Eid Mubarak Wishing WhatsApp Viral Script 2021 for Blogger

 Download Eid Mubarak Wishing WhatsApp Viral Script 2021 for Blogger

हेलो ब्लॉगर! इस पोस्ट में ईद मुबारक बात अपने दोस्तों को देने के लिए Best WhatsApp Viral Script Downlaod 2021 देने वाला हूं और मैं यह भी बताऊंगा की इस Eid Mubarak Wishing Script Download कैसे करना है और अपने Blogger Site में कैसे Install करना है और ये भी बताएंगे की आप इस Eid Mubarak Wishing WhatsApp Viral Script 2021 से बहुत सारे पैसे कैसे कम सकतें हैं। तो चलिए जानते हैं Eid Mubarak WhatsApp Viral Wishing Site Blogger पर कैसे बनाते हैं।


Eid Mubarak 2021 WhatsApp Viral Scrip Download and Install

Eid Mubarak 2021 WhatsApp Viral Scrip Download and Install
Eid Mubarak 2021 WhatsApp Viral Scrip Download and Install


Eid Mubarak WhatsApp Viral Wishing Site क्यों बनाए?

दोस्तों अगर आपके मन में ये सवाल उठ रहा है की Eid Mubarak WhatsApp Wishing Site क्यों बनाए इस WhatsApp Viral Site बनाने से क्या फायदा है तो मैं आपको बता दूं कि ईद के festival पर  सभी मुस्लिम लोग नए नए कपड़े पहनते हैं मिठाईयां बांटते है एक दूसरे को को मुबारक बात देते हैं और सभी कोई चाहते हैं की वो अपने को एक नए तरीके से Eid Mubarak Wish करे और आप जानते है की आजकल सबकुछ digital होते जा रहे हैं तो Eid Mubarak Wish भी Digital तरीके से जरूर करना चाहेंगे। और आप एक Blogger हैं तो आप इस अवसर का फायदा उठा सकते हैं और बहुत सारे पैसे कमा सकते है Eid Mubarak WhatsApp Viral Wishing Site बनाकर वो भी फ्री में। बस आपको हमारे इस पोस्ट पर बताए गए Steps को Follow करना है


Eid Mubarak WhatsApp Viral Wishing Site से पैसे कैसे कमाएं?

दोस्तों Eid WhatsApp Viral Wishing Website से पैसे कमाना चाहते हैं तो आप उस Eid WhatsApp Viral Wishing Script में Adsense का ad लगाकर पैसे कमा सकते है और अगर आपके पास adsense Approval Site नहीं है तो आप amazon के product को Affliate कर बहुत से पैसे अर्न कर सकते हैं।


Eid Mubarak WhatsApp Viral Wishing Site Free कैसे बनाए?

Eid Mubarak WhatsApp Viral Wishing Website Free में बनाने लिए आप ये Steps को Follow कीजिए।


  1. Blogger.com पर जाएं और Sign Up कीजिए
  2. New Blog बनाए
  3. अब Blogger के Dashboard में Theme पर कीजिए।
  4. swich to first generation classic theme पर Click कीजिए।
  5. अब Edit Html पर Click कीजिए।
  6. नीचे दिए गए Eid Mubarak 2021 WhatsApp Viral Wishing Script Download कर लीजिए।
  7. इस Code को Notepad में Open कीजिए और Code Copy कर लीजिए।
  8. अब Blogger के इस Html Box में पहले वाले Code को Remove कर के इसे Paste कर दीजिए।
  9. अब इस Code में जहां Below AdSense Code Here (Link ads) वाले Code के नीचे अपने किसी Ad के Code को Paste कर दीजिए।
  10. Footer में WhatsApp Share वाले Link में अपने Site का Link Add कर दिजिए।
  11. अब Save कर दीजिए।

Eid Mubarak 2021 WhatsApp Viral Wishing Script Download










How to Add Progress Loading Bar in Blogger Website.

How to Add Progress Loading Bar in Blogger Website.

 How to Add Progress Loading Bar in Blogger Website.


Hey guys! Hope you are doing well. This topic actually not very important, but if your goal is to make the site look better and look beautiful, it's okay to use these tips. So let's know How to Add Progress Loading Scrollbar on Blogger.

How to Add Progress Loading Bar in Blogger Website.



How to Add Progress Scrollbar on Blogger Site
How to Add Progress Scrollbar on Blogger Site


What is a Progress Loading Bar?

As is the case with the progress bar when we copy and paste files on a computer or smartphone, during the copy-paste process it will usually display a progress bar of time it takes to copy the file from the copied folder to another folder. Similar to the Progress Scrollbar on Blogger, Which will Display a horizontal line on the blog page, When we scroll the page it will display a horizontal line and the length of the line will extend to where the page is scrolled.

How to Add Progress Loading Bar in Blogger Website.?

For those, of you who are interested in adding it, So you can follow these tips below.


  • Open Blogger dashboard
  • Click Theme Menu
  • Click on Edit HTML
  • Click in the Box and Search </body>
  • Add this code before </body>


<script type='text/javascript'>
//<![CDATA[
// Progress Scrollbar
$(document).ready(function(){var n=function(){return $(document).height()-$(window).height()},o=function(){return $(window).scrollTop()};if("max"in document.createElement("progress")){(r=$("progress")).attr({max:n()}),$(document).on("scroll",function(){r.attr({value:o()})}),$(window).resize(function(){r.attr({max:n(),value:o()})})}else{var e,t,r=$(".progress-bar"),i=n(),c=function(){r.css({width:(e=o(),t=e/i*100,t+="%")})};$(document).on("scroll",c),$(window).on("resize",function(){i=n(),c()})}});
//]]>
</script>

Next, add this code below the code <body>


<progress value='0' max='1'>
   <div class='progress-container'>
      <span class='progress-bar'></span>    
   </div>
</progress> 

Next add this code before </head>


<style type='text/css'>
/* Progress Scrollbar */
progress{position:fixed;left:0;top:0;width:100%;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#f39c12;z-index:1000}
progress::-webkit-progress-bar{background-color:transparent;z-index:10}
progress::-webkit-progress-value{background-color:#ff0065;z-index:10}
progress::-moz-progress-bar{background-color:#ff0065;z-index:10}
.progress-container{width:100%;background-color:transparent;position:fixed;top:0;left:0;height:3px;display:block;z-index:10}
.progress-bar{background-color:#ff0065;width:0%;display:block;height:inherit;z-index:10}
</style> 

Edit on the marked section to change the color, position, and height of the Progress Scrollbar.

Click the Save Theme button and you're done! To see the results can be checked on your blog.



Conclusion:

Now you have learned How to Add Progress Loading bar in Blogger. If you have any doubt regarding Blogger, you can ask me in the comment section or Join our Telegram Channel.

How to Install Newsticker Widget on Blogger Template

How to Install Newsticker Widget on Blogger Template

How to Install Newsticker Widget on Blogger Template

How to Install Newsticker Widget on Blogger Template
How to Install Newsticker Widget on Blogger Template


How to Install Newsticker Widget on Blogger Template


Hey Guys! I hope you are doing well. If you want to know that How to Install Newsticker Widget on Blogger. So this time Aviraz will share tips on How to Install a Newsticker Widget on Blogger.

The main function of its widget is to display a list of some of the latest articles with animated slides, almost the same as the recent post widget, but which is displayed only in the form of the post title.

Okay, go ahead. The following are the steps on How to Install a Newsticker Widgets on Blogger.

How to Install Newsticker Widget on Blogger

  • First open Blogger Dashboard
  • Click on Theme Menu
  • Click on the Edit HTML Button
  • Search </head> tag
  • Then add this CSS code before </head>

<style type='text/css'>
/* Breaking News */
#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin:20px auto 0 auto;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba(0,0,0,0.1)}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size:13px;padding:0}#breakingnews .tulisbreaking{background:#e74c3c;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height:28px;float:left;margin:7px 14px 0 7px;text-align:center;border-radius:3px}#recentbreaking{float:left;margin:0;font-size:13px;color:#222;font-weight:600}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:0 10px 0 0}
@media screen and (max-width:768px) {
#breakingwrapper{background-color:#e74c3c;color:#fff;margin:10px auto 20px auto;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}
</style>

Next, add the code below just before </body>



<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://www.akhelppoint.in",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&amp;max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})}var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><i class="fa fa-check-square"></i><a href="'+n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function(){t()},5e3)}else $("#recentbreaking").html("<span>There nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script> 


Replace the code marked with your blog URL and replace the number 10 according to the number of posts you want to Display.

Well, then add the code below freely anywhere as long as it's still in the body between <body> and </body> tag as in the previous post.




<div class="container">
  <div id='breakingwrapper'>
   <div id='breakingnews'>
     <span class='tulisbreaking'>News Update</span>
      <div id='recentbreaking'>Loading...</div>
      <div class='blog-date'>
         <script language='Javascript'>
            var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
            var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
            var now = new Date();
            document.write("" + " " + dayName[now.getDay()] + "," + " " + now.getDate() + " " + monName[now.getMonth()] + "");
         </script>
      </div>
   </div>
</div>
</div>  


After that click the Save Theme Button and Installed Newsticker Widget on Your Blogger Site.

Guide Video in Hindi: 

How to Install Newsticker Widget on Blogger Theme in Hindi




Please see the results on your blog.

Conclusion:

Now you have learned how to install Newsticker Widget on blogger template. If you have any doubt regarding Blogger, you can ask me in the comment section or join our Telegram Channel

5 Best Stylish Sliders Demo and Download Button for Blogger Post

5 Best Stylish Sliders Demo and Download Button for Blogger Post

 5 Best Stylish Sliders Demo and Download Button for Blogger Post


हैलो दोस्तों! स्वागत है akHelpPoint.IN ब्लॉग में । 

अगर आप अपने Blogger Site के Template में Stylish Sliders Demo and Download Button Add कैसे करते हैं जानना चाहते हैं तो आप इस पोस्ट को शुरू से अंत तक जरूर पढ़ें क्योकि मैंने इस पोस्ट में Blogger में Stylish Demo/Download button कैसे लागतें हैं पूरा Details से बताया गया है और इस पोस्ट के द्वारा आपको 5 Best Stylish Sliders Demo and Download Button in Blogger आपको अपने ब्लॉगर के Website में Add करने के लिए दिया गया है । 

तो चलिये जानतें हैं How to Add Stylish Slider Demo and Download Button for Blogger हिन्दी में । 

5 Best Stylish Sliders Demo and Download Button
5 Best Stylish Sliders Demo and Download Button


How to Add Stylish Slider Demo and Download Button for Blogger Site


Stylish Demo and Download Button Blogger में क्यों Add करें । 

दोस्तो आपलोग समझते होंगे की आजकल का ये Digital जमाना धीरे धीरे Fast होता जा रहा है और लोग किसी भी काम को बहुत कम Time में पूरा करना चाहते है । 

जब कोई Visiter हमारे ब्लॉग पर जिसके लिए आता है और अगर वो उसे न मिल पाये तो वह Skip कर के किसी दूसरे साइट में देखने लगता है जिसके वजह से हमारी Blog का Bounce Rate बढ़ने लगता है , Page Authority नहीं बढ़ पाती है Earning कम होने लगती है इसलिये  हमारा Blog और Blog का Page Attractive दिखना भी बहुत जरूरी है।


अगर आप अपने Blog में कुछ ऐसा Post लिख रहें हैं जैसे Template Download, Script Download, Movies Download, या कोई और File Download तो ऐसे पोस्ट में हमे Demo or Download का Link Add करना पड़ता है ।

ऐसे में अगर हम Direct Text में Link Add करें तो अच्छा नहीं दिखता है और हमारे visiters को जल्द नजर नहीं आ पाता है।


इसलिए हमे अपने पोस्ट को Attractive बनाने के लिए Stylish Demo and Download Button Blogger में Add करना चाहिए।

तो आज के इस पोस्ट में ऐसे ही 5 Stylish Demo and Download Button Code Blogger Site में add करने के लिए लाया हूं तो इस पोस्ट को ध्यान से शुरू से अंत तक समझिए ।


Blogger Post me Stylish Demo And Download Button Kaise Lagaye?

Blogger Post में Stylish Demo और Download Button को लगाना चाहते हैं तो आपको नीचे Box में Code दिए हुए हैं और उसका View Style Image Screenshot भी दिया गया है। 

Code Box 1 में HTMLCode हैं और Box 2 में CSS/JavaScript Code है

आपको नीचे दिए गए Style मे से कोई एक Style को चुनिये : 

Stylish Slider Demo/Download Button 1 HTML Code

<!-- [Demo and Download button by www.akhelppoint.com] --->
<div class="container">
  <h2>Demo and Download button</h2>
<div style="text-align: center;">
  <ul class="button">
    <li><a class="demo" href="#" target="_blank">Demo</a></li>
    <li><a class="download" href="#" target="_blank">Download</a></li>
  </ul>
</div>

Stylish Slider Demo/Download Button 1 CSS Code

<!-- CSS by www.akhelppoint.com -->
<style>
@import url(https://fonts.googleapis.com/css?family=Open + Sans:400, 700);
a:link {
  text-decoration: none;
  outline: none;
  transition: all 0.25s;
}

a:visited,
a:link:hover,
a:visited:hover {
  text-decoration: none;
}

body {
  background: #eee none repeat scroll top left;
  color: #444;
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}

.container {
  background: #fff;
  max-width: 320px;
  margin: 4% auto;
  padding: 20px;
  font-family: "Open Sans", sans-serif;
  border-radius: 5px;
  overflow: hidden;
}

.container h2 {
  background: #fff;
  position: relative;
  overflow: hidden;
  margin: 0 0 20px 0;
  font-size: 0.8em;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  vertical-align: middle;
  padding: 0 12px 20px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.button {
  float: left;
  list-style: none;
  text-align: center;
  width: 95%;
  margin: 10px;
  padding: 2px;
  font-size: 14px;
  clear: both;
}

.button ul {
  margin: 0;
  padding: 0;
}

.button li {
  display: inline;
  margin: 5px;
  padding: 0;
  list-style: none;
}

.button li a.demo,
.button li a.download {
  position: relative;
  padding: 9px 48px 9px 16px;
  background: #f39c12;
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 3px;
  box-shadow: 0 1px rgba(0, 0, 0, 0.1);
  line-height: normal;
  transition: all 0.3s;
}

.button li a.download {
  background: #3498db;
}

.button li a.demo:hover,
.button li a.download:hover {
  background: #666;
}

.button li a.demo:active,
.button li a.download:active {
  cursor: pointer;
}

.button li a.demo:after,
.button li a.download:after {
  content: "\f135";
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  right: 0;
  top: 0;
  font-weight: normal;
  display: inline-block;
  margin: 0 0 0 10px;
  color: #fff;
  padding: 11px;
  font-family: fontawesome;
}

.button li a.download:after {
  content: "\f019";
}
</style>

Demo/Download Button image 1
Demo/Download Button 1 image 
   

Stylish Slider Demo and Download Button Html Code 2 

<!-- [Demo and Download button by www.akhelppoint.com] --->
<div id="btnripplebsd">
  <a class="bsdripplebtn btnone ripple-effect-bsd" href="#0">DEMO</a>
  <a class="bsdripplebtn btntwo ripple-effect-bsd" href='#0'>DOWNLOAD</a>
</div> 

Stylish Slider Demo and Download Button CSS/JavaScript Code 2 



<!-- CSS by www.akhelppoint.com -->
<style>
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');

body {
  background: #ecf0f1;
  font-family: 'Fira Sans Condensed', sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 30vh auto 0 auto;
}
/* Bloggersstand Material Design Ripple Effect Buttons */
#btnripplebsd{margin:19px auto;text-align:center}
#btnripplebsd a{text-decoration:none}
.bsdripplebtn{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.6em;border-radius:4px;color:rgba(255,255,255,0.7);font-weight:400;padding:19px 24px;margin:0 14px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s}
.bsdripplebtn:hover,.bsdripplebtn:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.bsdripplebtn.btnone{background:#33ccff}
.bsdripplebtn.btntwo{background:#ff3333}
.bsdripplebtn.btnone:hover,.bsdripplebtn.btnone:active{background:#4dd2ff}
.bsdripplebtn.btntwo:hover,.bsdripplebtn.btntwo:active{background:#ff4d4d}
svg{position:absolute;top:0;left:0;width:100%;height:100%}
circle{fill:rgba(255,255,255,0.06)}
.ripple-effect-bsd{position:relative;overflow:hidden;-webkit-transform:translatez(0)}
.bsdeffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.4}
.bsdeffect.animate{animation:ripple-effect-bsd 0.4s linear}
@keyframes ripple-effect-bsd{100%{opacity:0;transform:scale(2.4)}}
@-webkit-keyframes ripple-effect-bsd{100%{opacity:0;transform:scale(2.4)}}
*/
</style>
<!-- JavaScript by www.akhelppoint.com -->
<sript>
//<![CDATA[
!function(a){a(".ripple-effect-bsd").click(function(b){var c=a(this);0===c.find(".bsdeffect").length&&c.append("<span class='bsdeffect'></span>");var d=c.find(".bsdeffect");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery);
//]]>
</sript>
Demo and Download Button Image 2
Demo and Download Button Image 2


Stylish Slider Demo and Download Button Html Code 3 



<!-- [Demo and Download button by www.akhelppoint.com] --->
<!-- HTML -->
<div class="whitebuttondemo">
<a href="#" target="_blank">Demo</a><br>
<span class="up">click to view</span></div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">Download</a><br>
<span class="up">click to begin</span><br>
<span class="down">2.5MB .rar</span></div> 

Stylish Slider Demo and Download Button CSS Code 3


<!-- CSS by www.akhelppoint.com -->
<style>
.whitebutton {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebutton a {
    background: #3CC091;
    color: #fff;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Arial',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
}

.whitebutton a:before {
    content: '\f019';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebutton span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebutton .up {
    background: #e25734;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down {
    margin: -30px auto;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down:before {
    content:'\f14a';
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 6px;
    color: #aaa;
}

.whitebutton:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

.whitebutton:hover .down {
    opacity: 1;
    transform: translate(0,-90px);
}

.whitebuttondemo {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebuttondemo a {
    background: #e25734;
    color: #fff;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family:'Arial',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
    transition: 350ms;
}

.whitebuttondemo a:before {
    content:'\f002';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebuttondemo a:hover {
    color: #fff;
}

.whitebuttondemo span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebuttondemo .up {
    background: #444;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebuttondemo:hover .up {
    opacity: 1;
    transform: translate(0,0);
}
</style>

Stylish Slider Demo and Download Button image 3
Stylish Slider Demo and Download Button image 3



Stylish Slider Demo and Download Button Html Code 4 


<!-- Demo and Download Button by www.akhelppoint.in -->

<div id="wrap">
<a href="#" class="btn-slide">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a href="#" class="btn-slide2">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>
Stylish Slider Demo and Download Button CSS Code 4 


<!-- CSS by www.akhelppoint.in -->
<style>
body {
    margin: 50px;
    font-family: helvetica, sans-serif;
    background: #e9f0f4;
}

#wrap {
    margin: 20px auto;
    text-align: center;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
  }

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
} 
</style> 
Stylish Slider Demo and Download Button image 4
Stylish Slider Demo and Download Button image 4


Stylish Slider Demo and Download Button Html Code 5



<!-- Demoand Download Button Code by www.akhelppoint.in -->

</div>
<div class="whitebuttondemo" style="text-align: right;">
<a href="#">demo</a>&nbsp;<span class="up">name</span></div>
<span style="font-size: x-large;"></span><br />
<div class="whitebutton" style="text-align: right;">
<a href="#">Download</a>&nbsp;<span class="up">name</span>&nbsp;<span class="down">name</span><br />
</div>
</div>

Stylish Slider Demo and Download Button CSS Code 5



<!-- Css code By www.akhelppoint.in -->
<style>
.whitebutton {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebutton a {
    background: #fff;
    color: #666;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Arial',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
}

.whitebutton a:before {
    content: '\f019';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebutton span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebutton .up {
    background: #e25734;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down {
    margin: -30px auto;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down:before {
    content:'\f14a';
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 6px;
    color: #aaa;
}

.whitebutton:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

.whitebutton:hover .down {
    opacity: 1;
    transform: translate(0,-90px);
}

.whitebuttondemo {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.whitebuttondemo a {
    background: #e25734;
    color: #fff;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family:'Arial',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
    transition: 350ms;
}

.whitebuttondemo a:before {
    content:'\f002';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 8px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebuttondemo a:hover {
    color: #fff;
}

.whitebuttondemo span {
    background: #444;
    color: #fff;
    display: block;
    font-size: 12px;
    font-family: 'Arial', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
    font-weight: bold;
}

.whitebuttondemo .up {
    background: #444;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebuttondemo:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

</style>
Stylish Slider Demo and Download Button Image 5
Stylish Slider Demo and Download Button Image 5



Demo and Download Button को अपने Blogger Post में कैसे Show कराएं?


अगर आप ऊपर दिये गए Stylish Slider Demo and Download Button Style को Select कर लिया है तो अब आपको नीचे दिये गए steps को Follow करना है : 


  1. Blogger के Dashboard open करें >>Theme पर Click करके Edit Html पर Click करें । 
  2. Edit Html Box में कहीं पर Click करके </head> tag को Search करें । 
  3. अब इस Post में आपने जो Stlye Select किया है उसका Second वाला Code Box मे CSS/JavaScript Code है इसे Copy कर लें । 
  4. अब Copied Code को </head> Tag के पहले Paste करके Save कर दें । 
  5. अब आपको Post लिखना है या Edit करना है । इसके लिए Post को Edit Post पर Click करना है । 
  6. अब पोस्ट को Edit Html View मे open करना है और उस Position पर click कर के Space/Enter Press करना है जहां पर आप Demo / Download Button को Show करना चाहते हैं । 
  7. फिर उपर पहला Code में Html Code है इसे Copy करना है और वहाँ Paste कर देना है । 
  8. आपको उपर के सभी HTML Code में Url की जगह # लिखा हुआ है वहाँ पर आपको अपने Site के Demo और Download Url को Enter करना है । 
  9. अब आपको Post को Publish/Update करना है । 
  10. अब अपने पोस्ट को View कर के देख सकतें हैं आपके Post में Demo and Download Button Show होने लगा होगा । 

Guide Video: How to add Stylish Slider Demo and Download Button


  

How to Add Adsense  Responsive Sticky Ad in Footer, Left and Right on Blogger

How to Add Adsense Responsive Sticky Ad in Footer, Left and Right on Blogger

How to Add Adsense  Responsive Sticky Ad in Footer, Left and Right on Blogger

Blogger Site Me Responsive Sticky Ad Kaise Lagaye?
Blogger Site Me Responsive Sticky Ad Kaise Lagaye?


Blogger Site Me Responsive Sticky Ad Kaise Lagaye?

Hello Friends! स्वागत है akHelpPoint.in ब्लॉग में । दोस्तों अगर आप एक ब्लॉगर हैं और अपने ब्लॉग में Adsense या किसी अन्य Ad Network का Ad लगा के रखा है तो आप जरूर चाहेंगे की आपकी Earning Increase हो। इस पोस्ट में आपलोग को अपनी ब्लॉग से Earning बढ़ाने का एक और तरीका है जो है अपने ब्लॉग में Sticky Ad लगाना। तो आज इस पोस्ट में जानेंगे की Sticky Ad क्या होता है? अपने Blog में Sticky Ad लगाने से क्या फायदा है? और आप अपने Blog में Sticky Ad को कैसे Add कर सकतें हैं? तो चलिए शुरू करते हैं।


Sticky Ad क्या होता है? और इससे क्या फायदा है?

दोस्तों Sticky Ad आपके मोबाइल या कंप्यूटर में खोले गए किसी Website के Header या Footer या Left, Right में Show होता है, Sticky Ad Open हुए Web Page को Scroll करने पर भी Show होता है जिससे Visiters को Sticky ad पर ज्यादा ध्यान पड़ता है और ad पर Click  होने की Chances बढ़ जाती है और इससे आपका Earning भी बढ़ जाएगी। Sticky ad तभी हटता है जब इसके Close वाले छोटे Icon पर click किया जाता है।  अब आपलोग समझ गए होंगे की Sticky Ad क्या होता है ? और Sticky ad लगाने से क्या फायदा है? अब चलिए जानते हैं Blogger site में Sticky ad कैसे लगाते हैं।



Blogger के Left, Right में Sticky Ad लगाने से क्या फायदा हैं?

बहुत सारे Blog  और Website में आप देखें होंगे की उसके left Side और Right Side में Ad show जो Scrolling के बाद भी दिखता है , ये ad ज्यादा आपको बड़े बड़े blog या Website पर देखने को मिलता है जैसे News Site. अगर आपके Blogger Template के साइड में Space रहता है तो आप अपने blogger Site के Left, Right में Sticky Ad लगा सकते हैं इससे आपकी template अच्छी दिखेगी और आपकी Earning भी Increase होगी।


Blogger के Left, Right Side में Sticky Ad कैसे लगाएँ?

अगर आप अपने ब्लॉगर ब्लॉग के Left और Right Side मे Sticky Ad को लगाना चाहते हैं तो नीचे बताए गए Step को Follow कीजिये । 

Step.1

  • Blogger.Com मे Login कीजिये। 
  • Theme पर Click करके Edit Html को Open करे। 
  • अब नीचे दिये गए CSS Code को Copy करके </Head> को ढूँढ कर इसके पहले Paste कर करके Save दें ।


<style scoped='' type='text/css'>
.fixed-leftSd,.fixed-rightSd{position:fixed;top:60px;width:160px;height:600px;z-index:9999;transform:translateZ(0)}
.fixed-leftSd{left:0}
.fixed-rightSd{right:0}
.close-fixedSd{position:absolute;width:160px;height:15px;line-height:15px;font-size:11px;font-weight:400;top:-15px;left:0;text-align:center;background:#e0e0e0;color:#666;padding:5px 0;cursor:pointer}
@media screen and (max-width:800px){.fixed-leftSd,.fixed-rightSd{display:none;visibility:hidden;}}
</style> 

Step.2


अब नीचे दिये गए Code Copy कीजये और Layout मे जाकर कहीं भी Add a Gadget पर Click करके HTML/JavaScrip पर Click करके Code Box मे Paste करना है।


<!-- www.akhelppoint.in -->
<div class="fixed-leftSd">
<div aria-label="Close Ads" class="close-fixedSd" role="button" tabindex="0" onclick="this.parentElement.style.display=&quot;none&quot;">
<b>Close</b>
</div>
<----Enter Ads Code----> Display Ads Responsive Verticle
</div>
<div class="fixed-rightSd">
<div aria-label="Close Ads" class="close-fixedSd" role="button" tabindex="0" onclick="this.parentElement.style.display=&quot;none&quot;">
<b>Close</b>
</div>
<----Enter Ads Code----> Display Ads Responsive Verticle
</div> 

<-------- Enter Ads Code -------> Display Ads Responsive Verticle दोनों को Remove करके आपको यहा पर अपने Adsense का Display Ads Responsive Verticle Ad के Code को Copy करके Paste कर देना है और Save कर देना है 



अब आप अपने साइट को Open कर के देख सकते हैं आपके Blog के Left और Right Side में Sticky Ad Show होने लगेगा । 




यह भी पढ़िये :



Blogger के Footer में Sticky Responsive Ad कैसे लगातें हैं?


दोस्तों Blogger के साइट के Footer में Sticky Ad को लगाना बहुत ही आसान है बस आपको नीचे दिये गए कुछ Steps को Follow करना है । अगर आपको और अच्छी तरह से समझना है तो आप नीचे दिये गए विडियो को देख सकते हैं । 

Step.1


  • Blogger.Com मे Login कीजिये। 
  • Theme पर Click करके Edit Html को Open करे। 
  • अब नीचे दिये गए CSS Code को Copy करके </Head> को ढूँढ कर इसके पहले Paste कर करके Save दें ।



<!-- Footer Sticky Ad by akHelpPoint.in -->
<style>.AT-ads{position:fixed;bottom:0;left:0;width:100%;min-height:70px;max-height:200px;padding:5px 0;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1);-webkit-transition:all .1s ease-in;transition:all .1s ease-in;display:flex;align-items:center;justify-content:center;background-color:#fefefe;z-index:20}
.AT-ads-close{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:12px 0 0;position:absolute;right:0;top:-30px;background-color:#fefefe;box-shadow:0 -6px 18px 0 rgba(9,32,76,.08)}
.AT-ads .AT-ads-close svg{width:22px;height:22px;fill:#000}
.AT-ads .AT-ads-content{overflow:hidden;display:block;position:relative;height:70px;width:100%;margin-right:10px;margin-left:10px}
</style>

Step.2

अब नीचे दिये गए Code को Edit Html मे </body> के पहले Paste कीजिये

<div class='AT-ads jhfdiuh0' id='AT-ads'>
<div class='AT-ads-close' onclick='document.getElementById(&quot;AT-ads&quot;).style.display=&quot;none&quot;'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>

<div class='AT-ads-content'>

<ins class="adsbygoogle"
     style="display:inline-block;height:70px;width:100%;line-height:70px;"
     data-ad-client="ca-pub-xxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxx"></ins><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>

  </div>
  

 अब ऊपर  Code मे जो ca-pub-xxxxxxxxxxx और xxxxxxxxxxx को Color किया गया है वहाँ पर अपने Adsense Account के किसी Display ads के Number  से Replace कर दीजिये । उसके बाद Save कर दीजिये। 

अब अपना Blogger Site को Reload या Open कर के देखिये । 
आपके Blogger Site में Responsive Sticky Ads Footer मे Show होने लगेगा । 

अधिक जानकारी के लिए आप इस विडियो को देख सकते हैं और Blog से जुड़ी जानकारी पाने के लिए हमारे Channel को Subscribe भी करे सकते हैं । 

How to add Responsive Sticky Ad in Botton/Footer on Blogger





यह भी पढ़िये :


Conclusion :

इस पोस्ट मे आपने जाना की आप अपने Blogger में Responsive Sticy Ad Left and Right Side मे कैसे लगा सकते हैं और Blogger में Responsive Sticy Ad Footer मे कैसे लगा सकते हैं अगर अभी भी आपको अपने Blogger Site में Sticky Ad Add करने मे परेशानी का सामना करना पद रह हो तो आप विडियो को देख लीजिये या फिर नीचे comment box मे comment कीजिये आपके कमेंट का जल्द से जल्द Reply करने की कोशिश करूंगा । और अगर आपको ये पोस्ट अछि लगी तो Share जरूर कीजिएगा । Thank You.

Blogger Post में Add करें Automatic Create Table of Contents (TOC)

Blogger Post में Add करें Automatic Create Table of Contents (TOC)

 Blogger Post में Add करें Automatic Create Table of Contents (TOC)

Automatically Create Table of Contents in Blogger Post in Hindi: आज इस पोस्ट मे मैं आप लोगों को बताने वाला हूँ की आप अपने Blogger Post में Automatic Table of Contents कैसे Add करेंगे। 

Blogger Post में Add करें Best Automatic Table of Contents
Blogger Post में Add करें Best Automatic Table of Contents


How to Add Automatically Create Table of Contents in Blogger

अगर आप एक ब्लॉगर हैं तो आपको Table of Contents के बारे मे जरूर मालूम होना चाहिए तो इस पोस्ट मे मैं आपलोगो को Table Of Contents से जुड़ी ज्यादा पुछे जाने वाले प्रश्न के उत्तर भी जानेंगे जैसे - Table of Contents क्या होता है? , इसके क्या फायदे हैं ? , इसे अपने ब्लॉगर के पोस्ट मे कैसे Implement करते हैं ?


अगर आप अपने Blogger Article मे Table of Contents को Add करतें हैं तो इससे आपको और आपके पोस्ट पर आने वाले Visiters दोनों को फायदा होने वाला है क्योकि Blogger Post के Article मे Table of Contents को Add करेंगे तो Short या Long post मे Reader को मालूम हो जाता है की आपके पोस्ट मे कौन कौन से Topic पर Article लिखी हुई है और उन्हे उनके अनुसार उस topic तक पहुँचने मे आसानी होती है। 

Table of Contents (TOC) क्या होता है ?

दोस्तों Table of Contents (TOC) किसी Article मे लिखी गयी सभी Topics का एक Summarized Overview होता है । Table of Contents को Short मे TOC कहा जाता है । 

Table of Contents आपके पोस्ट मे दिये गए Major Heading(H1), Heading(H2) Subheading(H3), Minor Heading(H4) को Target करता है और आप जिस जगह पर Table of Contents को Set करते हैं वहाँ इसी के कारण Show होता हैं इसलिए अपने पोस्ट के Heading, Subheading Minor Heading को ठीक तरह से लिखा करें ।


Table of Contents Add करने से क्या फायदा है ?

आप बहुत सारे Hits Blogger के Post मे Table of Contents देखने के लिए मिला होगा आप मैं इस पोस्ट मे इसके बहुत सारे फायदे के बारे मे बता रहा हूँ 

Table of Contents Add करने के फायदे :-

  • आपके  Blog की SEO Improve होता है।
  • Search Engine मे Ranking में भी फायदा होता है।
  • Search Engine में Post के Title के साथ-साथ Headings और Subheadings भी Rank करता है।
  • Post में जिस Topic को पढ़ना चाहते है, TOC के मदद से सीधे उस Topic पर जा सकते हैं।
  • आपके Post को आसानी से Navigate किया जा सकता है।
  • Visiters को Post पढ़ने में सरल और आसान बनाता है।
  • Visiters को एक अच्छा User Experience देता है।
  • इसके Structure Overview से Articles और ज्यादा Professional और Attractive दिखता है।


Blogger Post में Automatic Table of Contents कैसे लगाएँ ?

आपको अपने Blog के post मे Automatic Table of Contents add करने से पहले आपको अपने Blogger Template मे कुछ Code को add करना होगा इसके लिए आपको Html की Basic Knowledge है तभी आप कर सकते हैं 

अब हम नीचे जो Steps बताएं हैं उन्हे Follow किजिये :-

Step.1

  • Blogger मे Login कीजिये 
  • Theme पर Click कीजिये 
  • Theme का Backup ले लें ताकि अगर आपसे editting के समय कोई दिक्कत हो जाए तो आप उस Backup Theme से वापस Theme को Fix कर सकते हैं । 
  • अब Edit Html पर Click करना है । 

Blogger Post में Add करें Best Automatic Table of Contents


Step.2

  • अब जो आपके सामने Edit HTML Box खुला है उसमे कहीं पर Click कीजिये ।
  • अगर आप PC/Computer से कर रहे हैं तो Keyboard मे Ctrl+F Press करना है और अगर मोबाइल का use कर रहे हैं तो आपको Manually Code पहचान कर Add करना होगा या फिर QuickEdit App को Install करके Downloaded Theme को Edit करके Upload करना होगा । 
  • अब नीचे दिये गए Code को </head> से पहले Paste करना है 

Blogger Post में Add करें Best Automatic Table of Contents


Paste this Code before </Head> tag


<style>
/* TOC by AHP (akhelppoint.in) */
.table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:14px;padding:11px;margin:8px 0 30px 0}
.table-of-contents li{margin:0 0 0.25em 0}
.table-of-contents a{color:#2a5365}
.table-of-contents h4{margin:0;cursor:pointer}
.table-of-contents h4:before{font-family:FontAwesome;content:"\f0c9";padding-right:7px;}
/* For Fontaweosme 5 
.table-of-contents h4:before{font-family:'Font Awesome 5 Free';content:"\f0c9";padding-right:7px;}
*/
</style> 


Step.3

अब नीचे दिये गए JavaScript Code को </html> से पहले Paste कर देना है फिर  Save कर देना है

Blogger Post में Add करें Best Automatic Table of Contents

Paste this code before </html> tag.


<script async='async' defer='defer'>
var head,newLine,el,title,link,ToC=&quot;<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Table of Contents</h4><ul style='display:none'>&quot;;$(&quot;article h2, article h3, article h4, article h5&quot;).attr(&quot;id&quot;,function(arr){return &quot;point&quot; + arr;});$(&quot;article h2, article h3, article h4, article h5&quot;).each(function(){el=$(this),title=el.text(),link=&quot;#&quot;+el.attr(&quot;id&quot;),ToC+=newLine=&quot;<li><a href='&quot;+link+&quot;'>&quot;+title+&quot;</a></li>&quot;}),ToC+=&quot;</ul></nav>&quot;,$(&quot;.toc-pro&quot;).prepend(ToC);function toc() {$(&quot;.table-of-contents ul&quot;).toggle();}
</script>


अब आपके Blogger मे Automatic Table of Contents का Setup Complete हो गया है 

अब आप जिस post मे जहां पर Table of Contents को Show कराना चाहते हैं वहाँ पर Html View मे एक Code Add करना होगा 

आप नीचे Screenshots को देखकर या फिर Video को देखकर समझ सकते हैं 

 

How to add Automatic Table of Contents in Blogger
How to add Automatic Table of Contents in Blogger


Automatic Table of Contents को Show करने के लिए ये Code है 
 <div class='toc-pro'></div> 


ये Automatic Table of Contents (TOC) है आपको अपने पोस्ट मे जहा पर Table of Contents को Show कराना चाहते हैं वहाँ पर एक छोटा सा Code को Paste कर देना है । 

Guide Video



Conclusion:

तो दोस्तो आपको समझ मे आ गया होगा की Blogger Post में Automatic Table of Contents (TOC) Add कैसे करते हैं ऊपर बताए ठीक से Follow करने पर भी कोई Problem आ रहा हो तो आप हमे comment कर सकते हैं ।

उम्मीद करता हूँ आप लोगों को ये पोस्ट पसंद आया होगा और अगर आपके मन में कोई सवाल है या सुझाव है तो हमे Comment मे जरूर बताइएगा और हमारे Youtube Channel को भी Join कर लीजिये ।