Цодепал

За дуго времена сада није било, овај тренд приказивања туеетс на сидебар на веб сајта, подножја или заглавља. Многи дизајнери су осмислили ингениозне начине приказивања туеетс стварањем лепе атрактивне илустрације које их садрже. Основна сврха доношења их визуелно атрактиван је тако да посетиоци могу да се занимам и прочитајте свеже исправке да је власник сајта се пружају. Оно што овај туторијал ће да урадите је да омогући вам да се ваш феед Твиттер кутија интерактивна, тако да ваши посетиоци ићи 'Вау! То је прилично кул "када посете ваш сајт или чита фидове. Дакле, овде то иде:

1. кораку. Како да убаците феед на мом сајту?

Убацивање феед свог твиттер налога на свој веб сајт може да буде незгодно. То је добра ствар има толико туториали вани који вам пружити знања о убацивању лако ових фидова. Овде су неке ресурсе који ће вам омогућити да добијете изводе из твиттер на ваш сопствени сајт:

1. Пројектовање јединствену страницу за Твиттер ажурирања
2. 10 Авесоме начина да се интегрише са вашег сајта Твиттер
3.. Твеет!

ВордПресс корисници могу користити неке Ауесоме плугинс да добију Феед Твиттер на њиховом сајту:

1. 35 Авесоме Твиттер Плугинс за УордПресс
2. Јуиттер
3.. јКуери плугин за Твиттер

2. корак. Креирање слике Сприте.

Сада када сте успешно научили како да увезете Твиттер Феед, време је да конфигуришете подручје екрана. За овај туторијал, ја ћу да користе исти дизајн за твиттер поље као што сам користио у подножје, односно овог сајта а Твиттер бирд зури у твеет.

Шта наш примарни циљ је да кад год корисник је лебдења над Твиттер Феед поље, нека акција ће се одржати. У нашем случају Твиттер птица ће изгледати према кориснику.

Можете да креирате дизајне, као што то користећи разне твиттер иконица које је неким дивним дизајнера који воле да поделе своје радове са Веб заједнице. Овде је крајњи извор ових икона.

100 + Изузетно Беаутифул Твиттер иконе и дугмад (Увек имајте на уму да питате дизајнера прво пре употребе ове иконе.)
Бесплатно вектор икона поставити ПродуцтивеДреамс.цом

Користио сам иконице које је ПродуцтивеДреамс. Након креирања једноставну кутију у Пхотосхопу. Поставите нормални Твиттер бирд икона тј онај са попречног пресека погледом птице, на дну десне стране бокса Птица тако да изгледа као да гледа унутар кутије. Сада залепите другу твиттер птица икону, један који изгледа као да гледа ка гледаоцу.

Затим притисните икону нагнутим бирд изнад старијег икону коју ставља у доњем десном углу оквира такав да изгледа као двоглави твиттер бирд као што је приказано доле

Сада скривање нагнутим твиттер бирд икону и правилно означити квадрат који садржи нормалан твиттер бирд користећи упутство линије. Уверите се да су и померањем и нормално бирд уклапају у истом тргу од стране смерницама.

Изрезали слику са нормалним твиттер бирд икону дуж смерницама и отворите нову датотеку и налепите га тамо. Затим проверите висину изрезану слику и повећати величину платна за тај износ вертикално. То се ради тако да можете да налепите нагнутим твиттер бирд верзију на истом платну да донесе коначну обрада слике вилењак.

Сакријте нормалан твиттер бирд икону и чине други накреће бирд видљив. Онда изрезали слику поново дуж линија водич баш као што сте учинили за претходну слику. Копирајте слику и налепите га на ново креирани платну где сте налепили на другу слику. Подешавање слике тако да се правилно уклапа у целу платно. Ваша Сприте слика је спреман за употребу и треба да изгледа овако:

3. корак. Кодирање птицу на живот!

ХТМЛ скелет на Твиттер Феед поље ће бити једноставна. Ту би главни контејнер див садржи Твиттер Феед, птица и опциони "Фоллов Ме" линк.

 &лт; див ид = &Куот; &гт; &лт; Твиттер &Куот; хреф = &Куот; хттп://твиттер.цом/СумеетЦхавла&куот; ид = &Куот; Твиттер- Линк &Куот; &гт; Фоллов Ме! &лт; / &гт; &лт; див ид = &Куот; Твиттер-птица &гт; &лт; &Куот; / спан &гт; &лт; - Ваш Феед Твиттер дође овде - &гт; &лт; / спан &гт; 

ЦСС за контејнер див тхе '# Твиттер "је врло једноставна. Тхе '# Твиттер-птица' див ће да садржи птицу. То би требало да имају половину висине првобитне вилењак смо направили јер је само једна од две слике у вилењак ће бити приказан. Коришћење ЦСС спритес је добра пракса, јер смањује сервера захтеве, па смањује време учитавања и спречава нагле трепери на слици када је лебдела по први пут.

Тхе Твиттер бирд спан треба плутао са десне стране и негативне маргине треба да буду додељени њој тако да птица изгледа да неки шта изван контејнер див. Постави позадинску позицији 'топ', тако да нормална Твиттер птица се приказује. Да би завршне радове у нашу Твиттер Феед кутији, само промените положај Слика за позадину див тхе 'Твиттер-бирд' то 'задње' кад год корисник лебди над контејнер див.

 # Твиттер {
	 цолор: # 658097;
	 позиција: релативна;
	 ширина: 332пк;
	 висина: 122пк;
	 бацкгроунд-цолор: # 1ф1ф1ф;
	 бордер: 1пк солид # 414040;
	 бацкгроунд-позиција: лево дну;
	 бацкгроунд-репеат: но-репеат;
	 паддинг-лефт: 10пк;
	 паддинг: 10пк;
 }
 # Твиттер-птица {
	 бацкгроунд-имаге: урл (имагес / твиттер.јпг ');
	 бацкгроунд-поситион: топ;
	 позиција: релативна;
	 флоат: ригхт;
	 маргин: 32пк;
	 маргин-боттом: 75пк-;
	 ширина: 101пк;
	 висина: 100пк;
	 бацкгроунд-репеат: но-репеат;
 }
 # Твиттер: ховер # Твиттер-птица {
	 бацкгроунд-поситион: боттом;
 }

Да бисте видели колико крајњи резултат ће изгледати, само идите доле до подножја на дну ове странице.

Примери

Гопал Рају из ПродуцтивеДреамс је направио његов Феед Твиттер изгледају веома живахна и светао. Тхе Твиттер птица интерактивна у веома пријатељском и повремене начин. Он намигне и приказује укупан број следбеника да је има.

Пре свцхост.еке:

Након Ховер:

То је био једини сајт који сам могао наћи направили Твиттер Феед кутија интерактивни. Ако момци пронаћи неки други сајт који прати овај тренд само писати о томе у коментару а ја ћу се уверите да га додате овде.

Тагс: ЦСС , дисплеј хране , хране за животиње , како да , Сприте , Твиттер

О аутору

Сумеет је оснивач цоде-ПАЛ. Он ради као веб девелопер, је хардкор програмер, радохоличар, забаван момак и воли своју породицу. Пратите га на Твиттер и Фацебоок.

Те моћи следити ико одговор за данашји улажење дроз РСС 2.0 фида. Можете оставити одговор , или трацкбацк са свог сајта.

Поделите знање

Остале Поруке вам се можда свидети

• Како кодирати преклапање картицама Маин Мену
• Лични асистент Рачунар
• Креирање Неон Блинк ефекат за обрасце користећи ЦСС3 и јКуери
• УордПресс Година у преглед: Тхе Бест оф 2011 Туторијали