Latest blog post html

Recent Blog Posts with Snippets and Thumbnails

Add a gadget in blogger sidebar for recent blog posts with all or specified categories or labels with titles, thumbnails, author’s name and excerpts.

User engagement is one of the most indispensable thing to become a successful blogger. One of our clients asked us for adding recent posts widget to their blogger blog so that the live visitors may see the most recent blog posts in the blog sidebar from any webpage of their blog.

Actually, blogger does not provide a gadget for showing recent blog posts on the sidebar and therefore we have developed a dynamic as well as responsive (adopts all devices) recent blog posts widget for blogger users. One of the main features of this widget is that if your blog posts does not contain any image then your may show any image or photo including your blog logo as recent blog posts thumbnail.

This widget may fetch recent blog posts from any other blogger blog irrespective of your ownership or authorship. In other words, you may display latest posts from another blog to your own blog with the helpof swtRBP widget.

Additionally, following options are available with the swtRBP (SuperWebTricks Recent Blog Posts) widget:

Option-1: You may show only recent blog posts Titles
Option-2: You may display post titles with snippets/excerpts
Option-3: You may decide how many recent posts to be shown upto 500.
Option-4: You may change the characters displays as posts summary.
Option-5: You may show the Posts author name with the published date.

How to add Recent Posts Widget to your Blogger Blog

Step-1:

Login to your blogger account and select the blog in which you want to add swtRBP widget.

Step-2:

Navigate the template tab of your blog and click on Edit HTML. Then click anywhere in the template editor and you will see a search box at the top right corner of template HTML editor.

Step-3:

Find (Ctrl+F) the closing head tag and then paste this JavaScript file just before/above tag.

Step-4:

Now, find closing tag of ]]> and paste these CSS codes just above/before ]]> tag and save the template.

.swtRBP < width:274px; /* Change the Width of each recent posts box */ height:274px; /* Change the Height of each recent posts box */ background-color: #F7F7F7; /* Change the Background color of each recent posts box */ >.swtRBP img < height: 50%; /* Change the width of each recent posts Thumbnail */ width: 95%; /* Change the width of each recent posts Thumbnail */ >.swtRBP h6 < font-size: 1em; /* Change the Font size of each recent posts Title */ >.swtRBP p < font-size: 0.75em; /* Change the Font size of each recent posts Summary/Snippet/Excerpt */ >.swtRBP < padding: 0.5em; border: 0.0625em solid #00ff00; margin: 0.25em; background-color: #F7F7F7; text-align: center; float: left; overflow: hidden; display: inline-block; >.swtRBP a < text-decoration: none; text-transform: capitalize; text-align: center; font-size: 0.75em; line-height: 1; >.swtRBP a:link < color: #0000FF; >.swtRBP a:visited < color: #00FF00; >.swtRBP a:hover < color: #FF00FF; >.swtRBP a:active < color: #FF0000; >.swtRBP img < padding: 0.3em; border: 0.1em solid #fff; margin-top: 2px; -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); overflow: hidden; >.swtRBP span < color:#ff0000; font-size: 0.75em; font-style:italic; >.swt-rights < clear: both; >.swt-rights img < float:right; >.swtRBP h6 < margin: 0.5em 0 0; overflow: hidden; padding: 0; line-height:1.1; letter-spacing: 0; vertical-align: middle; >.swtRBP p

You may change the above CSS codes according to your need and preference. If you are using Responsive blogger template then this widget will automatically adopts your users device. However, you may also use advanced media screen CSS codes so that your recent blog posts fits for your responsive theme. For example, we have added the following media screen CSS codes for AUBSP:

@media screen and (min-width: 768px) and (max-width: 1100px) < .swtRBP < width:295px; height:295px; margin:0.125em;padding:0.125em; >.swtRBP img < margin:0.0625em;padding:0.125em; >> @media screen and (max-width: 350px) < .swtRBP < width:200px; height:100px; margin:0.0625em;padding:0.0625em; >.swtRBP span, .swtRBP img > 

NOTE: If you have no knowledge about CSS codes then please fill free to ask us for changing the codes in accordance with your blogger blog.

However, you may download some already customized swtRBP CSS codes and paste it instead of the above default swtRBP CSS codes.

Step-5:

Go to the Layout menu tab of your blogger blog from left sidebar and click on Add a Gadget text link button either from sidebar or anyplace you want to display latest posts. However, you may choose the blogger page/post to show the recent blog posts instead of displaying on the sidebar.

Step-6:

From the open pop-up window, scroll down and choose HTML/JavaScript (add a third-party functionality or other code to your blog) provided by blogger. However, if you have chosen the blog post/page for displaying swtRBP then open the HTML mode instead of compose mode.

Step-7:

Now, paste the following codes into the content field of HTML/JavaScript and after giving a name to the gadget like “Latest Updated Posts” click on save button.

Customization of swtRBP widget

1) Change the value of swtRBPnumbers from 12 to any number you want to show the recent blog posts.
2) Change the value of swtRBPsnippets from 225 to any number you want to display the characters as posts summary.
3) We have added a default posts thumbnail for posts having no image. However, you may display your own photo/image by changing the image url of swtRBPonimage instead as recent posts thumbnail.
4) If you want to show the recent blogposts from any specified label/category then add this simple code in the middle of the last line just after default and before question sign /-/LabelName so that the last line looks like as shown below.

5) If you want to show recent blog posts from another blogger blog then add the address (http://spsmiter.blogspot.com) of that blog at the beginning of the URL of the last line. If that blog has custom domain then the custom domain ((http://www.aubsp.com)) will be used so that it looks like as shown below.

However, if you want to customize the swtRBP widget in accordance with your own need then fill free to comment below or contact us for help.

Источник

How to show your latest Ghost blog post on your homepage

A quick tutorial for adding live-updating blog posts to any web page using the Ghost API and some Javascript.

September 17, 2021 · Dan Rowden

The Ghost Content API is an amazing tool, which lets you pull out public data from your Ghost site. In this tutorial, we’re going to use some Javascript to display a blog’s latest post on a web page.

Here’s a good example of what I mean, from Fathom:

Step 1: Create an integration and get an API key

Go into your Ghost admin, head to Integrations and create a new custom integration.

Then note the Content API key. You will need this to access the API from your web page.

Note: this API key allows read-only access to public data from your Ghost site. Anyone can uses this API key to programatically pull out public data from your site and use it elsewhere.

Step 2: Add some Javascript to your web page

Now that the API is all set up, we can add the code that will pull in and display the blog post.

Ghost’s Content API has a lot of parameters you can use to change the data returned.

In this example, I’ve limited the number of posts returned to just one (posts are returned in reverse chronological order by default), and I’ve only requested the title and URL, as that’s all we need for this tutorial.

https://testdomain.com/blog/ghost/api/v3/content/posts/?key=238ff0a0909c5b17c34b40a79a&fields=title,url&limit=1

Once you’ve got your own API key and if you use your own domain, you can put this URL into your browser to test the data that is returned.

Now, we just need to paste in some Javascript into our web page to display the post information. It’s best to put this towards the bottom of your page.

This code simply wraps the post title in a link and adds this into an HTML element with the id blogPost . You can of course use any element in your page, and now that you have the data, it’s easy to style the link with CSS.

For more options for the Ghost API call, check out the Ghost Content API documentation. You could display the feature image, date or excerpt by adding a few more values to the fields parameter, or show a list of latest posts changing the limit parameter.

Источник

Как добавить на сайт список последних записей блога

Ссылки на последние записи (новости), которые вы публикуете с помощью приложения «Блог», можно добавить в любое место на страницах сайта, например, в боковую панель.

Для этого используйте раздел «Блоки» в приложении «Сайт»:

1. Щелкните по названию блока «blog.latest_posts».
2. На странице просмотра блока щелкните по фрагменту кода, который предназначен для встраивания на страницы сайта, и скопируйте его:

Дополнительные возможности и настройки

Выбор блога

Если вы ведете несколько блогов в одном Webasyst-аккаунте, то для отображения списка последних записей можно выбрать только один из блогов. Для этого в исходном коде блока «blog.latest_posts» найдите фрагмент

В скобках укажите ID нужного блога:

ID блога можно узнать из его URL, открыв нужный блог в своем аккаунте. Например: yourdomain.ru/webasyst/blog/?blog=2

Ограничение количества записей

По умолчанию список последних записей блога ограничен 20 ссылками. Чтобы изменить это ограничение, в исходном коде блока «blog.latest_posts» укажите нужное число, как показано ниже:

null обозначает отображение последних записей из всех блогов в вашем аккаунте, а не только какого-то одного.

Оба этих примера (указание ID блога и количества записей) можно совместить:

Здесь первое число в скобках означает ID блога, а второе — количество записей, которые нужно показывать на страницах сайта.

7 комментариев

А можно как то сделать, что бы вместе с последними новостями, отображались еще и фото этой новости как в главной ленте? И возможно ли сделать фильтрацию этих новостей по тегу?

Для этого потребуется доработка программного кода. Консультации по таким доработкам вы можете получить, например, у партнёров Webasyst.

добрый день как заменить запись -новые записи в блоге на запись -новости чтоб название изменить? на главной странице сайта? https://tricolor-tv-moscow.ru/

Источник

Блок новостей на витрине интернет-магазина Shop-Script

Как добавить список новостей из приложения «Блог» на витрину интернет-магазина на основе Shop-Script

1. Установите приложение «Блог»

Перейдите в раздел «Инсталлер → Приложения», выберите приложение «Блог» и установите его одной кнопкой.

2. Скопируйте код для вставки списка новостей

После установки «Блога» в разделе «Блоки» приложения «Сайт» появится элемент blog.latest_posts. Щелкните по названию блока, чтобы увидеть его исходный код:

В верхней части этой странице скопируйте фрагмент кода (хелпер) для вставки блока на страницы сайта:

3. Добавьте код новостей в HTML-шаблон витрины

Скопированный фрагмент кода (хелпер) необходимо добавить в любой подходящий шаблон темы дизайна. Для этого в бекенде Shop-Script перейдите в секцию «Витрина», щелкните по названию нужного файла и вставьте в его содержимое скопированную строчку кода с хелпером списка новостей:

4. Начинайте добавлять новости

Готово! Для того чтобы на витрине интернет-магазина начали появляться новости, добавляйте их с помощью приложения «Блог».

Источник