Add Facemoods Emoticons To Your Blogger Comments

<div dir="ltr" style="text-align: left;" trbidi="on"><br />Here are some amazingly funny emoticons compatible with your <a class="zem_slink" href="http://blogger.com/" rel="homepage" title="Blogger">Blogger</a> <br />comments - also with threaded commenting system! If you want to know how<br /> to add them, just follow the next steps:<br /><br /><br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5yKcyMMbfPdSliSm4VihmWzeBn3Znb6mo8Lk9ELLvhOJPZ_vEEvp1DHr31aCKAMw6AFQcwAiHfttFTv774XQbULLwGbcvZzBT3sYxEAzZiwRYLyG9IfS7nHeB1NICBK_FwUDWYi4iTNGD/s1600/add+facemood+smileys+emoticons+to+blogger+comments.png" style="margin-left: 1em; margin-right: 1em;"><img alt="emoticons, smileys, blogger, tricks" border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5yKcyMMbfPdSliSm4VihmWzeBn3Znb6mo8Lk9ELLvhOJPZ_vEEvp1DHr31aCKAMw6AFQcwAiHfttFTv774XQbULLwGbcvZzBT3sYxEAzZiwRYLyG9IfS7nHeB1NICBK_FwUDWYi4iTNGD/s400/add+facemood+smileys+emoticons+to+blogger+comments.png" title="facemoods emoticons for blogger blogspot comments" width="400" /></a></div><br /><div style="color: #0b5394; text-align: center;"><br /><span style="font-size: medium;"><b><a href="http://facemoods-emoticons.blogspot.com/2012/05/lorem-ipsum.html#comment-form" rel="nofollow" target="_blank">DEMO</a></b></span></div><br /><br /><br /><b><a class="zem_slink" href="http://en.wikipedia.org/wiki/USMLE_Step_1" rel="wikipedia" title="USMLE Step 1">Step 1</a>.</b><br /><br /><br /><br />Go to <a class="zem_slink" href="http://www.apple.com/downloads/dashboard/" rel="homepage" title="Dashboard (Mac OS)">Dashboard</a> - Template - Edit <a class="zem_slink" href="http://en.wikipedia.org/wiki/HTML" rel="wikipedia" title="HTML">HTML</a> - Proceed<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJokTjvkSpUqz9grYDGBorTqIwMpIYH6HxgsShVYXX6CMk7BFHdQXWBfX2a3weJmzql3hQgx09gLlYmgfv8C2DMnlfbVAyYIkiIPn6JBmt3TZ6-22U8P8Kdu7drHsvkM-ZnmUJMX5FkGlt/s1600/remove-blogger-labels.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJokTjvkSpUqz9grYDGBorTqIwMpIYH6HxgsShVYXX6CMk7BFHdQXWBfX2a3weJmzql3hQgx09gLlYmgfv8C2DMnlfbVAyYIkiIPn6JBmt3TZ6-22U8P8Kdu7drHsvkM-ZnmUJMX5FkGlt/s1600/remove-blogger-labels.png" width="320" /></a></div><br /><br /><br />...and select Expand Widget Template (don't forget to make a backup)<br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2N1J5HSVk4p8Jve_RgNTvjvOZazbQQba9-MlccSnKBj0tr8kGj9Iii5kcheQlVIGEWVf0noFEO48qhRjQjIePlnptO277jhUMMBRDisAed5BsUoT6mj00WU60Z-blH7KyWOlWwYTRoumE/s1600/blogger-expand-widget-templates.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2N1J5HSVk4p8Jve_RgNTvjvOZazbQQba9-MlccSnKBj0tr8kGj9Iii5kcheQlVIGEWVf0noFEO48qhRjQjIePlnptO277jhUMMBRDisAed5BsUoT6mj00WU60Z-blH7KyWOlWwYTRoumE/s1600/blogger-expand-widget-templates.png" width="320" /></a></div><br /><b><br /><br /></b> <b>Step 2.</b> Search (using <a class="zem_slink" href="http://en.wikipedia.org/wiki/Table_of_keyboard_shortcuts" rel="wikipedia" title="Table of keyboard shortcuts">CTRL + F</a>) for this <a class="zem_slink" href="http://en.wikipedia.org/wiki/Code" rel="wikipedia" title="Code">code</a>:<br /><br /><br /><br /><ul><br /><li><b><span style="color: #0b5394;">For previous commenting system: </span></b></li><br /></ul><br /><blockquote class="tr_bq"><br /><h4 id='comment-post-message'><data:postCommentMsg/></h4></blockquote><br /><ul><br /><li><b><span style="color: #0b5394;">For threaded comments:</span></b></li><br /></ul><br /><blockquote class="tr_bq"><br /><div class='post-footer-line post-footer-line-3'> </blockquote><br /><br /><br /><b>Step 3.</b> Add the below code just above it<br /><br /><br /><br />(for threaded comments, add the code <u>after</u>):<br /><br /><br /><br /><blockquote class="tr_bq"><br /><b:if cond='data:blog.pageType == "item"'><br /><br /><div style=' width: 450px; text-align: left; border: 1px dashed <br />#0084ce; background: transparent; padding: 10px; color:#000000; <br />font-weight:bold; '><br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkA0MwWddTTRdT0A5VJkAmIv9dTj0agaX_VWI4PBY3-lJanHTg1SqzDG-K51sAvoChOxv0RIm-QS8IuoiTdhA4-krrc2bswTKlun-Jfaws7wMWdYHeuA1h1izbK5X5VX2_9MyqT_qD4H04/s1600/helplogger.blogspot.com(1).gif'/><br /> :a<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxDhizRNrVX_KpzHx7QXNa84at1woqNhh89yf8zNKPbd78rKqDyEW6Omk6fcgOXiuE8v0wDH7Lp6mU9BnCNW6X8dj1y8u3Ni_CcWDZ7-cZR-VudPQkwfX-MmssrbdOSOGae_d1fnpPCnW/s1600/helplogger.blogspot.com+(2).gif'/><br /> :b<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG3_TgIOtFjNQEbrcasVFQnUtQbq9VHa2jxViNIDSP8KrNQwNdPA7Y5HjoINvagj-_p7A-1js28btDwI6zGTOvM9nnvHxu7ml-xsDtFsrkmHB2CBALL_2p0oiKkofriJXhqji6cEm2EarT/s1600/helplogger.blogspot.com(3).gif'/><br /> :c<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbbxwx-iZiYtyXIOrdcX56RAPbgz4w9-Jwiky5GQyFRL9QFULYp7NAtbVPSzxN5UhUAazn3wYyeQvnM18af3ZjUGPpsyrtc7sBgXZCGG7aYAY846J_yLfX0RQa1hVnNw0LhGUBwIyZG2l5/s1600/helplogger.blogspot.com(4).gif'/><br /> :d<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXyVCnwnhZcgmLbCPfhs3hzPP4LdPaDiVu-lI54wBEY_-q_D-_eRZa9xIAOnuhW4D_eTPoYYjUM9jhn8U-hBq2FL5Fh4sAldR_uBmXlDeH4fUgvq5BCYCzzkRRDX3UOaFkVMnVks7VfNjw/s1600/helplogger.blogspot.com(5).gif'/><br /> :e<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioEtVe2PsUtyFbw5gCfS6FyVcF-TA_Fn4FOfsrCuzAeLPZCj3uBiK8Kt8zImgH4lG-yfFjowLFepuekC7eyCq84rflymfZH51rtOPVdLwkuobHg4-C3MjVZO3EdNmmB7aOHMfNSvxIMXoN/s1600/helplogger.blogspot.com(6).gif'/><br /> :f<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeS9KJtoqsShlGboxe7teI_5GOSroI-G6dlt36r_hYFybSDUhyphenhyphendEFo633RGu-rny1rnEw4kZsILjGkhq0XmnTqQIiCD3CPvMqka_xa-mSHHK90J8pB2uJ6uMh6jpC7N3KKnKLQn31mn0So/s1600/helplogger.blogspot.com(7).gif'/><br /> :g<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiUSn5W_SUnjv5HQwkyHSHCYSkyonjE5Lx07p7r7-b3fDkkJ_ebgRdLqClajaPXr2vEz0gzGc7WEGS6Tlug_jl-uviLQzaRkYb71bUKGCKTt_-Hoyk6npQsHNNduTzMU7x1MzjYzXmY2fn/s1600/helplogger.blogspot.com(8).gif'/><br /> :h<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjieaJcdn6u-46ppZow0MAcppfo8XNf9RFN0mD6fiYPwSbnazOXR0SXIzEv8R_zwr4nIMTghE210FuAZsig0MlAKwA9uZpdSb4sx2bGRCm7MJydTa9IqA4Z3Opu65b28z3zNfIaHHmWAzC8/s1600/helplogger.blogspot.com(9).gif'/><br /> :i<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRVuIDnxoBV6pyydhCV698oH76oLDcwzRWKUkoDsPrA9kUVzf1zdgy-hRmLOeNvDdkAUsQy0aDhcQ7yK0NZciqHXiKEoos5L8jRIKpJdg1O7tzdMiyplPUvJdEeV97NsJ36HhdPlHIwW5h/s1600/helplogger.blogspot.com(10).gif'/><br /> :j<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3kfSmp8v6ex9r7KUoF1QMj-ajqN5wlzJeUwHE27UqqjZDna47L73qYzBhxWhF6PMEScKOkX7Rm6eGa4d25qykuoTKGYoNsnNHFn365jnDjNHBrusKq8TaL8lT4sq1HjodEQu-LaVP0UIu/s1600/helplogger.blogspot.com(11).gif'/><br /> :k<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyQr2lOmQtixAcVNvQDlA8_AKdAU1pCao6Ad8Kv2ymk3Ms8TeVC34xWy0EyQ6iBWnVKsOfyvr1zZkR35tvTk04roc4bXf93mir3WSpzV616BqbLrr4k0tu3dsAdnZ7MFI5ccSYF0uizLbd/s1600/helplogger.blogspot.com(12).gif'/><br /> :l<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3nLfMxr7HV-ZU7tIrf0wV-VXKk7jLJwbhK1-3qeFm9YDXutm9j_uaIB_98t1ohXgIcdC1rSayRSgzhs61BSzTR72cODLYDYInTI4kOi92b6LhjcBhjk1c1E-1eCAP7ngQdiOZPj9pHXT1/s1600/helplogger.blogspot.com(13).gif'/><br /> :m<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyiFjZfo6ozejTJ6Fc4CaHiuImm6Nx-5COWPyhygmMeCEiwgVeouox8k3Q3pM5sq97X_CRhtMDJq8xkFVdC_A4rHNWKmHyIEz3sG9ti-yFBBB6zBW5p935vhzfLUInK4fZd9Ra12j8f5VE/s1600/helplogger.blogspot.com(15).gif'/><br /> :n<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifcN6xUU-V_zYxaVn0SSowvQokr7HDFcSHMSskl3xLhT_mn6GbgeiCbAGbmMNh48qXf0Tt4olVFvaPf_QQAdTcXaunpSkgyuZ3bxrZ5hPqjBDasWbMDhPliNZhWz96RnE6g_dm4KfRp3hb/s1600/helplogger.blogspot.com(16).gif'/><br /> :o<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgspnGUc_3i7yJEGbe8pTGxl4PbXI3FSV8TxB4ERiabQXj9ADqk1qRP7E2o8ajEohyFpBFoOX0FlNQomME_G_eXLicO_ENYZn4JijUp08M9C5zC1Evw8VDOI26vY6vhjo_oJnzKX9y59aTH/s1600/helplogger.blogspot.com(14).gif'/><br /> :p<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6hIQiCdL-SmBNZYzjQJC_D3eWDCQJQ2S-ugAx8nCDXOW-Geh-ytuanHEktOrdKJdXyqsnxWW8Q4pBmKfeAxes-iFmp3Fq3wJPDrU_OD6bSD_ZFIU6W8_oD59sL1Ju98y3fUrr79dxo1tH/s1600/helplogger.blogspot.com(17).gif'/><br /> :q<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglTmBJhOS_-bkLmWALvxyie5lfKf0_-tzdkYZMctA9JMVPtSJ8NMyqmMp-EDGGqwbAHBPid2DpZodBaqZkZJ2wjf_6WvUn7uXadRNQwNCGlyRSjz6vvEsxPUQCJEdM7WTr4wGLQqIZ5uAc/s1600/helplogger.blogspot.com(18).gif'/><br /> :r<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH6n0se-cxP9CEUBCESdstUf3_g0y9fyHFV18z0A4mHme5Bez8C6YS_KFgjE3qgu5fDDPT6D-8VPme8k4n1BzU4SToDb9c-3fO5jyVqcAAkssyFbKV2h_pDmXU2Hixk8G_sw8HJkhhYbXI/s1600/helplogger.blogspot.com(19).gif'/><br /> :s<br /><br />&#160; <br /><br /><img border='0' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmHxVL9G3hCtSIgQBeo7EQ2rJ70ygGj930AEz5SiRmyGVOgNiC-Dno7GGZ0Jv8bjv4FG-RquJFzX_c8MPcF5-jcGjVKs5jz-FsugRX8W6heNhufUBtLQ0VhfNHYbPLykmnTDoSOiCfTGJ/s1600/helplogger.blogspot.com(20).gif'/><br /> :t   <a <br />href='http://helplogger.blogspot.com/2012/05/add-facemoods-emoticons-to-your-blogger.html'<br /> style='color: rgb(30, 122, 183); font-size: x-small;'>Add smileys to<br /> Blogger + </a><br /><br /></div></b:if></blockquote><br /><br /><br /><b>Step 4. </b>Now search for this piece of code:<br /><br /><br /><br /><blockquote class="tr_bq"><br /></body></blockquote><br /><b><br /><br /></b> <b>Step 5. </b>And add the following code immediately above it:<br /><br /><br /><br /><ul><br /><li><b><span style="color: #0b5394;">For previous commenting system:</span></b></li><br /></ul><br /><blockquote class="tr_bq"><br /><script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons.js"/></blockquote><br /><ul><br /><li><b><span style="color: #0b5394;">For threaded comments: </span></b></li><br /></ul><br /><blockquote class="tr_bq"><br /><script type='text/javascript' src="http://helplogger.googlecode.com/svn/trunk/facemood emoticons threaded.js"/></blockquote><br /><br /><br /><b>Step 6. </b>Save the Template. Now, enjoy your comments!<br /><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=0385d58c-c4b5-4fc4-ac42-9b4d1148e48a" style="border: none; float: right;" /></div><br /></div><br />

• 
• 
• 

1. 1
2. 2
3. 3
4. 4
5. 5

• Previous
• Next

Add Facemoods Emoticons To Your Blogger Comments

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:DEMOStep 1.Go to D…

Baca selengkapnya »

Recent Posts Widget with Thumbnails for Blogger/Blogspot

<div dir="ltr" style="text-align: left;" trbidi="on"><br />A few days ago, I've posted a tutorial about How To Add A <a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html"><span style="color: #0b5394;">Simple Recent Posts Widget</span></a><br /> but today I want to present to you a very nice Recent Posts widget that<br /> comes along with posts <a class="zem_slink" href="http://en.wikipedia.org/wiki/Thumbnail" rel="wikipedia" title="Thumbnail">thumbnails</a> and post summary as well. If you want<br /> to know how to add this Recent Posts widget/gadget to your <a class="zem_slink" href="http://blogger.com/" rel="homepage" title="Blogger">Blogger</a> <br />blog, then follow the steps below:<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOXVIGa_FZTqffXM-VK1xK8HoLw8WoTYx_NxtlolxLq4qH3L2I1xSXaoijFDG1Vop22P7U-Lvl6MiUxBFjUMD-Dz6mcYSF6fS2CvwqME__bHabo-pJFv7XjA-dawozeEernhw2RlazXJuC/s1600/recent+posts+widget+with+thumbnails+for+blogger+blogspot.png" style="margin-left: 1em; margin-right: 1em;"><img alt="recent posts, blogger widgets" border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOXVIGa_FZTqffXM-VK1xK8HoLw8WoTYx_NxtlolxLq4qH3L2I1xSXaoijFDG1Vop22P7U-Lvl6MiUxBFjUMD-Dz6mcYSF6fS2CvwqME__bHabo-pJFv7XjA-dawozeEernhw2RlazXJuC/s320/recent+posts+widget+with+thumbnails+for+blogger+blogspot.png" title="Recent Posts Widget With Thumbnails " width="320" /></a></div><br /><br /><br /><b><span style="font-size: medium;">How <span style="font-size: medium;"><span style="font-size: medium;">t</span>o <span style="font-size: medium;">A</span>dd </span>the Recent Posts Widget to Blogger</span></b><br /><br /><br /><br /><span style="color: #0b5394;"><b>Step 1.</b></span> Go To Blogger > Layout and click on "Add a <a class="zem_slink" href="http://en.wikipedia.org/wiki/Gadget" rel="wikipedia" title="Gadget">Gadget</a>" link<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilmtCMYBZFCm9nawX9YuaOVZzHRxUc8Y5o_DZvnixXIm0iF7QE8GdaETLatBQ4S__jFjnyFPXtxV3emu0ko0CLN2UgODuqS2GaaQjt5uF3PZxebDh66vmFHcBExPMqcwnQt4lnIfBqy5TV/s1600/blogger-layout-add+a+gadget-how-to.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilmtCMYBZFCm9nawX9YuaOVZzHRxUc8Y5o_DZvnixXIm0iF7QE8GdaETLatBQ4S__jFjnyFPXtxV3emu0ko0CLN2UgODuqS2GaaQjt5uF3PZxebDh66vmFHcBExPMqcwnQt4lnIfBqy5TV/s640/blogger-layout-add+a+gadget-how-to.png" width="640" /></a></div><br /><br /><br /><span style="color: #0b5394;"><b>Step 2.</b></span> From the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Pop-up_ad" rel="wikipedia" title="Pop-up ad">pop-up window</a>, scroll down and choose HTML/<a class="zem_slink" href="http://en.wikipedia.org/wiki/JavaScript" rel="wikipedia" title="JavaScript">JavaScript</a><br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5qpVyiHGElqFVOCLBwbgWa2xcblMQoOEOlxEZMaj_AcTqkf6Zm9Ka7PFfnddVZshQnbE9kbS5Th5RIIvQG99EmVP84aCmZAf8rz-bGMUDid65vfpeqd5mat5I5l9MzvzN3jcPmkkhXHN/s1600/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5qpVyiHGElqFVOCLBwbgWa2xcblMQoOEOlxEZMaj_AcTqkf6Zm9Ka7PFfnddVZshQnbE9kbS5Th5RIIvQG99EmVP84aCmZAf8rz-bGMUDid65vfpeqd5mat5I5l9MzvzN3jcPmkkhXHN/s400/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" width="400" /></a></div><br /><br /><br /><span style="color: #0b5394;"><b>Step 3.</b></span> Paste inside the empty box, the following code:<br /><br /><br /><br /><blockquote class="tr_bq"><br /><div class="eggTray"><br /><br /><script <br />src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",<br /><br />"pipe_params":{"<a class="zem_slink" href="http://en.wikipedia.org/wiki/Uniform_resource_locator" rel="wikipedia" title="Uniform resource locator">URL</a>":"<b>YOUR-BLOG/SITE-URL</b>/feeds/posts/default"},<br /><br />"hideHeader":"false","height":"<b><span style="color: blue;">500</span></b>","count": <b><span style="color: blue;">8</span></b> }</script><br /><br /><div style="font-family: arial, sans-serif; font-size: 9px;" <br />class="ycdr"><a <br />href="http://helplogger.blogspot.com/2012/05/recent-posts-widget-with-thumbnails-for.html"<br /> target="_blank" title="Grab this widget">Recent Posts <br />Thumbnails</a> <a href="http://helplogger.blogspot.com/" <br />target="_blank">Blogger <br />Widget</a></div><noscript>Your browser does not <br />support JavaScript!</noscript></div><br /><br /><style type=text/css><br /><br />.eggTray {margin:10px 0px;<a class="zem_slink" href="http://en.wikipedia.org/wiki/Padding_%28cryptography%29" rel="wikipedia" title="Padding (cryptography)">padding</a>:0px;}<br /><br />.ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}<br /><br />.pipesTitle {<b><span style="color: #38761d;">padding-top:0px;</span></b>}<br /><br />.pipesDescription {display:<span style="color: red;"><b>true</b></span>;}<br /><br />.ycdr {background:transparent <br />url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMawMI2YoOJVrEbo_5RhChGOg5je9ecE-XebMLdotRkff_ehLPeZzwBVDKfnah9fngHhiIkbjFT_W_m1IbRexcQhyphenhyphen3zxe0fKDfvcvPN4REmQduQ8F6RPsKy6AYqzINjZi7ppZ9sx6RUWw/s1600/logo.png)<br /> 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px <br />0px 0px 0px;line-height:14px;}<br /><br />.ycdr, .ycdr a {color:#999999;}<br /><br /><a class="zem_slink" href="http://widgets.yahoo.com/" rel="homepage" title="Yahoo! Widgets">.widget</a> .popular-posts ul {padding-left:0;}<br /><br /></style></blockquote><br /><br /><br /><span style="color: #0b5394;"><b>Step 4.</b></span> Change <b>YOUR-BLOG/SITE-URL</b> with the url address of your site/blog (ex: http://helplogger.blogspot.com) and look to have no <a class="zem_slink" href="http://en.wikipedia.org/wiki/Slash_%28punctuation%29" rel="wikipedia" title="Slash (punctuation)">forward slash</a> symbol "<b>/</b>" at the end of your url<br /><br /><br /><br /><b><span style="color: #0b5394;">Note:</span></b><br /><br /><ul><br /><li>To disable the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Scrollbar" rel="wikipedia" title="Scrollbar">scroll bar</a>, remove the number <b><span style="color: blue;">500</span></b></li><br /><li>By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number <b><span style="color: blue;">8</span></b> with the number of posts desired</li><br /><li>if you want only the posts titles to appear, change <b><span style="color: red;">true</span></b> to <b>none</b> and "0" from <b><span style="color: #38761d;">padding-top:0px </span></b>with 10</li><br /></ul><br /><br /><br /><span style="color: #0b5394;"><b>Step 5. </b></span>Save your widget. And you're done!<br /><br /><br /><br />If you need more help, leave your comment below. <br /><br /><br /><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=0385d58c-c4b5-4fc4-ac42-9b4d1148e48a" style="border: none; float: right;" /></div><br /></div><br />

• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4

• Previous
• Next

Recent Posts Widget with Thumbnails for Blogger/Blogspot

A few days ago, I've posted a tutorial about How To Add A Simple Recent Posts Widget but today I want to present to you a very nice Recent Posts widget that comes along with posts thumbnails and post …

Baca selengkapnya »

add go to top and go to bottom buttons Using jQuery in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div class="post-title entry-title" style="text-align: justify;"><br /><span style="font-family: inherit;"><span style="font-size: small;"><span style="font-weight: normal;"><a class="zem_slink" href="http://en.wikipedia.org/wiki/Comment_%28computer_programming%29" rel="wikipedia" title="Comment (computer programming)">/*</a><br />The Up and Down <a class="zem_slink" href="http://en.wikipedia.org/wiki/Button" rel="wikipedia" title="Button">buttons</a> can be used to navigate to the top and bottom <br />of the page content, especially when on the main page there are many <br />articles or when an article has too many comments. These buttons have a <br />fadeIn and fadeOut effect, this means that they will fade slightly when <br />we are scrolling to the top or bottom of the page and additionally, have<br /> the function of going up/down the blog.</span></span></span></div><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw6yvEii6XwMrLkghctQpiFPsjDSEU7RHBbIyJao-BsPYqT4HN1UQ4vn2jtH9gX7PX8pG5IJoR04auOwEgUi0KZht5x98r1qLYeN_Po_I-PSOc5AEJCYuKr8pwf9nBKL0E7k-F9CrY2MpJ/s1600/how-to-add-go-to-top-go-to-bottom-buttons-in-blogger-blogspot.png" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger widgets, blogger navigation" border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw6yvEii6XwMrLkghctQpiFPsjDSEU7RHBbIyJao-BsPYqT4HN1UQ4vn2jtH9gX7PX8pG5IJoR04auOwEgUi0KZht5x98r1qLYeN_Po_I-PSOc5AEJCYuKr8pwf9nBKL0E7k-F9CrY2MpJ/s200/how-to-add-go-to-top-go-to-bottom-buttons-in-blogger-blogspot.png" title="how to add back to top go to bottom navigation in blogger" width="200" /></a></div><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><span style="color: #3d85c6;"><b><span style="font-size: medium;">Demo</span></b></span><br /><br /><br /><br />You can see a live demo on my blog, the buttons are located on the right side.<br /><br /><br /><br /><span style="color: #3d85c6;"><span style="font-size: medium;"><b>How to put Go Up and Go Down buttons using <span style="font-size: medium;">the</span> <a class="zem_slink" href="http://jquery.com/" rel="homepage" title="JQuery">jQuery</a> slide effect</b></span></span><br /><br /><br /><br /><span style="color: #6fa8dc;"><b><a class="zem_slink" href="http://en.wikipedia.org/wiki/USMLE_Step_1" rel="wikipedia" title="USMLE Step 1">Step 1</a>.</b></span> Go to Template, click on the Edit <a class="zem_slink" href="http://en.wikipedia.org/wiki/HTML" rel="wikipedia" title="HTML">HTML</a> button<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUNh1FiiNZ31MGbDiJU-lZCrTbOZ7vwCD6d5_T2EToIWiIAi_3bWKsNxRQiD5e8zVS-u68aCEQxejs3FrFf1O-waUGNfXeDoeMMwkmKcUe2VhW8fjiLqDkaG3ptxkzN2oYpem0b8idN16L/s1600/blogger-template-edit-html.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUNh1FiiNZ31MGbDiJU-lZCrTbOZ7vwCD6d5_T2EToIWiIAi_3bWKsNxRQiD5e8zVS-u68aCEQxejs3FrFf1O-waUGNfXeDoeMMwkmKcUe2VhW8fjiLqDkaG3ptxkzN2oYpem0b8idN16L/s400/blogger-template-edit-html.png" width="400" /></a></div><br /><br /><br /><span style="color: #6fa8dc;"><b>Step 2.</b> </span>Select the "Expand Widget Templates" box<br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2G-HEiE8LGkM42ZW-4qWXOOshkO6o4tf-TobyiYv8Cw3JsRyZJ8UhBwoAvEeCOSAmKTDWTPW6A2mn4Dp4uslq7R1tW9Kxd9AeLTwOnO1Oh9h4hz_kvkGbTwb5Jul3qd30AK-fb_SP8Sg2/s1600/blogger-expand-widget-templates.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2G-HEiE8LGkM42ZW-4qWXOOshkO6o4tf-TobyiYv8Cw3JsRyZJ8UhBwoAvEeCOSAmKTDWTPW6A2mn4Dp4uslq7R1tW9Kxd9AeLTwOnO1Oh9h4hz_kvkGbTwb5Jul3qd30AK-fb_SP8Sg2/s320/blogger-expand-widget-templates.png" width="320" /></a></div><br /><br /><br /><span style="color: #6fa8dc;"><b>Step 3.</b></span> Search (using <a class="zem_slink" href="http://en.wikipedia.org/wiki/Table_of_keyboard_shortcuts" rel="wikipedia" title="Table of keyboard shortcuts">CTRL + F</a>) for the following piece of code:<br /><br /><br /><br /><blockquote class="tr_bq"><br />]]></b:skin></blockquote><br /><br /><br /><span style="color: #6fa8dc;"><b>Step 4.</b></span> Just above this code, paste this one:<br /><br /><br /><br /><blockquote class="tr_bq"><br />/* Up and Down Buttons with jQuery<br /><br />----------------------------------------------- */<br /><br />.button_up{<br /><br />padding:7px; <span style="color: #38761d;">/* Distance between the border and the icon */</span><br /><br />background-color:white;<br /><br />border:1px solid #<a class="zem_slink" href="http://en.wikipedia.org/wiki/Civilian_Conservation_Corps" rel="wikipedia" title="Civilian Conservation Corps">CCC</a>; <span style="color: #38761d;">/* Border Color */</span><br /><br />position:fixed;<br /><br />background:<span style="color: red;"><b> <span style="color: black;">white</span> </b></span>url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUdelsPJ5E4HdlQd4gr-ZLwIikDFNJga8uel0exKaBYyIpof9RY4hiPLCHFE2ATK23CFK_H7NDVlE7lzgWjA5sbyKaTu-P025GBefZqVZrp2LoP-tvGx37ou6NHNjkJayi_69JxrE_drE/s16/arrow_up.png</span>) no-repeat top left;<br /><br />background-position:50% 50%;<br /><br />width:20px; <span style="color: #38761d;">/* <a class="zem_slink" href="http://en.wikipedia.org/wiki/Web_button" rel="wikipedia" title="Web button">Button</a>'s width */</span><br /><br />height:20px; <span style="color: #38761d;">/* Button's height */</span><br /><br />bottom:280px; <span style="color: #38761d;">/* Distance from the bottom */</span><br /><br />right:5px; <span style="color: #38761d;">/* Change right to left if you want the buttons on the left */</span><br /><br />white-space:nowrap;<br /><br />cursor: pointer;<br /><br />border-radius: 3px 3px 3px 3px;<br /><br />opacity:0.7; <br /><br />filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);<br /><br />}<br /><br />.button_down{<br /><br />padding:7px; <span style="color: #38761d;">/* Distance between the border and the icon */</span><br /><br />background-color:white;<br /><br />border:1px solid #CCC; <span style="color: #38761d;">/* Border Color */</span><br /><br />position:fixed;<br /><br />background:<b><span style="color: red;"> <span style="color: black;">white </span></span></b>url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAZwTfp2whlkvJ8Potpv9stHiT6hE9crgoWGZYVpeZYo9VbdAmcZufhMsufDivyPZrc7lRTQvCg_5XODmo2gIXy5WOY30DrP9gjngdBlEan1qvaQcW3x5TkughVhQKhpHTpr1CPIIZ58s/s16/arrow_down.png</span>) no-repeat top left;<br /><br />background-position:50% 50%;<br /><br />width:20px; <span style="color: #38761d;">/* Button's width */</span><br /><br />height:20px; <span style="color: #38761d;">/* Button's height */</span><br /><br />bottom:242px;<span style="color: #38761d;"> /* Distance from the bottom */</span><br /><br />right:5px; <span style="color: #38761d;">/* Change right to left if you want the buttons on the left */</span><br /><br />white-space:nowrap;<br /><br />cursor: pointer;<br /><br />border-radius: 3px 3px 3px 3px;<br /><br />opacity:0.7;<br /><br />filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);<br /><br />}</blockquote><br /><br /><br /><b>Note:</b>  - in <span style="color: #38761d;">green </span>are some annotations that explains what styles you can modify on their left side.<br /><br />           - You can change the arrows by changing the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Uniform_resource_locator" rel="wikipedia" title="Uniform resource locator">URLs</a> in <span style="color: blue;">blue</span>.<br /><br />           - To change the buttons background color of buttons, change the <b>white</b> text with your color <br /><br /><br /><br /><b><span style="color: #6fa8dc;">Step 5.</span></b> Now search (CTRL + F) for this tag:<br /><br /><br /><br /><blockquote><br /></body></blockquote><br /><br /><br /><span style="color: #6fa8dc;"><b>Step 6. </b></span>And just above it, paste the following code:<br /><br /><br /><br /><blockquote class="tr_bq"><br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><br /><br /><br /><br /><b><div class='button_up' id='button_up' style='display:none;'/></b><br /><br /><b><div class='button_down' id='button_down' style='display:none;'/></b><br /><br /><br /><br /><script><br /><br />//<!--[<a class="zem_slink" href="http://en.wikipedia.org/wiki/CDATA" title="CDATA" rel="wikipedia"-->CDATA[<br /><br />(function(){var special=jQuery.event.special,uid1='D'+(+new <br />Date()),uid2='D'+(+new <br />Date()+1);special.scrollstart={setup:function(){var <br />timer,handler=function(evt){var <br />_self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var<br /> timer,handler=function(evt){var <br />_self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();<br /><br /><br /><br />$(function() {<br /><br />var $elem = $('body');<br /><br />$('#button_up').fadeIn('slow');<br /><br />$('#button_down').fadeIn('slow'); <br /><br />$(window).bind('scrollstart', function(){<br /><br />$('#button_up,#button_down').stop().animate({'opacity':'0.2'});<br /><br />});<br /><br />$(window).bind('scrollstop', function(){<br /><br />$('#button_up,#button_down').stop().animate({'opacity':'1'});<br /><br />});<br /><br />$('#button_down').click(<br /><br />function (e) {<br /><br />$('html, body').animate({scrollTop: $elem.height()}, 800);<br /><br />} );<br /><br />$('#button_up').click(<br /><br />function (e) {<br /><br />$('html, body').animate({scrollTop: '0px'}, 800);<br /><br />} );});<br /><br />//]]><br /><br /></script></blockquote><br /><br /><br /><b>Note:</b> In case you want to remove the "Go to top" button, remove <br />the 1st bolded code and to remove the "Go to bottom" button, remove the <br />2nd one.<br /><br /><br /><br /><span style="color: #6fa8dc;"><b>Step 7.</b></span> Finally, Save your Template. Enjoy!<br /><div class="post-title entry-title" style="text-align: justify;"><br /><br /></div><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=0385d58c-c4b5-4fc4-ac42-9b4d1148e48a" style="border: none; float: right;" /></div><br /></div><br />

• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4

• Previous
• Next

add go to top and go to bottom buttons Using jQuery in Blogger

/*The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page there are many articles or when an article has too many comments. These b…

Baca selengkapnya »

Recent Comments Widget For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><table cellpadding="0" cellspacing="0" class="tr-caption-container zemanta-img" style="float: left; margin-right: 1em; text-align: left;"><tbody><br /><tr><td style="text-align: center;"><a href="http://commons.wikipedia.org/wiki/File:Blogger.svg" imageanchor="1" style="margin-bottom: 1em; margin-left: auto; margin-right: auto; text-align: clear:left;"><img alt="This is icon for social networking website. Th..." border="0" class="zemanta-img-inserted" height="256" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Blogger.svg/256px-Blogger.svg.png" style="border: none; font-size: 0.8em;" width="256" /></a></td></tr><br /><tr><td class="tr-caption zemanta-img-attribution" style="text-align: center; width: 256px;">This is icon for social networking website. This is part of Open Icon Library's webpage icon package. (Photo credit: <a href="http://commons.wikipedia.org/wiki/File:Blogger.svg">Wikipedia</a>)</td></tr><br /></tbody></table><br />The Recent Comments Widget for <a class="zem_slink" href="http://blogger.com/" rel="homepage" title="Blogger">Blogger</a> displays the recent blog comments<br /> on your blog's sidebar, showing a snippet of the last comments along <br />with the title of the post to which the comment was made. If you want to<br /> encourage your readers in leaving comments on your blog, this is a <br />widget I would recommend. <br /><br /><br /><br /><b>How To Install The Recent Comments Widget For Blogger</b><br /><br /><br /><br /><b>Step 1. </b>Go to your <a href="http://www.blogger.com/home">Blogger Dashboard</a> >> <a class="zem_slink" href="http://en.wikipedia.org/wiki/Layout_%28computing%29" rel="wikipedia" title="Layout (computing)">Layout</a> >> Add a <a class="zem_slink" href="http://en.wikipedia.org/wiki/Gadget" rel="wikipedia" title="Gadget">Gadget</a><br /><br /><br /><br /><br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPqlpF4G4uzG2-kLltLLOYumgsgAwXCx1lsI8j12Egmawwh17bTqzHD8wHBibFXW7IROTHPPiCmDIOFAEM5hXxYcotSj4qrZLACH3WSHVWKYLwwUAFOqGladhRuBUkkSQ308An6Gm_MCaF/s1600/add-a-gadget-blogger-layout.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPqlpF4G4uzG2-kLltLLOYumgsgAwXCx1lsI8j12Egmawwh17bTqzHD8wHBibFXW7IROTHPPiCmDIOFAEM5hXxYcotSj4qrZLACH3WSHVWKYLwwUAFOqGladhRuBUkkSQ308An6Gm_MCaF/s1600/add-a-gadget-blogger-layout.png" width="640" /></a></div><br /><br /><br /><br /><br /><b>Step 2. </b>From the <a class="zem_slink" href="http://en.wikipedia.org/wiki/Pop-up_ad" rel="wikipedia" title="Pop-up ad">pop-up window</a>, scroll down and choose the <b>HTML/JavaScript</b> option:<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjitCa_LLYF1RNAe5kQny7Hw-wsbz5gCMRXUlKbeLb3fC5Syp_Z7Q-7wj-g4mcot_Fc-obhR-ivaQOwC1WLNjoVa9aMU44jDKaakasREcg59-TfmtPLLpnIFCsV4yu4zAmZJVPXqc7vGUwl/s1600/html-javascript-blogger-gadgets-widgets.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjitCa_LLYF1RNAe5kQny7Hw-wsbz5gCMRXUlKbeLb3fC5Syp_Z7Q-7wj-g4mcot_Fc-obhR-ivaQOwC1WLNjoVa9aMU44jDKaakasREcg59-TfmtPLLpnIFCsV4yu4zAmZJVPXqc7vGUwl/s1600/html-javascript-blogger-gadgets-widgets.png" width="320" /></a></div><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><br /><br /><b>Step 3. </b>Now <a class="zem_slink" href="http://en.wikipedia.org/wiki/Cut%2C_copy%2C_and_paste" rel="wikipedia" title="Cut, copy, and paste">copy and paste</a> the below code in the HTML/JavaScript box:<br /><br /><br /><br /><blockquote class="tr_bq"><br /><script style=text/javascript <br />src="http://helplogger.googlecode.com/svn/trunk/recent comments <br />widget.js"></script><script style=text/javascript >var <br />a_rc=5;var m_rc=false;var n_rc=true;var <br />o_rc=100;</script><script src=http://<b style="color: #cc0000;">your-blog-name</b>.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments<br /> ></script><span id=rcw-cr><a <br />href=http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html>Recent<br /> Comments Widget</a></span><style type=text/css> <br />.rcw-comments a {text-transform: capitalize;} .rcw-comments <br />{border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: <br />7px!important;} #rcw-cr {font-family: <br />Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} <br /></style></blockquote><br /><br /><br /><b>Step 4.</b> Replace <b style="color: #cc0000;">your-blog-name</b> with your blog url.<br /><br /><br /><br /><b>Step 5.</b> Click Save and you're done.<br /><br /><br /><br />Hope you'll enjoy it!<br /><br /><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=533c6004-8952-46fd-aa66-d00b63f8509f" style="border: none; float: right;" /></div><br /></div><br />

• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4

• Previous
• Next

Recent Comments Widget For Blogger

This is icon for social networking website. This is part of Open Icon Library's webpage icon package. (Photo credit: Wikipedia)The Recent Comments Widget for Blogger displays the recent blog comments …

Baca selengkapnya »

Membuat Widget Related Posts dengan Thumbnail pada Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><span class="" id="result_box" lang="id" tabindex="-1"><span class="hps">Cara menambahkan</span> </span><span class="" id="result_box" lang="id" tabindex="-1"><span class="hps">Widget</span> </span><span class="" id="result_box" lang="id" tabindex="-1"><span class="hps">Related Posts</span> <span class="hps">dengan</span> <span class="hps">Thumbnail </span></span><span class="" id="result_box" lang="id" tabindex="-1"><span class="hps"><span class="" id="result_box" lang="id" tabindex="-1">pada <span class="hps">Blogger</span></span></span><br /><br /> <span class="hps">Sekarang di sini adalah</span> cara <span class="hps">yang mudah </span><span class="hps">untuk menampilkan</span> <span class="hps">posting terkait</span> <span class="hps">di bawah setiap</span> <span class="hps">posting</span> <span class="hps">blog</span> <span class="hps">Anda, bersama dengan</span> <span class="hps">thumbnail</span>. <span class="hps">Artikel-artikel</span> <span class="hps">terkait</span> <span class="hps">dipilih dari</span> <span class="hps">pesan lainnya</span> <span class="hps">dalam kategori</span> <span class="hps">yang sama</span> <span class="hps">/</span> <span class="hps">label</span> <span class="hps">/</span> <span class="hps">tag</span><span class="">.</span> <span class="hps">Dengan</span> <span class="hps">cara </span><span class="hps">ini</span> <span class="hps">banyak</span> <span class="hps">pembaca Anda</span> <span class="hps">akan tetap</span> <span class="hps">di blog Anda untuk</span> <span class="hps">waktu yang cukup lama</span> <span class="hps">ketika mereka melihat</span> <span class="hps">posting terkait</span> <span class="hps">kepentingan.</span></span><br /><br /><a name='more'></a><br /><br /><div style="text-align: center;"><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: center;"><br /><img alt="related post, related posts blogger, blogger widgets" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgnBzmFx_MgyGdtA6NEjkDF53Yo0WKTRKjA663kE4HIIYRHo8d0UVjwEWZlmoPV3R27RGCkyPuqFJFTWo7M66MY-U04NAYYvg-ujZbqdSBLgxUSeaZ2cdUZTHkAHFUnZ18dPmYmaQyzp_O/s1600/related-posts-blogger.png" title="Related Posts Widget For Blogger" /></div><br /><br /><br /><div style="text-align: -webkit-auto;"><br /></div><br /></div><br /><span class="long_text" id="result_box" lang="id" tabindex="-1"><span class="hps">Langkah</span> <span class="hps">menambahkan</span> </span><span class="long_text" id="result_box" lang="id" tabindex="-1"><span class="hps">Widget</span> <span class="hps"></span></span><span class="long_text" id="result_box" lang="id" tabindex="-1"><span class="hps alt-edited">Related Posts</span> <span class="hps">ke Blogger</span> <span class="hps">/</span> <span class="hps">Blogspot</span></span><br /><br /><br /><br /><b>Langkah 1. Buka </b><b style="color: #0b5394;"><a href="http://www.blogger.com/home" style="color: #0b5394;">Blogger Dashboard</a> </b>>> <b>Template</b> >><b>Edit HTML</b>;<br /><br /><br /><br /><b>Langkah 2.<i> </i></b><span class="short_text" id="result_box" lang="id"><span class="hps">Centang pada</span></span> "<b>Expand widgets template</b>" box; <br /><br /><br /><br /><b><b>Langkah </b>3.</b> Cari (CTRL + F) kode <head> dibawah ini:<br /><br /><br /><br /><blockquote class="tr_bq"><br /></head></blockquote><br /><br /><br /><b><b>Langkah </b>4<i>.</i></b> <span class="long_text" id="result_box" lang="id" tabindex="-1"><span class="hps">Copy dan paste</span> <span class="hps">kode di bawah ini</span> <span class="hps">sebelum</span> <span class="hps">/</span> <span class="hps">di atas</span><span class="hps"></span></span><b> </head></b><br /><br /><br /><br /><blockquote class="tr_bq"><br /><br /><br /><!--Related Posts with thumbnails Scripts and Styles Start--><br /><br /><!-- remove --><b><span style="color: purple;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span></b><br /><br /><style type='text/css'><br /><br />#related-posts {<br /><br />float:center;<br /><br />text-transform:none;<br /><br />height:100%;<br /><br />min-height:100%;<br /><br />padding-top:5px;<br /><br />padding-left:5px;<br /><br />}<br /><br /><br /><br />#related-posts h2{<br /><br />font-size: 18px;<br /><br />letter-spacing: 2px;<br /><br />font-weight: bold;<br /><br />text-transform: none;<br /><br />color: #5D5D5D;<br /><br />font-family: Arial Narrow;<br /><br />margin-bottom: 0.75em;<br /><br />margin-top: 0em;<br /><br />padding-top: 0em;<br /><br />}<br /><br />#related-posts a{<br /><br />border-right: 1px dotted #DDDDDD;<br /><br />color:#5D5D5D;<br /><br />}<br /><br />#related-posts a:hover{<br /><br />color:black;<br /><br />background-color:#EDEDEF;<br /><br />}<br /><br /></style><br /><br /><script type='text/javascript'><br /><br />var defaultnoimage=&quot;<span style="color: #0b5394;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Q4EGKs2KMqqTOf8ebDfs1ttdoalqEsqa7jmMxMMcUjnm_vsgYvZ9gDmDBzSjuclRFuvW_tmAHGuRHPHBl0jxcD2PlWor6ME2Zv0ceJC5GP5RfgWY-fh-8FOqWfCpOKht54qHaIIhWna2/s1600/no_image.jpg</span>&quot;;<br /><br /><b>var maxresults</b>=<b><span style="color: red;">5</span></b>;<br /><br />var splittercolor=&quot;#DDDDDD&quot;;<br /><br />var relatedpoststitle=&quot;Related Posts&quot;;<br /><br /></script><br /><br /><script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/><br /><br /><!-- remove --><span style="color: purple;"><b></b:if></b></span><br /><br /><!--Related Posts with thumbnails Scripts and Styles End--></blockquote><br /><br /><br /><i><b>Note:</b></i><br /><br />- to change the default picture, replace the <span style="color: #0b5394;">URL in blue</span> with your own<br /><br />- for displaying more than 5 posts, replace <b><span style="color: red;">5</span></b> value from "<b>var maxresults=<span style="color: red;">5</span></b>;"<br /><br />- remove the <span style="color: purple;">code in violet</span> if you want the related posts to be displayed in homepage too<br /><br /><span class="long_text" id="result_box" lang="id" tabindex="-1"><b><i><span class="hps">Catatan</span>:</i></b><br /> <span class="hps">-</span> <span class="hps">Untuk mengubah</span> <span class="hps">gambar default</span><span class="">, ganti</span> </span><span style="color: #0b5394;">URL yang berwarna biru</span><span class="long_text" id="result_box" lang="id" tabindex="-1"><span class="hps alt-edited"></span> <span class="hps alt-edited">dengan link gambar yang Anda miliki</span><br /> <span class="hps">-</span> <span class="hps">Untuk menampilkan</span> <span class="hps">lebih dari</span> </span><b><span style="color: red;">5</span></b> <span class="long_text" id="result_box" lang="id" tabindex="-1"><span class="hps">posting</span>, <span class="hps">ganti 5</span> <span class="hps">nilai</span> <span class="hps atn">dari </span></span><span class="long_text" id="result_box" lang="id" tabindex="-1"><span class="hps atn"> "<b>var maxresults=<span style="color: red;">5</span></b>;"</span><br /> <span class="hps">-</span> <span class="hps">Hapus </span></span><span class="long_text" id="result_box" lang="id" tabindex="-1"><span class="hps"><span style="color: purple;">kode yang berwarna violet/ungu </span></span><span class="hps">jika Anda ingin</span> menampilkan widget ini <span class="hps alt-edited">dalam</span> <span class="hps">homepage</span> <span class="hps">juga</span></span><br /><br /><br /><br /><b><b>Langkah </b>5. </b><span class="short_text" id="result_box" lang="id" tabindex="-1"><span class="hps">Sekarang</span> <span class="hps">cari kode berikut</span>:</span><br /><br /><blockquote class="tr_bq"><br /><br /><br />    <div class='post-footer'></blockquote><br /><br /><br /><b><b>Langkah </b>6.</b><i> </i><span class="short_text" id="result_box" lang="id" tabindex="-1"><span class="hps">Dan</span> <span class="hps alt-edited">tepat di atasnya</span><span class="">,</span> <span class="hps">copy dan paste</span> <span class="hps">kode di bawah ini</span><span class="">:</span></span><br /><br /><br /><br /><blockquote class="tr_bq"><br /><!-- Related Posts with Thumbnails Code Start--><br /><br /><!-- remove --><b><span style="color: purple;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span></b><br /><br /><div id='related-posts'><br /><br /><b:loop values='data:post.labels' var='label'><br /><br /><b:if cond='data:label.isLast != &quot;true&quot;'><br /><br /></b:if><br /><br /><script expr:src='&quot;/feeds/posts/default/-/&quot; + <br />data:label.name + <br />&quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;<b>max-results=<span style="color: red;">6</span></b>&quot;' type='text/javascript'/></b:loop><br /><br /><script type='text/javascript'><br /><br />removeRelatedDuplicates_thumbs();<br /><br />printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);<br /><br /></script><br /><br /></div><div style='clear:both'/><br /><br /><!-- remove --><b><span style="color: purple;"></b:if></span></b><br /><br /><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><br /><br /><a href='http://helplogger.blogspot.com'><img alt='Blogger <br />Tricks' <br />src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgJaNgGXiE2fRakkiuqHIpbMDX_WUFqQeUpfb7GZKjrTakroInsGCb4Ys8-6h08gSMQP0JoC-KU7EDNdhZIiWb8ndC3hFd-T1pPWxWCxm-RbXy0d8AEKVwj0PUkFHyJ7Tr-NqhSAS3OpWS/s1600/best+blogger+tips.png'/></a><br /><br /></b:if></b:if><br /><br /><!-- Related Posts with Thumbnails Code End--></blockquote><br /><br /><br /><i><b>Note:</b></i><br /><br />- change the <b><span style="color: red;">6</span></b> value from <b>max-results=<span style="color: red;">6 </span></b>with the number of posts you want to be displayed.<br /><br />- If you want the related posts to be displayed on homepage too, remove the <span style="color: purple;">code in violet</span>.<br /><br /><br /><br /><span class="long_text" id="result_box" lang="id" tabindex="-1"><i><b><span class="hps">Catatan</span>:</b></i><br /><span class="hps">-</span> Ubah <span class="hps">nilai</span> </span><b><span style="color: red;">6</span></b> <span class="long_text" id="result_box" lang="id" tabindex="-1"><span class="hps">dari</span> <span class="hps"></span></span><span class="long_text" id="result_box" lang="id" tabindex="-1"><span class="hps"> <b>max-results=<span style="color: red;">6</span></b></span> <span class="hps">dengan</span> <span class="hps">jumlah posting yang</span> <span class="hps">ingin ditampilkan</span>.<br /><span class="hps">-</span> <span class="hps">Jika Anda ingin</span> <span class="hps"></span></span><span class="long_text" id="result_box" lang="id" tabindex="-1"><span class="hps">related post </span> ini <span class="hps">ditampilkan pada</span> <span class="hps">homepage</span> <span class="hps">juga,</span> <span class="hps">hapus </span></span><span class="long_text" id="result_box" lang="id" tabindex="-1"><span class="hps"><span style="color: purple;">kode warna </span></span> </span><span style="color: purple;">violet/ungu</span><span class="long_text" id="result_box" lang="id" tabindex="-1">.</span><br /><br /><br /><br /><b><b>Langkah </b>7. </b>Simpan Template<br /><br /><br /><br />Enjoy :)<br /><br /><br /><br />Credit goes to: <a href="http://bloggerpluggins.org/" rel="nofollow" target="_blank">bloggerpluggins.org</a> . Modified by kivandanu<br /><br /><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=b9b83919-29a1-4dbf-940d-05cbeff21651" style="border: none; float: right;" /></div><br /></div><br />

• 
• 

1. 1
2. 2
3. 3

• Previous
• Next

Membuat Widget Related Posts dengan Thumbnail pada Blogger

Cara menambahkan Widget Related Posts dengan Thumbnail pada Blogger Sekarang di sini adalah cara yang mudah untuk menampilkan posting terkait di bawah setiap posting blog Anda, bersama dengan thumbnai…

Baca selengkapnya »

Facebook ID Lookup Finder Search Tool

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div class="zemanta-img" style="text-align: left;"><br /><div class="zemanta-img"><br /><a href="http://commons.wikipedia.org/wiki/File:Facebook.svg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Facebook logo Español: Logotipo de Facebook Fr..." border="0" class="zemanta-img-inserted" height="100" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Facebook.svg/266px-Facebook.svg.png" style="border: medium none; font-size: 0.8em;" width="266" /></a></div><br /></div><br /><div style="text-align: center;"><br /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script><br /><script src="http://www.internetmarketingninjas.com/javascripts/thickbox.js" type="text/javascript"></script><br /><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAo4tes30o759hWF4kfKGqJ1Hd3fijlG9Y&sensor=false" type="text/javascript"></script><br /> <script src="http://www.internetmarketingninjas.com/javascripts/responsiveslides.min.js" type="text/javascript"></script><br /> <script src="http://www.internetmarketingninjas.com/javascripts/prettify-files/prettify.js" type="text/javascript"></script><br /> <script><br /> //<![CDATA[<br /> var _gaq = _gaq || [];<br /> _gaq.push(['_setAccount', 'UA-24397327-1']);<br /> _gaq.push(['_trackPageview']);<br /> <br /> (function() {<br /> var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;<br /> ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';<br /> var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);<br /> })();<br /> <br /> (function() {<br /> var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;<br /> po.src = 'https://apis.google.com/js/plusone.js';<br /> var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();<br /> <br /> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);<br /> js.id=id;js.src="//platform.twitter.com/widgets.js";<br /> fjs.parentNode.insertBefore(js,fjs);}} <br /> (document,"script","twitter-wjs");<br /> <br /> (function(d, s, id) {<br /> var js, fjs = d.getElementsByTagName(s)[0];<br /> if (d.getElementById(id)) return;<br /> js = d.createElement(s); js.id = id; js.async = true;<br /> js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";<br /> fjs.parentNode.insertBefore(js, fjs);<br /> }(document, 'script', 'facebook-jssdk'));<br /> <br /> var WRInitTime=(new Date()).getTime(); //]]><br /> </script><br /><br /> <script type="text/javascript"><br /> // Smooth scroll<br /> $('a[href*=#]').click(function () {<br /> var hash = $(this).attr('href');<br /> hash = hash.slice(hash.indexOf('#') + 1);<br /> $.scrollTo(hash == 'top' ? 0 : 'a[name='+hash+']', 500);<br /> window.location.hash = '#' + hash;<br /> return false;<br /> });<br /> </script><br /><br /> <script><br /> // DOM ready<br /> $(function() {<br /><br /> // Create the dropdown base<br /> $("<select />").appendTo("header .container");<br /><br /> // Create default option "Go to..."<br /> $("<option />", {<br /> "selected": "selected",<br /> "value" : "",<br /> "text" : "Go to..."<br /> }).appendTo("header .container select");<br /><br /> // Populate dropdown with menu items<br /> $("header .container a").each(function() {<br /> var el = $(this);<br /> $("<option />", {<br /> "value" : el.attr("href"),<br /> "text" : el.text()<br /> }).appendTo("header .container select");<br /> });<br /><br /> // To make dropdown actually work<br /> // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/<br /> $("header .container select").change(function() {<br /> window.location = $(this).find("option:selected").val();<br /> });<br /><br /> });<br /> </script><br /><br /> <script><br /> $(document).ready(function(){<br /> $('option[value="../"]').remove();<br /> $('option[value="http://www.facebook.com/IMNinjas"]').remove();<br /> $('option[value="http://twitter.com/NinjasMarketing"]').remove();<br /> $('option[value="https://plus.google.com/114148548840076318441"]').remove();<br /> $('option[value="http://www.linkedin.com/company/internet-marketing-ninjas"]').remove();<br /> $('option[value="http://pinterest.com/imninjas"]').remove();<br /> $('option[value="http://instagram.com/internetmarketingninjas"]').remove();<br /> $('option[value="http://www.youtube.com/user/IMarketingNinjas1"]').remove();<br /> $('option[value="http://feeds.feedburner.com/WeBuildPages"]').remove();<br /> });<br /> </script><br /><br /> <script src="http://s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js" type="text/javascript"></script><br /> <!--[if (gte IE 6)&(lte IE 8)]><br /> <script type="text/javascript" src="http://www.internetmarketingninjas.comscripts/selectivizr-min.js"></script><br /> <noscript><link rel="stylesheet" href="http://www.internetmarketingninjas.comstylesheets/imnstyle.css" /></noscript><br /> <![endif]--><br /><br /><br /><br /> <!-- tool header start --><br /> </div><br /><div class="wrapper headline-service" style="text-align: center;"><br /><div id="arrow-interior"><br /><div class="container" style="padding: 0px 0px 0px 40px;"><br /><div><br /><span style="font-family: inherit;"><span style="font-size: small;">Facebook ID Lookup Finder Search Tool</span></span></div><br /><div id="subhead"><br />Identify your Facebook User ID or Page ID.</div><br /></div><br /></div><br /></div><br /><div style="text-align: center;"><br /><!-- tool header end --><br /> <!-- tool template wrapper start --><br /> </div><br /><div class="container group" style="text-align: center;"><br /><!--tool form start--><br /> <br /><br /><form class="tool-form large-form left"><br />Enter Your Facebook Username or URL<br /><br />(i.e. JohnDoe or http://www.facebook.com/JohnDoe)<br /><br /><input class="input-two-thirds" id="fbUser" name="fbUser" required="" type="text" /><br /><br /><input class="btn-large" type="submit" value="Ninja Check" /><br /> <br /><br /><br /><br /><fieldset class="results hidden"><br /><legend><b>Your Results</b></legend><br /> <b>Your Facebook ID is:</b> <br /><br /><div class="fbID inline"><br /></div><br /></fieldset><br /><br /></form><br /><!-- tool form end --><br /> <!-- instructions for tool start --><br /> <br /><br /><br /><br /><script><br />$(function() {<br /> // Clickable Dropdown<br /> $('.click-nav > ul').toggleClass('no-js js');<br /> $('.click-nav .js ul').hide();<br /> $('.click-nav .js').click(function(e) {<br /> $('.click-nav .js ul').slideToggle(200);<br /> $('.clicker').toggleClass('active');<br /> e.stopPropagation();<br /> });<br /> $(document).click(function() {<br /> if ($('.click-nav .js ul').is(':visible')) {<br /> $('.click-nav .js ul', this).slideUp();<br /> $('.clicker').removeClass('active');<br /> }<br /> });<br />});<br /></script><br /><br /><script type="text/javascript"><br /> $('#nav li a').mouseover(function(){<br /> // if the hovered link has a subnav span and isn't currently highlighted...<br /> if ($(this).next('span').length && !$(this).parent('li').hasClass('on')) {<br /> $('.on span').hide(); // hide current subnav<br /> $('.on').removeClass('on'); // remove 'on' class from current subnav<br /> $(this).parent('li').addClass('on'); // add 'on' class to new subnav<br /> $(this).next('span').show(); // show new subnav<br /> }<br /> });<br /></script><br /><br /><script src="http://www.internetmarketingninjas.com/scripts/jquery.smoothscroll.js"></script><br /><script><br /> $(function() {<br /> $('#scroll-wrap').smoothScroll(500);<br /> });<br /></script><br /><br /><!-- ClickTale Bottom part --><br /><br /><br /><div id="ClickTaleDiv" style="display: none;"><br /></div><br /><script type="text/javascript"><br />document.write(unescape("%3Cscript%20src='"+<br /> (document.location.protocol=='https:'?<br /> 'https://clicktale.pantherssl.com/':<br /> 'http://s.clicktale.net/')+<br /> "WRd.js'%20type='text/javascript'%3E%3C/script%3E"));<br /></script><br /><script type="text/javascript"><br />var ClickTaleSSL=1;<br />if(typeof ClickTale=='function') ClickTale(8199,1,"www09");<br /></script><br /><!-- ClickTale end of Bottom part --><br /><br /><script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script><br /><script src="http://www.internetmarketingninjas.com/javascripts/libs/jquery.fixtable.min.js?" type="text/javascript"></script><br /><script src="http://www.internetmarketingninjas.com/javascripts/plugins.js" type="text/javascript"></script><br /><script src="http://www.internetmarketingninjas.com/javascripts/ui-tabs.js" type="text/javascript"></script><br /><script src="http://www.internetmarketingninjas.com/javascripts/script.js" type="text/javascript"></script><br /><script><br />$('form').submit(function(event){<br /> event.preventDefault();<br /> $('.results .fbID').html("<img src='/images/loading.gif' />");<br /><br /> // get Facebook ID<br /> var fbUser = $('input[name=fbUser]').val();<br /> // if user entered a url, get just the username<br /> if (fbUser.split('/').length > 1) {<br /> var temp = fbUser.split('/');<br /> fbUser = temp[temp.length-1];<br /> }<br /> FB.api(fbUser, function(response) {<br /> if (response.id) {<br /> $('.results .fbID').html(response.id);<br /> } else {<br /> $('.results .fbID').html('No user record found for that username.');<br /> }<br /> }); <br /> $('.results').show();<br />});<br /><br />window.fbAsyncInit = function() {<br /> FB.init({<br /> appId : '517992948221822', // App ID from the App Dashboard<br /> channelUrl : 'http://wwww.thisiswherewestoreourapps.com/fb/channel.php', // Channel File for x-domain communication<br /> status : true, // check the login status upon init?<br /> cookie : true, // set sessions cookies to allow your server to access the session?<br /> xfbml : true // parse XFBML tags on this page?<br /> });<br /> };<br /><br /> (function(d, debug){<br /> var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];<br /> if (d.getElementById(id)) {return;}<br /> js = d.createElement('script'); js.id = id; js.async = true;<br /> js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";<br /> ref.parentNode.insertBefore(js, ref);<br /> }(document, /*debug*/ false));<br /></script></div><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=b9b83919-29a1-4dbf-940d-05cbeff21651" style="border: none; float: right;" /></div><br /></div><br />

• 
• 

1. 1
2. 2

• Previous
• Next

Facebook ID Lookup Finder Search Tool

// var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-24397327-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text…

Baca selengkapnya »

CSS Box Shadow - Membuat Efek Bayangan pada Area

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><div class="dte_post-body" itemprop="articleBody"><br /><div class="separator center"><br /><img alt="CSS Box-Shadow" height="142" src="http://3.bp.blogspot.com/-zqUTXaitRZY/TjkVxO9Dc-I/AAAAAAAAAhw/hNnkgs1kzEg/s320/ombre-css3-box-shadow1.png" width="247" /></div><br />Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek:<br /><br /><h3><br />CSS Bayangan Outset</h3><br /><pre data-codetype="CSS" id="code-block:1"><code class="css"><span class="tag">div</span> <span class="rules">{<br /> <span class="rule"><span class="attribute">-webkit-box-shadow</span>:<span class="value"><span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* Safari & Chrome */</span><br /> <span class="rule"><span class="attribute">-moz-box-shadow</span>:<span class="value"><span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* Firefox */</span><br /> <span class="rule"><span class="attribute">box-shadow</span>:<span class="value"><span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* W3C */</span><br /><span class="rule">}</span></span></code></pre><br /><h3><br />CSS Bayangan Inset</h3><br /><pre data-codetype="CSS" id="code-block:2"><code class="css"><span class="tag">div</span> <span class="rules">{<br /> <span class="rule"><span class="attribute">-webkit-box-shadow</span>:<span class="value">inset <span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* Safari & Chrome */</span><br /> <span class="rule"><span class="attribute">-moz-box-shadow</span>:<span class="value">inset <span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* Firefox */</span><br /> <span class="rule"><span class="attribute">box-shadow</span>:<span class="value">inset <span class="number">10</span>px <span class="number">10</span>px <span class="number">7</span>px <span class="number">#222</span></span>;</span> <span class="comment">/* W3C */</span><br /><span class="rule">}</span></span></code></pre><br /><code>10px</code> yang pertama adalah ukuran <i>offset</i> sumbu X, <code>10px</code> yang ke dua adalah <i>offset</i> sumbu Y, <code>7px</code> adalah tingkat blur, <code>#222</code> adalah warna bayangan. Kamu juga bisa menuliskan nilai <i>offset</i> negatif untuk membuat bayangan menuju ke arah sebaliknya. Cara penerapannya bisa diletakkan secara <i>top down</i> ataupun <i>inline</i> seperti ini:<br /><br /><br /><br /><table border="1" class="full compare"><thead><br /><tr><th style="width: 50%;">Top-Down</th><th style="width: 50%;">Inline</th></tr><br /></thead><tbody><br /><tr><td><code><style><br /><br />#kotak-1 {<br /><br />  -webkit-box-shadow:10px 10px 7px #222;<br /><br />  -moz-box-shadow:10px 10px 7px #222;<br /><br />  box-shadow:10px 10px 7px #222;<br /><br />}<br /><br /></style><br /><br /><div id='kotak-1'><b>OBJEK</b></div></code></td><td><code><div style='-webkit-box-shadow:10px 10px 7px #222;-moz-box-shadow:10px 10px 7px #222;box-shadow:10px 10px 7px #222;'><b>OBJEK</b></div></code></td></tr><br /></tbody></table><br /><br /><br />Dan ini adalah contoh-contoh penerapan yang lebih <br />detail. Saya sudah memberikan warna merah dan hijau untuk mempertegas <br />bagian mana yang harus menjadi perhatian:<br /><br /><br /><br /><div style="border: 1px solid #bbb; box-shadow: 10px 5px 7px rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: red;">10px</span> <span style="color: red;">5px</span> 7px #222;<br /><br />-moz-box-shadow: <span style="color: red;">10px</span> <span style="color: red;">5px</span> 7px #222;<br /><br />box-shadow: <span style="color: red;">10px</span> <span style="color: red;">5px</span> 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 10px 7px rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: red;">0</span> 10px 7px #222;<br /><br />-moz-box-shadow: <span style="color: red;">0</span> 10px 7px #222;<br /><br />box-shadow: <span style="color: red;">0</span> 10px 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 10px 0pt 7px rgb(34, 34, 34); margin: 0 auto 30px; margin: 0 auto 30px; padding: 5px; padding: 5px; width: 500px; width: 500px;"><br /><code>-webkit-box-shadow: 10px <span style="color: red;">0</span> 7px #222;<br /><br />-moz-box-shadow: 10px <span style="color: red;">0</span> 7px #222;<br /><br />box-shadow: 10px <span style="color: red;">0</span> 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 7px rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: red;">0 0</span> 7px #222;</code><code><br />-moz-box-shadow: <span style="color: red;">0 0</span> 7px #222;</code><br /><code></code><code><br />box-shadow: <span style="color: red;">0 0</span> 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 20px rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: 0 0 <span style="color: red;">20px</span> #222;<br /><br />-moz-box-shadow: 0 0 <span style="color: red;">20px</span> #222;<br /><br />box-shadow: 0 0 <span style="color: red;">20px</span> #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 20px rgb(241, 12, 12); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: 0 0 20px <span style="color: red;">#f10c0c</span>;<br /><br />-moz-box-shadow: 0 0 20px <span style="color: red;">#f10c0c</span>;<br /><br />box-shadow: 0 0 20px <span style="color: red;">#f10c0c</span>;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 10px 5px 0pt rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: 10px 5px <span style="color: red;">0</span> #222;<br /><br />-moz-box-shadow: 10px 5px <span style="color: red;">0</span> #222;<br /><br />box-shadow: 10px 5px <span style="color: red;">0</span> #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: -10px -5px 0pt rgb(34, 34, 34); margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: red;">-</span>10px <span style="color: red;">-</span>5px 0 #222;<br /><br />-moz-box-shadow: <span style="color: red;">-</span>10px <span style="color: red;">-</span>5px 0 #222;<br /><br />box-shadow: <span style="color: red;">-</span>10px <span style="color: red;">-</span>5px 0 #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 10px 5px 7px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 7px #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 7px #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 10px 7px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 0 10px 7px #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 0 10px 7px #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 0 10px 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 10px 0pt 7px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 10px 0 7px #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 10px 0 7px #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 10px 0 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 7px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 7px #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 7px #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 0 0 7px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 20px rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 0pt 0pt 20px rgb(241, 12, 12) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #f10c0c;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #f10c0c;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 0 0 20px #f10c0c;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: 10px 5px 0pt rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 0 #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 0 #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> 10px 5px 0 #222;</code></div><br /><div style="border: 1px solid #bbb; box-shadow: -10px -5px 0pt rgb(34, 34, 34) inset; margin: 0 auto 30px; padding: 5px; width: 500px;"><br /><code>-webkit-box-shadow: <span style="color: #33cc00;">inset</span> -10px -5px 0 #222;<br /><br />-moz-box-shadow: <span style="color: #33cc00;">inset</span> -10px -5px 0 #222;<br /><br />box-shadow: <span style="color: #33cc00;">inset</span> -10px -5px 0 #222;</code></div><br /></div><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=5dcbc961-b7df-4549-969e-3ed5aec6b090" style="border: none; float: right;" /></div><br /></div><br />

• 
• 

1. 1
2. 2

• Previous
• Next

CSS Box Shadow - Membuat Efek Bayangan pada Area

Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek:CSS Bayangan Outsetdiv { -webkit-box-shadow:10px 10px 7px #222; /* Safari & Chrome */ -moz-box-shadow:10px 10px 7px #222; …

Baca selengkapnya »

Menjaga Keadaan Hover pada Menu Induk

<div dir="ltr" style="text-align: left;" trbidi="on"><br />Masalah yang tampak kecil tapi kita harap bisa diperbaiki adalah <br />mengenai efek hover menu induk pada navigasi bertingkat yang akan <br />menghilang setelah pointer memasuki submenu:<br /><br /><br /><br /><br /><br /><br /><br /><figure class="separator center"><a href="http://1.bp.blogspot.com/-g5I5rUbMXUs/T5JuyA_v3XI/AAAAAAAACiQ/roNfo638Nvs/s1600/before.png" title="Menu Navigasi Sebelum Diperbaiki"><img alt="Menu Navigasi Sebelum Diperbaiki" src="http://1.bp.blogspot.com/-g5I5rUbMXUs/T5JuyA_v3XI/AAAAAAAACiQ/roNfo638Nvs/s1600/before.png" /></a><figcaption>Efek hover pada menu induk menghilang saat pointer memasuki submenu</figcaption></figure><br /><br /><br /><br /><div class="button-group"><br /><b>Sebelum</b></div><br /> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="300" src="http://jsfiddle.net/ETBLz/32/embedded/" width="100%"></iframe> <br /><br /><br /><br />Itu terjadi karena pada umumnya kita menargetkan efek hover pada elemen tautan saja seperti ini:<br /><br /><br /><br /><pre id="code-block:1" rel="CSS"><code class="css"><span class="tag">nav</span> <span class="tag">li</span> <span class="tag">a</span><span class="pseudo">:hover</span> <span class="rules">{<br /> <span class="rule"><span class="attribute">background-color</span>:<span class="value">blue</span>;</span><br /><span class="rule">}</span></span></code></pre><br /><br /><br />Padahal yang seharusnya kita targetkan adalah elemen <i>list</i>/daftar yang menjadi induk dari submenu, karena submenu berada di dalam elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bli%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><li></a></code>, bukan di dalam elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Ba%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><a></a></code>:<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><figure class="separator center"><a href="http://1.bp.blogspot.com/-hUMSVLsKD6w/T5Jwcfi-XDI/AAAAAAAACig/arSakXojw2o/s1600/inside-li-element.png" title="Submenus"><img alt="List Item" src="http://1.bp.blogspot.com/-hUMSVLsKD6w/T5Jwcfi-XDI/AAAAAAAACig/arSakXojw2o/s1600/inside-li-element.png" /></a><figcaption>Susunan Submenu</figcaption></figure><br /><br /><br /><br />Sayangnya menargetkan elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bli%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><li></a></code> secara sepihak untuk mempertahankan warna menu induk tidak bisa kita lakukan karena efek hover berada pada elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Ba%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><a></a></code>, sehingga saat pointer keluar dari <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Ba%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><a></a></code> maka efek hover akan menghilang. Tapi berbeda jika kita menargetkan elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bli%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><li></a></code> kemudian memanfaatkan sikap hover pada elemen tersebut untuk mengeset warna <i>direct children</i> tautan di dalamnya:<br /><br /><br /><br /><pre id="code-block:2" rel="CSS"><code class="css"><span class="tag">nav</span> <span class="tag">li</span> <span class="tag">a</span><span class="pseudo">:hover</span>,<br /><span class="tag">nav</span> <span class="tag">li</span><span class="pseudo">:hover</span> > <span class="tag">a</span> <span class="rules">{<br /> <span class="rule"><span class="attribute">background-color</span>:<span class="value">blue</span>;</span><br /><span class="rule">}</span></span></code></pre><br /><br /><br />Dengan cara di atas maka warna pada menu induk akan tetap terjaga <br />meskipun pointer sudah meninggalkannya. Karena meskipun sudah keluar, <br />tapi pada dasarnya pointer masih berada di dalam elemen <code><a class="allow" href="http://www.google.co.id/cse?cx=partner-pub-4884309229437815:4734643671&ie=UTF-8&q=%26lt%3Bli%26gt%3B&sa=Telusuri" target="_blank" title="Telusuri makna kode ini"><li></a></code> induk:<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><figure class="separator center"><a href="http://3.bp.blogspot.com/-EQJmE5jSgvg/T5Ju2LTb89I/AAAAAAAACiY/Ukz2E1-2rDo/s1600/after.png" title="Menu Navigasi Sesudah Diperbaiki"><img alt="Menu Navigasi Sesudah Diperbaiki" src="http://3.bp.blogspot.com/-EQJmE5jSgvg/T5Ju2LTb89I/AAAAAAAACiY/Ukz2E1-2rDo/s1600/after.png" /></a><figcaption>Warna hover pada menu induk tetap terjaga</figcaption></figure><br /><br /><br /><br /><div class="button-group"><br /><b>Sesudah</b></div><br /><br /><br /><iframe allowfullscreen="allowfullscreen" frameborder="0" height="300" src="http://jsfiddle.net/tovic/ETBLz/1/embedded/" width="100%"></iframe><br /><br /><br /><br /><br /><br />ajb@2013</div><br />

• 
• 
• 

1. 1
2. 2
3. 3

• Previous
• Next

Menjaga Keadaan Hover pada Menu Induk

Masalah yang tampak kecil tapi kita harap bisa diperbaiki adalah mengenai efek hover menu induk pada navigasi bertingkat yang akan menghilang setelah pointer memasuki submenu:Efek hover pada menu indu…

Baca selengkapnya »

Virtual Comment Editor

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><iframe height="500px" src="http://dte.googlecode.com/svn/brain/map/comment-editor.v2.html" width="100%"></iframe></div><br />

Virtual Comment Editor

…

Baca selengkapnya »