blogger showing the whole post on homepage instead of thumbnail and title - javascript

Ok so I'm making a custom blogger template. I know concepts like data tags and basic structure of blogger. But, since
I'm new at programming I am having some difficulties with this specific widget "blog post".
I know this is the most important widget but it's kinda difficult for me to edit this one because i don't know
what to change or what should i look for.
The problem here is whenever I apply this code, instead of showing thumbnail and title of the post it just shows whole post on my homepage.
The homepage looks fine before publishing anything but as soon as I publish a post it disappears leaving a disorientate page.
So please tell me if you guys know what type of specific code I need to change or do i have to write it from scratch in order to show only thumbnail and title of the post.
Here you can see the widget code: https://github.com/Blayke01/blogger/blob/master/blogger.html

Related

How to add load more pagination to blogposts in homepage on blogger?

I'm using Blogger and trying to make a Blogger speed and SEO friendly template from scratch but I have a problem with the blogposts pagination:-
I want to display all the posts in the same grid with load more posts button but without that big load slowing javascripts so the type of load more posts button that I want is just like mogu template.
No need for links Google it and you'll find it because it's the only blogger template with that name and they have it on the template's home page.
My question here is that any chance to get all posts to display as a grid with a functional load more posts pagination button like the one on mogu template and how to do it without getting big javascripts to slow my blog down ?
Sorry in advance for disturbing because I'm totally a newbie to blogger.
PS: for the Blog1 widget I'm using the default generated code once we type this:-
<b:section id='example'>
<b:widget type='Blog' id='Blog1'/>
</b:section>
Any help would be highly appreciated and thank you for reading
I have tried to use mogu template's Blog1 widget code entirely using the necessary <b:defaultmarkups> to work and it worked except for the load more posts pagination button and after a couple of tests it turns out that the pagination is connected to a hidden javascripts from the template's owners outside the given template's code.
( expected but I just checked it as I thought maybe the load more pagination javascript was there some where in the template). So I don't want to have that slow speed as it's really important for me to make it fast and seo friendly as much as possible and also according to my blog design to make my project works

How to create multiple Html subpages without writing redundant code?

everyone currently I am working on a project which a Financial web application. But as I'm moving forward code redundancy is increasing & particularly for HTML code.
I have multiple Html pages on my website such as Dashboard, EditProfile, AccountStatistics, etc. For Eg.
DashBorad - enter image description here
EditProfile - enter image description here
AccountStats - enter image description here
Now judging from the above pics you guys can see every time we navigate from one page to another only the main section content is changing but the body structure & design of the website remains the same.
Problem: If i want to create a new page I have to include code for header, sub-header, sideBar, footer which is repetitive. I just want the main-section code to change. For eg - Made one file like Body.html which contains code for header, sidebar, etc & every time I want to create a new page then only code for the main-section has to written which be can later merge with the body.
How can we achieve this?
(Tech used - Html, Css & JavaScript)
Note: I can also attach code if anyone wants more clear understanding!
Thank You!
Cheers to coding :)
You can use Frontend Frameworks like React/Vue.
Depending on if it's a static site, you can use stuff like Jekyl/Hugo.
If you want to go the SSR way, then you have Angular Universal/ ASP.NET Core/ PHP way.
Depending on your use case, you can't really go wrong either way. If you're new, pick either one and get started Learning.
Have fun!
This is an excellent use-case for a library like ReactJS (and other similar alternatives). Using React you can define 'components' for your header, sidebar and other common parts of your webpages that can be reused in different places. You can also update each of these components separately.

Edit existing items in a Wordpress theme

I've created a homepage, that simply has a sentence as the content
I've edited the settings so that this the front page of the website.
However, given the theme that I am using, when I go to the home page, this is what I see
I can see the content of my home page at the very bottom, but before that, there is a slider and a couple of blocks (that presumably come with the theme).
I'd like to know either how to remove these default blocks, or edit them myself to include links to other pages.
Also, as you can probably tell, I am very new to Wordpress. Are there any good documentations for beginners that would teach me how to create pages, edit and customize them so that I can have control over the whole page (as a regular website)?
I think you should edit by the php file, so if u don't know PHP start here.
Go to : menu > appereance > editor.
Here u see all the files you need. The file you should edit change with the theme.. so go through the code.
Maybe, it's under header.php
The html code you get above your content is inserted from the page template assigned to your homepage. Thus, if you want to modify it somehow you should go Editor Panel in Appearance Menu, then edit desired template. You can also create your own template with structure you actually want and assign it to that page.
As for a documentation, I think you're going to be good with the official one.
You can edit it by going appearence->editor with php code, be careful when you doing this
if you want to edit a header, you can find header.php in that particular theme
same with footer.php and you customize the design by clicking appearance->customize

embedding a page with some javascript on a tumblr post

I want to reproduce a simple, one page website with some javascript in a tumblr post (as a form of documentation for a project) but everytime I try to put the source html of the site into the tumblr form it ends up not loading at all inside the tumblr... Here's the page I'm trying to "embed" into tumblr: www.benenson.ae/recording.html
When I copy the html into the tumblr console, I'm fixing the path to the scripts at the top so that's not the problem..Am I missing some trick for getting this to work inside Tumblr?
I wasn't sure what support there was for iframes in tumblr, but it is possible, but you will need to add some styling to suit your needs:
I simply created a new post, selected the html tab and then put in the following code:
<iframe src="http://www.benenson.ae/recording.html"></iframe>
Alternatively you could create a single post, uploading the image content to tumblr and make it link to anywhere you like, and then add a caption for the post that replicates the current text you have.
If that helps or you want to pursue the second option, let me know and I can update my answer.

Load a page from within an already loaded page

It seems like this should be a pretty obvious answer but I'm under pressure for portfolio and I think I may be confusing myself here. I couldn't quite find the answer that I was looking for (which I usually am able to on this site).
Basically I want to load an external page with an image into my gallery. The only catch is that the gallery itself is loaded from an external page.
I was able to successfully implement this when I put the gallery code into its own individually loading window. But when I try it with the original setup, of course, I have to delegate. I know how to set that up, it's just defining the function itself that's giving me problems (where "window" calls the div that contains the gallery on its external page):
function showPiece(show) {
window.load(show);
}
How do I "delegate" here?
Also, I wanted to make sure I figured out how to click back to the gallery as well. That wasn't working for me either for some reason. Here's what I was using (you can see on the guitar page on the portfolio2.html page):
window.on('click',"#back", function(e){
e.preventDefault();
showPage('portfolio.html');
manageNavState($(this));
});
Here's my site so you can see in detail what's going on:
Portfolio Site
And here's the other gallery page I made:
Second Gallery Page
Sorry if this is a dumb question. Thanks in advance everyone!
===EDIT===
Nevermind, my code was perfectly fine. I found out I just had to open and close with html tags in the linked image pages, which I didn't expect because I didn't have to do it elsewhere. One image is still not working, but I'll figure it out.

Categories