உங்கள் வலைத்தளங்களில் படத்தை அசைவூட்டம் செய்வது எப்படி

பல பதிவர்கள் முழுமையாக தங்கள் இணைப்புகள் மற்றும் படங்களை தனிப்பயனாக்குதலில் தவறுதலாக உருவாக்குகின்றன. தனிப்பயனாக்குதலில் போட்டியில் மற்றவைகளை வெளியே நிற்க செய்ய முடியும்! எனினும், மாறாக ஏற்றும் நேரம் அதிகரிக்கிறது மற்றும் இங்கு செயல்நீக்க பயனாளர்களின் வலைப்பதிவுகள், அதிகரிக்க சில
JavaScript ஐ பயன்படுத்தி இணைப்புகள் மற்றும் படங்களை இடமிருந்து வலமாக மற்றும் எதிர்மாறாக பயன்படுத்துகின்றனர். நாம் CSS3 பயன்படுத்த போகிறோம்! அதை நாம் மேற்கொண்டு செல்லலாம்? 


இந்த டெமோ பாருங்கள்:



Live Demo

பிளாகருக்கு இணைப்பு Nudging விளைவு சேர்த்தல்


1. பிளாகர்> வடிவமைப்பு> திருத்து பக்கத்துக்கு செல்லவும்
2. உங்கள் டெம்ப்ளேட்டை மறுபிரதி எடுத்துக் கொள்ளவும்
3. ]]></b:skin> தேடல்
4. கிழ்கண்ட குறியீட்டை தேடல் குறியீட்டுக்கு மேலே ஒட்டவும்
/*--- NILAVAITHEDI Link Nudging Effect ---*/ .mbt-nudge { -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; -ms-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .mbt-nudge:hover { margin-left: 25px; padding-left: 5px; }
ஸ்விங்கிங் அளவை அதிகரிக்க அல்லது குறைக்க bolded மதிப்புகளை திருத்தவும்
5. உங்கள் டெம்ப்ளேட்டை சேமிக்கவும். முடிந்தது!


இது எவ்வாறு இயங்குகிறது?


இந்த விளைவை செயல்படுத்த விரும்பும் போதெல்லாம், வெறுமனே படங்களை இயக்க அல்லது சுழற்ற, உங்கள் போஸ்ட் எடிட்டர் திருத்த முறையில் பின்வரும் குறியீட்டை சேர்க்க வேண்டும்


இணைப்பு Nudging இந்த குறியீட்டை உபயோகிக்க:
<a href="ADD URL HERE" class="mbt-nudge">ADD TEXT HERE</a>இந்த மாற்றங்களை செய்யவும்:


1. ADD URL HERE உங்கள் இணைய முகவரியை இணைக்கவும் 
2. ADD TEXT HERE இங்கு உங்களது உரையை சேர்க்கவும் 


இமேஜ் Nudging பயன்படுத்த
<img src="IMAGE LINK HERE" border="0" alt="Image Description here" class="mbt-nudge" />இந்த மாற்றங்களை செய்யவும்:


1. IMAGE LINK HERE இங்கு பட இணைப்பு மாற்றவும்
2. Image Description here இங்கு பட விளக்கம் மாற்றவும். கட்டாயமில்லை!!