Cara Membuat Staff List Keren Seperti Animeindo.co

Blogger Widget

Cara Membuat Staff List Keren Seperti Animeindo.co

Senin, September 11, 2017 1 Komentar

Hasil yang akan kalian buat

Biljabbaradnan's blog - Hallo guys bertemu lagi dengan saya biljabbar adnan yang sudah sangat jarang sekali muncul di permukaan perbloggeran :v eak..
wkwk ada beberapa alasan juga kenapa saya jarang ngeblog.. yah salah satunya males :v (jangan ditiru yah gan).

Loh terus apa sebabnya saya kembali ngeblog lagi??
Awalnya saya ngeblog lagi karena disuruh sama ketua eskul saya untuk buat blog khusus eskul pramuka dan rohis sekolah gua :3 yah mau gamau gua kerjain deh..

dan ternyata asik juga :v rasa ini lah yang sudah lama hilang dari diri ini :v sehingga saya memutuskan untuk kembali lagi menjadi kamenrider :3..

Maka dari itu izinkan saya disini untuk memulai langkah awal saya untuk menuliskan suatu tutorial Cara Membuat Staff List Keren Seperti Animeindo.co

Siapa sih yang gak kenal dengan website animeindo?
Mungkin sebagian orang sudah tidak asing lagi dengan animeindo, apalagi jika kalian adalah anime lovez seperti saya :v pasti sangat mengenalnya wkwkw..

yapz Animeindo adalah salah satu website streaming anime gratis yang memiliki banyak macam judul anime di dalamnya, saya sangat sering sekali menonton anime favorite saya disitu.

Tampilannya yang elegan beserta layout websitenya yang keren membuat saya jatuh hati dengan Animeindo :*

Salah satu tampilan animeindo yang membuat saya kagum adalah di bagian staff list nya ..
Karena disana staff listnya sangat terstruktur  mulai dari bigboss hingga sampai para moderatornya yang bertugas disana..

Sehingga saya berinisiatif membuat tutorial tentang
Cara Membuat Staff List Keren Seperti Animeindo.Co yang belum ada tutorialnya di google manapun.

Yok guys silahkan disimak.

Cara Membuat Staff List Keren Seperti Animeindo.co

1. Login ke blogger -> tema/template -> edit html

Tema - Edit Html

2. Cari kode <b:skin dengan ctrl+f

Search <b:skin

3. Copas kode css berikut ini setelah kode <b:skin atau sebelum </style

/*Staff List Animeindo*/
.grid4{float:left;width:13.33%;}
.stafflist{background:#eee;float:left;overflow:hidden;width:33%;margin:0px 0px 20px;position:relative;}
.coverstaff{height:170px;overflow:hidden;}
.coverstaff img{height:auto;width:100%;min-height:100%;}
.avastaff{position:absolute;margin:-50px 60px;height:90px;width:90px;overflow:hidden;border:3px solid #fff;border-radius:100px;background:#fff;}
.avastaff img{width:auto;height:150%;min-width:100%;}
.descstaff{padding:50px 10px 20px;height:150px;background:url('http://animeindo.co/wp-content/uploads/2015/11/staffbg1.jpg'); }
.descstaff h3{font-family:Ubuntu;text-align:center;color:#FF6347;margin-bottom:0px;font-size:18px;}
.descstaff h5{font-family:Calibri;text-align:center;color:#212a30;font-size:16px;padding-bottom:5px;}
.descstaff p{text-align:center;font-family:Ubuntu;font-size:12px;color:#555;font-style:italic;}
.staffsocial{position:absolute;bottom:0;left:0;padding:4px 10px;}
.staffsection{width:102%;display:inline-block;margin:0 -2% 0 0;}
.staffsocial a{display:inline-block;}
.staffsocial img{height:15px;width:auto;}'

4. Buat post baru di laman

Buat Laman Baru

5. Copas kode html berikut di laman baru, jangan lupa gunakan mode html sebelum ngepost

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>


<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="staffsection"> <!--Pengatur Jarak-->
<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="staffsection"><!--Pengatur Jarak-->
<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

6. Simpan, jangan lupa di kasih judul

Selamat kalian sudah berhasil membuat Staff List yang seperti Animeindo :D

Silahkan klik Link di bawah ini untuk melihat hasil Demo

Demo

Ok saya kira cukup sekian dari saya..
Semoga tutorialnya dapat bermanfaat ..

Kalau ada pertanyaan silahkan komentar saja yah gan :) jangan ragu nanti akan saya jawab secepat mungkin :D

Keyword
Cara membuat staff list yang keren, cara membuat staff list simple & responsive, cara membuat staff list seperti animeindo, cara membuat staff list part 2, 3, 4, 5, 6, 7, 8, 10, cara membuat staff list keren, staff list berwarna, terstruktur, cara membuat staff list seperti fanshare, fansub, seperti website streaming dan download anime,

Baca selengkapnya

1000+ Kode Warna CSS

Blogger

1000+ Kode Warna CSS

Selasa, Januari 24, 2017 Komentar

Mbanya cakep yah :v

Keyword

1000+ Kode Warna CSS, Kode warna css terlengkap, kode warna css lengkap, kode warna, kode warna untuk desain, kode warna untuk website/blog, kode warna, kode warna untuk css, warna css hexadecimal, kode warna css hexadecimal, hexadecimal, kode hexadecimal, warna hexadecimal, color picker online, 1000 + Colour Code CSS, color codes css complete, color codes css full, color code, color code for a design review, code color for a review website / blog, color code, color code for review css, color css hexadecimal color codes css hexadecimal , hexadecimal, hexadecimal code, hexadecimal color, color picker online

Baca selengkapnya

Cara memasang komentar disqus di blog secara permanen

Blogger

Cara memasang komentar disqus di blog secara permanen

Sabtu, November 05, 2016 Komentar

Assalamualaikum.wr.wb
Biljabbaradnan's blog - akan membagikan tutorial tentang "Cara memasang komentar disqus di blog secara permanen"

Tapi sebelum kita membahas tutorialnya, saya ingin sedikit bercerita tentang komentar-komentar yang ada di Biljabbaradnan's blog.

Sejujurnya saya sempat risih dengan adanya komentar seperti dibawah ini.
Bisa kalian baca komentarnya -_-

Menurut saya komentar seperti itu saya anggap "Spam",
Kenapa saya namakan Spam?
Karena mereka berkomentar tidak sesuai topik, dan komentarnya-pun menggunakan botcomment, alias komentar otomatis tidak dengan perasaan mereka sendiri seperti kebanyakan orang lainnya.

Jadi saya berinisiatif untuk memasang komentar yang anti spam, mungkin secara garis besar tidak ada yang namanya komentar anti spam. yah karena setiap blog pasti ada saja komentar-komentar yang spam seperti itu, baik dari orang ataupun botcomment.
Tapi kita bisa mencegahnya dengan penyedia layanan komentar Disqus.

Apa itu Disqus?

Disqus adalah sebuah penyedia layanan komentar yang banyak digunakan oleh situs-situs besar ataupun kecil di dunia
Disqus ini terbilang cukup efektif untuk mencegah adanya komentar spam ataupun botcomment, 

Jadi sobat sistem dari Disqus itu seperti ini,
Hanya orang-orang yang memiliki akun Disqus, Google, Facebook, dan Twitter yang dapat berkomentar di platform Disqus, jadi tidak ada yang namanya botcomment.
dan semua hal yang berbau link aktif ataupun http;//blabla.com akan dianggap spam oleh disqus dan kita bisa menghapusnya tanpa mengganggu komentar yang lainnya.

So it's Simple boy :D

Sebenarnya ada beberapa platfrom lagi selain Disqus sobat, seperti paltfrom dari Facebook, Google, IntenseDebate.
Tapi untuk tutorial komentar lainnya akan saya bahas dikesempatan selanjutnya :D wkwk.

Setelah kita mengetahui Pengertian dari Disqus saatnya kita memasangnya di blog kita.

1. Cara memasang Disqus di blog

1. Buka dahulu halaman pertama Disqus

2. Lalu klik "Get Started" untuk memulai membuat akun baru.

3. Silahkan di isi formulir pendaftaran yang diberikan oleh Disqusnya.

atau sobat bisa menggunakan Facebook, Twitter atau Google untuk mendaftar.

4. Setelah mendaftar klik "Add Disqus To Site"

atau sobat bisa mengikuti penjelasan yang ada di gambar berikut ini.

4. Klik "Get Started"

5. Selanjutnya ikuti seperti gambar dibawah ini untuk menginstal disqus di web sobat.

6. Masukan formulir pendaftaran untuk web sobat yang ingin di pasangi Disqus.

7. Lalu klik "Lets get started"

8. Pilih platfrom yang ingin sobat dipakai.
Misalkan saja sekarang saya memilih platform dari blogger, karena blog saya berplatfrom blogger.

9. Pada tahapan ini akan saya jelaskan sedikit tentang Disqus.

Keterangan :

1. Untuk langsung menginstal Disqus di web sobat.
   Tapi jika web sobat sudah terlalu banyak komentar dari pengunjung, ada baiknya sobat langsung memilih nomor 2.
   dan untuk nomor 2 akan saya jelaskan pada point "Cara mengimpor komentar ke Disqus".
2. Untuk mengimpor dan mengekspor komentar di web sobat ke database Disqus.
3. Meminta bantuan, layanan, dan updatan terbaru dari Disqus.

10. Pastikan blog yang kalian pilih adalah blog yang ingin dipasangi Disqus yah sobat.
Masukan judul pada widget disqusnya.
Bila sudah selesai klik "Menambahkan Widget"

11. Pastikan widget Disqusnya terpasang di blog kalian, seperti dibawah ini.
Bila sudah selesai klik "Simpan Setelan".

12. Selesai, dan hasilnya seperti gambar dibawah ini.

Pada kesempatan kali ini sobat sudah berhasil menginstal Disqus untuk web sobat. Selamat :)
Tapi cara di atas memiliki resiko, resikonya adalah "Semua komentar blogger Hilang".
Lalu bagaimana cara mengatasi permasalahan tersebut?
Sobat bisa mengikuti point tutorial selanjutnya.

2. Cara mengimport komentar ke Disqus

1. Pastikan sobat masih pada tahapan yang ada di gambar ini.
2. Bila sudah, pilih nomor 2 untuk Import Komentar.

3. Pertama pilih Blogger, lalu klik Import yang ada di gambar berikut ini.

4. Jika sudah di klik kita akan di alihkan ke tab baru yang berisi seluruh blog kita.
Silahkan pilih salah satu blog yang ingin di Import komentarnya.

5. Setelah selesai mengimport, sobat akan diberi tanda seperti ini.

Setelah sobat mengimport komentar-komentar yang ada di blog ke Disqus, saatnya kalian menginstal Disqusnya di blog sobat, dengan point nomor satu diatas tadi.

Lalu mengapa kita tidak mengikuti tutorialnya dari 1 -> 2, kenapa harus memulai dari 2 -> 1? Alasannya mudah!!

Karena bila sobat memulai dari nomor 1, komentar yang ada di blog sobat akan tertutup oleh disqus, dan disqus tidak bisa mengimport satupun komentar dari blog sobat (anggap saja terhapus -_-)
Sedangkan kalau dari nomor 2 komentar yang ada di blog sobat masih utuh (belum tertutup disqus).
Bila seperti itu disqus mampu mengimport dan membacanya.


Baiklah sobat berakhirlah sudah tutorial saya kali ini tentang "Cara memasang komentar disqus di blog". Semoga bermanfaat :) dan Selamat mencoba :)
Jangan lupa Share dan like Fanspage kami :)

Baca selengkapnya

Cara membuat berbagai macam daftar isi blog (keren, sederhana, berdasarkan label tertentu)

Blogger

Cara membuat berbagai macam daftar isi blog (keren, sederhana, berdasarkan label tertentu)

Sabtu, Juli 02, 2016 Komentar

Biljabbaradnan's blog - Daftar isi atau yang biasa disebut Sitemap, peta situs, table of content.
Adalah sebuah halaman yang berisikan semua label atau artikel yang sudah kita posting kedalam blog.
Membuat daftar isi diblog akan sangat membantu untuk kita (admin blog atau pembaca) yang ingin menelusuri isi blog sobat lebih dalam.
Berikut ini adalah manfaat yang bisa sobat dapatkan dari membuat daftar isi diblog :

1. Membantu pembaca untuk mencari artikel yang di inginkannya.
2. Menghindari penerbitan artikel yang serupa, yang akan menyebabkan kebingungan mesin bot pencari yang berujung penghapusan artikel tersebut.
3. Dapat membantu menaikan Rank Page (urutan halaman di google), dengan memasang internal link.

Baiklah sobat dari pada basa-basi lagi ada baiknya langsung kita praktekan saja cara membuatnya.

1. Tahap Pertama : Memilih tipe daftar isi

Daftar isi dibagi menjadi beberapa tipe sob, tipe tersebut adalah.

Daftar isi yang keren

Demo (Contoh)

Silahkan dicopy kodenya bila tertarik sama daftar isi tersebut :
dan silahkan sobat ganti url https://biljabbaradnan.blogspot.com dengan url sobat

 <style type="text/css">

#toc{

width:99%;

margin:5px auto;

border:1px solid #2D96DF;

-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

}

.labl{

color:#FF5F00;

font-weight:bold;

margin:0 -5px;

padding:1px 0 2px 11px;

background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);

background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));

border:1px solid #2D96DF;

border-radius:4px;-moz-border-radius:4px;

-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;

-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;

}

.labl a{

color:#fff;

}

.labl:first-letter{t

ext-transform:uppercase;

}

.new{

color:#FF5F00;

font-weight:bold;

font-style:italic;

}

.postname{

font-weight:normal;

background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);

background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));

}

.postname li{

border-bottom: #ddd 1px dotted;

margin-right:5px

}

</style>

<div id="toc">

<span class="loading">Ok selamat menjelajah dan selamat mencoba</span>

<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>

<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script></div>

Daftar isi sederhana

Demo (Contoh)

Silahkan dicopy kodenya bila tertarik sama daftar isi tersebut :
dan silahkan sobat ganti url https://biljabbaradnan.blogspot.com dengan url sobat

<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height:500px; background-color: none; text-align: left;">

<script style="text/javascript" src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>

<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

Daftar isi berdasarkan waktu publikasi

Demo (Contoh)

Silahkan dicopy kodenya bila tertarik sama daftar isi tersebut :
dan silahkan sobat ganti url https://biljabbaradnan.blogspot.com dengan url sobat

<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height:500px; background-color: none; text-align: left;">

<script style="text/javascript" src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>

<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

Daftar isi yang hanya beberapa label/kategori saja

Demo (Contoh)

Silahkan dicopy kodenya bila tertarik sama daftar isi tersebut :
dan silahkan sobat ganti url https://biljabbaradnan.blogspot.com dengan url sobat, dan kata blogger, komputer, dan word diganti dengan kategori sobat yang ingin ditampilkan.

<script style="text/javascript" src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap3.js"></script>

<h3>Blogger</h3><ul>

<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default/-/Blogger?orderby=published&amp;alt=json-in-script&amp;callback=startpost&amp;max-results=999"></script></ul><br />

<h3>Komputer</h3><ul>

<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default/-/Komputer?orderby=published&amp;alt=json-in-script&amp;callback=startpost&amp;max-results=999"></script></ul><br />

<h3>Word</h3><ul>

<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default/-/Word?orderby=published&amp;alt=json-in-script&amp;callback=startpost&amp;max-results=999"></script></ul><br />

2. Tahap kedua : Membuat halamannya

Setelah memilih tipe daftar isinya, kita harus membuat halaman daftar isinya sobat.

Berikut cara untuk membuat halamannya :

BACA JUGA:  Cara menulis artikel di blog baru dengan mudah dan lengkap

1. Login dahulu ke akun blogger.com sobat

2. Masuk ke dashbor => laman => laman baru

3. Lalu ubah mode penulisannya dari Compose menjadi HTML

4. Setelah itu masukan kode daftar isinya yang barusan sobat copy

5. Jangan lupa untuk memasukan judul lamannya

6. Terakhir Klik "Publikasikan", untuk menguploadnya

3. Tahap ketiga : memasang halaman daftar isi di menu

Setelah melewati tahap pertama dan kedua, tahapan berikut ini adalah "Penyelesaian" sobat.

Jadi perhatikan baik-baik yah agar daftar isinya dapat terpasang di blog sobat.

Baca juga : 2 Cara jitu membuat menu navigasi di blog dengan mudah

1. Klik tombol "lihat" yang ada dibawah laman sobat yang baru dibuat tadi.

Atau bisa sobat perhatikan gambar dibawah ini.

2.Silahkan sobat copy alamat url-nya seperti pada gambar dibawah ini.

3. Setelah dicopy url-nya, silahkan sobat masuk ke dashbor => template => edit html

4. Lalu silahkan sobat cari kata yang ada di menu blog sobat, dengan cara klik Ctrl+F.
Misalkan di menu sobat ada kata "PKN" masukan kata "PKN" dikotak yang sudah saya beritanda.
dan hasilnya akan kelihatan.

5. Lanjut, masukan kode berikut ini, diantara kode-kode yang saya beri tanda.
Ganti http://biljabbaradnan.blogspot.co.id/p/daftar-isi.html dengan url laman yang tadi sobat copy.

<li><a href='http://biljabbaradnan.blogspot.co.id/p/daftar-isi.html'>Daftar Isi</a></li>

dan hasilnya akan seperti ini

6. Simpan dan cek kembali

 Setelah dicek menu sobat akan menjadi seperti ini

7. Selesai.

Akhirnya berakhir sudah sobat tutorial kali ini.

Setelah sampai pada barisan terakhir ini, bisa dipastikan sobat sudah berhasil "membuat daftar isi blog-nya"

Bagaimana sobat tutorial-nya? apakah cukup membantu atau membuat sobat tambah bingung? hehehe..

Baca juga yah artikel berikut ini untuk referensi dan penambahan ilmu pengetahuan sobat juga.

2 Cara jitu membuat menu navigasi di blog dengan mudah

6 Cara membuat blog untuk pemula dalam 15 menit

Cara menulis artikel di blog baru dengan mudah dan lengkap

Sekian dari saya

Semoga bisa membantu

dan Selamat mencoba

Wasalamualaikum.wr.wb

Baca selengkapnya

Cara membuat berbagai macam widget recent post

Blogger

Cara membuat berbagai macam widget recent post

Sabtu, Juni 25, 2016 1 Komentar

Biljabbaradnan's blog - Kali ini akan membagikan suatu artikel yang terbilang sangat wajib diketahui oleh para blogger, yaitu "Widget Recent Post" dan saya akan membagikan widget recent post dengan beberapa macam. jadi bisa sobat simak langsung artikel berikut ini.

Widget artikel terbaru atau yang biasa disebut recent post adalah sebuah widget yang akan menampilkan semua artikel yang baru kita buat pada setiap halaman blog.

Widget ini berfungsi sebagai :

1. Memberi tahu pengunjung tentang artikel terbaru kita.
2. Dapat membantu kita dengan cara membagikan artikel terbaru kepada pengunjung secara otomatis.
   Jadi kita tidak harus memberi tahu pengunjung satu-persatu bahwa kita telah menerbitkan suatu artikel.
3. Bisa dibilang widget ini adalah widget wajib yang harus dimiliki para blogger.

Jadi mari saatnya kita buat bersama widget wajib ini sobat.

Nama widgetnya adalah Recent Post.

1. Tahap Pertama : Memilih Recent Post

Silahkan sobat pilih salah satu widget recent post yang ingin digunakan.

Artikel terbaru 1 : Recent post bergerak

Kodenya silahkan dicopy :

<style type="text/css">

/*widget*/

#rp_plus_img{overflow:hidden;border:solid 1px #ddd;padding:10px; background-color:none;line-height:1.7em;}

#rp_plus_img ul{list-style-type:none;margin:0;padding:0;}

#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}

#rp_plus_img li{height:70px;padding:1px;list-style:none;}

#rp_plus_img a{color:#3366ff;}

#rp_plus_img .news-title{display:block;font-weight:normal !important;margin-bottom:5px;font-size:14px;}

#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}

#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:60px;border-radius:4px;}

</style>

<!-- start -->

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

<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/master/random-post-bergerak-seocips.js"></script>

<script type="text/javascript">

var speed = 10;

var pause = 5000;

$(document).ready(function(){

rpnewsticker();

interval = setInterval(rpnewsticker, pause);

});

</script>

<ul id="rp_plus_img">

<script style="text/javascript">

var numposts = 5;var numchars = 0;

</script>

<script src="http://biljabbaradnan.blogspot.co.id//feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>

</ul>

  <!-- /end -->

Artikel Terbaru 2 : Recent post melayang

Kodenya silahkan dicopy :

<style>

.bw-seocips a:link,.bw-seocips a:visited{color:#222;text-decoration:none}

.bw-seocips a:hover,.bw-seocips a:active{color:#222;text-decoration:none}

.bw-seocips {background:#fff;width:300px;margin:0;padding:0 10px 10px 10px;border:1px solid #ddd;box-shadow:0 2px 2px #ccc;font:13px arial;line-height:1.7em;position:fixed; bottom:1%; right:1%; z-index:9999; box-shadow:0 3px 4px #ddd; border:1px solid #ddd; -moz-animation:seocips-kiri 4s;-webkit-animation:seocips-kiri 4s;animation:seocips-kiri 4s;}

.bw-seocips ul, .bw-seocips li, .bw-seocips ul li {padding:7px 7px ;border-bottom:1px dotted #ddd;list-style:none;}

.bw-seocips a:link, bw-seocips a:visited {color:#222;text-decoration:none}

.bwTitle-seocips {Font:15px arial;border-bottom:1px solid #ddd;margin-bottom:10px;margin-left:-10px;margin-right:-10px;padding:12px;background: repeating-linear-gradient(45deg,transparent 0,transparent 70%,#6aa84f 100px,#6aa84f 1000px);box-shadow:0 2px 2px #ddd;}

.bwcontent-seocips{border:1px solid #ddd;padding: 5px 10px;overflow:hidden;box-shadow:inset -2px 2px 3px #ddd;background:#f6f6f6;border:1px solid #ddd;}

#rcp2-seocips { height:112px; overflow:hidden; padding:0; background-color:#fff; width:auto; border:solid #ddd 1px; box-shadow:0 0 5px #eee; }

#rcp2-seocips:hover {  overflow:hidden; padding:0;width:auto; border:solid #ccc 1px; box-shadow:none; }

#rcp2-seocips ul { list-style-type:none; margin:0; padding:0; }

#rcp2-seocips li { list-style:none; height:80px; padding:10px; border:dotted #ddd 1px; margin:5px; background-color:#FFFFFF; }

#rcp2-seocips li:hover { border:solid #ddd 1px; }

#rcp2-seocips a { color:#222; font-family:Verdana; font-size:12px; font-weight:bold; text-decoration:none; }

#rcp2-seocips .news-title { margin-bottom:5px; font-size:12px; color:#990000; }

#rcp2-seocips .news-text { font-size:10px; color:#333; text-align:left; font-family:Verdana; font-style:italic; font-weight:normal; padding-bottom:10px; }

#rcp2-seocips img { float:left; margin-right:10px; margin-top:10px; width:60px; height:60px; border-radius:50%; border:4px double #6aa84f; box-shadow:0 0 2px #e06666; }

@-webkit-keyframes seocips-kiri{from{transform:translate(-2000px, 0px);}to{transform:translate(0px,0px);}}

@keyframes seocips-kiri{from{transform:translate(-2000px, 0px);}to{transform:translate(0px,0px);}}

</style>

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/newbe/XedRcpSeocips.js"></script>

<div class="bw-seocips">

  <div class="bwTitle-seocips">

 <i class="fa fa-plus fa-spin"></i> <b>Recent Post</b>

    </div>

  <div class="bwcontent-seocips">

    <div class="bwcontent-seocips2">

  <!-- start -->

<!-- script start -->

<script type="text/javascript">

var speed = 400;

var pause = 3500;

$(document).ready(function(){

rivaiscript();

interval = setInterval(rivaiscript, pause);

});

</script>

<div >

<ul id="rcp2-seocips">

<script style="text/javascript">

var numposts = 5;

var numchars = 0;

</script>

<script

src="http://www.biljabbaradnan.blogspot.com/feeds/posts/default/?orderby=published&alt=json-in-script&callback=randompost"></script>

</ul>

</div> <!-- script end -->

  <!-- /end -->

</div></div></div>

Artikel Terbaru 3 : Recent Post berwarna

 Kodenya silahkan di copy :

<div id="recentpostsae"></div>

<div id="recentpostnavfeed"></div>

<script type='text/javascript'>

//<![CDATA[

    var numfeed = 5;

    var startfeed = 0;

    var urlblog = "http://www.biljabbaradnan.blogspot.com";

    var charac = 40;

    var urlprevious, urlnext;

function seocipsfeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbp4043ocIuhKT_BSf7cP896gh6uaS8vXgc1AHFk5Jjw9W1_OinTjbj2Y_dMP-lgG0_J5hX1XNhSpcqmOJIWfcXuNsvBAN8OwhldRFH634jXHpXelDEVje0Uh5p_6zjKj06wi8dHdrOMJ/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+seocipsfeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","seocipslabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("seocipslabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};

//]]>

</script>

<style>

#recentpostnav{border:1px solid #000;width:100%;margin:0 auto;}

#recentpostsae{margin:0}

.recentpostel{background:#333;display:block;border:2px solid #111;margin:5px 0;padding:10px;height:79px;}

.recentpostel img{background:#222;padding:5px;float:left;height:70px;margin-right:8px;width:70px;border-radius:5px;}

.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px!important;font-weight:700!important;margin:0;color:#000;}

.recentpostel:nth-child(1n+0) {background: #F49A9A;}

.recentpostel:nth-child(2n+0) {background: #FCD092;}

.recentpostel:nth-child(3n+0) {background: #FFF59E;}

.recentpostel:nth-child(4n+0) {background: #E1EFA0;}

.recentpostel:nth-child(5n+0) {background: #B1DAEF;}

#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKATvgT29by3jQ1rC_3gcs4xsTlvWSk4dk6mpMGtJFBDhaBoxFgezcO7leuYtXhlztcI01FeGWp4pM3HKdI9zngC11zTlwnv6ySuiIpkuM6Zl3WCIy0TU5D_6sYrc2GEdq0CrUoGjk439N/s1600/loader.gif) 50% 50% no-repeat #F49A9A;height:470px;border:1px solid #111}

#recentpostnavfeed{border:2px solid #000;color:#111;background:#F49A9A;font-family:Verdana;font-size:12px;text-align:center;margin:0}

#recentpostnavfeed:hover{background-color:#FCD092;}

#recentpostnavfeed a{color:#111!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}

#recentpostnavfeed span{padding:5px 10px}

#recentpostnavfeed .next{float:right}

#recentpostnavfeed .previous{float:left}

#recentpostnavfeed .home{text-align:center}

#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}

</style>

Artikel Terbaru 4 : Sederhana

Kodenya silahkan dicopy

<script src="https://sites.google.com/site/seocips/seocips-script/artikel-terbaru-seo.js"></script>

<script>var numposts = 5; var showpostdate = false; var showpostsummary = false; var numchars = 20; </script>

<script src="https:/biljabbaradnan.blogspot.co.id/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">

</script>

Keterangan untuk semua Recent Post

1. Alamat url Biljabbaradnan.blogspot.co.id
   Silahkan diganti dengan alamat url blog sobat
2. Var numposts
   Adalah jumlah/postingan yang akan ditampilkan
3. Var numchars
   Adalah jumlah kata intro pada artikel yang akan ditampilkan

2. Tahap kedua : Memasang Recent Post

Cara untuk memasangnya silahkan sobat ikuti tutorial berikut ini

1. Login dahulu ke akun blogger.com sobat.

2. Masuk ke dashbor => tata letak => tambahkan widget

3. Lalu pilih Gadget HTML

Baca juga : Mengenal 27 widget dasar blogspot beserta fungsinya dengan lengkap

4. dan masukan kodenya yang baru sobat copy tadi.

3. Tahap ketiga : Simpan dan Selesai

Setelah sampai pada tahapan ini recent post sobat sudah berhasil dibuat, Selamat yah :)

Berakhirlah sudah tutorial kali ini, semoga bisa bermanfaat.
dan jangan lupa untuk share artikelnya dan like fanspage apabila kami sudah cukup membantu :)

Oiah sebelum menutup artikel kali ini, pastikan sobat baca artikel referensi berikut ini yang tidak kalah bermanfaatnya.

1. Mengenal 27 widget dasar blogspot beserta fungsinya dengan lengkap
2. Cara membuat widget popular post di blogger (tanpa mengubah kode html) 
3. Cara menghias blog menggunakan internal dan eksternal widget

Sekian dari saya
Semoga bisa bermanfaat
dan Selamat mencoba
Wasalamualaikum.wr.wb

Baca selengkapnya

Cara membuat widget popular post di blogger (tanpa mengubah kode html)

Blogger

Cara membuat widget popular post di blogger (tanpa mengubah kode html)

Senin, Juni 20, 2016 Komentar

Biljabbaradnan's blog - Banyak tutorial diluar sana yang sudah membahas bagaimana "Cara membuat popular post" dengan "keren", "sederhana", "elegan" dan sebagainya.

Tapi dengan cara yang mengharuskan kita menambahkan kode-kode html tertentu. Lantas bagaimana nasib kita sebagai pemula yang tidak terlalu paham dengan kode-kode html tersebut?

Yah, tenang saja sobat kali ini saya akan membahas "Cara membuat popular pos tanpa harus mengotak-ngatik kode html".

Di jamin deh dengan adanya popular post kali ini tidak akan membuat blog sobat menjadi berat, dan malah membuat blog sobat menjadi keren dan membuat pengunjung menjadi betah bernavigasi di blog sobat.

Baiklah sobat tanpa basa-basi lagi mari kita langsung membuat "Popular postnya"

Cara membuat widget popular post

1. Pertama login dahulu ke melalui akun blogger.com sobat.

2. Lalu ke Dashbor => tata letak => tambahkan widget

Baca juga : Mengenal 27 widget dasar blogspot beserta fungsinya dengan lengkap

3. Pilih widget Entri popular

Klik tanda "tambah" atau yang sudah saya beri tanda.

4. Sesuaikanlah Entri Populer-nya
Untuk lebih jelasnya silahkan sobat baca keterangannya dibawah ini.

Keterangan

1. Judul : Masukan judul yang ingin ditampilkan oleh sobat disini.
   Misalkan judulnya adalah "Artikel Terpopular", "Entri Popular", "Tulisan terpopular" dsb.
2. Paling banyak dikunjungi : Ini adalah jangka waktu artikel terpopular sobat.
   Misalkan artikel popular dalam sebulan, seminggu, atau sejak pertama kali blog dibuat.
3. Tampilkan : Silahkan sobat pilih apa saja yang ingin ditampilkan dan tentukan jumlah artikel popularnya.
   Kalau saya disinih menampilkannya dengan bergambar dan sedikit cuplikan.
   
   Namun apabila sobat ingin membuat popular post hanya dengan judul saja, tidak usah sobat centang dua-duanya pada kolom tersebut.

5. Selesai

dan hasilnya akan seperti ini sobat.

Bagaimana sobat tutorial kali ini tentang "Cara membuat widget popular post di blogger"

Cukup mudah bukan? karena sobat tidak usah mengubah kode html yang ada. heheh

Baca juga yah sobat artikel berikut ini untuk mendapatkan pengetahuan seputar dunia blogger.

• Mengenal 27 widget dasar blogspot beserta fungsinya dengan lengkap
• 6 Cara membuat blog untuk pemula dalam 15 menit
• Cara membuat berbagai macam widget recent post (artikel terbaru)

Bantu blog kami berkembang yah sobat dengan cara share dan like fanspage kami.

Sekian dari saya

Semoga bisa bermanfaat

dan Selamat mencoba

Wasalamualaikum.wr.wb

Baca selengkapnya