ब्लॉगर में एक लेखक विजेट कैसे बनाएं
Blogger
इस अवसर पर मैं ब्लॉगर्स पर एक शांत और सुरुचिपूर्ण लेखक विजेट बनाने के तरीके पर एक ट्यूटोरियल साझा करूंगा। यह ट्यूटोरियल मुझे उन महिला ब्लॉगर्स में से एक से मिला जो शायद ज्यादातर पहले से ही उसे जानते थे, वह इग्निएल है या अक्सर एमबीए इग्नाल कहा जाता है।
यह लेखक विजेट अपने आप को बढ़ावा देने के लिए एक माध्यम हो सकता है, इसलिए यह विजेट सिर्फ प्रदर्शन के लिए नहीं है। लेकिन यह विजेट अपने आप को बढ़ावा देने के लिए कार्य करता है ।
ब्लॉगर में एक लेखक विजेट कैसे बनाएं
आप में से जो लोग देखो, रंग या दूसरों को पसंद नहीं है के लिए आप अपने स्वाद के लिए अनुकूलित कर सकते हैं ।
1. पहली बार हम Blogger.com में मिलता है ।
2. थीम मेन्यू पर लॉगइन पर क्लिक करें और फिर एडिट एचटीएमएल पर क्लिक करें।
3. फिर कोड </style> के ठीक ऊपर कोड के नीचे पेस्ट कॉपी करें।
/* Author Box ala IGNIEL.COM */
#ignielAuthor{text-align:center;background-color:#2f303f;color:#bdc3c7;line-height:20px;padding:15px 10px} #ignielAuthor svg {width:14px;height:14px;margin-left:-3px;vertical-align:-3px} #ignielAuthor svg path {fill:#bdc3c7} #ignielAuthor img{border-radius:100px;max-width:100px;margin-bottom:10px} #sidebar-wrapper #ignielAuthor h2, #sidebar-wrapper #ignielAuthor h3{background:transparent;padding:0px} #sidebar-wrapper #ignielAuthor h2{font-size:20px;display:inline-block} #sidebar-wrapper #ignielAuthor h2:after{border:0px} #sidebar-wrapper #ignielAuthor h3{font-size:15px;font-weight:normal} #sidebar-wrapper #ignielAuthor h3:after{display:none} #ignielAuthor hr{border:none;height:1px;background-color:#bdc3c7;width:70%;margin:10px auto} #ignielAuthor2{width:100%;margin-bottom:20px} #ignielAuthor2 svg {width:20px;height:20px;vertical-align:-4px} #ignielAuthor2 svg path {fill:#fff} #ignielAuthor2 li{list-style:none;background-color:#008c5f;color:#fff;width:50%;display:inline-block; text-align:center} #ignielAuthor2 li:hover{background-color:#37b185}#ignielAuthor2 li:nth-child(2){margin-left:-3.5px;border-left:3px solid #2f303f;float:right} #ignielAuthor2 li a{color:#fff;padding:10px 30px;line-height:40px} .ignielAuthor{text-align: left;font-size: 12px;display:flex;justify-content:center} .ignielAuthor .tablekiri {width:50px} .ignielAuthor .tablekanan{width: 85px;padding-left: 20px}
#ignielAuthor .medsos svg {width:20px;height:20px;margin-top:7px} #ignielAuthor .medsos svg path {fill:#fff} .medsos .facebook{background:#3a579a} .medsos a{display:inline-block;text-align:center;margin-right:3px;color:#fff;border-radius:100%;width:35px;height:35px} .medsos a:hover{transform:rotate(360deg)} .medsos .twitter{background:#00abf0} .medsos .googleplus{background:#df4a32} .medsos .youtube{background:#cc181e} .medsos .instagram{background:#992ebc} .medsos .pinterest{background:#cd1c1f} .medsos .linkedin{background:#2554BF} .medsos .tumblr{background:#314358} .medsos .rssfeed{background:#ee802f}
#ignielAuthor .ignielBounce svg{width:20px;height:20px;vertical-align:-4px;margin-left:10px} #ignielAuthor .ignielBounce svg path{fill:#fff;} .ignielBounce{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:900;font-size:16px!important;margin:0;padding:5px;text-align:center;border-radius:3px;margin:0;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} .ignielBounce {-webkit-animation:rubberBand 1s linear 1s infinite normal;animation:rubberBand 1s linear 1s infinite normal}
@media screen and (max-width:320px){#ignielAuthor svg{width:12px; height:12px}}
@keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}
@-webkit-keyframes rubberBand{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
}
4. बचाओ।
5. ब्लॉगस्पॉट डैशबोर्ड पर, लेआउट या लेआउट मेनू का चयन करें। इसके बाद साइडबार सेक्शन में गैजेट > HTML/जावास्क्रिप्ट ऐड पर क्लिक करें।
6. शीर्षक अनुभाग में स्पष्ट करें। फिर विजेट लेखक को प्रदर्शित करने के लिए नीचे दिए गए कोड के साथ सामग्री अनुभाग भरें।
<div id="ignielAuthor"><img src="https://4.bp.blogspot.com/-7xS5as3Pad4/WKg5V1rMamI/AAAAAAAAEjY/Sl8SihvYjqghIIN7VEm-PkWWwjCTsCt9wCPcB/w100-h100-p-k-no-nu/ignielcom-Author.jpg" alt="igniel.com Author" title="igniel.com Author"/><br/><h2>AUTHOR: Igniel</h2> <h3>Sukabumi, Indonesia</h3><i>"Stimulate your passion!"</i><hr/><b>RESUME SINGKAT</b><table class="ignielAuthor"><tr><td class="tablekiri">CSS3</td><td>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></svg>
</td><td class="tablekanan">Javascript</td><td>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></svg>
</td></tr><tr><td>HTML5</td><td>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></svg>
</td><td style="padding-left:20px">Photoshop</td><td>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></svg>
</td></tr><tr><td>PHP</td><td>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,15.4V6.1L13.71,10.13L18.09,10.5L14.77,13.39L15.76,17.67M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></svg>
</td><td style="padding-left:20px">CorelDraw</td><td>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></svg>
<svg viewbox="0 0 24 24"><path d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"/></svg>
</td></tr></table><a class="ignielBounce" href="http://www.igniel.com/p/contact.html" title="Hire Igniel to do your job">SEWA JASA SAYA <svg viewbox="0 0 24 24"><path d="M1.5,4V5.5C1.5,9.65 3.71,13.28 7,15.3V20H22V18C22,15.34 16.67,14 14,14C14,14 13.83,14 13.75,14C9,14 5,10 5,5.5V4M14,4A4,4 0 0,0 10,8A4,4 0 0,0 14,12A4,4 0 0,0 18,8A4,4 0 0,0 14,4Z" /></svg> </a><br/><div class="medsos">
<a class="facebook" title="Facebook" href="https://www.facebook.com/ignieldotcom" rel="nofollow" target="_blank"> <svg viewbox="0 0 24 24"> <path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" /></svg> </a>
<a class="twitter" title="Twitter" href="https://www.twitter.com/igniel" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24"> <path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" /> </svg></a>
<a class="googleplus" title="Google+" href="https://plus.google.com/101013193020600368206" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24"> <path d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z" />
</svg> </a>
<a class="youtube" title="Youtube" href="https://www.youtube.com/c/Igniel" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24"> <path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z" /> </svg></a>
<a class="instagram" title="Instagram" href="https://www.instagram.com/ign.iel" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24"> <path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" /></svg> </a>
<a class="rssfeed" title="RSS Feed" href="https://feeds.feedburner.com/igniel" rel="nofollow" target="_blank"><svg viewbox="0 0 24 24"> <path d="M6.18,15.64A2.18,2.18 0 0,1 8.36,17.82C8.36,19 7.38,20 6.18,20C5,20 4,19 4,17.82A2.18,2.18 0 0,1 6.18,15.64M4,4.44A15.56,15.56 0 0,1 19.56,20H16.73A12.73,12.73 0 0,0 4,7.27V4.44M4,10.1A9.9,9.9 0 0,1 13.9,20H11.07A7.07,7.07 0 0,0 4,12.93V10.1Z" />
</svg></a>
</div>
</div><div id="ignielAuthor2">
<ol><li><a href="https://www.blogger.com/follow-blog.g?blogID=6398971660957230974" title="Follow Igniel" target="_blank"><svg viewbox="0 0 24 24"> <path d="M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M6,10V7H4V10H1V12H4V15H6V12H9V10M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12Z" />
</svg> Follow</a></li>
4. बचाओ।
उपरोक्त कोड फ़ॉन्ट भयानक का उपयोग नहीं करता है, लेकिन एसवीजी आइकन का उपयोग करता है। क्योंकि कोड एसवीजी आइकन का उपयोग करता है, आपकी वेबसाइट या ब्लॉग लोड करना बहुत भारी या लंबा नहीं है।
ब्लॉगर पर एक लेखक विजेट लेख कैसे बनाएं? आसान नहीं है। यदि आप ब्लॉगर्स के बारे में कोई सवाल है कृपया नीचे टिप्पणी हां ।