Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Saturday, September 14, 2013

widget random post with admin profil

Random post dipadukan dengan widget admin profil menjadi suatu widget andalan di halaman blog dengan kode valid html 5 dan CSS 3, serta memiliki sistem penulisan tag html yang SEO Friendly. Kode script yang ringan dan tampilan yang lebih elegan untuk sebuah widget menjadikan widget random post with admin profil ini menjadi pilihan para pengguna blog baik itu para pemula ataupun para jawara blog.

widget random post with admin profil

Fitur Widget


  1. Random Post
  2. Gambar admin
  3. Link Profil admin
  4. Text snipet admin

Referensi Artikel


  • Jquery widget tab random post
  • Widget Tabber random post per kategori
  • Jquery random post
  • Random Post SEO Frienly

Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code </head>
  4. Copy Code script CSS dibawah ini, pastekan tepat diatas code </head> yang tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : Random Post with Profil
By : Rivai Silaban | Blog Design
Update : Sabtu, 14 September 2013
******************************************/
#BD_rantle {
list-style-type: none;
width: 280px;/* LEBAR WIDGET */
padding: 3px;
background-color: #333333;/* WARNA LATAR BELAKANG WIDGET */
}
#BD_rantle a {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #000;
line-height:12px;
letter-spacing:0.1em;
text-decoration: none;
display:block;
padding:2px 6px 5px 8px;
background-color: #FFFFFF;
border-bottom: solid #DFDFDF 1px;
}
#BD_rantle a:hover {
color:#CCCCCC;
text-transform: none;
background-color: #666666;
border-bottom: solid #FF0000 1px;
}
#BD_rantle .BD_random_list {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #000;
line-height:30px;
letter-spacing:0.1em;
text-decoration: none;
}
#BD_rantle .pic a{
margin:-60px 0 0 0;
text-decoration: none;
color: #FFFFFF;
float: right;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 18px;
width: 200px;
line-height: 1.1em;
background-color: #999999;
border-bottom:solid #FF0000 3px;
border-top:solid #FF0000 3px;
text-shadow: 1px 0 2px #000;
}
#BD_rantle .pic a:hover{
text-decoration: none;
color: #CCCCCC;
text-shadow: none;
background-color: #666666;
border-bottom:solid #0099FF 3px;
border-top:solid #0099FF 3px;
}
#BD_rantle .text {
width:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#CCCCCC;
line-height: normal;
text-align: center;
}/* BLOG DESIGN CSS and */


Install Program Tag HTML


  • Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
  • Untuk memasang kode htmnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar halaman blog.
  • Silahkan pilih " Tata Letak " pada dasbor blog anda.
  • klik "Add gadget " ( Tambahkan gadget )
  • Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
  • Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
  • Edit script dan save .

<!-- BDRS html start -->
<div id="BD_rantle">
<div class="BD_random_list">
<p><img alt='gambar admin' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtg-2IFYC1QFZf6PzeN7I4iiQO2TZDL7_DK_JKTIGbKE0AgwvtucOgGElqSOc6UUzafJfwVkxHHeBJtT83_M0-Dehl9_0baWwtgBhZwqN8xYFJGZWhSdvJsHhtdOVsa-aHct0bk2TdROQ/h120/rivai.jpg' style='border:solid #999 1px; border-radius:5px; margin-left:5px;' title='Rivai Silaban' width='50'/>
</p><p class="pic"><a href='http://rivai-silaban.blogspot.com' target='_blank' title='My Profil'><b>Rivai Silaban <br/> BLOG DESIGN </b></a></span></p><br/><p class="text" style="margin-top:-30px;">Tunduk bukannya saya takut tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan, hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya.</p>
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=7;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write();
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item ="<div >" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></div>";
document.write(item);}}
}document.write();}
</script>
<script src="URL BLOG ANDA /feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </div></div>
<!-- BDRS html End -->

Keterangan Code
  • Untuk kode CSSnya kode [ width:280px ] adalah lebar widget, sesuaikan dengan lebar tampilan sidebar halaman blog anda silahkan anda edit CSSnya sesuai dengan thems template anda.
  • Untuk tulisan warna HIJAU ganti dengan tulisan singkat tentang anda.
  • Tulisan kode warna MERAH ganti dengan URL blog anda.
  • Kode tulisan warna BIRU ganti dengan nama anda atau nama blog anda.
  • Kode tulisan warna KUNING ganti dengan link gambar anda .

Kesimpulan

Widget Random Post with Admin Profil ini memiliki kode tag html yang valid html 5 dan CSS 3 serta sistem penulisan kode link SEO Frienly.
Bila teman teman mengalami masalah dalam pemasangan widget ini atau terdapat kesalahan penulisan kode silahkan hubungi saya atau share dengan saya melalui form komentar dibawah.

Widget Random Post With Admin Profil
Sabtu, 14 September 2013
By : Admin Blog Design | Rivai Silaban

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 1:29 PM

27 comments :

  1. Izin simak Bang..bermanfaat lagi nih buat blog saya
    Terima kasih atas berbaginya Bang...?

    o,yah Bang pesan komentar saya
    masih bingung saja, buat masangnya
    Bang mohon tips yang lebih mudah pasang
    Pesan komentar Bang tria kasih

    ReplyDelete
    Replies
    1. sama sama bang..

      masa sih masih belon bisa ya..
      saya akan menjelaskan kembali tenang saja bang..

      Delete
  2. Yah engga pertamax lagi deh :D
    Praktek dulu :p

    ReplyDelete
    Replies
    1. silahkan mbak bila ada masalah share bersama saya.

      Delete
  3. Betul Bang masih bingung, nerpin dimana-mana nya
    soalnya dah 3 x lebih gagal terus, saya masih bingung
    oke Bang di tunggu , Terima kasih

    ReplyDelete
    Replies
    1. heheh iya yah.. sabar ya bang..
      ntar saya buat sedetail mungkin

      Delete
  4. mohon maap jika tidak sesusai dengan artikel ..
    cara mengatasi

    » http://tati-adita.blogspot.com/search/label/Seo ( Fix this!)
    » http://tati-adita.blogspot.com/search/label/Gadget ( Fix )

    gimana yah ?

    ReplyDelete
    Replies
    1. Boleh mbak,
      bisa tolong diperjelas kesalahannya apa, soalnya saya lihat masih aman.

      Delete
  5. sob, saya bingung nih cara meratakan tulisan besarnya sama foto gimana sob ?
    kok gabisa lurus seperti gambar demo sobat pada artikel di atas ya ?
    trmksih :)
    https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-prn2/q71/s480x480/1234285_639582299397632_1091338923_n.jpg

    ReplyDelete
    Replies
    1. thx atas kunjungannya, salam kenal dari saya..

      coba anda lihat dibagian CSS

      #BD_rantle .pic a{ margin:-60px 0 0 0;}

      kode = -60px naikkan menjadi -70px

      bila masih kurang naikkan saja stel ukurannya sedemikian rupa

      Delete
  6. thanks kk, sudah ngerti skrg..
    1 lagi kk, kok saat linknya di cursor, knapa title tag url yang nongol kk ?
    kalo url diganti dengan judul bisa ga kk ?
    trmksih skli lg atass waktuny kk :)
    salam knal kmbali..

    ReplyDelete
    Replies
    1. sama sama sob..

      untuk title dan memang url yang nongol sebab script tersebut menganut sistem penulisan tag SEO Friendly, itu adalah sistem scriptnya, tdak akan terpengaruh yg penting scriptnya berisi tag title.

      Delete
    2. ohh, oklhklobgeto..
      sukses slalu buat kk Rivai..

      Delete
    3. amin dan makasih atas salamnya sob.

      Delete
  7. posting bang rivai keren2 habis....ijin unduh dan mencoba bang

    ReplyDelete
    Replies
    1. silahkan sob..
      makasih atas pendapatnya dan kunjungannya.
      salam kenal saya...

      Delete
  8. gan maap ya gan sebelumnya ane udah coba tadi gagal terus ane coba cssnya ane taruh di skin berhasil. kalau di atas kan cssnya ditruh di head apa agan salah ketik ya?

    ReplyDelete
    Replies
    1. skin sama css sama fungsinya buat xml pada blogspot mas... hanya basic penulisan saja pengaruh tidak bakal ada..

      Delete
  9. gan kok cuman fotonya aja ya gan yang muncul sedangkan untuk random postnya kosong... padahal blog ane dah ana artikelnya..

    ReplyDelete
    Replies
    1. silahkan di cermati balik code html tutorial di atas. untuk tulisan warna MERAH [ URL BLOG ANDA ] ganti dengan alamat blog kamu mas agar feednya muncul...

      Delete
  10. gan tolong dong lihat blog ane... dewata-99 dot blogspot dot kom
    itu cuma muncul fotonya doang dan penggalan kalimatnya. sedangkan random post nya gk muncul hahaha kacau.com

    ReplyDelete
    Replies
    1. saya sudah lihat, coba i teliti pemasangan codenya manatau ada yang hilang hurufnya, soalnya saya sudah lihat, cek semua kembali kode penulisannya..

      Delete
    2. untuk popular postnya agar gambarnya tidak muncul seperti popular post pada blog mas, yang gambarnya muncul tapi tidak sempurnah sebaiknya di hilangkan saja gambarnya.. caranya..

      coba cari dibagian CSS nya code

      #PopularPosts1 ul li .item-thumbnail {
      ....
      ....
      }

      setelah ketemu tambahkan code dibawah ini kedalamnya untuk menghilangkan gambarnya, agar lebih maksimal tampilannya, dan loadingnya tidak berat mas..

      display:none;

      Delete
  11. ok dah beres gan. thx bantuannya. tapi yang random dengan foto admin gk saya pasang di blog ane. entah kenapa kalau dia di pasang di blog ane errror muluk udah gitu gk mau keluar randomnya.....


    mau nanyak ne gan. kenapa ya kalau saya sudah sign out dari blog. logo obeng dan tang masih nampak di widget? setau saya kalau kita sdh log out kan dia gk tampak. apa ada kesalahan ya? tolong di bantu gan. thx

    ReplyDelete
    Replies
    1. Memang hal itu harus mas hapur untuk meningkatkan SEO pada template itu...

      masuk ke bagian kode html template mas, kemudian cari kode

      <b:include name='quickedit'/>

      setelah ketemu hapus kodenya, semua kode yang kayak

      <b:include name='quickedit'/>

      harus anda hapus, ini merupakan kode tag obeng paa widget yang baru mas buat. kode ini tidak valid HTML 5 jadi harus di hapus...

      Delete
  12. gan udah selesai masalah random pos nya walaupun random dengan foto adminnya gk bisa di pasang di blog ane gpp lah. ane mau nanyak ne gan kenapa gambar obeng dan tang masih saja terlihat sekalipun sudah log out.... ada yang bilang suruh nambahin kode ginian quickedit{
    display:none;
    }

    di skin
    bener gk?

    ReplyDelete
    Replies
    1. memang sih kode tersebut bisa tapi kurang maksimak deteksi pada HTML 5 masih tetap terdeteksi jadi ada baiknya langsung hapus manual saja kan itu merupakan kerjaan ringan, hehehe, saya kurang biasa memakai sistem Display pada CSS soalnya masih kebobolan ...

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog