Showing posts with label Blog Tutorials. Show all posts
Showing posts with label Blog Tutorials. Show all posts
Create Blogger Recent Comment Widget

Add recent comments to you Blogger blog
Having a recent comment widget on your blog homepage has its advantages, not only linking more of your pages from your blogs main page but to encourage users to interact even more with your site.

In this short but very affective tutorial we will show you how to create a recent comment widget for use in Blogger.

Go to your bloggers dashboard > Layout > Add a Gadget
Now choose the HTML/JavaScript option


Blogger HTML/JavaScript
Copy the HTML code below and paste it in the gadget text box
HTML Code

<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://your-blog-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href=http://www.helpfulbloggertips.com/>Recent Comment Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>

To get the recent comment gadget to work you need to replace the red blog name with your own, for example if your URL is myblog.blogspot.com you just need to use myblog

Job Done...
Labels: Blogger, Comment, Gadget, How To, HTML, Tutorial

source
Assalamualaikum dan Salam Sejahtera



Hari ini amir ingin berkongsi satu tutorial cara membuat widget post yang berkaitan dalam blogger dengan thumbnail. Widget ini akan memaparkan tajuk dengan gambar yang pertama dalam artikal atau entry anda. Jika dalam artikal anda tiada gambar akan memaparkan gambar default. gambar default ini anda boleh mengantikan dengan gambar yang anda sukai.

Ok, Jom ikuti tutorial dibawah ☺

1.Login blogger > Templete > Edit HTML > Ctrl + A (untuk select semua) > Ctrl + C( untuk copy semua)

2.Setelah selesai copy pergi ke laman web ini dan pastekan dalam laman web ini

3. Ctrl + F untuk mencari

 </ Head>
dan dibawah  </ Head> pastekan kod dibawah

 <!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3QedmqNlhSZFI6OfMZJn-FRUkbVw56Qk3sbcq94fWl9lSHyrpTl19m_qnjxSD2yDgZp60V_V8xRlDMwcgz789aNCF9sPyWnrychOAO64Svavr-aOOTzJCYj_njG7BBqbo_V5KVRBfJra2/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
4. Untuk ubah default image  anda boleh ubah tulisan warna hijau tersebut dan letakkan URL gambar yang anda ingin letakkan.. kalau tak nak tukar tak apa. ☺

5. Untuk mengubah tajuk "Related Posts" anda boleh tukar tulisan warna unggu dengan teks yang anda inginkan.

var relatedpoststitle=&quot;Related Posts&quot;;

 6. sekarang cara kod ini pula

 <div class='post-footer'>
7. Copy code dibawah dan paste dibawah kod <div class='post-footer'>

 <!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.helpfulbloggertips.com/'><img alt='Helpful Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwNm4ITldVJXwSKe34O6aAzxUuClr4IpJDhgq8tov6dLZO6xl6lmIS_ZdsI3kCPUjuSfsZGiIx6lEkOHVSPgVcAXYj7NMjftOcHF8JX-7lKEqRrH79xJb3LukDWIaXkKUWMO0R4WSOjLuJ/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
8. untuk edit bilangan related post yang dipaparkan setiap artikal anda, anda hanya edit  max-results=6 dan letakkan nombor yang anda inginkan.

 9. kamu juga boleh memaparkan related post pada home page anda dengan membuang kod berwarna biru.

 10. sekarang semua selesai, anda mestilah copy semua kod html yang anda paste dalam laman web edit html.

 11. Dan paste kembali kod tadi dalam Templete > Edit HTML

 12. selesai.

 P/s: jika anda tidak faham @ tidak berjaya sila komen dibawah.. insyaAllah amir akan bantu. ☺

 P/s: sebenarnya ada cara lebih mudah untuk membuat related post anda boleh daftar di LinkWithin ataupun Nrelate anda hanya perlu tekan install sahaja dalam blog. semua proses dilakukan secara automatik.
This related post widget will display thumbnails and snippet text just below your post.  The widget will display any related post with the same labels.

The related post widget will only take two main simple steps.

 Go to your 
1. Blogger dashboard > Templates > Edit HTML and Copy All Code Html
2. Open online html editor and paste Html Code Here
Find this tag, tip, use Ctrl f to search


 </head>

 And replace with
 <!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3QedmqNlhSZFI6OfMZJn-FRUkbVw56Qk3sbcq94fWl9lSHyrpTl19m_qnjxSD2yDgZp60V_V8xRlDMwcgz789aNCF9sPyWnrychOAO64Svavr-aOOTzJCYj_njG7BBqbo_V5KVRBfJra2/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

To change the default image replace the URL in green with your own.  Also edit var maxresults=5; for the amount of related post you want.  You can change the title text by editing this line.


 var relatedpoststitle=&quot;Related Posts&quot;;

Now find this line of code, remember to use Ctrl + f
 <div class='post-footer'>

Now place the code snippet immediately befor the above line

 <!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.helpfulbloggertips.com/'><img alt='Helpful Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwNm4ITldVJXwSKe34O6aAzxUuClr4IpJDhgq8tov6dLZO6xl6lmIS_ZdsI3kCPUjuSfsZGiIx6lEkOHVSPgVcAXYj7NMjftOcHF8JX-7lKEqRrH79xJb3LukDWIaXkKUWMO0R4WSOjLuJ/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->


To edit the number of related post to display just edit maxresults=6; to any number to fit your blogs theme.

You can also display the related post on your home page, just remove the code in blue.
You should now have a working related post widget for your blog, you can also edit the look and feel by editing the cascading style sheet.  If you have problems please comment below or contact me and I'll be glad to help.  Good luck and have fun.


Drop down menus are very important in blogging and these kinds of stuff is also considerable for the visitors because visitor when firstly see your menus and other widget and if he like that then she/he wish to visit again itself and content also very important fro the every blogger.


Ok Follow here :)

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Layout
  • Add a HTML/JavaScript Gadget
  • Paste below code in it.

<style>

/* Blue Dropdown Menu by www.widgetgenerators.blogspot.com */
#nav {
display:inline-block;
width:100%;
margin:0px auto;
padding:0;
background:#335599 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO7-EW-tiu1JKJdOeIvloAtoPBgo8_fAz6HAHpPua9rN1qAl-TufZg12y-ictfH8ATFVeCF0MAYoiaWDNvrtfaKmca70eaql_MiCk1TY4UZyZOYamcPfOlf1iW_4tNEo1Ptt2I5H3hUfKi/s320/bg-ABT.png) repeat-x 0 -110px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
margin:10px;
float:left;
position:relative;
list-style:none;
}
#nav a {
font-family:verdana;
font-weight:bold;
color:#e7e5e5;
text-decoration:none;
display:block;
padding:8px 20px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);
}/* selected menu element */
#nav .current a, #nav li:hover > a {
background:#7788aa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO7-EW-tiu1JKJdOeIvloAtoPBgo8_fAz6HAHpPua9rN1qAl-TufZg12y-ictfH8ATFVeCF0MAYoiaWDNvrtfaKmca70eaql_MiCk1TY4UZyZOYamcPfOlf1iW_4tNEo1Ptt2I5H3hUfKi/s320/bg-ABT.png) repeat-x 0 -20px;
color:#000;
border-top:1px solid #f8f8f8;box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
-moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
background:none;
border:none;
color:#000;
}
#nav ul li a:hover {
background:#335599 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO7-EW-tiu1JKJdOeIvloAtoPBgo8_fAz6HAHpPua9rN1qAl-TufZg12y-ictfH8ATFVeCF0MAYoiaWDNvrtfaKmca70eaql_MiCk1TY4UZyZOYamcPfOlf1iW_4tNEo1Ptt2I5H3hUfKi/s320/bg-ABT.png) repeat-x 0 -100px;
color:#fff;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}#nav ul li:first-child > a {
-moz-border-radius-topleft:10px; /*some css3*/
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
-moz-border-radius-bottomleft:10px; /*some css3*/
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}/* drop down */
#nav li:hover > ul {
opacity:1;
visibility:visible;
}
#nav ul {
opacity:0;
visibility:hidden;
padding:0;
width:175px;
position:absolute;
background:#aabbcc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO7-EW-tiu1JKJdOeIvloAtoPBgo8_fAz6HAHpPua9rN1qAl-TufZg12y-ictfH8ATFVeCF0MAYoiaWDNvrtfaKmca70eaql_MiCk1TY4UZyZOYamcPfOlf1iW_4tNEo1Ptt2I5H3hUfKi/s320/bg-ABT.png) repeat-x 0 0;
border:1px solid #7788aa;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);-moz-transition:opacity .25s linear, visibility .1s linear .1s;
-webkit-transition:opacity .25s linear, visibility .1s linear .1s;
-o-transition:opacity .25s linear, visibility .1s linear .1s;
transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
float:none;
margin:0;
}
#nav ul a {
font-weight:normal;
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
left:160px;
top:0px;
}

</style> 

    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">HTML / CSS</a></li>
                <li><a href="#">JS / jQuery</a>
                    <ul>
                        <li><a href="#">jQuery</a></li>
                        <li><a href="#">JS</a></li>
                    </ul>
                </li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">MySQL</a></li>
                <li><a href="#">XSLT</a></li>
                <li><a href="#">Ajax</a></li>
            </ul>
        </li>
        <li><a href="#">Resources</a>
            <ul>
                <li><a href="#">By category</a>
                    <ul>
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">MySQL</a></li>
                        <li><a href="#">XSLT</a></li>
                        <li><a href="#">Ajax</a></li>
                    </ul>
                </li>
                <li><a href="#">By tag name</a>
                    <ul>
                        <li><a href="#">captcha</a></li>
                        <li><a href="#">gallery</a></li>
                        <li><a href="#">animation</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="http://www.widgetgenerators.blogspot.com.com">FAQ's</a></li>
    </ul>


  • Save your widget.

Make Changes!!

  • Replace it # with your link.
  • Replace all Green Area with your showing menu name.

About me

Social

Facebook

Gallery

Translate