Cara Membuat Permalink Keren Di Bawah Postingan Blog

Cara Membuat Permalink Keren Di Bawah Postingan Blog

Setelah lama saya tidak update, kali ini saya akan berbagi kepada kalian sebuah tutorial blogger tentang bagaimana cara membuat permalink keren di bawah postingan blog. Permalink ini akan sangat bermanfaat bagi blog dan visitor kita. Sebenarnya saya mendapatkan tutorial ini dari blog teman saya Ne-Gen. Kemudian saya sempurnakan lagi. Pertama, kalian harus tahu terlebih dahulu apa yang saya maksud dengan permalink itu. Jika kalian belum tahu, kalian bisa melihat demonya di link di bawah ini :

Demo

Bagaimana? Pada halaman tersebut di akhir postingan terdapat permalinknya bukan? Apakah kalian tertarik membuatnya? Oke, langsung saja. Berikut ini adalah cara membuatnya :
  • Seperti biasa, pertama buka dasboard blog kalian.
  • Masuk ke Tata Letak dan edit widget postingan untuk mengaktifkan rating bintangnya (Kalian bisa melewati langkah ini).
  • Jika sudah kalian aktifkan, kemudian masuk ke Template, kemudian pilih Edit HTML.
  • Cari kode ]]></b:skin>.
  • Masukkan kode di bawah ini tepat di atas kode ]]></b:skin> :
.yondafuq-Permalink{
    display:block;
    width:auto;
    height:135px;
    background:#ffffff;
    border:5px solid #1c6beb;
    padding:0px;
    margin:30px 0px 10px 0px;
    color:#000;
    }
    .yondafuq-Permalink .kontainer{padding:5px;}
    .NEGen-Permalink h4{
    background:#ffffff;
    border:none;
    border-bottom:5px solid #1c6beb;
    color:#000000;
    padding:5px 10px;
    margin:0px 0px 0px 0px;
    display:block;
    }
    .yondafuq-Permalink h4 a{color:#1c6beb;}
    .yondafuq-Permalink img{
    width:86px;
    height:86px;
    margin:0px 10px 0px 0px;
    float:left;
    border:1px solid #1c6beb;
    padding:2px;
    background:#1c6beb;}
Keterangan :
Kode yang berwarna PINK adalah kode lebar. Kalian bisa menggatinya sesuai keinginan.
Kode yang berwarna ORANGE adalah kode tinggi. Kalian bisa menggatinya sesuai keinginan.
Kode yang berwarna KUNING adalah kode background. Kalian bisa menggatinya sesuai keinginan.
Kode yang berwarna HIJAU adalah kode garis border. Kalian bisa menggatinya sesuai keinginan.
Kode yang berwarna UNGU adalah kode jarak margin. Kalian bisa menggatinya sesuai keinginan.
Kode yang berwarna CYAN adalah kode warna text. Kalian bisa menggatinya sesuai keinginan.


  • Belum selesai sampai disini, sekarang cari kode <data:post.body/>.
  • Letakkan kode di bawah ini tepat setelah kode <data:post.body/>:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='yondafuq-Permalink'>
<h4>Penulis: Yonda Tamvan | Tentang Artikel Ini : </h4>
<div class='kontainer'>
<img src='http://4.bp.blogspot.com/-wEMvurMH1YM/UGLOHpVRZdI/AAAAAAAABAs/KZa_BusWG6M/s220/untitled122.PNG'/>
Viewed Article: <script src='http://amitjain.in/pageviews.php' type='text/javascript'/>.<br/>Posting Name: <strong><a expr:href='data:post.url'><data:post.title/></a></strong>.<br/>Url:<strong><data:post.url/></strong>.<br/><b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='40' g:type='RatingPanel' g:width='200'/>
</b:if>
<div style='clear:both;'/>
</div>
</div>
</b:if>
  • Kalian ganti kode yang bercetak TEBAL dengan nama atau kata-kata kalian sendiri dan kode bercerak MIRING dengan link gambar kalian.
  • Terakhir tinggal kalian simpan.
Bagaimana? Berhasil? Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua, Jangan lupa untuk mampir ke blog ini lagi dan klik tombol like di bawah ini.

Cara Membuat Headline Latest Post Di Blog

Cara Membuat Headline Latest Post Di Blog

Sudah lama saya tidak update lagi, kali ini saya akan berbagi kepada kalian sebuah tutorial blogger tentang bagaimana cara membuat headline latest post (Breaking News) di blog. Kalian pasti sudah tahu apa yang saya maksud dengan headline latest post ini. Jika belum, headline yang saya maksud ini adalah widget yang akan menampilkan postingan terbaru blog kalian. Fungsinya sama seperti recent post, namun headline ini berbentuk horisontal dan biasanya diletakkan di header blog. Jika masih bingung, kalian bisa melihat demonya di link di bawah ini :

Bagaimana? Kalian tertarik? Tenang saja, cara membuatnya sangat mudah dan headline ini tidak akan terlalu memperlambat blog kalian atau bisa disebut ringan. Oke, langsung saja. Berikut ini adalah cara membuatnya :

  • Seperti biasa, masuk ke dasboard blog kalian.
  • Masuk ke pilihan Tata Letak (Layout).
  • Kemudian klik Tambah Gadget (Add a Gadget). Jika ada banyak, klik salah satu. Yang mana saja tidak masalah. Namun saya sarankan untuk meletakannya di paling atas, supaya lebih cepat diload.
  • Pilih yang  HTML/JavaScript.
  • Kosongkan saja judulnya dan masukkan kode di bawah ini pada konten :
<style type='text/css' scoped="scoped">
#news { background:#2980b9; border-bottom: 5px solid #2c3e50; border-top: 5px solid #2c3e50; display: block; float: left; height: 20px; line-height: 20px; overflow: hidden; padding: 5px 30px; width: 100%; position: fixed; top: 0px; left: 0px; }
.titlenews { background:#2c3e50; color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 9px; margin-top: -10px; position: absolute; }
#ltsposts { float: left; margin-left: 120px; }
#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}
#ltsposts li a { background: none !important; #2c3e50 !important; font: bold 12px/22px Tahoma; text-decoration: none; }
ul.shsocial { background:#2c3e50; float: right; margin: -8px 0; }
ul.shsocial li {float:left;list-style: none outside none;border:none;}
ul.shsocial li a{background-color:transparent;background-image:url(http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
ul.shsocial li.fb a{ background-position:0 0}
ul.shsocial li.gp a{ background-position:-96px 0}
ul.shsocial li.rs a{ background-position:-192px 0}
ul.shsocial li.tw a{ background-position:-256px 0}
ul.shsocial li.fb a:hover{ background-position:0 -32px}
ul.shsocial li.gp a:hover{ background-position:-96px -32px}
ul.shsocial li.rs a:hover{ background-position:-192px -32px}
ul.shsocial li.tw a:hover{ background-position:-256px -32px}
</style>
<div id='news'><span class='titlenews'>Latest Post</span>
<div id='ltsposts'>Loading...</div>
<ul class='shsocial'>
<li class='fb'>
<a href='http://www.facebook.com/yondarkness.blog' rel='dofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/118163047156925704991' rel='dofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/yondarkness' rel='dofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='LINK RSS FEED DISINI' rel='dofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.yondarkness.com', // Replace With your Blog Url
numpostx     = 20; // Maximum Post
$.ajax({
    url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
        var posturl, posttitle, skeleton = '',
            entry = data.feed.entry;
        if (entry !== undefined) {
            skeleton = "<ul>";
        for (var i = 0; i < entry.length; i++) {
                for (var j=0; j < entry[i].link.length; j++)
                {
                     if (entry[i].link[j].rel == "alternate")
                        {
                            posturl = entry[i].link[j].href;
                            break;
                         }
                }              
            posttitle = entry[i].title.$t;
            skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
            skeleton += '</ul>';
            $('#ltsposts').html(skeleton);
            function tick(){
            $('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 5000);
        } else {
            $('#ltsposts').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>
  • Jika sudah, sekarang tinggal tinggal disimpan.
Keterangan :
Kode berwarna PINK adalah kode warna, kalian bisa mengganti dan menyesuaikannya sesuai keinginan kalian.
Ganti kode berwarna BIRU dengan link url Facebook kalian.
Ganti kode berwarna MERAH dengan link url G+ kalian.
Ganti kode berwarna CYAN dengan link url Twitter kalian.
Ganti kode berwarna ORANGE dengan link url Rss blog kalian,
Ganti kode berwarna UNGU dengan link url blog kalian.

Bagaimana? Bisa bukan? Jika ada kesalahan atau error, mungkin karena ada langkah atau kode ukuran yang kurang pas dikarenakan template blog yang berbeda beda. Jika itu terjadi, silakan kalian tanyakan di komentar, jika saya sempat akan saya bantu sebisanya. Sekian artikel kali ini. Semoga bermanfaat. Jangan lupa untuk mampir kembali ke blog sederhana saya ini, tinggalkan komentar, dan klik tombol like di bawah ini.