javascript

Как вставить свой код в Зеро-блок

Если кратко - делаете зеро-блок. Вставляете блок с нужным HTMLем. Добавляете в этот html специальный JS-код, которые перенесет его в зеро-блок. А теперь по порядку.
Создаем зеро блок, где размещаем в нем текст, который будет заменен плагином группы из Вконтакте.
После того как сохранили зеро блок, нажимаем правой кнопкой на нашем текстовом элементе (у меня это "Загрузка виджета от вКонтакта"). Появится контекстное меню. В этом меню выбираем "Просмотреть код" или "Inspect" или "Исследовать элемент" (зависит от браузера)
Внизу или справа появится панель, в которой можно увидеть код страницы и там нам нужно запомнить содержание атрибута field. В моем случае атрибут равен tn_text_1470210011265
Теперь идем во Вконтакт за нашим кодом виджета. Я решил вставить виджет опроса. После добавления виджета, нужно пройти в раздел "Мои приложения" во вКонтакте. И у только что добавленного виджета-приложения в настройках добавить два домен свой и tilda.cc - чтобы виджет работал после публикации.
У виджета есть кусок в который и вставляется собственно сам виджет. Вот этот кусок и нужно вставить внутрь зеро блока. Поэтому перепишем код от ВК.
Публикуем и наслаждаемся виджетом внутри Зеро-блока.
Зеро
загрузка виджета от вКонтакта
и вКонтакт
Если
Общий принцип
Есть какой-то HTML-код, не JS, а именно HTML, с JS чуть сложнее или проще - зависит от ситуации :)

Прописываем этот код заместо "Здесь какой-то специфический HTML-код". Узнаем содержание поля field у нужного элемента в Зеро-блоке и указываем его в block_field_value и все.

<div style="display:none" id="speccode">
Здесь какой-то специфический HTML-код 
</div>

<script type="text/javascript">
$(document).ready(
    function(){
       var block_field_value = 'tn_text_1470210011265';
        $('[field='+block_field_value+']').html( $('#speccode').html() );
        $('#speccode').remove();
    }
);

</script>
Зеро-блок
Tilda Publishing
Вставляем карту Google Maps
Как вставить карту
Чуть другой код для вставки Гугл-Карт в Зеро-блок.

<script type="text/javascript">
var map;
window.initMap = function() {
    $(document).ready(function (){
        var blockid = 'boxformap';
        var $obj = $('.tn-elem[data-elem-id="1470210224069"]');
        $obj.attr('id', blockid);
        
        $obj.width('300').height('300');
        map = new google.maps.Map(document.getElementById(blockid), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 8
        });

    });
};

</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvt6KRBF1JEMceIQrcytEMQ_JsiZKcQEo&callback=initMap" async defer></script>
Зеро-блок
Tilda Publishing
Вставляем карту от Яндекса
Loading yandex map
Как вставить карту адаптивную
Чуть другой код для вставки Яндекс-Карт в Зеро-блок. Добавляем блок с Яндекс-картой. Запоминаем код этого блока. Потом вставляем в Зеро-блоке html-блок

<!-- это нужно вставить в html-блок в зеро-блоке -->
<div id="recyandexmapid">Load maps ...</div>

<!--  а это в обычном HTML-блоке -->
<style type="text/css">
.t-map, .t117_map,.t117,.t117>div {
display: block;
height: 100%;
}
</style>

<script type="text/javascript">
var ymapboxid = '#recyandexmapid';

$(document).ready(function(){
    $(ymapboxid).html('');
    var h = $(ymapboxid).parent().height();
    $(ymapboxid).css('height', h+'px');
    $('#rec57844688').css({height: '100%', display:'block'}).appendTo(ymapboxid);
    $('#rec57844688').find('.t-map').attr('style','width:100%; height: 100%; display: block;');
});
</script>
Made on
Tilda