Sunday, January 28, 2018

Blogspot Blog Me Social Content Locker Kaise Add Kare

Hello Everyone, Social content locker kya hai. Aur blog me kis liye use kiya jata hai. Aur blog website me social content locker kaise add add karte hia. iskebare me is post me details se janege. aapne kai website blog par dekha hoga jab aap kisi code ko copy karte hai. to wo code social content locker se code lock hot hai

How to create social content locker for blog website


Jab tak aap us post ko share nhi karte hai, tab tak code lock rahta hai. aur jab aap social content locker se post ko share kar dete hia uske bad code open ho jata hia. Isi topic ke bare me details se janege.



  ๐Ÿ”ต How to Add Stylish Back to Top Button On Blog
  ๐Ÿ”ต Stylish recent post widget for blog website

Social content locker kya hai.

Friend social content locker ek lock hota hia. jise kisi bhi post me use kara jata hai. Agar reader post ko read karne atha hai. Aur aap chahte hai. ki reader post ko social media par share kare 

To social content locker post ko tab tak open nhi hone deta hai. jab tak post ko social media par share na kare. Isko social media content locker kahte hia. 

  ๐Ÿ”ต Get Site control ke widget blog me kaise add kare
  ๐Ÿ”ต Blog me Recent Comment widget kasie add kare 

Social Content Locker Blog Me Add karne Ke Banefits :-

Social content locker  blog website me add karne ke bahut benifits hai. ye lock sabse jayda blog ke traffic ko increase karne me help karta hai. kyoki jo bhi reader aapke post ki jankari lene atha hai. wo post ko share karne ke bad hi read kar pat hai.  Aur jab post ko share karega to aapke blog par traffic ayega.

Aur sath hi aapke social profile account par followers bhi increase hote hai. To chaliye jante hai. blog website me socail content locker kaise add kare.

  ๐Ÿ”ต Facebook messenger widget For Blog website
  ๐Ÿ”ต Stylish blogger author box for blog website

How to Add Social content Locker On Blog Website.





Step 1.
1. Sabse phale aapne blogger dashboard me theme par click kare.
2. Ab Edit theme par click kare.
3. Ab CTRL+F dabakar search box me <head> ko search kare.
4. Ab <head> code se phale ye code paste kar de.

<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>



Step 2.
1.  CTRL+F dabakar search box </head> code ko seach kare code ko search kare.
2. Ab  </head>  se phale is code ko paste kar de code se phale is code ko paste kar de.


<link href='http://cdn.rawgit.com/menightfury/social-locker/master/style-ver2.css' rel='stylesheet'/>
<script src='http://cdn.rawgit.com/menightfury/social-locker/master/script-ver2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
  $('.socialLocker .to-lock').sociallocker({
    buttons: {order:["facebook-like","twitter-tweet","google-plus"]},
    twitter: {url:"https://twitter.com/blognetbook"},
    facebook: {url:"https://www.facebook.com/blognetbook"},
    google: {url:"https://plus.google.com/u/0/b/108114053278892774365/"},
    text: {
      header: "Like us To Unlock This Content",
      message: "This content is locked. Like us on Twitter, Facebook or Google plus to unlock it"
    },
    locker: {close: false, timer: 0,},
    theme: "secrets"
  });
});
//]]>
</script>



Customization:-
1. Change Facebook page profile url 
2. Change twitter url
3. Change Google plus url


Step 3.

Ab aap jab bhi kisi code par post me social content locker lock lagane chaye to is code ko paste kar de.


<article class="socialLocker">
 <div class="to-lock" style="display:none;">
Enter your content here
</div>
</article>


Enter your content here ke jagah par aapne content ko add kare. for example:- aap kisi code par content locker lock lagna chahte hai. to Enter your content here ke jgah par code ko paste kar de.

  ๐Ÿ”ต 4 Popular post widget for blog website
  ๐Ÿ”ต Stylish email subscribe widget for blog website

Finally is trah se aap blog website me social content locker ko use kar skate hai. i hope aap apne blog me assni se is code ko add kar payenge. agar aapko social content locker ko blog me add karne me problem aye to comment karke puch skate hia.



Agar aapko post passand aye to post ko socail media par jarur share kare. Aur comment karke aapna feedback jarur den.

Popular Articles:-
  ๐Ÿ”ต Stylish social media sharing button for blog website
  ๐Ÿ”ต 5 Stylish social follow button for blog website
  ๐Ÿ”ต 50+ Best Blogger widget For blog website

Tuesday, January 9, 2018

Stylish Back To Top Button Ya Scroll To Top Button Blog Ke Liye

Hello Friends, Is post me ham back to top button ya scroll to top button ko Blog website me kaise add kare iske bare me batayenge.  Jaydatar blog website me back to top button phale hi add kare huwe hote hai. Aur kuch template themes ke  back to top buttons ka design ache nhi hota hai. So is post ko read karke aap same wordpress blog ke trah blogspot blog me bootstrap back to top button add kar skate hai.

back to top button for blog website


Back to top button ko Blog website me kis liye add kara jata hai..? scroll to top button ko blog me isliye add kara jata hai. Jab reader kisi long post ko end tak read karte hai aur wapas top par jane ke liye back to top button ka use karte hai. Isliye blog me Back to to button ya scroll to top button add kara jata hai.

  ๐Ÿ”ต  5 Stylish back to top button Blog Website ke liye.
  ๐Ÿ”ต  Stylish Recent Post Widget Blog Website ke Liye.




Reader ke liye aap apne blog ko jitna easy aur stylish banaenge. Reader aapke blog ko utna hi jayda like karenge.  Aur aishe hi chote-chote features ko add karke blog ko ache se design karna chaiye. Taki reader ko blog passand aha jaye. So is post me ham bat kar rahe te stylish css back to top button ko blog me kaise add karen

  ๐Ÿ”ต  Get site control ke widget Blog me kaise add karen.
  ๐Ÿ”ต  5 Awesome recent post widget blog website ke liye.

Stylish Scroll  To Top Button Ka Demo Dekhne Ke Liye Demo button par click karen.

  ๐Ÿ”ต  5 Best css image havor effect for blog website.
  ๐Ÿ”ต  Recent Comments widget For Blog Website.


Stylish Css Back To Top Button Blog Me Kaise Add Kare.


Stylish smoth scrolltop button ko add karne ke liye niche diye gaye step ko carefully follow karen.

Step 1.
1. Sabse pahle apne blog dashboard me theme par click karen.
2. Ab Edit HTML button par click karen.
3. Search box me  <head> code ko CTRL+F dabakar search karen.
4. <head> Code ke aage is css code ko paste kar den.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>



Step 2.
1. Ab dubara Ctrl+F dabaye or search box me ]]></b:skin> code search kare.
2. Ab ]]></b:skin>  code ke piche is css code ko paste kar den.

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #10b7e5;
    background: #10b7e5;
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 10px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgb(7, 7, 7);
}
#return-to-top:hover i {
    color: #fff;
}

Customization:-
Agar aap scorll to top button ka color change karna chahte hai. to #10b7e5 ke jagaha par dusra color code add karen.

  ๐Ÿ”ต 5 Best custom Search design For blog website
  ๐Ÿ”ต Alexa rank widget Blog me Kaise add karen.


Step 3.
1.  Dubara se serach box </body> code ko search karen.
2. Ab </body> code ke piche scroll to top button script ko paste kar den.




3. And last Ab template save kar den.

  ๐Ÿ”ต  Stylish Blogger author Blog post ke niche kasie lagaye.
  ๐Ÿ”ต  Facebook Messenger Chat Widget For website Blog 

Finally ye step follow karke apne blog website me back to top button ya scroll to top button ko add kar skate hia. Aur agar aapko back to top ko add karne me kai bhi problem ahye to comment karke puch skate hai. Other Blogger widget ke liye Hamre Blogger widget categories wali post read kariye



Blog website me back to top button ya scroll to top button add karne ke liye agar aapko yeh post passand aye to post ko social media par jarur share karen.

Aur Comment karke post ke bare me apna feedback jarur den.

Popular Posts:-
  ๐Ÿ”ต 4 Popular post widget Blog website ke liye.
  ๐Ÿ”ต 50+ Best Blogger widget And Tool Bogger ke liye.
  ๐Ÿ”ต 5 best blogger heading css design


Saturday, January 6, 2018

Stylish Blogger Recent Post Widget For Blog Website.

Hello Friend, Hamne apne ek pichle article me bhi 5 aswesome recent post widget ke liye post kari hai ushe bhi ek bar jarur read karen. Lekin is Recent post widget me bahut best features hai. Is widget me small image avator aur title ke sath post ki total comment count karke number me show karega.

stylish recent post widget For blog website


Recent post widget blog ke sabhi widget se kafi important widget hota hai. Reader jab bhi search engine se blog website par vist karte hai.  bahut kam user hi Blog website ke home page ko open  karte hai.



Agar aapke blog website me recent post widget add hai to by the way agar  reader aapke blog website ke  recent post ya latest post ko read karna chaye To wo direct recent post widget se post ko read kar skate hai.

  ๐Ÿ”ต Get site Control ke widget Blog me Kaise add Kare.
  ๐Ÿ”ต 5 Best css iamge havor effects for blogger images

Recent Post Widget ka Demo Dekhne ke liye Demo par click karen Aur widget ko dekh len.


Agar aap is recent post widget ko blog me add karna chahte hai. To niche diye gaye step ko follow karen.

How To Add Stylish Email Subscribe Widget On Blog Website:-

Chaliye jante hai. Recent post widget ko blog me kaise add karen.

Step 1:-
1. Sabse pahle Blogger dashboard me layout par click karen.
2. Ab Sidebar me add Gedget par click karen.

Step 2:-
1.  Ab New Window me Html/javascript par click karen.
2. Ab Title me Recent Post type karen.
3. Niche wale box me is css code ko paste kar den.

<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xรฉt';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>



Customization:-
1. Change your Post Number var rcp_numposts=5;
2. Remove avtor on post. http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png 

  ๐Ÿ”ต Facebook Messenger widget blog me kasie add karen
  ๐Ÿ”ต Stylish Author box blog post ke niche kaise lagaye

Finally aapke blog website me recent post widget add ho gaya hai. Is trah se aap apne blog website me stylish ya simple recent post widget laga sakte hia. Is recent post widget ko customization karke aap simple bhi bana skate hai. uske liye aap avtor ko remove karen.

Read Most:- Agar aap apne blog website me kisi bhi trah ke widget add karana chahte hai. To hamare All Blogger widget And tools for Blogger, ......Is post ko read karen.

  ๐Ÿ”ต 4 Stylish Popular post widget blog Ke liye
  ๐Ÿ”ต 10 Marquee slider Effects Blog Ke liye.

Agar aapko recent post widget post passand aye to post ko social media aur other blogger ke sath jarur share karen.




Aur comment karke Recent Post Widget ke bare me aapna feedback jarur den.

Popular Posts:-
 ๐Ÿ”ต 5 Stylish Blogger Heading Design Blog Ke liye.
 ๐Ÿ”ต 15 Most Useful blogger widget Blog ke liye.
 ๐Ÿ”ต Slider Demo and Download button Blog ke liye


Friday, December 29, 2017

Get Site Control Ke Widgets Blog Website Me Kaise Add Kare.

Hello friend, Is post me ham get site control ke bare me details se janege. Get site control kya hai. Aur ye kaise work karti hai. aapne internet par bahut sari sharing button sites dekhi hogi. Get site control bhi sharing button sites hai. Jo blogger ke liye notification bar, subscribe popup Widget, Chat widget, contact from, Share buttons, Promo widgets, free me provide karti hai.
install get site control widget

Internet par get site control ke allwa bhi bahut sharing button sites hai. jo blogger ke liye hai. par un sites par hame payment karna hota hia. tab jakar aap subscribe widget, contact from widget, promo, servey follow button, share buttons, aur chat widget provide karte hai. Aur sabhi get site control par free hai.

  ๐Ÿ”ต  All in one Blogger widget For blog website
  ๐Ÿ”ต  How to Add Social Content Locker on Blog website



Get site Control kya hai:-

Get site control ek sharing button sites hai. jo blogger ke liye widget aur tools free me provide karti hai. ye site blog website ke liye popup subscribe widget, contact from, promo widget, chat widget, Social media follow button, sharing buttons, link promotion widget aur notificaiton bar widget, free me provide kart hai.

Get Site control aapne blog website me install karne se pahle aapko is par account  create karna hai. uske bad aap ye sabhi widget esaily aapne site par laga skate hai.

Get site Control Par Account Kaise  Banaye:-

Is site par aap 3 types ke account se login ho skate hai.  aap apne facebook account se bhi login ho skate hai. Aur agar facebook aacount se login nhi hona chahte hai. to Google account se log in ho skate hai. ya aapne email account create karke get site control par login ho skate hai

sing  up in get site control

Ab account banakar aapko get site control ke code aapne blog me add karna hai. tabhi jaakar blog me widget show hote hai. aapko ek chota se code aapne template me add karna hota hai. aur get site control me widget ko aaply karke aapne blog me laga sakte hai.

Blog Me Get Site Control Code Kaise Add Kare:-

Account banane ke bad aap login hone ke baad aapne account ko open kare. Aur code install karne ke  bad liye niche diye gaye step ko follow kariye.
Step 1.
1. Sabse phale menu bar me site settings par click kariye.
2. Ab install button par click kariye.
3. Aab code ko select all karke copy kar le.

Install get site control

Ab aapko is code ko aapne blog template me add karna hai.

Step 2.
 1. sabse phale aapne blogger dashboard me theme par click kare.
 2. Ab Edit HTML par click kariye.
 3. Ab control+F dabakar serach box me
 4. code  ko search kare.4. Ab body code se phale aapko copy kara huwa code paste karn hai.

  ๐Ÿ”ต  Blog Heading Customize Karne ke 5 best design.
Ab aap template save kar de. aur ab aapko widget ko aapply karna hai. jis bhi widget ko aapne site me lagana chate hai.

Get Site Control Ke Widget Ko Blog Me Kaise Apply kare.

Get site control ke popup subscribe widget, contact from, promo, survey, follow buttons, share buttons, chat widget add kar sakte hai. Jis trah se image me show ho rahe hai.


get site control widget add on blog

Widget ko blog me aaply karne ke liye aapko liye step ko follow kariye.

Step 1.
1. Sabse phale create widget par click kariye.
2. Ab kisi bhi widget subscribe, contact, share button etc, par click kariye.
Mene promo button par click kara hai.


step 2.
 1. Ab sabse phale appearance me aapko widget ki setting karne hai.   Position, widget color,  fonts,  select karna hai. 
2. Content me aap aapne link add kare jo aap promote karna chate hai.
3. Ab all setting karke finally ok button par click kar de.


Get-site-control


Ab promo widget aapke blog me add ho jayega. 
Same ishi step ki trah aap other widget bhi add kar skate hai

2. Subsribe widget kaise lagaye :-

popup email subscribe widget

Popup subscribe widget ko bhi apne blog me laga skate hai. Aur aapne hisab se design karke aaply kar sakte hai. Jis trah se promo widget add kiya hai. same whi process karke aap apne blog me popup email subscribe widget add kar skate hai. Subscribe widget add karne se aapke blog ka traffic increase ho hota hai.




  ๐Ÿ”ต  Stylish Recent Comment widget for blog website

3. Contact From Blog Me Kaise lagaye:-

get site control contact from

Contact from se aapke vistor aapse connected rah skate hai. Aur contact form ko bhi aap apne hisab se design kar skate hai. font, color size position set kare aap apko aaply karna hai. aur contact from bhi aapke blog par add ho jayega

    o  5 Stylish Contact From Blog Ke liye
    o  15 Most useful blogger widgets Blog ke liye

4. Follow Buttons Blog Me kaise lagaye:-


Follow button aapke social media sites par followers button me kafi help karte hai. Aur get site control aapke liye free me provide karte hai. follow button bhi same promo widget ke trah aapne ke liye get site control se aaply karke laga skate hai.

5. Share Buttons Blog Me Kaise Lagaye:-

Share button k blog me add karne se vistor aapke post ko social media sites par share karte hai. jise aapke blog ke traffic increase hota hia.  aur get site control par aap free me share button ko apne blog par laga skate hai. Share button ko add karne ke liye aapko promo widget ke trah steps ko follow karna hai.


  ๐Ÿ”ต  Top 5 best Css blockquote design Blog ke liye.
  ๐Ÿ”ต  Slider Demo And Download Button Blog Ke Liye.


6. Promo Widet Notification bar Blog Me kaise add kare:-

Promo widget ko ham simple language me notification bar widget bhi kahte hai. promo widget ko kisi special deal ya kisi link ko promotion karne ke liye use kar sakte hia. Promo widget ko aap image me bhi dek sakte hia. Aur aapne choice ka color font aur postition select kar sakte hai.


get site control widget kaise add kare

7. Chat Widget Blog Me Kaise Lagaye:-

Blog me chat widget ko add karne se aapke vistor online aapse connected rah skate hia.  Ye widget blog ke liye kafi useful hai. aur get site control ye widget bhi aapke liye free me provide karti hai. chat widget ko add karne ke liye bhi aapko uper batayi gaye procress apply karni hai. aur position, color, font text color aapne hisab se set kare blog me laga skate hai.




Get Site Control ek bahut useful site hia. Jo khas kar blogger ke liye best hai. kyoki blogger par coding ke duwara hai. jaise wordpress par plugins ka install karke widget lagaya ja sakte hia.  lekin blogger me plugins install nhi hoti hia. 


Isliye Get site control bahut achi site hai. blogger ke liye jo free popup subscribe widget notification bar, Contact from, chat widget, share buttons, follow buttons, etc free me provide karti hai. 

i hope aapko get site control ke bare me aapko post passand ayhi hogi. to is post social media aur other blogger ke sath jarur kijyega. taki other blogger ko bhi pata chal sake.




Aur sath hi comment karke aapna feedback jarur taki hame pata chal sake ki aapko hamare post article useful sabhit hote hai ya nhi.

Tuesday, December 26, 2017

Top 5 Awesome Recent Post Widget Blog Website Ke Liye

Blog website me Recent post widget add karna jaruri hota hai. Kyoki ye other widget se kafi important widget hota hai. Reader jab hamare blog par vist karte hai. To wo previews post ko is widget ke duwara read kar skate hai.  Ek professional blog website me ye wedget jarur add hote hai. Jaise popular post widget, recent post widget email subscribe widget, Search box, categories widget, ye blog website ke main widget hai . Aur Is post me aapko 5 awesome recent post widget design dekhne. Jo aapke blog website ke look ko kabhi better bana skate hai.



Wordpress blog me aap plugins ko install karke bhi recent post widget and other widget install kar skate hai. Lekin blogspot blog me css code ya html code se widget ko add karna hota hai. Lekin blogspot blog ke liye wordpress plugins se bhi ache widget hai. Jo is post me aapko 5 best recent post widget hai.




Recent Post Widget Kya Hota Hai.

Recent post widget me blog website ke previews post add hote hai. Taki reader jab post ko readkarne ayhe.To reder recent post widget ke duwara hi recent post ko pata chalta hai. kyoki bahut kam hi vistor homepage ko open karte hai.

Isliye hamae recent post widget add karna padta hai. taki privews post ko bhi read kar sake. To Chaliye jante hai. 5 awesome Recent post widget ke bare main.

  ๐Ÿ”ต Top 5 best Dangers Image havor effect blog ke liye
  ๐Ÿ”ต 2 Stylish recent post widget blog ke liye
  ๐Ÿ”ต Blog me Facebook messenger widget kaise add kare


Top 5 Stylish recent post widget For Blog websites:-


Aap in 5 recent post widget ko phale select kar lijye aur uske bad aap last me ham janege ki blog me recent post widget kaise add kare.


Recent Post Widget Style 1:-


Recent post widget 1


<div class="recentpoststyle">
<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script>
<script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none; color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style></div>

Recent Post Widget 2:-

Recent post widget 2
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>

Recent Post Widget 3:-

Recent post widget 3

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><div id="recent-posts"><script language="JavaScript">
home_page = "YOUR-BLOG-URL";
numposts = 5;
imgr = new Array();showRandomImg = false;boxwidth = 255;cellspacing = 6;borderColor = "#232c35";bgTD = "#000000";thumbwidth = 0;thumbheight = 0;fntsize = 15;acolor = "#666";aBold = true;icon = " ";text = false;showPostDate = false;summaryPost = 0;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";</script><script src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts-t/recent-posts-min-1-ycode.js" type="text/javascript"/></script><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img alt="All Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%;"/></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogging Tips"><img alt="All Blogging Tips" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; left: 0%;"/></a><link rel="stylesheet" type="text/css" href="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts-t/recent-posts-min-4.css" /></div>
Customization:-
  ๐Ÿ”ต Your Blog url Ke jagah par apne blog ka url enter kare.
  ๐Ÿ”ต numposts = 5; ke Post number change kar skate hai.




Recent Post widget Style 4:-

Recent post widget 4

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}
</style>


Customization:-
   ะพ numposts = 5; ke Post number change kar skate hai.

Slider Recent Post widget Style5 :-

Recent pos widget 5


<style scoped="" type="text/css">
ul.borecentpost *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.borecentpost{font-size:11px}ul.borecentpost,ul.borecentpost li{margin:0;padding:0;list-style:none;position:relative }ul.borecentpost{width:100%;height:500px }ul.borecentpost li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.borecentpost li:nth-child(1),ul.borecentpost li:nth-child(2),ul.borecentpost li:nth-child(3),ul.borecentpost li:nth-child(4){display:block }ul.borecentpost img{border:0;width:100%;height:auto}ul.borecentpost li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.borecentpost li:nth-child(2){left:0;top:50% }ul.borecentpost li:nth-child(3){left:50.5%;top:50% }ul.borecentpost li:nth-child(4){width:100%;left:0;top:75% }ul.borecentpost .overlayx,ul.borecentpost li{transition:all .4s ease-in-out }ul.borecentpost .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.borecentpost .overlayx,ul.borecentpost img{margin:3px}ul.borecentpost li:nth-child(1).overlayx{background-position:50% 25% }ul.borecentpost .overlayx:hover{opacity:.1 }ul.borecentpost h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.borecentpost li:hover h4{bottom:30px}ul.borecentpost li:nth-child(1)h4,ul.borecentpost li:nth-child(4)h4{font-size:150% }ul.borecentpost .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.borecentpost li:hover .label_text{bottom:20px;opacity:1}ul.borecentpost li:nth-child(2).autname,ul.borecentpost li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }
</style>
<div id="featuredpostslider"></div>
<script type='text/javascript'>
function FeaturedPostSlider(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="borecentpost"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSlider({
  blogURL: "http://xyz.com/",
  MaxPost: 8,
  idcontaint: "#featuredpostslider",
  ImageSize: 300,
  interval: 5000,
  autoplay: true,
  tagName: false
});
//]]>
</script>
Customization:-
   ะพ Replace the blog URL “http://xyz.com/” with your own
   ะพ MaxPost: 8,
   ะพ You can change the auto play “false” to stop auto sliding.
   
Ab aap in 5 recent post widget me se khoi bhi code ko select ya chosse kar le. ab ham janege ki blog me recent post widget code ko kis trah se blog me add karte hia.

How To Add Recent Post widet In blog website.

Blog me recent post widget add karna bahut simple hai. Jis trah se ham blog me html code add karte hai same whi process karni hai. to chaliye jante hai.

Step.1

1. sabse phale aapne blogger dashboard me layout par click kariye.
2. Ab Sidebar me Add Getget par click kariye.
3. Ab html/javascript par click kariye.

Step 2.
1. Ab new window me title me Recent post name enter kare.
2. Aur dusre box me code ko paste kar de.
3. Finally Save button par click kar de.


Ab aapko blog website me recent post widget add ho chuka hai. blog me kisi bhi trah ke widget ko add karne ke liye hamare blog widget categories ki post jarur read kariye. Aur hamne ek all blogger widget ke liye bi post publish ki jisme all blogger widget and tools ki list hai.


  ๐Ÿ”ต Blog post ke niche author box kaise add kare.
  ๐Ÿ”ต Stylish email subscribe widget blog ke liye.

i hope aapko 5 awesome recent post widget design ache lage honge. agar aapko post passnd aye to post ko social media aur other blogger ke sath jarur share kare.




Aur sath aapna ek valuable comment me aapna feedback jarur de taki hame pata chal sake. aapko hamare article passand aha rahe hai.

Popular posts:-
  ๐Ÿ”ต 5 Popular post widget blog ke liye.
  ๐Ÿ”ต Top 5 best social media following buttons
  ๐Ÿ”ต Top 5 best css heading style design blog website ke liye


Sunday, December 24, 2017

Top 5 Best Css Image Hover Effects For Blog website Images.

Blog website ko smart ya professional design karne ke liye hame blog par bahut sare customization karne hote hai. taki reader blog website par attract ho jaye. i mean vistor aapke blog par jayda time ruka rahe. Aaj is post me aapko blog website image hover effects ke 5 best image haver effects ke bare me bataunga. Jo aapne professional blog website par dekhe honge.



Css image hover effects  ya image haver effect ko add karne ke liye aapko kuch simple step ko follow karna hai. aur apne blog website ke image me image css image hover effects add kar skate hai. to chaliye jante hai. top 5 best css image hover effects  blogger website  iamges ke liye.



Top 5 best css image hover effects for Blog website Images.

Css image hover effects ko add kanre ke liy aap last me diye gaye step ko follow kariye . ushe phale aap css image hover effects design ko select kare uske diye step ko follow karke aapne blog me add kare.


1. Zoom Out on hover Css:-

zoom havor effect on image

Zoom out image hover effects image ko zoom karta hai. ye bahut acha animation dalta hai iamges par. Ye aapke blog ke image ko zoom out aur zoom in karta hai. Zoom out image hover effect css3 code:-

.post img{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } .post img:hover { -o-transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; -moz-transform: scale(1.4); -o-transform: scale(1.4); -webkit-transform: scale(1.4); }

2. Opacity Image Hover Effect:-

opacity image hoave effects

Opacity iamge haver effects bhi image bahut effect dalta hai. Aur image ko highlight kar deta hai. jaise hi mouse cursor image par jata hai. ishe ham opactiy image havor effects kahte hai.

.post img{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post img:hover { opacity:0.7; filter:alpha(opacity=50); }


3. Reflection on Image Hover effect:- 





Reflection effect image ko reflection effect dalta hai. jiase mouse cursor image par jata hai. waise hi image par reflection effect aha jata hai. ye bhi best css image hover effect hai

.post img{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } .post img:hover { opacity: 1; /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); /*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); }

4. Blur Effect On Blogger images:- 


blur effect on images

Blur effect sayad aap jante hi honge. blur effect me image ko thoda dundla ho jayega. ye bhi aapke blog website ke image me bahut acha effect dalega.

.post img{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post img:hover { -webkit-filter: blur(5px); }

5. Brightness Image Hover effect:- 




Brightness image haver effect me aapke blog ke image me pasie jaise hi mouse cursor le jayega. wiase hi image highlight ho jayegi. ye bahut acha image havor effect hai.


.post img{ -webkit-filter: brightness(60%); -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post img:hover { -webkit-filter: brightness(100%); }

Ab aap in 5 best css image havor effect me khoi sa bhi design select kar le. aur blog me add karne ke liye niche diye gaye simple step ko follow kariye.


How to Add Css image hover effect on blog website images.

Blog website me image hover effects ko add karne ke liye niche diye gaye step ko follow kaariye.


Step 1.

  1. Sabse pahle aapne blogger dashboard me theme par click kariye
  2. Ab Edit HTML par click kariye.
  3. Ab apne template par click karke CTRL+F press kare.
  4. Aur search box me ]]></b:skin> code ko search kare.



Step 2.

  1. Ab ]]></b:skin> code ki uper code ko paste kar de.
  2. In 5 css image effects me se khoi sa bhi code copy karke paste kar de.
  3. Finally save template par click kar de.


Ab aapke blog post image me css image hover effect add ho gaya. blog me css iamge hover effect ko add karna bahut simple hai. lekin agar aapke blog me code work nhi kar rha hai. ya add karne me khoi problem ho rahi ho to aap comment karke puch skate hai.

Hamne aapne ek previews post me 10 best marquee slider effects ke bare me bhi bataya hai. aap us post ko bhi jarur read kare.




I hope aapko top 5 best css image havor effect ke bare me post kaise lagi. comment karke jarur bataye. Aur is post ko social media aur other blogger ke sath jarur share kare.

Popular Posts:-
   o  4 best popular post blogger widgets and tool.
   o  Top 5 best custom search box design.
   o  top 5 best blogger ul bullet list design.

Friday, December 15, 2017

Blogger Blog Me Recent Comments Widget Kaise Add Kare.

Aapne bahut sare blog website par Recent Comments widget dekhe honge. Sabhi Blogger aapne blog website me  recent post widgets, Popular post widgets, Email subscribe widget,recent Comments widget, ko apne blog me jarur add karte hai. kyoki ye blog ki importnat widget hote hai. Recent comments widget me aapke blog par jitne bhi pichle comments hote hai, Wo show hote hai. Aur dusre reader bhi unhe read  karne me interested hote hai.

recent comment widget kaise add kare.


Commenting blogger ka ek bahut acha source hota hai jo reader ko blog par rokhe rakne ka work karta hai. Aur recent comments widet me jab reader dusre ke comments ko read karenge to wo reader bhi un post par aapne vichar jarur share karega.jinpar pahle hi comment kare huwe honge. Basically reader unhe post par jayda comment karte hai, jin par phale hi bahut sare comment kiye ho.

   ➤Blog me facebook chat widget kaise add kare.
   ➤Stylish blogger author box blog ke liye.


Friend agar aap hamare regularly reader to aapko pata hi hoga,  ki apne blog par orginal content hi share karte hai. To agar aap Recent comments widget ka Demo dekhna chate hai. Demo deker decide karke blog me recent Comments widget ko add kare.



Stylish email subscribe widget blog ke liye.
4 Popular post widget blog ke liye.

How To Add Recent Comments widget On Blog Websites.

Blog me Recent Widget Add karna bahut simple hai. Jis trah se blog me html code add karte hai. Same Ushe trah aapko recent comments widget ko add karne ke liye step follow karne hai.

Step 1.

  1. Sabse phale Apne blogger dashboard me layout par click kare.
  2. Ab add Gedget par click kare
  3. ab HTML/Javascript par click kare.
  4. Ab niche diye huwe recent comments widget code ko paste kar de.



<link href='http://codepen.io/thebloggerguide/pen/XpdRBM.css' rel='stylesheet'/>
 <script type="text/javascript">
 //<![CDATA[
 var
 numComments = 5,
 showAvatar = true,
 avatarSize = 35,
 roundAvatar = true,
 characters = 40,
 defaultAvatar = "https://3.bp.blogspot.com/-sL6xl7eh7Mo/VueQmyj4WZI/AAAAAAAABmw/Cvr9T-GqDygLc_Hxt04_1L-MzNObOh6_Q/s1600/none.png&quot;,
 hideCredits = true;
 maxfeeds=50,
 adminBlog='your name';
 //]]>
 </script>
 <script type="text/javascript" src="http://codepen.io/thebloggerguide/pen/XpdRBM.js"></script>
 <script type="text/javascript" src="/feeds/comments/default?alt=json&callback=kangismet_recent&&max-results=50">
 </script>

Step 2.
Recent comments widget ko customize karne ke liye niche diye gaye step ko follow kare.

1. numComments = 5 (number of comments displayed)
2. showAvatar = true (false, if you want to hide avatar)
3. avatarSize = 35  (size of the avatar in pixels)
4. roundAvatar = true (avatar round)
5. defaultAvatar = “https://3.bp.blogspot.com/-sL6xl7eh7Mo/VueQmyj4WZI/AAAAAAAABmw/Cvr9T-GqDygLc_Hxt04_1L-MzNObOh6_Q/s1600/none.png” (default avatar)
6. AdminBlog=’your name‘ (name of the blog author, replace with your name)

Custom Google search box blog me kaise Lagyae.
Slider Demo And download Button blog ke liye.

Finally ab Comment box widget ko save kar de. blog me facebook comment box widget add karne ke liye bhi hamne post publish ki hai. asha karta hu aap apne blog me recent comments widget add kar payenge. Hamne bahut sare blogger widgets post publish kari hai. aap unhe bhi jarur read kariye.





I hope ab aap apne website blogger recent comments widget add kar payenge. agar aapko yeh post passand ayi hai to is post ko socail media aur other blogger ke sath jarur share kare.

Popular Posts:-
  1. 5 Stylish Contact From design blog ke liye.
  2. 5 Stylish lebel widget blog ke liye.
  3. 15+ Most useful blogger widget blog ke liye.