Teck 92 :: Android Apps | Blogging | Tips And Tricks | Template

Showing posts with label Social Apps. Show all posts

Add Facebook Emotions in Blogger Comment Box

Here are some amazingly funny emoticons compatible with your Blogger comments - also with threaded commenting system! If you want to know how to add them, just follow the next steps:

Step 1.

Go to Dashboard - Template - Edit HTML - Proceed

Add Facebook Emotions in Blogger Comment Box

...and select Expand Widget Template (don't forget to make a backup)

Add Facebook Emotions in Blogger Comment Box

Step 2. Search (using CTRL + F) for this code:

For previous commenting system:

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

For threaded comments:

<div class='post-footer-line post-footer-line-3'>

Step 3. Add the below code just above it

(for threaded comments, add the code after):

<b:if cond='data:blog.pageType == "item"'>
<div style=' width: 450px; text-align: left; border: 1px dashed #0084ce; background: transparent; padding: 10px; color:#000000; font-weight:bold; '>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9VbT3wjAQx7h_KmMldEGEwU605heV9Ndk20od2NvBB5Yg4MxtBBSITiAXOdkiuuHA_WY517T2OwcsXiHFs6jElA50UPyKDTlARRmw1-O5sePXbMVodIKIJdgH1mqeM5Gihmten9x-B773/s1600/helplogger.blogspot.com(1).gif'/> :a
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-OHnCGFSoxMntkBPllhxC9bE_QNlJaS4yW3spR8_lOj33-R4_8LNCPHMVQxcji98p6TYwq2dlR59TQ8Z6QzQlfPVUtDC4o3t8WXNkwxTpzTWZBudH9IUEJfFDu3Izuf5LYouYsnJ5gtM/s1600/helplogger.blogspot.com+(2).gif'/> :b
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4dfE-SnipHRL4jKAiR3r9-rUrvUrKogazU2beu5vGSY2tUG7EikbF2mSYYK8oFkrX_mgP9Lvsi2Qv8BYbPpo1-bLlPVg2TsK6XrjVE3x4ivbnHgaF9YIZMyWd1JPDYDToE6jTTuGtB6U4/s1600/helplogger.blogspot.com(3).gif'/> :c
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAqyPRWJ1sAS6GweCtOabRWUsU_0QkQNmW32NMe3AdwQBox0_OTUN1YkTElVYg0bv8s78wHRpO5bjGkjZojsvCf_KlO91MI4WXzoH_0cIMjivAYjd6JN4ZHZHEC0U5y6UjCBbf0fPhWEfX/s1600/helplogger.blogspot.com(4).gif'/> :d
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEismyvhplbC0yYoJ7nYFeHjbzeGHfqHW-TksWt-WtyYrnBcrGUaQoUjc9yDYnb6yjETzsvnvmGS8-wVC5j0rNM1rYvYjNS2WefI8RIfJpDX0Kd2_37giS9NdnpDOMIoqWJXL7wDISJRAPF3/s1600/helplogger.blogspot.com(5).gif'/> :e
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjuPZGulDSSVh5nhOri58vCHN-yWRmMNZHwKs4dnn_hlUMcDd1Ye2WV6MToRAa_cbHfJhtzpOz8Z0nEhFdXvf9NPYVKKgNfnQk17V-vFn03afb_ALji-lnHhWsrCH73fdz_azb0s5OgFVK/s1600/helplogger.blogspot.com(6).gif'/> :f
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib-euWBcCLMOk4RMLBzT1iUi_gVbsSCz30Ff3RHnaYKwH_KfLZ887UGfOMxRGoQy0F7eUWOhDabrPbWuU-j-AEyc0yxMFwkocFftQrHWYb1BLn9RX5tndGUwE2WJqsTb_kNfHpKZKnFedZ/s1600/helplogger.blogspot.com(7).gif'/> :g
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYlDNgaZsv4tGmCT7E2VnfNg6ec3MkgoKadSWB458wxTJxX3PBZJ8Wi93391HMxtw5uImjCuPwQnuAR0-XHp0yIrKlM-CU3zOvV8XXMuDQcxqy0fE2-JS5UAIBQMhVo8ti4tlsNo1fqGcs/s1600/helplogger.blogspot.com(8).gif'/> :h
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAqsu-IKVoNLF8pvbJypdDscyJCbnZkuapH2ygG2woP4HhYXAZ1mMKnpaaDOreytBIreH1zHadnJm3HQ-6neZQSFUmGEr1ABm00keZSh7kGrL6qzfPGSpV1vXB_OjQYUMI36O_-ACunagY/s1600/helplogger.blogspot.com(9).gif'/> :i
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivSt80qpFqflA5g-Mx2pjaZ7zZwcI5OS2yOjgH_PPUbkl0oPPUK6T2NN_66DFukc8-tivulNsgOI4p7xUkkchZxl2voAfEYvp_Ow1vdWvTwE7SbKG_T6-xS4CXvFR36jmROxlczEdypQzj/s1600/helplogger.blogspot.com(10).gif'/> :j
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimlqVN4GNcP-NiOHWKQkS7IgI95jnkiFdqxuz0lCV6UTgIp6BUgJCyqFqKdUP7sJLxlUk5EMHWpKCPX8Pprs6-8qdO7k7aljh9CM0HidBpJ9WyxOqqfnjX2VIthxraddQjagDxa1WpNIdf/s1600/helplogger.blogspot.com(11).gif'/> :k
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUOGAJ3S4mOEXL-yI6NqL3nSq9DOaqobLlXPbtBx3Vg9gKa0xEqRXXfoC9EGOdJJJy4B0Iv_MFl0LC6dcp1Xza8rmmiidSZ6K1ROvgjQ4d5iJNnxHadzGfAne33E6d_pC7cHgh7W7Hwn7C/s1600/helplogger.blogspot.com(12).gif'/> :l
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDntpVJHLIH6YuCjbuLFT9GwH85QuxLJsDzU-TZfHvXlpLmjcYzbyLZS_W2-5P7WnW4PKpnNks1_k2FS-Xgt1YbHKRuRA8k4THjI34g4trL8zW-mdBsfWmYpeHMEk0POJwQQG7DF54lmzJ/s1600/helplogger.blogspot.com(13).gif'/> :m
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy4lzaa2G0e4TcPqcO3xZp1DAPo2mPP1iKhRcJFCk7Th_zeCWeH-LcoLFIYdg59yJNCsRQiPNn2dOIqeYvXbCf3zsO6ioNzQb0JpDTkaiDYdA7LiSZxpcPFO7sK1c_t1kI3QGnp5PpVMrb/s1600/helplogger.blogspot.com(15).gif'/> :n
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjICakt6yZKNzmsUu74PYg3HTd11x9-zVCSgQL31cY7pvf-KPLrAqQBWuMgHMU1bzwHkcHFlIOeRMVCNSERQ6TJHKP-4NlMkZldV4RLvFZ-nrdwZfm8XTHpth8wVGk64s59ukFuHuWbw0hu/s1600/helplogger.blogspot.com(16).gif'/> :o
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid3pp-iSI8zV81j_r8nCfo98axQz3Pmqvd1DzP9Rcjtmn9U4gpNVzH6f185L-1LguFhJnDB2mn3kf3SK3XxUU1oBuOC_kAO6JMPVo5jJWvhvCtQBFF_tn5IBkDSwcFgn4nXUtbwZdewkI4/s1600/helplogger.blogspot.com(14).gif'/> :p
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYEpDnmWdzN5VQXRzkJj9swJ_iJKh-NIV_K_oVvK4M44Nf2MbhycKHB0YBRKLDL9jwjxEWWUsMEdAyq6YU9sdRcVWk1Q05hTEUp-Ju7iGGHOZq1EogaxjX-3tRJ2UhRZwp0-pUcUqGuEUc/s1600/helplogger.blogspot.com(17).gif'/> :q
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWOrpkowrzM7bO1Fp0FbGCnxmdYjNRXnOKKbP6Y-eFZz-AQISh2G_9FX3XgpOK6TDY4NwVquL19zyeru-Z_XAVer47z4FTd-sweLfcGZmzy-CAgLOATFVrA1HDBIpMv4xkNMZ_vCqhMau7/s1600/helplogger.blogspot.com(18).gif'/> :r
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoj_3DgybEtxY3tsfK-rmWrjDggOMi_wPQXsGA_uXgmEBpTppcfuh02cOrrp3PMitfkLrUN_1GmS-q5xOPp8PvlkQNLH1UlsKrnO-O9BXQl4gYWlBA1RLTG6EnaCO5Of4FBWL9aWqWEd2u/s1600/helplogger.blogspot.com(19).gif'/> :s
 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEvnga5jefp7iJZoaYJC-3XW17T0qpkvZDb1ZsyzxhPlaB-73qgg-QHFR0DGtvu_TINFWq9_uQo2N9yzoRtJ_wZS64U9JIM753-Q3MbP_k560cV5B0gdqvQ-wi6DitKk-mIOwQrzE2SyMD/s1600/helplogger.blogspot.com(20).gif'/> :t <a href='http://helplogger.blogspot.com/2012/05/add-facemoods-emoticons-to-your-blogger.html' style='color: rgb(30, 122, 183); font-size: x-small;'>Add smileys to Blogger + </a>
</div></b:if>

Step 4. Now search for this piece of code:

</body>

Step 5. And add the following code immediately above it:

For previous commenting system:

<script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons.js"/>

For threaded comments:

<script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons threaded.js"/>

Step 6. Save the Template. Now, enjoy your comments!

Stylish Facebook Like Subscribe Popup Box For Blogger/BlogSpot

Hello fellow reader today I am going to tell you how you can add Cool Facebook Like Subscribe Box to your Blogger blog.Subscribe Box is a very important widget for blogs who want their visitors to return. This box which is replica of the Facebook Login box converted to Subscribe box by Your PC Genie can fetch you lot of subscribers. The prerequisite of this template will be an account made at Feedburner where subscribe by email is enabled.
This widget has an elegant look and is very beautifully coded. The bar and button glow when they are active (mouse is pressed on them). A live working demo of this widget can be seen by clicking the button below.

Adding the HTML/CSS in Layout

To add this widget's code go to Blog Title → Layout → Add Widget → HTML/JavaScript and paste the given code in the box opened.

<center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Teck92', 'popupwindow', 'scrollbars=yes,width=70%,height=520');return true" class="login">
<h1>SUBSCRIBE TODAY</h1>
<img src="http://png.findicons.com/files/icons/2198/dark_glass/128/mail_appt.png" alt="Smiley face" align="LEFT" height="48" width="48" /> <center><font size="3" color="white"><span style="line-height:25px"> Sign up and receive our free Newsletter  </span></font></center><br/>
<input type="hidden" value="Teck92" name="uri" />
<input type="email" name="email" class="login-input" placeholder="Email Address" autofocus />
<input type="hidden" name="loc" value="en_US" />
<input type="submit" value="Subscribe" class="login-submit" />
</form>
</center>
<style>
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(bubble.gif) no-repeat;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
}

::-moz-focus-inner {
padding: 0;
border: 0;
}
:-moz-placeholder {
color: #bcc0c8 !important;
}
::-webkit-input-placeholder {
color: #bcc0c8;
}
:-ms-input-placeholder {
color: #bcc0c8 !important;
}
.input {
font: 12px/20px "Lucida Grande", Verdana, sans-serif;
color: #404040;
background: #ebc9a2;
}
.input {
font-family: inherit;
font-size: 12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.login {
padding: 18px 20px;
width: 80%;
background: #3f65b7;
background-clip: padding-box;
border: 1px solid #172b4e;
border-bottom-color: #142647;
border-radius: 5px;
background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
background-image: radial-gradient(cover, #437dd6, #3960a6);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
margin-bottom: 20px;
font-size: 24px;
font-weight: bold;
text-align: center;
color: #fff;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
.login-input {
display: block;
width: 90%;
height: 37px;
margin-bottom: 20px;
padding: 0 9px;
color: white;
text-shadow: 0 1px black;
background: #2b3e5d;
border: 1px solid #15243b;
border-top-color: #0d1827;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
outline: 0;
background-color: #32486d;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
line-height: 35px;
}
.login-submit {
display: block;
width: 100%;
height: 37px;
margin-bottom: 15px;
font-size: 14px;
line-height: 10px;
font-weight: bold;
color: #294779;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
background: #adcbfa;
background-clip: padding-box;
border: 1px solid #284473;
border-bottom-color: #223b66;
border-radius: 4px;
cursor: pointer;
background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
background: #a4c2f3;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}
.login-help {
text-align: center;
}
.login-help > a {
font-size: 11px;
color: #d4deef;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
text-decoration: underline;
}
</style>

Once you have pasted the code change Teck92 (which occurs at 2 places in the code) with your Feedburner ID. Finally save the widget and the template.

You are done now. Now you and your visitors can see this Cool Facebook Like elegant Subscribe box in your blogger blog and subscribe to your receive all the recent posts directly in their inbox.