How i can achieve this below?
Placing adsense in between posts on blogger mobile homepage. This can easily be done for desktop homepage view but it seems very difficult to achieve for mobile homepage also.
I have seen a blog do this and i need someone to help out on how to also implement it.
See sample of a blog do this below.
sample 1
sample 2
Search your code for <b:include data='post' name='mobile-post'/> and paste this code below it
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.includeAd'>
<div class='inline-ad'>
<data:adCode/>
</div>
</b:if>
</b:if>
Related
I have set up a Gatsby blog that uses md files to create pages for each blog post. I want to use Narrative.so (photo layouts) for the content of each blog. Using their software, it generates HTML for you to paste into your site's page.
Would this be possible in Gatsby?
Here is the HTML it gave me as an example:
<div class='nar-root' data-post-id='9ab2885d-f0e8-4d00-9c59-135ab04fc384' style='p {text-align:center;opacity: 0.0;animation: nara 0s ease-in 2s forwards;}#keyframes nara {to {opacity: 1.0;}}' >
<img style="width:100%;" src="https://content1.getnarrativeapp.com/static/9ab2885d-f0e8-4d00-9c59-135ab04fc384/featured.jpg">
<noscript><p>Your Narrative blog will appear here, click preview to see it live.<br>For any issues click here</p></noscript>
<script type="text/javascript" src="https://service.getnarrativeapp.com/core/embed/r/9ab2885d-f0e8-4d00-9c59-135ab04fc384.js"></script>
</div>
Yes, it is possible. Here is one possiblity:
Add MDX support to your blog
With MDX you can embed React components into your markdown file.
// markdown file
import { NarrativePhotoLayout } from '../components/NarrativePhotoLayout'
# Here’s a NarrativePhotoLayout
The NarrativePhotoLayout is rendered inside our MDX document.
<NarrativePhotoLayout/>
Build a React component that contains your HTML. This answer tells you how.
Embed your React component in your blog post.
I have started a blog for a local group that I volunteer with so that we can communicate with the public, post information about ourselves, and provide a means for the public to get in touch with us. (www.wildwindflutechoir.com)
At the request of the organizer for the group, I have modified the "Blog Posts Gadget" so that it only shows 1 post and have removed any widgets that displayed "popular posts" or "past posts". This way only the most recent information/article is displayed on the home page and the other pages in the site (like the about-us page) don't have old posts lingering around. The main goal was to no longer display information posted about our Christmas activities on our homepage (or elsewhere in the website) now that Christmas is done...unless, of course, you browse to it through the archive links.
This works fine on desktop browsers; however, when I am viewing the website with a mobile device (or by adding the /?m=1 parameter to the URL)...the home page lists all of the posts.
I cannot figure out how to have it simply display the 1 most recent post instead of this list...Nor can I figure out how to have it automatically display the full details of most recent post (instead of a preview)
Please provide some advise on how to modify the Home page of my Blogger blog so that it only displays 1 post in mobile view (and preferably the whole post instead of a preview of it)
Update
I applied the suggested solution to hard code the number of posts shown to 1. I also, in the case that it is the index page (home page), modified it so that the full post was displayed instead of the mobile index. I considered displaying both the link to the post along with the full details about the post because I discovered that you cannot navigate to older posts in the mobile version on the home page (you had to be viewing a post for it to detect that there is older content).
After customizing the navigation, and failing to get it to work like the desktop version, I decided to just live without it for the mobile for the time being. At least it is closer to what was requested: show only the most recent content. I will have to return to this navigation problem another day.
The following will show both the link to the most recent post along with the full content of the post:
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType == "index"'>
<b:loop values='data:posts limit 1' var='post'>
<b:include data='post' name='mobile-index-post'/>
<b:include data='post' name='mobile-post'/>
</b:loop>
<b:else/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-post'/>
</b:loop>
</b:if>
</div>
But this is what I currently have so that only the full content is displayed for the most current post :
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType == "index"'>
<b:loop values='data:posts limit 1' var='post'>
<b:include data='post' name='mobile-post'/>
</b:loop>
<b:else/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='mobile-post'/>
</b:loop>
</b:if>
</div>
This is a known bug in the mobile templates. If the post count is set to less than 5 posts, then the mobile homepage will always show minimum 5 posts irrespective of whether it is a custom mobile template or not. On all the further pages (accessible via Next post links), the count set via the settings will be respected
A partial solution to this problem is to switch to Custom mobile templates and then make the following changes to the template code -
<b:loop values='data:posts limit 1' var='post'>
<b:include data='post' name='mobile-index-post'/>
</b:loop>
Other than this, Lambda expressions can also be used -
<b:loop values='data:posts first(p => p)' var='post'>
<b:include data='post' name='mobile-index-post'/>
</b:loop>
This will visually resolve the issue of displaying only a single post but the next page link rather than redirecting to the 2nd post will redirect to the 6th post (the 2nd-5th post gets skipped)
What about using a responsive theme like Contempo
Showing Widget In Mobile Page In Blogger:<!-- Here Is Your Widgey-->
</b:if>
Hiding Widget In Mobile Page In Blogger:<b:if cond='data:blog.isMobileRequest == "false"'>
<!-- Here Is Your Widgey-->
</b:if>
See in Detail
How To Show / Hide Widget In Mobile Page In Blogger
i am new in hybrid application development and want to make a advance carousel like http://sebelga.github.io/ionic-advanced-carousel/demo/ for ionic 3 application. i tried this link but its not working with ionic 3 or may be i did it wrong. i want this for taking user selection. is there any library for this? if you have any material like this for ionic 3 and angular 4 kindly share the link or code.
thanks in advance.
You need to leverage Slides component: https://ionicframework.com/docs/components/#slides
Slides component can be configured to have multiple slides visible at a time on the screen (see documentation). So what you want can be achieved via slides.
If you struggle with it - let me know with what exactly.
Here is a snippet of the "view" where I use variables to define amount of slides I need to show in the view:
<ion-slides "bottomPanelSlides" no-padding lazyLoading [slidesPerView]="slidesPerView">
<ion-slide *ngFor="let slide of slides; let i = index" [attr.data-index]="i" (click)="processItem($event, i); storylineAdd();">
<img [hidden]="sliderLoading" (load)="revealSlides();" src="./assets/img/filtersubject.png" [attr.data-index]="i"/>
</ion-slide>
</ion-slides>
In my example I show small images in a horizontal listview fashion. But you could do text for sure.
I want to show PDFs in my angular application. It should be possible to show multiple pages at once and to search inside the PDF.
I tried angularjs-pdf to do so, but it lacks these features. Is there a angular wrapper for pdf.js that can do this? Or can somebody get me startet on how to implement pdf.js in my angular application without a wrapper?
Assuming this statement:
"I want to show PDFs in my angular application"
Anyone searching for this, could ought to check out ng2-pdf-viewer, for more information on this module, can check this out ng2-pdf-viewer PdfShowcase
Basically, this module could somewhat allow one to display more than one PDF in a single screen.
app.component.ts
// Declare the pdf as an empty array
pdfs = [];
// Assuming requesting PDFs from server through MVC style
getPdfs(){
this.getPdfService.getPdfs().subscribe(response => {
response.body.forEach((value, index) => {
this.pdfs.push({
id: index,
obj: window.URL.createObjectURL(value);
});
});
});
}
app.component.html
<div *ngFor="let pdf of pdfs, index as i;">
<div *ngIf="pdf[i]">
<pdf-viewer
[rotation]="0"
[original-size]="true"
[show-all]="true"
[fit-to-page]="true"
[zoom]="0"
[zoom-scale]="'page-width'"
[stick-to-page]="true"
[render-text]="false"
[external-link-target]="'blank'"
[autoresize]="true"
[show-borders]="true"
[src]="pdf.obj"
(after-load-complete)="onPdfComplete($event)"
(error)="onPdfError($event)"
style="width: 100%; height: 800px;">
</pdf-viewer>
</div>
</div>
If this library is not suitable for your use case, you may try with other libraries which uses iframe or similar strategy. Refer here is a useful source worth checking it out.
I know I'm a little bit late for this post but thought of posting here might help some folks who is looking for the same thing. Hope it helps.
From ng2-pdf viewer page, it recommends your desire "angular wrapper for pdf.js", There are a ton of built in functionality Mozilla's viewer supports; such as print, download, bookmark, fullscreen, open file, zoom, search,......
If you need to display multiple PDF files simultaneously and if you don't mind using iFrames, I recommend ng2-pdfjs-viewer. https://www.npmjs.com/package/ng2-pdfjs-viewer
Implementing EasyCaptions on my WordPress blog and I’ve hit a brick wall. Any help would be appreciated. I’m using SWFobject to embed videos. I’ve pasted this code: http://pastebin.com/0ZMSr0Bz into my header.php and this embed code in my posts:
<video id="video-html5" width="480" height="320" controls="controls"
source src="[url to video]" />
</video>
The problem is the implementation only works for the video defined here:
var flashvars = { file:'[video url]', ...
All other videos embeds do not work. I've tried using a playlist but that did not solve the problem. How do I solve this? Do I need additional JS or PHP code to add to the file parameter?
[edited post]
I just re-read your question and looked at the pastebin. The video URL you're using is an HTML file: http://vidbull.com/embed-iqkhawkkx1rn-640x318.html. You can't load an HTML file as a video.
Try it again using a proper video URL (MP4, F4V, OGG, etc).
-- UPDATED based on comment from OP --
The issue is that you're hard-coding the video URL in your WordPress header. What you'll need to do is use a variable instead. I suggest using WordPress' "shortcode" API, which will enable you to pass variables via a custom shortcode.
Define your shortcode in WordPress, something like:
//[easycaptions]
function embed_easycaptions( $atts ){
//your custom PHP code here, using the passed $atts
}
add_shortcode( 'easycaptions', 'embed_easycaptions' );
Then when authoring your WordPress blog post, you add the custom shortcode where desired, such as
[easycaptions url='http://localhost/wordpress1/wp-content/uploads/2012/10/Sheldon-in-a-Dress.mp4']
Check out the Shortcode API page for instructions and examples. It's a pretty powerful system.
The solution lies in NOT hard-cording the video url in the header.php. Here is what worked to solve this. I first created a custom field in wordpress, named it thinema, and then set the value of the custom field to be the embedded video url in the post. Then edited this code into my header.php
flashvars = { file: '<?php echo get_post_meta(get_the_ID(), thinema, true); ?>'...
I've updated the code in pastebin. Hope this is of use to someone! You can view the implementation here.