Речь пойдёт, как можно заметить из названия, о воровстве. На самом деле я не призываю красть чужую интеллектуальную или какую-нибудь собственность, а лишь описываю такую техническую возможность.
Бывает, что гуляя по сайтам в поисках козырной информации, можно найти довольно зачётные дизайнерские работы, будь то менюшки, блоки и т.п. Или хочется сделать похожий на чьё-то творение сайт. Что дальше? Можно, владея css или html, попробовать повторить оригинал. А если не охота возиться, да и знания слабоваты? Правильно, будем заимствовать чужой код. Вполне возможно, что на его основе получится нечто более удачное, или проснётся заинтересованность в углублении своих знаний.
Приступим.
Сегодняшним объектом исследования станет сайт www.onextrapixel.com. В самом дизайне блога на первый взгляд нет ничего особенного - обычный перегруженный вордпресс, но одна менюшка в сайдбаре мне понравилась. Её можно увидеть, спустившись чуть ниже по странице: About OXP.
На скриншоте на подопытный элемент смотрит стрелка:
По первому взгляду - это обычные ссылки со стилями css. Понадобится только два инструмента: браузер и блокнот, куда нужно будет копировать код по частям.
Самая ответственная часть работы - правильно выделить мышью нужной элемент, чтобы не потерять ничего важного. В данном случае все пункты меню. И так, выделяем мышью аккуратно, начиная от названия меню, которое может пригодится, и через правую клавишу мыши "исходный код выделенного фрагмента" (речь идёт о mozilla firefox) получаем такой исходник (скриншот):
Копируем в блокнот.
В данном отрезке кода страницы нас интересуют те элементы контейнера, которые указывают на параметры в стилях, это:
span id="homeicon"
span id="contacticon"
span id="abouticon"
span id="authoricon"
li class="lastline"
span id="adverticon"
А также:
div class="oxplist"
ul class="oxpleft"
ul class="oxpright"
Теперь снимаем выделение с меню и открываем исходник всей страницы, ищем ссылку на файл со стилями css. Файлов может быть несколько, в данном случае он один (print не в счёт):
Открываем этот файл, с помощью поиска ищем все слова (те, что в кавычках) из предыдущего списка (вместе с параметрами и тоже копируем в блокнот).
Получится вот набор стилей, который нужно заключить в теги style:
В данном случае повезло, пути к картинкам прописаны целиком, включая имя хоста. Если попадётся ссылка вида /img/143.jpg, значит до первого слеша нужно подставить имя сайта.
И так, если код с блокнота поставить сразу в блог (виджет html), то будет точная копия того меню:
А теперь живое демо, адаптированное под blogger (картинка (все иконки берутся через позиционирование с одной png) перенесена на хостинг пикассы):
Здесь наблюдается небольшой сдвиг, но в сайдбаре (см.скриншот) всё в порядке.
Получившийся код:
<style>
#about {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg7X8z0kgYRMP_pCYeeo5pgvYpSgcHN3Qi6eNByMps5bKf_CqgTsuMZ4lkg1wIkQu93AGVejGc9_KNqJEPSC96KwHQXZQ4cUOVTqV-_1BsbHoyaf7sfJwvPLK_Hhlu2LKLLbNo2fqoe7U/s1600/f.png) no-repeat -2px -311px; text-indent:-9999px; display:block; width:360px; height:36px;}
.oxplist {background:#fff; overflow:hidden; width:360px;}
.oxplist li:hover {border-left:2px solid #c2615f;}
.oxpleft {float:left; border-right:1px solid #eeeeed; width:160px;}
.oxpright {float:left; width:196px;}
.oxpleft li, .oxpright li { padding:5px 15px; border-bottom:1px solid #eeeeed; overflow:hidden;}
.oxpleft li span, .oxpright li span {float:left;}
.oxpleft li a {padding:2px 0 0 30px; display:block;}
.oxpright li a {padding:2px 0 0 30px; display:block;}
#homeicon {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg7X8z0kgYRMP_pCYeeo5pgvYpSgcHN3Qi6eNByMps5bKf_CqgTsuMZ4lkg1wIkQu93AGVejGc9_KNqJEPSC96KwHQXZQ4cUOVTqV-_1BsbHoyaf7sfJwvPLK_Hhlu2LKLLbNo2fqoe7U/s1600/f.png) no-repeat -275px -58px; width:20px; height:20px; display:block;}
#contacticon {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg7X8z0kgYRMP_pCYeeo5pgvYpSgcHN3Qi6eNByMps5bKf_CqgTsuMZ4lkg1wIkQu93AGVejGc9_KNqJEPSC96KwHQXZQ4cUOVTqV-_1BsbHoyaf7sfJwvPLK_Hhlu2LKLLbNo2fqoe7U/s1600/f.png) no-repeat -275px -75px; width:20px; height:20px; display:block;}
#abouticon {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg7X8z0kgYRMP_pCYeeo5pgvYpSgcHN3Qi6eNByMps5bKf_CqgTsuMZ4lkg1wIkQu93AGVejGc9_KNqJEPSC96KwHQXZQ4cUOVTqV-_1BsbHoyaf7sfJwvPLK_Hhlu2LKLLbNo2fqoe7U/s1600/f.png) no-repeat -275px -93px; width:20px; height:20px; display:block;}
#authoricon {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg7X8z0kgYRMP_pCYeeo5pgvYpSgcHN3Qi6eNByMps5bKf_CqgTsuMZ4lkg1wIkQu93AGVejGc9_KNqJEPSC96KwHQXZQ4cUOVTqV-_1BsbHoyaf7sfJwvPLK_Hhlu2LKLLbNo2fqoe7U/s1600/f.png) no-repeat -275px -133px; width:20px; height:20px; display:block;}
#adverticon {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg7X8z0kgYRMP_pCYeeo5pgvYpSgcHN3Qi6eNByMps5bKf_CqgTsuMZ4lkg1wIkQu93AGVejGc9_KNqJEPSC96KwHQXZQ4cUOVTqV-_1BsbHoyaf7sfJwvPLK_Hhlu2LKLLbNo2fqoe7U/s1600/f.png) no-repeat -275px -111px; width:20px; height:20px; display:block;}
#writeicon {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg7X8z0kgYRMP_pCYeeo5pgvYpSgcHN3Qi6eNByMps5bKf_CqgTsuMZ4lkg1wIkQu93AGVejGc9_KNqJEPSC96KwHQXZQ4cUOVTqV-_1BsbHoyaf7sfJwvPLK_Hhlu2LKLLbNo2fqoe7U/s1600/f.png) no-repeat -314px -57px; width:20px; height:20px; display:block;}
#artcleicon {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg7X8z0kgYRMP_pCYeeo5pgvYpSgcHN3Qi6eNByMps5bKf_CqgTsuMZ4lkg1wIkQu93AGVejGc9_KNqJEPSC96KwHQXZQ4cUOVTqV-_1BsbHoyaf7sfJwvPLK_Hhlu2LKLLbNo2fqoe7U/s1600/f.png) no-repeat -314px -74px; width:20px; height:20px; display:block;}
#tagicon {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg7X8z0kgYRMP_pCYeeo5pgvYpSgcHN3Qi6eNByMps5bKf_CqgTsuMZ4lkg1wIkQu93AGVejGc9_KNqJEPSC96KwHQXZQ4cUOVTqV-_1BsbHoyaf7sfJwvPLK_Hhlu2LKLLbNo2fqoe7U/s1600/f.png) no-repeat -316px -131px; width:20px; height:20px; display:block;}
#twittericon {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg7X8z0kgYRMP_pCYeeo5pgvYpSgcHN3Qi6eNByMps5bKf_CqgTsuMZ4lkg1wIkQu93AGVejGc9_KNqJEPSC96KwHQXZQ4cUOVTqV-_1BsbHoyaf7sfJwvPLK_Hhlu2LKLLbNo2fqoe7U/s1600/f.png) no-repeat -314px -92px; width:20px; height:20px; display:block;}
#rssicon {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg7X8z0kgYRMP_pCYeeo5pgvYpSgcHN3Qi6eNByMps5bKf_CqgTsuMZ4lkg1wIkQu93AGVejGc9_KNqJEPSC96KwHQXZQ4cUOVTqV-_1BsbHoyaf7sfJwvPLK_Hhlu2LKLLbNo2fqoe7U/s1600/f.png) no-repeat -314px -110px; width:20px; height:20px; display:block;}
.lastline {border-bottom:none;}
#sidebar h2 {margin-bottom:0;}
#sidebar .sidewbox h2, .feedcountdiv, #boxleft h2 {font:bold 23px Helvetica,Arial; color:#4a4a4a; letter-spacing:-0.02em; text-shadow:0 1px 0 #fff; margin-bottom:10px;}
</style><div class="oxplist"> <ul class="oxpleft"> <li><span id="homeicon"></span><a href="http://ссылка" rel="nofollow">Домой</a></li> <li><span id="contacticon"></span><a href="http://ссылка" rel="nofollow">Контакт</a></li> <li><span id="abouticon"></span><a href="http://ссылка" rel="nofollow">О блоге</a></li> <li><span id="authoricon"></span><a href="http://ссылка" rel="nofollow">Об авторе</a></li> <li class="lastline"><span id="adverticon"></span><a href="http://ссылка" rel="nofollow">О рекламе</a></li> </ul> <ul class="oxpright"> <li><span id="writeicon"></span><a href="http://ссылка" rel="nofollow">Отправить статью</a></li> <li><span id="artcleicon"></span><a href=http://ссылка" rel="nofollow">Все статьи блога</a></li> <li><span id="tagicon"></span><a href="http://ссылка" rel="nofollow">Оглавление</a></li> <li><span id="twittericon"></span><a class="twitlink" href="http://ссылка" rel="nofollow">Мы в Twitter</a></li> <li class="lastline"><span id="rssicon"></span><a class="rsslink" href="http://ссылка" rel="nofollow">RSS подписка</a></li> </ul> </div>
Для будущего использования код надо подредактировать, проставить свои ссылки, убрать с нужных тег nofollow.
Комментариев нет:
Отправить комментарий