Blog ini membahas tentang berbagai tips dan tutorial blogspot untuk mengoptimalkan halaman blog di search engine ( SEO ), Validasi HTML 5 , CSS 3, Script dan tehnik kontribusi dalam tag tag html begitu juga dengan XML.
Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...
Rivai Silaban - Blog Design
Tunduk Bukan berarti saya takut, tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan, hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya.
Random post rounded list - random post rounded list memiliki tampilan yang menarik, random post rounded list cocok buat para blogger mania yang menginginkan tampilan widget yang menarik dan unik. Widget random post rounded list memakai list style type decimal dengan sistem rounded. Gambar disamping merupakan gambar tampilan random post rounded list buat para blogger mania yang ingin melihat tampilan demo random post rounded list ini silahkan kunjungi link sumber halaman demo dibawah ini. Bila anda tertarik memasang random post rounded list pada halaman blog kesayangan anda, silahkan simak penjelasan tutorial dibawah ini, langsung saja menuju TKP.
Demo
Code CSS random post rounded list.
/***************************************** Name : random post rounded list By : Rivai Silaban | Blog Design Update :Minggu 05 January 2014 site : www.rivai.org ******************************************/ .random-post-rounded-list ol{ counter-reset: li; list-style: none; *list-style: decimal; font: 15px 'trebuchet MS', 'lucida sans'; padding: 0; margin-bottom: 4em; text-shadow: 0 1px 0 rgba(255,255,255,.5);} .random-post-rounded-list a{ position: relative; display: block; padding: .4em .4em .4em 2em; margin: .5em 0; background: #ddd; color: #444; text-decoration: none; border-radius: .3em; transition: all .3s ease-out;} .random-post-rounded-list a:hover{background: #eee;} .random-post-rounded-list a:hover:before{ transform: rotate(360deg);} .random-post-rounded-list a:before{ content: counter(li); counter-increment: li; position: absolute; left: -1.3em; top: 50%; margin-top: -1.3em; height: 2em; width: 2em; line-height: 2em; border: .3em solid #fff; text-align: center; font-weight: bold; border-radius: 2em; transition: all .3s ease-out; background-color: #000000; color: #CCCCCC;} /*** www.rivai.org CSS random post rounded list and ***/
Code HTML random post rounded list.
<!-- www.rivai.org code random post rounded list start--> <div class="random-post-rounded-list"><ol> <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 ="<li>" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></li>"; document.write(item);}} }document.write();}</script> <script src="http://www.rivai.org/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></ol></div> <!-- www.rivai.org code random post rounded list end-->
Code diatas merupakan code CSS dan code tag HTML dari widget random post rounded list yang mungkin sudah anda lihat tampilannya pada halaman demonya, Buat teman teman yang masih belajar blogging sama seperti saya silahkan kunjungi halaman tata cara pemasangan widget random post rounded list agar lebih detail dan jelas.....
Random post style atau yang saya sebut dengan random post list style untuk blogspot, anda hanya tinggal memasang random post list style pada halaman blog kesayangan anda. Tampilan yang menarik dengan style list decimal membuat random post list style ini cocok di pasang di halaman blog kesayangan anda. Untuk tehnik pemasangan random post list style ini silahkan anda simak tutorial dibawah, agar lebih kenal dengan random post list style ini silahkan klik demo dibawah, langsung saja menuju TKP.
Demo
Install Program CSS
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code </head>
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 : Widget Random post list style
By : Rivai Silaban | Blog Design
Update : Rabu, 05 Nopember 2013
******************************************/
.randombdrs-posts ul {
padding-left: 0px;
counter-reset: popcount;
width: 300px;
}
.randombdrs-posts ul li:before {
list-style-type: none;
margin-right: 10px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: rgb(241, 241, 241);
position: relative;
font-family: georgia;
float: left;
border: 2px solid rgb(243, 243, 243);
box-shadow: 1px 2px 5px #666;
line-height: 20px;
}
.randombdrs-posts ul li a{
list-style-type: none;
color: #000000;
text-decoration: none;
font-family: Verdana;
font-size: 12px;
vertical-align: middle;
line-height:normal;
text-shadow: 1px 2px 2px #999;
}
.randombdrs-posts ul li a:hover{
color: #5E0000;
text-shadow:none;
}
.randombdrs-posts ul li {
list-style-type: none;
text-decoration: none;
height: 35px;
border-bottom:1px solid #999;
border-top:1px solid #fff;
background-color: #F2F2F2;
padding:10px 5px;
}
.randombdrs-posts ul li:hover {
background-color: #D2D2D2;
}/* Widget Random Post Blue Style CSS End */
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 Widget Random Post Style code start -->
<h2>Random Post List Style</h2>
<div class='randombdrs-posts'>
<ul>
<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,7);
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 ="<li >" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></li>";
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></ul>
<div class='clear'></div>
<!-- BDRS Widget Random Post Style code End -->
Kesimpulan
Widget Random Post style ini Valid HTML 5 dan CSS 3 serta memiliki penulisan script yang SEO Friendly dan loading yang ringan. Silahkan anda sesuaikan tampilan warna dari widget ini terhadap thems blog anda.
Bila teman teman mengalami kesulitan dalam memasang kode widget ini atau mendapatkan kode yang Error, silahkan hubungi saya atau share bersama saya pada form komentar dibawah. Semoga postingan ini bermanfaat buat teman teman.
Widget Random Post Style
Rabu, 05 Nopember 2013
Rivai Silaban | Blog Design
Di poskan oleh :
Unknown
| Dipublish pada :
9:46 AM
|
6
komentar
Widget random post animasi thumbnail per label pada blogspot, cara membuat widget random post animasi thumbnail per label pada halaman blog sangat berguna untuk meningkatkan trafik pengunjung, dimana artikel yang telah kita posting jauh jauh hari sebelumnya akan muncul dengan tampilan yang memukau. Widget random post animasi thumbnail per label ini memiliki tampilan yang menarik, widget random post animasi thumbnail per label apat anda pasang pada siddebar halaman blog kesayangan anda. Untuk melihat tampilan widget random post animasi thumbnail per label silahkan klik emo dibawah, bila ingin memasang widget random post animasi thumbnail per label silahkan simak penjelasan dibawah
Demo
Install Program CSS
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin>
Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin>tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.
Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
Pada Edit HTML template anda silahkan cari kode </head>
Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
Perlu anda ingat bila pada template anda sudah ada kode JQUERY diatas versi 1.7.2 pada script tulisan kode warna biru dibawah kode tulisan warna BIRU tersebut tidak usah dikut di Copy. Bila sebaliknya versinya dibawah silahkan copy semua kode tersebut.
Untuk memanggil widget Random Post tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini ;
Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
Silahkan klik "Add Gadget "( Tambahkan gadget )
Pilih " HTML / JavaScript "
Copy Code HTML dibawah ini, paste pada gadget anda.
<!-- script start -->
<script type="text/javascript" src="http://yourjavascript.com/331279280411/animate.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rivaiscript();
interval = setInterval(rivaiscript, pause);
});
</script>
<div >
<ul id="BDRSimage-slide">
<script style="text/javascript">
var numposts = 10;
var numchars = 150;
</script>
<script
src="URL BLOG ANDA /feeds/posts/default/-/LABEL?orderby=published&alt=json-in-script&callback=randompost"></script>
</ul>
</div> <!-- script end -->
Keterangan Gambar
Code warna merah ganti dengan nama label blog anda, ( penulisan huruf sangat sensitif )
Code warna Biru ganti dengan URL blog anda..
Code warna Hijau silahkan anda eit sesuai dengan selera anda.
Silahkan anda desain code CSS nya untuk menyesuaikan tampilan Thems halaman blog anda. Ukuran lebar dari wiget ini 300px.
Kesimpulan
Widget random post animasi thumbnail per label ini dapat anda manfaatkan untuk menampilkan salah satu kategory dengan tampilan sistem animasi pada halaman blog anda.
Bila anda mengalami kesulitan ataupun mendapati kode yang kurang sempurna, silahkan hubungi kami atau share bersama kami di form komentar dibawah. Pergunakan semua fasilitas di halaman blog ini untuk mempermudah anda.
Widget random post animasi thumbnail per label
Selasa, 29 Oktober 2013
Rivai Silaban | Blog Design
Di poskan oleh :
Unknown
| Dipublish pada :
9:43 PM
|
2
komentar
Random post per label dengan efek transition yang menarik, cara membuat widget random post per label black style ini menjadi pilihat buat anda yang gemar dengan tampilan tampilan yang unik dan menarik. widget random post black style dengan efek hover transition ini memiliki script yang ringan dan valid html 5 / CSS 3, penulisan link untuk tag htmlnya menganut sistem SEO Friendly. Bila anda suka dengan widget random post per label black style ini silahkan simak tutorial dibawah ini dan kunjungi link dari beberapa artikel mengenai widget random post, jangan lupa dilihat DEMOnya, oke langsung saja menuju TKP.
Demo
Referensi Artikel
Random Post Style
Widget random post style horizontal
Random post slide new's
Widget slide random post
Random post with admin profil
Jquery widget tab random post
Widget tabber random post per label
Widget random post SEO Friendly
Jquery Sliding widget random post
Install Program CSS
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin>
Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin>tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.
Untuk memanggil widget Random Post tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini ;
Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
Untuk memasang kode htmlnya 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 .
<!-- Rivai Silaban | BLOG DESIGN code start -->
<div id="bdrsstyle_random">
<div class='bdrsstyle_randomlist'>
<h3>Random Post per label</h3><ol>
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;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/-/LABEL ANDA?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
</ol>
</div></div>
<!-- Rivai Silaban | BLOG DESIGN code end -->
Keterangan Gambar
Code warna merah ganti dengan URL blog anda
Code warna Biru ganti dengan label atau kategori artikel anda.
Silahkan anda desain code CSS nya untuk menyesuaikan tampilan Thems halaman blog anda.
Kesimpulan
Widget Random Post Black style dengan hover transition ini Valid HTML 5 dan CSS 3 serta memiliki penulisan script yang SEO Friendly dan loading yang ringan. Silahkan anda sesuaikan tampilan warna dari widget ini terhadap thems blog anda.
Bila teman teman mengalami kesulitan dalam memasang kode widget ini atau mendapatkan kode yang Error, silahkan hubungi saya atau share bersama saya pada form komentar dibawah. Semoga postingan ini bermanfaat buat teman teman.
Widget Random Post Black Style
Selasa, 08 Oktober 2013
Rivai Silaban | Blog Design
Di poskan oleh :
Unknown
| Dipublish pada :
7:24 AM
|
9
komentar
Widget slider perlabel yang saya sebut dengan widget random post slider news ini menampilkan artikel sistem random dengan action slider atau bergerak kebawah sehingga merupakan suatu tampilan widget random post yang mempunyai karakter new's. Postingan kali ini terinspirasi oleh beberapa teman yang menginginkan tampilan random post perlabel dengan sistem slider. Untuk melihat tampilan dari widget random post slider news ini silahkan klik DEMO, jangan lupa disimak cara pemasangannya dihalaman blog kesayangan anda melalui penjelasan tutorial dibawah ini, langsung saja menuju TKP;
Demo
Referensi Artikel
Jquery widget tab random post
Widget Tabber random post per kategori
Jquery random post
Random Post SEO Frienly
Widget Random Post with Profil Admin
Install Program CSS
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin>
Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin>tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.
Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
Pada Edit HTML template anda silahkan cari kode </head>
Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
Perlu anda ingat bila pada template anda sudah ada kode JQUERY diatas versi 1.4 pada script tulisan kode warna biru dibawah kode tulisan warna BIRU tersebut tidak usah dikut di Copy. Bila sebaliknya versinya dibawah silahkan copy semua kode tersebut.
<script type="text/javascript" src="http://yourjavascript.com/41502651103/slider-news.js"></script>
<!-- Rivai Silaban | BLOG DESIGN script widget End -->
Install tag html
Setelah anda sudah memasang CSSnya dan scriptnya 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 .
<!-- Rivai Silaban | BLOG DESIGN widget start -->
<script type="text/javascript">
var speed = 500; /* kecepatan */
var pause = 4500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="bdrs-slisdepost">
<script style="text/javascript">
var numposts = 10; /* jumlah yang ditampilkan */
var numchars =170;
</script>
<script
src="URL BLOG ANDA/feeds/posts/default/-/LABEL?orderby=published&alt=json-in-script&callback=randompost"></script>
</ul>
<!-- Rivai Silaban | BLOG DESIGN widget End -->
Keterangan Code
Untuk kode CSSnya WIDTH [ 300px ] dan tinggi " height [ 297px ] sesuaikan dengan lebar tampilan sidebar halaman blog anda silahkan anda edit CSSnya sesuai dengan thems template anda.
Untuk tulisan warna HIJAU merupakan jumlah postingan yang akan ditampilkan
Tulisan kode warna MERAH ganti dengan URL blog anda.
Kode tulisan warna BIRU ganti dengan nama label / kategori anda .
Kode tulisan warna KUNING adalah ukuran kecepatan slider.
Kesimpulan
Widget random post slider news sangat cocok buat para bloger yang memiliki postingan artikel yang sudah terlalu banyak, sehingga widget random post slider news ini dapat menampilkan secara acak atau random artikel yang sudah lama tidak pernah muncul lagi.
Buat para teman teman bloger yang mengalami masalah dalam memasang widget flaying navigasi animasi ini, silahkan hubungi saya atau share bersama saya melalui form komentar dibawah.
Widget random post slider news
Sabtu 05 Oktober 2013
By : Owner Blog Design
| Rivai Silaban
Di poskan oleh :
Unknown
| Dipublish pada :
1:27 PM
|
2
komentar
Widget random post yang satu ini memiliki style yang menarik, widget random post style horizontal ini sangat cocok buat halaman blog yang selalu memakai gambar didalam postingan. Tampilan yang menarik serta kode valid html 5 dan CSS 3 begitu juga dengan sistem penulisan tag html dan script yang lebih SEO Friendly membuat widget random post style horizontal dapat anda andalkan untuk halaman blog kesayangan anda. Widget random post style horizontal ini memakai script yang ringan, Oke langsung saja menuju TKP dan simak tutorial dibawah ini dan lihat screen shotnya pada gambar dibawah, atau lihat saja cara pemasangannya pada halaman blog klik DEMO dibawah:
Demo
Install Program CSS
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin>
Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin>tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.
Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
Pada Edit HTML template anda silahkan cari kode </head>
Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
<!-- Rivai Silaban | BLOG DESIGN script Random post style start -->
<script type="text/javascript" src="http://yourjavascript.com/09293273101/random.js"></script>
<!-- Rivai Silaban | BLOG DESIGN script Random post style End -->
Install Program Tag HTML
Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
Cari code <div class='footer-wrapper'>
atau Kode yang sejenis dan yang bersangkutan dengan kode tersebut, sebab terkadang suatu template penulisan <div class='footer-wrapper'> tidak terlalu persis tapi yang penting di Footer blog.
Copy kode dibawah ini pastekan tepat diatas kode <div class='footer-wrapper'>.
Bila anda ingin menyematkan kode tersebut pada widget HTML/Javascript, silahkan kunjungi Cara membuat 1 kolom layout diatas footer blog , setelah anda memasang widgetnya silahkan masukkan kode dibawah ini kedalam widget tersebut.
Save template anda dan lihat hasilnya, selamat mencoba.
<!-- BDRS SCRIPT RELATE POST start -->
<div id='Bdrsrelated-postbd'>
<script src='http://rivai-silaban.blogspot.com/feeds/posts/default?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6' type='text/javascript'></script>
<script type='text/javascript'>
var currentposturl="";
var maxresults=10;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'></div>
<!-- BDRS SCRIPT RELATE POST End -->
Keterangan Code
Untuk kode CSS silahkan anda edit sesuai dengan kebutuhan anda, Ukuran lebar, spasi, dll
Untuk Tulisan warna MERAH silahkan ganti dengan URL Blog anda .
Kesimpulan
Buat para bloger mania yang mementingkan trafik begitu juga dengan design yang menarik hati para pengunjungnya, widget random post style horizontal ini cocok anda pasang di halaman blog kesayangan anda. Widget random post style horizontal ini Valid HTML 5 dan CSS 3 serta sistem script dan Tag yang SEO Friendly.
Silahkan simak tutorial diatas untuk lebih jelasnya tentang cara memasangnya pada halaman blog kesayangan anda, bila ada masalah yang tidak dimengerti silahkan hubungi saya atau share bersama saya pada form komentar dibawah.
Widget random post style horizontal
Jumat, 27 September 2013
Rivai Silaban | Blog Design
Di poskan oleh :
Unknown
| Dipublish pada :
3:00 PM
|
8
komentar
Cara membuat random post style ini sudah saya kemas dengan beberapa style color, random post style ini memiliki 4 kode CSS yang berbeda warna tampilannya, jadi anda tinggal menyesuaikan warna yang sesuai dengan tampilan blog anda. Postingan kali ini terinspirasi dari seorang teman sekolah saya waktu SMP yang menginginkan style random post untuk dipasang di blognya, setelah hampir satu minggu saya pikir pikir akhirnya saya membuat kodenya dan membuat random post style ini dengan tampilan 4 warna yang berbeda agar beliau bebas memilihnya. Semoga beliau merasa senang atas kode yang sederhana ini. Agar semua teman teman yang membutuhkan juga ikut kebagian akhirnya saya memosting kode ini. Untuk melihat tampilan dari Random Post Style ini silahkan klik DEMO lihat tampilan random post style yang telah saya sajikan dengan warna : " Blue Style " " Red Style " " White Style " " Black Style " . Oke langsung saja menuju TKP dan simak tutorial dibawah ini :
Demo
Install Program CSS
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code </head>
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.
Ada 4 pilihan warna tampilan widget random post ini, silahkan copy kode CSS menurut warna atau style yang anda sukai.
Blue Style
/*****************************************
Name : Widget Random Post Blue Style
By : Rivai Silaban | Blog Design
Update : Selasa, 24 September 2013
******************************************/
#BDrs_randomPOST{
list-style-type: none;
width:280px;
padding: 3px;
border:solid #000000 1px;
background-color: #000055;
color: #689DD9;
}
#BDrs_randomPOST a {height: 30px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #CCCCCC;
line-height:15px;
letter-spacing:0.1em;
box-shadow: 0 0 5px #111 inset;
text-decoration: none;
display:block;
padding:5px 6px 5px 6px;
background-color: #1F4B7C;
border:solid #2E71BA 1px;
}
#BDrs_randomPOST a:hover {
color:#333333;
text-transform: none;
background-color: #689DD9;
border:solid #498AD1 1px;
box-shadow: 0 0 7px #000 inset;
}/* Widget Random Post Blue Style CSS End */
Red Style
/*****************************************
Name : Widget Random Post Red Style
By : Rivai Silaban | Blog Design
Update : Selasa, 24 September 2013
******************************************/
#BDrs_randomPOST{
list-style-type: none;
width:280px;
padding: 3px;
border:solid #000000 1px;
background-color: #5C0000;
color: #6C0000;
}
#BDrs_randomPOST a {height: 30px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #999999;
line-height:15px;
letter-spacing:0.1em;
box-shadow: 0 0 5px #111 inset;
text-decoration: none;
display:block;
padding:5px 6px 5px 6px;
background-color: #530000;
border:solid #7C0000 1px;
}
#BDrs_randomPOST a:hover {
color:#FFFFFF;
text-transform: none;
background-color: #800000;
border:solid #8C0000 1px;
box-shadow: 0 0 4px #000 inset;
}/* Widget Random Post Red Style CSS End */
White Style
/*****************************************
Name : Widget Random Post White Style
By : Rivai Silaban | Blog Design
Update : Selasa, 24 September 2013
******************************************/
#BDrs_randomPOST{
list-style-type: none;
width:280px;
padding: 3px;
border:solid #000000 1px;
background-color: #CCCCCC;
}
#BDrs_randomPOST a {height: 30px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #333333;
line-height:15px;
letter-spacing:0.1em;
box-shadow: 0 0 5px #111 inset;
text-decoration: none;
display:block;
padding:5px 6px 5px 6px;
background-color: #F0F0F0;
border:solid #EBEBEB 1px;
}
#BDrs_randomPOST a:hover {
color:#000000;
text-transform: none;
background-color: #FFFFFF;
border:solid #CCCCCC 1px;
box-shadow: 0 0 3px #000 inset;
}/* Widget Random Post White Style CSS End */
Black Style
/*****************************************
Name : Widget Random Post Black Style
By : Rivai Silaban | Blog Design
Update : Selasa, 24 September 2013
******************************************/
#BDrs_randomPOST{
list-style-type: none;
width:280px;
padding: 3px;
border:solid #000000 1px;
background-color: #666666;
}
#BDrs_randomPOST a {height: 30px;
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #CCCCCC;
line-height:15px;
letter-spacing:0.1em;
box-shadow: 0 0 5px #111 inset;
text-decoration: none;
display:block;
padding:5px 6px 5px 6px;
background-color: #333333;
border:solid #666 1px;
}
#BDrs_randomPOST a:hover {
color:#FFFFFF;
text-transform: none;
background-color: #666666;
border:solid #797979 1px;
box-shadow: 0 0 10px #000 inset;
}/* Widget Random Post Black Style CSS End */
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 Widget Random Post Style code start -->
<div id="BDrs_randomPOST">
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;// Jumlah artikel yang akan ditampilkan
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="http://rivai-silaban.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> </div>
<!-- BDRS Widget Random Post Style code End -->
Keterangan Code
Untuk kode CSSnya [ whidth =" 280px "] sesuaikan dengan lebar tampilan sidebar halaman blog anda silahkan anda edit CSSnya sesuai dengan thems template anda.
Tulisan kode warna MERAH ganti dengan URL blog anda.
Kode tulisan warna BIRU adalah jumlah judul artikel yang akan ditampilkan
Ada 4 tampilan warna yang dapat anda pilih, yaitu Blue Style, Red Style, White Style, Black Style. anda hanya menggantikan kode CSSnya silahkan anda copy kode CSSnya menurut style yang anda sukai.
Untuk " CODE HTML " anda tidak perlu menggantinya sesuai warna, hanya bagian CSS yang akan anda ganti sesuai tampilan warna yang cocok buat anda.
Kesimpulan
Widget Random Post style ini Valid HTML 5 dan CSS 3 serta memiliki penulisan script yang SEO Friendly dan loading yang ringan. Silahkan anda sesuaikan tampilan warna dari widget ini terhadap thems blog anda.
Bila teman teman mengalami kesulitan dalam memasang kode widget ini atau mendapatkan kode yang Error, silahkan hubungi saya atau share bersama saya pada form komentar dibawah. Semoga postingan ini bermanfaat buat teman teman.
Widget Random Post Style
Selasa, 24 September 2013
Rivai Silaban | Blog Design
Di poskan oleh :
Unknown
| Dipublish pada :
7:42 AM
|
4
komentar
Widget slider yang satu ini memakai sistem random post, dengan menu tab sebagai navigasi per label. Widget slider random post ini menganut sistem valid html 5 dan CSS 3 serta penulisan tag html yang SEO Friendly. Tampilan dan kecepatan script widget ini menjadikan widget slider random post per label ini layak untuk anda pasang di halaman blog kesayangan anda. Menampilkan judul artikel postingan per kategorinya membuat para pengunjung halaman blog anda semakin betah atau tertarik untuk melirik berbagai artikel yang telah anda posting pada halaman blog anda, hal itu sudah menjadi suatu keuntungan buat blog anda.Oke langsung saja menuju TKP, silahkan anda simak tutorial dibawah ini, Untuk melihat tampilan widget yang satu ini silahkan klik link dibawah ini.
Demo
Referensi Artikel
Jquery widget tab random post
Widget Tabber random post per kategori
Jquery random post
Random Post SEO Frienly
Widget Random Post with Profil Admin
Install Program CSS
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code ]]></b:skin>
Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin>tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.
Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
Pada Edit HTML template anda silahkan cari kode </head>
Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
Kode Jquery ini mempunyai lisensi masing masing, anda tidak diperbolehkan untuk mengeditnya.
<!-- Rivai Silaban | BLOG DESIGN script Jquery Flying Menu start -->
<script type="text/javascript" src="http://yourjavascript.com/1650568139/jquery-1-2-6.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/1360340911/jquery-scrollto-1-3-3.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/6329101371/jquery-serialscroll-1-2-1.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/1016319351/coda-slider.js"></script>
<!-- Rivai Silaban | BLOG DESIGN script Jquery Flying Menu End -->
Install Program Tag HTML
Setelah anda sudah memasang Scriptnya saatnya anda memasang kode htmlnya.
Cari code <div class='post-footer-line post-footer-line-2'/> atau Kode <div class='post-footer-line post-footer-line-3'/>
Copy kode dibawah ini pastekan tepat dibawah code diatas.
Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
Bila tidak berhasil juga silahkan cari kode <data:post.body/> kemudian letakkan kode didalam spoiler tepat dibawah kode <data:post.body/>.
Save template anda dan lihat hasilnya, selamat berkreative.
<!-- Rivai Silaban | BLOG DESIGN code start -->
<div id="bdrsslider">
<ul class="bdnav">
<li><a href="#label1">Widget</a></li>
<li><a href="#label2">Menu</a></li>
<li><a href="#label3">Post</a></li>
<li><a href="#label4">Jquery</a></li>
<li><a href="#label5">CSS</a></li>
<li><a href="#label6">Tip's</a></li>
<li><a href="#label7">HTML</a></li>
</ul>
<div class="bdrsscroll">
<div class="bdrsroll">
<div class="panel" id="label1"><h2>Widget</h2><div class="BD_title"><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="http://rivai-silaban.blogspot.com/feeds/posts/default/-/widget?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
<div class="panel" id="label2"><h2>Menu</h2><div class="BD_title"><script src="http://rivai-silaban.blogspot.com/feeds/posts/default/-/menu?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
Tulisan kode warna MERAH silahkan anda ganti dengan LINK URL BLOG ANDA.
Tulisan warna BIRU ganti dengan label halaman blog anda. penulisan nama label sangat sensitif beda huruf saja tidak akan berpungsi.
Bila anda ingin lebih berkreasi silahkan anda edit CSSnya untuk menyesuaikan tampilan related post ini dengan tems template anda.
Kesimpulan
Buat para bloger mania widget yang satu ini dapat menjadi andalan buat menarik hati para pengunjung blog, widget jquery slider random post per label ini valid HTML 5 dan CSS 3 serta SEO Friendly dan memiliki script yang standart loading.
Buat para teman teman bloger yang mengalami masalah dalam memasang widget tersebut, silahkan hubungi saya atau share bersama saya melalui form komentar dibawah.
Widget slider tab random post per label
Senin, 16 September 2013
By : Admin Blog Design | Rivai Silaban
Di poskan oleh :
Unknown
| Dipublish pada :
5:40 PM
|
4
komentar
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.
Fitur Widget
Random Post
Gambar admin
Link Profil admin
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
Login ke dashboard anda
Masuk ke "TEMPLATE" lalu klik " Edit HTML "
Cari code </head>
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.
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
Di poskan oleh :
Unknown
| Dipublish pada :
1:29 PM
|
27
komentar
