Search

Memasang Widget Jejaring Sosial Melayang di Blog

Banyak blogger (termasuk saya) yang mempromosikan blognya di berbagai situs sosial media. Sebut saja Facebook dan twitter, ke dua sosial media ini memang sudah mendunia dan memiliki banyak peminatnya. Tetapi, tidak hanya itu saja jejaring sosial media yang ada di dunia. Masih banyak lagi sosial media yang ada dan bisa anda manfaatkan untuk mempromosikan blog anda.
Semakin banyak oran yang melakukan aktivitas di jejaring sosial media, maka semakin banyak pula perkembangan-perkembangan yang terjadi di dunia blogging. Salah satunya adalah tombol share yang ada di sebuah website atau blog. Semakin maju saja bukan? sekarang tombol sosial media tersebut sudah menjadi hal wajib yang harus di miliki oleh sebuah blog atau website.

Oleh karena itu, pada artikel saya tentang Widget ini, saya akan membagi informasi tentang "Cara Memasang Widget Jejaring Sosial Keren Melayang di Blog". Widget saya kali ini lebih tepatnya menempel di sidebar blog saudara. Tapi kalau saudara ingin tombol share sosial media yang melayang di blog. Anda bisa pergi ke tutorial blog saya yang satunya  lagi tentang " Bagaimana Membuat Tombol Share Melayang di Blog"

Apa Manfaat dan Kelebihan Widget Ini

Semua tombol sosial media manfaatnya sama yaitu untuk membantu penulis dalam mempromosikan blog mereka ke situs-situs jejaring sosial media online. Bukan hanya penulis saja yang bisa menggunakan tombol sosial media ini, Pengunjung blog pun juga bisa memakainya. Hal ini agar pengunjung yang tertarik dengan artikel tersebut dapat dengan mudah menyebar luaskan artikel anda dengan menggunakan tombol sosila media yang ada.  
Berbicara tentang ke lebihan widget ini, sebenarnya widget sosial media ini sama saja dengan widget sosial media yang anda gunakan. Mungkin perbedaanya terletak pada posisi widget sosial media tersebut. Widget ini memiliki 8 platform jejaring sosial media yang bisa dibilang populer dan muncul atau tampil dalam bentuk sebuar bar yang melayang di sepanjang screen blog saudara. Jadi widget ini akan selalu mengikuti layar anda, sehingga saat anda melakukan scroll ke bawah atau ke atas, widget ini akan selalu terlihat.

Cara Memasang Widget Sosial Media Ini

Bagi anda yang tertarik dengan widget jejaring sosial media yang keren ini. Saudara bisa memasangnya dengan mengikuti prosedur sederhana di bawah ini:
  • Buka akun blogspot saudara
  • Masuk ke Menu Template, kemudian klik tombol Edit HTML
  • Cari kode </body>
  • Klik pointer pada kolom Edit HTML, kemudian tekan Ctrl+F untuk mempermudah Pencarian Kode
  • Setelah kode ketemu, simpan script di bawah ini tepat di atas kode </body>

<!-- import Scripts -->
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/mblsocialbar.js"></script>
<div id="scolder">
<script type="text/javascript" src=" http://mbl-flipper-google-blogger.googlecode.com/files/socialflipmin.js"></script></div>  
<link href='http://mybloggerlab.com/StyleSheet/mblsocialbar.css' rel='stylesheet' type='text/css'/>

<!-- MBL Social Media Bar For Blogger -->
<script type="text/javascript">
$(document).ready(function(){
$.mblSocialBar({
items: {
twitter: { url: '#', text: 'Follow me on twitter' },
facebook: { url: '#', text: 'Profile on facebook' },
rss: { url: '#', text: 'RSS Feed' },
google: { url: '#', text: 'Profile on google+' },
youtube: { url: '#', text: 'Profile on youtube' },
orkut: { url: '#', text: 'Profile on orkut' },
myspace: { url: '#', text: 'Profile on myspace' },
digg: { url: '#', text: 'Profile on digg' },
 
},
show: 8,
position: "left",
skin: "clear"
});
 
});
</script>
  • Simpan template
Keterangan kode di atas:
  1. Ganti kode (#) yang berwarna merah dengan URL masing-masing akun yang anda miliki
  2. Kode berwarna ungu adalah jumlah tampilan sosial medianya, anda bisa menggantinya sesuai keinginan anda
  3. Kalau kode yang berwarna hijau adalah letak atau posisi widgetnya nanti. Anda bisa mengganti sesuai yang anda inginkan, seperti Right (widget berada di sibe bar kanan layar), Top (berada di atas layar, dan Bottom ( berada di bawah layar)
  4. Untuk kode yang berwarna pink, anda bisa menggantinya dengan kode dark, jika anda ingin background widgetnya berwarna hitam atau gelap. 
Hasilnya kurang lebih akan seperti ini:

Contoh Widget Sosial Media Melayang di Blog

Selesai, , ,Selamat mencoba dan Semoga Berhasil ...

cara membuat slide show di header blog

Langsung saja pada langkah-langkah pembuatan Content Slider Image otomatis ini :

  1. Langkah pertama, Anda mesti login ke blogger dengan akun Anda
  2. Pilih blog yang ingin anda tambahkan slider image ini.
  3. Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
  5. Langkah berikutnya, letakkan kode berikut ini diatas kode ]]></b:skin> :
  1. #featuredContent{float:left;width:407px;margin-right:10px;display:inline}
    #featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
    #featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/gwCsmb8Fcks/s1600/transparant.png)}
    #featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
    #featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
    #featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
    #paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
    #paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
    #paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
    #paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
    #paginate-featured-slider a img{border-top:4px solid #f0f0f0}
    #paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}
    Tulisan warna biru diatas adalah panjang dan lebar slider pada demo, silahkan sesuaikan ukurannya.
  2. Masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/222517121138/contentslider.js' type='text/javascript'/>

    <script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
    showRandomImg = true;

    aBold = true;

    summaryPost = 100;
    summaryTitle = 25;

    numposts3 = 5;

    function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }

    s = s.join("");
    s = s.substring(0,chop-1);
    return s;
    }
    function showrecentposts3(json) {
        j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
        img  = new Array();

          for (var i = 0; i < numposts3; i++) {
            var entry = json.feed.entry[i];
            var posttitle = entry.title.$t;
            var pcm;
            var posturl;
            if (i == json.feed.entry.length) break;
            for (var k = 0; k < entry.link.length; k++) {
                  if (entry.link[k].rel == 'alternate') {
                    posturl = entry.link[k].href;
                    break;
                  }
            }
           
            for (var k = 0; k < entry.link.length; k++) {
                  if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                    pcm = entry.link[k].title.split(" ")[0];
                    break;
                  }
            }
           
            if ("content" in entry) {
                  var postcontent = entry.content.$t;}
            else
            if ("summary" in entry) {
                  var postcontent = entry.summary.$t;}
            else var postcontent = "";
           
            postdate = entry.published.$t;
       
        if(j>imgr.length-1) j=0;
        img[i] = imgr[j];
       
        s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

        if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

        //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


        var month = [1,2,3,4,5,6,7,8,9,10,11,12];
        var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

        var day = postdate.split("-")[2].substring(0,2);
        var m = postdate.split("-")[1];
        var y = postdate.split("-")[0];

        for(var u2=0;u2<month.length;u2++){
            if(parseInt(m)==month[u2]) {
                m = month2[u2] ; break;
            }
        }

        var daystr = day+ ' ' + m + ' ' + y ;

        var trtd = '<div class="contentdiv"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
        document.write(trtd);


        j++;
    }

    }

    function showrecentposts4(json) {
        j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
        img  = new Array();

          for (var i = 0; i < numposts3; i++) {
            var entry = json.feed.entry[i];
            var posttitle = entry.title.$t;
            var pcm;
            var posturl;
            if (i == json.feed.entry.length) break;
            for (var k = 0; k < entry.link.length; k++) {
                  if (entry.link[k].rel == 'alternate') {
                    posturl = entry.link[k].href;
                    break;
                  }
            }
           
            for (var k = 0; k < entry.link.length; k++) {
                  if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                    pcm = entry.link[k].title.split(" ")[0];
                    break;
                  }
            }
           
            if ("content" in entry) {
                  var postcontent = entry.content.$t;}
            else
            if ("summary" in entry) {
                  var postcontent = entry.summary.$t;}
            else var postcontent = "";
           
            postdate = entry.published.$t;
       
        if(j>imgr.length-1) j=0;
        img[i] = imgr[j];
       
        s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

        if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

        //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


        var month = [1,2,3,4,5,6,7,8,9,10,11,12];
        var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

        var day = postdate.split("-")[2].substring(0,2);
        var m = postdate.split("-")[1];
        var y = postdate.split("-")[0];

        for(var u2=0;u2<month.length;u2++){
            if(parseInt(m)==month[u2]) {
                m = month2[u2] ; break;
            }
        }

        var daystr = day+ ' ' + m + ' ' + y ;

        var trtd = '<li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
        document.write(trtd);

        j++;
    }

    }

    //]]>
    </script>
    Keterangan :
    Kode script warna merah (paling atas) adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.jswalaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satujQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
    Warna biru : Jumlah post yang ditampilkan dalam slider
    Warna hijau : Panjang dan lebar image besar
    Warna merah tua : Panjang dan lebar image kecil
  3. Setelah langkah diatas, save templates terlebih dahulu. Setelah itu menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :


    <div id='featuredContent'>
    <div class='sliderwrapper' id='featured-slider'>
    <script>
    document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
    </script>
    </div>
    <div id='paginate-featured-slider'>
    <ul>
    <script>
    document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
    </script>
    </ul>
    <div class='clear'></div>
    </div>
    <script type='text/javascript'>
    featuredcontentslider.init({
    id: "featured-slider", //id of main slider DIV
    contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
    revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    enablefade: [true, 0.4], //[true/false, fadedegree]
    autorotate: [true, 5000], //[true/false, pausetime]
    onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
    //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
    //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
    })
    </script>
    </div>
    Keterangan :
    Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan, slider efek mouseover dan lain-lain, tidak harus dimasukkan.
    Jika Anda ingin menggantinya dengan recent post atau artikel terbaru ganti kode (ada dua ganti semua) :
    script src=\"/feeds/posts/default/-/sport?max-results
    dengan kode berikut :
    script src=\"/feeds/posts/default?max-results
  4. Jika anda ingin meletakkannya langsung pada template, anda bisa letakkan kode nomer 7 dibawah kode <div id='main-wrapper'>, bagi yang ingin meletakkannya pada kotakHMTL/Javascript bisa dibuat dulu satu kolom kosong diatas blog post. Cara membuatnya, letakkan kode berikut diatas ]]></b:skin>
    /* Slide Content
    ----------------------------------------------- */
    .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
    word-wrap: break-word; overflow: hidden;} 
    .slide {color: #666666;line-height: 1.3em;}
    .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
    .slide li {margin:0;padding-top:0;
    padding-right:0;padding-bottom:.25em;
    padding-left:0px;text-indent:0px;line-height:1.3em;}
    .slide .widget {margin:0px 0px 6px 0px;}
  5. Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
          <div id='slide-wrapper'>
    <b:section class='slide' id='slide' preferred='yes'/>
          </div>
    </b:if> 
    slider otomatis
Jika diperhatikan kode script yang ada diatas memang terlalu banyak, dan tentunya akan semakin memperlambat loading sebuah blog. Untuk mengatasinya Anda bisa menyimpan kode-kode yang terlalu panjang tersebut di tempat penyimpanan Google Code. Nah, itu tadi salah satu fitur slider image yang saya ulas kali ini. Saya berharap dengan mengulas satu persatu fitur dalam sebuah template, nantinya teman-teman semua bisa membuat sebuah tampilan template sendiri dengan memodifikasi dari dasar tampilan yang sudah saya berikan diatas.Selamat mencoba dan semoga bermanfaat

Cara membuat Daftar Isi / Sitemap Otomatis Di Blogger terbaru dan Keren dengan javascript Accordion Style

Sitemap adalah salah satu elemen penting dalam sebuah blog. Karena di Blogger.com tidak menggunakan layanan plugin seperti di WP, maka penggunanya sering kali membuat daftar isi secara manual. Membuat sebuah halaman daftar isi di blogspot mereka. Hal ini juga dipercaya meningkatkan SEO onpage blog mereka tersebut. Dengan membuat daftar isi otomatis dalam blog mereka, pengunjung akan dapat melihat semua postingan yang terdapat dalam blog mereka, biasanya setiap postingan di bagi berdasarkan label atatu kategori.


Cara membuat Daftar Isi / Sitemap Otomatis Di Blogger terbaru dan Keren dengan javascript CSS3 dengan Sliding
Daftar Isi otomatis

Oke, setelah sebelumnya netomaniak telah membuat postingan Cara membuat daftar isi otomatis dengan tabulasi, kali ini saya mencoba membagikan cara membuat daftar isi otomatis dengan efek accordion style, yang tentunya lebih keren dan stylis. javascript yang digunakan boleh dibilang sangat simple dan ringan. Berikut tutorial nya:

1. Login ke blog Kalian dulu.

2. Setelah itu, pilih blog yang akan kalian tambahkan sitemapnya.

3. Lalu klik menu Laman/Page di bilah kiri.

4. Buat sebuah halaman kosong dengan judul sitemap ataupun daftar isi ataupun bebas terserah anda.

5. Setelah itu akan muncul sebuah form untuk menuliskan isi yang akan dipublikasikan dihalaman tersebut.

6.  Klik HTML mode di samping kanan tombol Compose.
Cara Membuat Daftar Isi Otomatis Di Blog terbaru dan Keren
7. Lalu, copy dan masukan kode dibawah ini pada mode html tersebut.


keterangan: ganti www.netomaniak.com dengan alamat blog anda!!!

8. Setelah itu, silahkan Publish atau Simpan. Buka halaman tersebut untuk melihat hasilnya.

Ok, itu dia tutorial Cara Membuat Daftar Isi Otomatis Di Blog terbaru dan Keren. Jika ada kesalahan atau tidak berhasil di terapkan di blog anda, silahkan posting komentar anda di postingan ini.

Cara membuat Polling Survey di Blog

Polling merupakan sistem pemungutan suara yang berasal dari orang banyak dalam menilai atau memilih sesuatu. Sedangkan jika di pasang di blog. hal ini akan membantu kita dalam meminta pendapat mengenai hal apa saja yang menarik dilihat dari penilaian para pembaca. Dari sini kita dapat menilai hal apa saja yang disukai dan tidak disukai oleh pembaca. Nah, jika sobat ingin memasang sistem polling ini di blog sobat, berikut ini langkah-langkah tutorialnya.

Tips Cara Memasang Polling Dan Survey Di Halaman Blog


1.  Pertama-tama sobat harus Login terlebih dahulu ke blog sobat masing-masing.
cara memasang polling di blog
Picture by Galerisaham.com

2. Lalu masuk ke dashboard dan klik Layout.

3. Selanjutnya klik Add Gadget.

gadget di blok kita

4. Berikutnya sobat scroll ke bawah dan pilih Poll. Berikut ini gambarnya.

Tahapan membuat poling di blogger

5. Lalu sobat tinggal setting Poll sesuai dengan ke inginan sobat. Berikut ini contoh settingnya.

setting polling di blog

Catatan :
- Question : Silahkan ketik hal apa yang ingin sobat tanyakan atau minta pendapat pada pembaca.

- Answer : Merupakan Pilihan jawaban, silahkan isi beberapa opsi jawaban yang nantinya akan dipilih pembaca. Bila sobat beri centang pada Allow Visitors to select multiple answers maka pengunjung bisa memilih lebih dari satu jawaban.

6. Bila setting telah selesai. Selanjutnya tinggal klik Save.

7. Terakhir sobat tinggal drag dan geser gadget Poll ke tempat atau posisi yang di inginkan. Selanjutnya tinggal lihat hasilnya di halaman blog sobat. Berikut contoh polling yang saya buat.

hasil pembuatan polling di blog


Sangat mudah bukan?? jika sobat masih merasa bingung ataupun punya opini lain, silahkan berikan komentarnya di kotak komentar. Selain itu baca juga artikel lainnya mengenai Cara Jitu Menampilkan Popular Posts Di Blog. Hanya sampai di sini tips singkat mengenai tutorial Tips Cara Memasang Polling Dan Survey Di Halaman Blog, semoga bisa membantu sobat sekalian. Terima kasih atas kunjungannya dan have a sweet dream.

Cara Membuat Related Post Thumbnails Blogger

Tips Menghias blog ini akan membuat seperti gambar diatas, untuk contoh nyatanya lihat dibawah postingan ini..
Oke langsung saja yah..
1.Langkah pertama masuk dulu ke blogger dasbor sobat, lalu back up atau download terlebih dahulu template sobat, untuk jaga jaga jika sobat mengalami kesalahan, kemuidian edit HTML dan centang "Expand Widget Templates"
2.Kemudian cari code dibwah ini, gunakanlah Ctrl + F untuk memudahkan sobat mencari
</head>

Setelah ketemu gantikan dengan kode dibawah ini..


<!--Related Posts with thumbnails Scripts and Styles Start-->
<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: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=" https://lh3.googleusercontent.com/-FPqdjkT1gDg/T00edMGpNFI/AAAAAAAAAas/UE79zCbeq4E/s254/No%2520Image.jpg";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Jangan Lewatkan Artikel Lainnya";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

3.Setelah itu cari lagi kode berikut..

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

jika sobat tidak menemukan kode seperti diatas coba cari kode dibawah ini..

<p class='post-footer-line post-footer-line-1'>

Setelah itu letakkan kode dibawah ini setelah kode yang tadi atau tepat dibawah kode yang tadi.

<!-- Related Posts with Thumbnails Code Start-->
<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=5&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'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Kemudian jangan lupa untuk save..lalu lihat hasilnya..

4.Kalau sobat ingin menambah atau mengurangi jumlah artikel terkait atau related post yang akan ditampilkan sobat tinggal menggantikan nomor seperti kode dibawah, gantikan nomor sesuai dengan yang sobat ingin tampilkan.

var maxresults=5;

Untuk mengubah jumlah label yang akan diperlihatkan sobat tinggal edit kode sperti dibawah ini

max-results=5

5.Untuk merubah judulnya sobat bisa edit kode seperti kode berikut.

var relatedpoststitle="Related Posts";

6.Untuk postingan yang tidak ada photo, supaya terlihat ada photonya gantilah url photo yang sobat ingin tampilakan supaya nanti jika secara otomatis untuk postingan yang tidak memiliki photo akan menampilkan photo yang sobat mau

var defaultnoimage="https://lh3.googleusercontent.com/-FPqdjkT1gDg/T00edMGpNFI/AAAAAAAAAas/UE79zCbeq4E/s254/No%2520Image.jpg";

7.Editlah kode warna dibawah ini kalau sobat ingin mengganti warna framenya

var splittercolor="#d4eaf2";


Selamat Mencoba... !!!

Cara Membuat Recent Comment dengan Avatar Image Unik 2014

Buat sobat blogger yang ingin menampilkan komentar terakhir di blognya bisa mencoba widget yang satu ini. menurut saya widget recent comments ini cukup unik karena juga menampilkan avatar image. Sobat blogger bisa melihat tampilannya seperti pada gambar di bawah.



recent comments with avatar image


 Caranya....? Masuk ke akun blogger > tata letak > add gadget> HTML/Javascript
Setelah itu tinggal masukkan saja kode widget recent comments dibawah ini;




Terakhir pratinjau, lalu simpan template.

Modifikasi;

1.  angka 5 (warna biru adalah jumlah komentar terakhir yang ingin ditampilkan)
2.  angka 60 dan 40 adalah ukuran image avatar komentar postingan blog.
3.  Silahkan mencoba bereksperimen sendiri untuk hal-hal lainnya, cobalah.
4.  Ganti http://www.imran-iim.blogspot.com dengan nama blog sobat

Demikian cara membuat widget recent comment dengan avatar atau komentar terakhir di blog. Silakan jika sobat mau mencobanya.

Cara Membuat slide show di header blog

ada beberapa cara yang bias kita lakukan yaitu dengan cara Online ada sebuah situs yang menyediakan slide show otomatis , jadi kita Cuma mengupload gambar saja ke situs tersebut dan situs tersebut memberikan kita coding untuk di copy paste di gadget javascrip/HTML tapi agak di saying kan sekali bahwa situs itu menyertakan LINK balik ke situs nya di slide show yang membuat kita sedikit terganggu….. he he he jadi saya tidak bahas dengan cara praktis ini ya, kita buat sendiri slide show nya agar lebih puas dan tidak ada link kembali nya….. :D
Banyak Orang/para blogger yang ingin memasang slide show di blog nya entah itu untuk mempercantik blog atau pun ingin memperkenal kan foto diri nya kepada halayak ramai. eeit..tapi tau gak sih jika kita membuat slide showmembuat proses loading blog anda sendiri menjadi lebih berat(LEMOT). Jangan hanya karena ingin membuat tampilan blog keren, penuh dengan widget blog yang keren,
penuh dengan flash dan gambar bergerak lainnya justru akan memperlambat loading blog hingga menjadi berat, hal ini bisa membuat kapok para pengunjung loh ??? he he he JADI DI PIKIR KAN KEMBALI YA….. :D
Tapi jika hal ini sudah menjadi pertimbangan anda, silahkan saja. Header slideshow sebenarnya bisa menggantikan header dengan flash atau swf masalahnya hosting tempat penyimpanan / upload swf terkadang error atau mematikan akun kita karena berbagai kebijakan, maka header swf kita menjadi tidak bergerak alias mati, karena link pada coding embed kita sudah tidak aktif, ada banyak tempat alamat web upload swf gratisan akan tetapi pada kenyataannya tidak pernah menjamin akun dan file kita bertahan lama, atau mungkin hanya memberi fasilitas TRIAL kepada kita. Atau begitu kita akan generate 'embed' swf tersebut, kita dibawa ke halaman untuk mengisi form yang menyediakan kolom isian type pembayaran transfer credit card  paypal .....hahahaha...UUD (ujung-ujungnya duit) juga ya.  Tapi sampai sekarang hanya ada satu tempat upload swf yang masih terpercaya kegratisannya yaitu milik google, jika ingin gabung ini URL nya https://sites.google.com  jika anda ingin membuat file SWF dan upload ke site google dan membuat code embed nya, tapi kita di sini membuat slide show dengan sederhana dengan menggabungkan beberapa photo koleksi kita untuk di buat slide show nya , dengan bermodalkan beberapa gambar image berformat JPEG,PNG atau yang lain anda sudah bias membuat slide show cara nya dengan mengupload gambar-gambar tersebut di Photobucket atau di tempat upload foto yang anda percayai misal nya pisca atau yang lain di sini saya memakai photobucket contoh nya pada halaman Home saya slideshow di bawah header blog saya foto-foto nya saya upload ke photobucket.
1. Silahkan untuk langkah awal kunjungi dan registrasi dihttp://www.photobucket.com
2. Buatlah beberapa gambar berformat jpeg/png (harap gambar yang anda buat diserasikan dengan thema blog, ukuran lebar dan ukuran tinggi header blog anda), karena header tidak membutuhkan ukuran & resolusi tinggi silahkan anda buat beberapa gambar header anda di powerpoint atau photo shop saja, jangan lupa tambahkan teks judul blog dan deskipsi blognya(jika ingin) jika menggunakan power point jangan lupa untuk meng grouping agar gambar menjadi satu lalu save dengan format image, jika pakai photoshop tidak perlu di satukan setiap layers nya karena jika kita men save nya maka gambar akan automatis menjadi 1
2. Setelah beberapa gambar header selesai anda buat dengan langkah kerja diatas, silahkan anda login di photobucket kemudian silahkan upload beberapa gambar header yang anda buat tadi, beri judul kemudian
silahkan saving file yang sudah di upload. Kemudian copy paste Dirrect link gambarnya simpan di notepad/ms word atau sejenis nya agar anda tidak sulit unuk menghafal link photo anda. Sampai disini anda sudah punya modal link gambar header yang nanti akan dijadikan modal slideshow :)
3. Langkah ketiga silahkan login ke akun blog anda, masuk ke design dan edit html.
4. Download dan backup full template anda untuk berjaga-jaga, siapa tahu nantinya terjadi kesalahan.
5. Silahkan centang expand widget, kemudian cari kode </head> , letakkan kode dibawah ini dengan cara copy paste, diatas kode </head>
Gunakan ctrl + F untuk searching code </head> agar lebih mudah

      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 930,height:140, navigation: false, delay: 5000 }); }); </script>
6. Keterangan width:930,height:140 adalah menunjukkan ukuran lebar & tinggi slideshow serta ukuran gambar yang ditampilkan,sesuaikan dengan header anda ya
7. Setelah selesai, silahkan save template anda. Kemudian masuklah ke Design (Rancangan).
8. Lakukan Add a Gadget, pilih Add a Gadget di bagian header, jika tidak ada maka aktifkan ulti gedget di header , setelah multi gedget di header di aktifkan add gedget pilih HTML/Javascript. Kemudian Paste kode dibawah ini.
<div id='coin-slider'>
<center>
<a href="imgN_url" target="_blank">
<img src="LINK URL GAMBAR ANDA" />
<span>
ISI KETERANGAN DI SINI
</span>
</a>

<a href="imgN_url" target="_blank">
<img src="LINK URL GAMBAR ANDA" />
<span>
ISI KETERANGAN DI SINI
</span>
</a>

<a href="imgN_url" target="_blank">
<img src="LINK URL GAMBAR ANDA" />
<span>
ISI KETERANGAN DI SINI
</span>
</a>

</center>
</div>
9. Jangan lupa masukkan dirrect link url gambar-gambar yang anda simpan di notepad tadi pada area tulisan ISI KETERANGAN DI SINI tersebut,untuk isi keterangan terserah anda bisa diisi atau anda abaikan.
10. lalu save, dan lihat hasilnya.
Jika ingin membuat di bawah header langkah yang berubah adalah pada langkah ke 8-seterus nya, add gedget nya di bawah header atau bias di atas postingan….. terserah anda
 

How To Create Metro UI Navigation Menu in Blogger Blog

Are you bored with your website’s navigation menu? Does anyone want to revamp his unappealing navigation menu into Windows 8 Style Metro Menu? Navigation menu is one of the core elements of a website because without a user-friendly Menu visitors can’t search the content in depth. In this situation, an ugly Navigation Menu could act a piece of garbage. Therefore, it is essential to have an elegantly style Navigation Menu that attracts a person like a bee to a honey. To provide more power to Blogger users, we have created a new windows 8 look like Metro UI Navigation menu for blogger enabled websites. It has tons of features which we will discuss in today’s article. 



What is METRO UI Menu?

If anyone has experience the interface of Microsoft Windows 8, or the new range of Windows Smart phones, then this METRO UI menu is not a new thing for them. This Menu is inspired from the navigation interface of Windows 8. If anyone is still chaotic about it, then he can check out the following screenshot. 

Where The Metro UI Menu Would Appear?

It depends on a person that where he wants to utilize this Menu because it is so flexible that it can take shape of any theme or template. However, it would be ideal if anyone places this menu at the top of his website by doing that, visitors can easily access it without facing any hesitation whatsoever. We have attached an interactive Metro menu below so don’t hesitate to try it. 

How to Create Windows 8 like Metro Menu in Blogger?

The steps mentioned below are ideal for those bloggers who have less knowledge about HTML coding. Following instructions are extremely straightforward so anyone can easily apply them. Follow following instructions correctly.

Step#1: Adding CSS StyleSheet:
  • Go to Blogger.com >> Template.
  • Select Edit HTML >> Proceed.
  • Now within the template search for ]]></b:skin> tag and just above it paste the following CSS Coding. Once, everything is done Save the Template by pressing “Save Template” Button and proceeds to the next step. 
/*===MBL METRO UI Menu==*/
body {
font-family:sans-serif;
}
a {
text-decoration:none;
}
.mblmetromenu {
width:960px; margin:auto;
}
@media screen and (max-width:960px) {
.mblmetromenu { width:100%; }
}

/* MblMetroMenu */
.MblMetroMenu {
position:relative;
}
.om-nav {
position:absolute; width:100%; z-index:999; display:none;
}
.om-ctrlbar {
width:100%; height:48px;
}
.om-ctrlitems {
margin:auto; padding:0px; height:48px; display:inline-block; text-align:center;
}
.om-ctrlitem {
height:48px; width:48px; display:none; cursor:pointer; float:left; opacity:0.5; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om-ctrlitem:hover {
opacity:0.8; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important; filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om-activectrlitem {
opacity:1 !important; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important; filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
width:960px; margin:auto;
}
.om-controlitem {
height:48px; cursor:pointer;
}
.om-closenav {
float:left;
}
.om-movenext {
float:right;
}
.om-itemholder {
margin:auto; padding:20px 0px;
}
@media screen and (max-width:960px) {
.om-closenav { position:absolute; z-index:9999; left:0; top:0; } .om-movenext { position:absolute; z-index:9999; right:0; top:0; } .om-controlitems { width:100%; } .om-itemholder { width:100%; } }
.om-centerblock {
display:inline-block;
}
.om-item {
display:none;
}
.om-showitem {
margin:5px; float:left; display:none;
}
/* END MblMetroMenu */

/* TILE BUTTONS */
/* Standar Buttons */
.tile-bt {
text-align:center; cursor:pointer; width:90px; height:90px;
}
.tile-bt a {
display:block; padding-top:12px; text-decoration: !important;
}
.tile-bt img {
margin:0 auto 0 auto; padding-bottom:5px; height:48px; width:48px; position:relative; display:block;
}
.tile-bt span {
font-size:12px; padding-bottom:10px; display:block;
}
.tile-bt:active {
opacity:0.5;
}
/* End Standard Buttons */


/* Large Buttons */
.tile-bt-large {
width:190px; height:90px; line-height:90px; text-align:center; cursor:pointer;
}
.tile-bt-large a {
display:block; text-decoration: !important;
}
.tile-bt-large img {
vertical-align: middle; margin:auto; padding:0px; position:relative; width:48px; height:48px;
}
.tile-bt-large span {
vertical-align: middle; display:inline;
}
.tile-bt-large:active {
opacity:0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile-bt-extralarge {
text-align:center; cursor:pointer; width:190px; height:190px;
}
.tile-bt-extralarge a {
display:block; padding-top:52px; text-decoration: !important;
}
.tile-bt-extralarge img {
margin:0 auto 0 auto; padding-bottom:22px; height:80px; width:80px; position:relative; display:block;
}
.tile-bt-extralarge span {
font-size:14px; padding-bottom:20px; display:block;
}
.tile-bt-extralarge:active {
opacity:0.5;
}
/* End Extralarge Buttons */

/* END TILE BUTTONS */

/* SHADOW LIST */
.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {
/*display:inline-block;*/
}
.shadow-white:hover {
box-shadow:0px 0px 6px 3px #fff; -webkit-box-shadow:0px 0px 6px 3px #fff; -moz-box-shadow:0px 0px 6px 3px #fff; -o-box-shadow:0px 0px 6px 3px #fff; -ms-box-shadow:0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
box-shadow:0px 0px 6px 3px #38D1F7; -webkit-box-shadow:0px 0px 6px 3px #38D1F7; -moz-box-shadow:0px 0px 6px 3px #38D1F7; -o-box-shadow:0px 0px 6px 3px #38D1F7; -ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.shadow-green:hover {
box-shadow:0px 0px 6px 3px #AACA37; -webkit-box-shadow:0px 0px 6px 3px #AACA37; -moz-box-shadow:0px 0px 6px 3px #AACA37; -o-box-shadow:0px 0px 6px 3px #AACA37; -ms-box-shadow:0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
box-shadow:0px 0px 6px 3px #E81750; -webkit-box-shadow:0px 0px 6px 3px #E81750; -moz-box-shadow:0px 0px 6px 3px #E81750; -o-box-shadow:0px 0px 6px 3px #E81750; -ms-box-shadow:0px 0px 6px 3px #E81750;
}
.shadow-black:hover {
box-shadow:0px 0px 6px 3px #444; -webkit-box-shadow:0px 0px 6px 3px #444; -moz-box-shadow:0px 0px 6px 3px #444; -o-box-shadow:0px 0px 6px 3px #444; -ms-box-shadow:0px 0px 6px 3px #444;
}
/* END SHADOW LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }
/* End Solid Colors */

/* MISC */
.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
color:#fff;
}
.dark-text {
color:#1e1e1e;
}
.gradient {
background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */ background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}
.margin-5 { margin:5px; }

Step#2: Adding METRO Menu in Blogger:
  • Now it entirely depends on a person where he wants to place this menu. The ideal place of adding it would be just under the header. Therefore, paste the following coding anywhere you want to see this Menu on your site.
<!-- mblmetromenu -->
<div class="mblmetromenu">

<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://1.bp.blogspot.com/-1e7sOUI4miE/UMnHdKMffTI/AAAAAAAAJaQ/y3xR-9BNINI/s1600/home.png" alt="" />
<span class="light-text">Homepage</span>
</a>
</div>
   
<div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://3.bp.blogspot.com/-OKlDEjd3DyQ/UMnHyxn_apI/AAAAAAAAJaY/DbBPG79a-xU/s1600/messanger.png" alt="" />
<span class="light-text">About US</span>
</a>
</div>
   
<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://1.bp.blogspot.com/-ZabrvxcoO_A/UMnH-8h_glI/AAAAAAAAJag/qtGW4c9kOKg/s1600/rss.png" alt="" />
<span class="light-text">Rss Feeds</span>
</a>
</div>
   
 <div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://3.bp.blogspot.com/-PXSPYg5B3dI/UMnIKNsGLDI/AAAAAAAAJao/XWlIvLhJTAg/s1600/search.png" alt="" />
<span class="light-text">Search</span>
</a>
</div>
     
 <div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://2.bp.blogspot.com/-0XPGQ944VLU/UMnIlODiItI/AAAAAAAAJaw/LNBotNMbPD0/s1600/mail.png" alt="" />
<span class="light-text">Contact US</span>
</a>
</div>
     
<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://4.bp.blogspot.com/-GckD4Ca5lVA/UMnIplw9GDI/AAAAAAAAJa4/M6OypxXIBhY/s1600/help.pn" alt="" />
 <span class="light-text">Get HELP</span>
</a>
 </div>
     
<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://1.bp.blogspot.com/-qFPzfaP6wNk/UMnJJPIXmjI/AAAAAAAAJbI/gSDHtW5y8Xw/s1600/youtbe.png" alt="" />
<span class="light-text">YouTube</span>
</a>
</div>
     
<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://3.bp.blogspot.com/-yejzZVIQT14/UMnI5OiBqRI/AAAAAAAAJbA/hB4j8dQkoUk/s1600/face.png" alt="" />
<span class="light-text">Facebook</span>
</a>
</div>
     
<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://4.bp.blogspot.com/-TuiJy6qhQOg/UMnJam4XwjI/AAAAAAAAJbY/tyLP82SmbV4/s1600/photo.png" alt="" />
<span class="light-text">Photos</span>
</a>
</div>
     
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://1.bp.blogspot.com/-sQ2itPD97gQ/UMnJ5mLaNNI/AAAAAAAAJbo/1XoBqKVwnzM/s1600/music.png" alt="" />
<span class="light-text">Music</span>
</a>
 </div>
     
<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu">
<a href="http://www.mybloggerlab.com" class="gradient">
<img src="http://3.bp.blogspot.com/-9xF88_PUrZE/UMnrZV_8rJI/AAAAAAAAJdQ/uoC0sUcGUmQ/s1600/MBL.png" alt="" />
<span class="light-text">MyBloggerLab</span>
</a>
</div>
        <!-- End MblMetroMenu -->
</div>
<!-- END mblmetromenu -->

All Done: Indeed straightforward? Well, that’s all. The responsive Windows 8 look like navigation menu has been integrated in your website. Remember: This Menu can be used on any Platform that supports HTML or CSS i.e. WordPress, Jhoomla and etc.

Sumber : http://www.mybloggerlab.com