Membuat Popular Post Warna-Warni

Cara Membuat Popular Post Warna - Warni di Blog - Nah kali ini saya akan berbagi cara membuat popular post yang ada di atas atau yang ada di blog saya, nah caranya cukup mudah loh sobat....jika sobat ingin tau caranya ,mohon anda harus menjadi member blog saya..
nah jika anda sudah menjadi member blog saya nih saya kasih tau caranya..tidak usah bertele - tele.

Cara Membuat Popular Post Warna - Warni di Blog :

• Login ke akun Blogger sobat atau klik Link ini
• Pilih Template klik SESUAIKAN
• Nah sobat cari menu Tambahkan CSS
• Copy kodedibawah ini dan Pastekan ke dalam kotak CSS tersebut.

/* Rainbow Popular Post by http://resistance-blog137.blogspot.com*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
/* Rainbow Popular Post by http://resistance-blog137.blogspot.com*/

• Nah jika sudah Klik Simpan Template.
• Gimana udah jadi belum??? kalo belum Comment aja ya,,terima kasih...

Baca Selengkapnya »

Cara Membuat Breadcrumbs di Blog agar cepat Terindex

Cara Membuat Breadcrumbs di Blog agar cepat Terindex - Nih sobat ane punya Trik SEO baru kali ini agar Postingan blog sobat cepat terindex di google.....nah pasti belum tau kan Breadcrumbs itu apa,,? nih ane kasih tau,,atau liat dulu nih screenshotnya.

Nah Breadcrumbnya ada di Lingkaran Merah.

Breadcrumbs adalah sebuah Navigasi halaman yang umumnya berfungsi untuk membantu memberikan informasi kepada si pengunjung berada.nah jika sobat pernah melihat blog yang kaya saya atau website lain itu namanya breadcrumbs keren kan....? nih ane langsung kasih tau cara membuatnya...

Cara Membuat Breadcrumbs di Blog :

• Login ke akun Blog sobat
• Klik TEMPLATE => Edit Html => Centang Expand template widget
•  Cari kode ]]></b:skin> jika sudah ketemu,,letakkan kode di bawah ini di atasnya.

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;
font-size: 90%;
line-height:1.4em;
border-bottom:1px solid black;
} 

• Kemudian cari lagi kode Seperti ini.

<b:includable id='post' var='post'>

• Pastekan kode HTML berikut di bawahnya.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
You are Here &gt; <a expr:href='data:blog.homepageUrl'>Home</a> &gt;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &gt; <data:post.title/>
</div>
</b:if>
</b:if>

• Nah yang Terakhir tinggal Simpan Template dan selesai.

Baca Selengkapnya »

Cara Memasang Menu Accordion di Blog

Cara Memasang Menu Accordion di Blog - Cara Memasang, Membuat atau Membikin Menu Accordion di Blogspot ini adalah re-post dari posting lawas saya yang berjudul cara membuat menu accordion blogger yang nggak masuk ke hatinya om gugel. Karna itu diharapkan mudah - mudahan dengan Re-post ( posting ulang ) ini, artikel saya yang telah saya hapus tersebut bisa terindeks lagi meskipun dengan URL yang berbeda.

Menu Accordion adalah berupa susunan menu yang di susun secara vertikal, tentulah berbeda sekali dengan menu horisontal ( baca : cara membuat menu horisontal di blog )yang biasa sobat jumpai, mungkin ini adalah salah satu solusi menyembunyikan widget yang terlalu banyak di halaman blog sobat.  Sobat yang tertarik pasang menu accordion di blogger, silahkan ikuti tutorial berikut.

1. Logi ke akun blog sobat.
2. Klik rancangan --> Edit HTML
3. Kemudian letakkan kode berikut di atas kode ]]></b:skin>

#acc{background:#666;font:13px trebuchet ms;
line-height:1.2em;padding:10px;margin:0;}
#acc h3{background:-moz-linear-gradient(top,#ccc,#999);padding:5px 10px;margin:0;color:#222;
text-shadow:0px 1px 1px #fff;
border-bottom:2px solid #444;}
#acc h3 a{color:#555}
#acc h3 a:hover{color:#000}
#acc .post{background:#fff;color:#000;padding:10px;margin:10px 0px;display:none;
border-bottom:2px solid #222;}
#acc :target h3 + .post {display:block;height:150px;overflow:auto;}
#acc :target h3 a{color:#aa5500}

4. Klik save template dan kita akan menuju ke penambahan gadget.
5. Klik Rancangan --> Elemen laman--> Tambah gadget--> Pilih HTML/Javascript
6. Masukkan kode berikut ke dalam kotak yang di sediakan.

<div id="acc">
<div id="isi1">
<h3><a href="#isi1">Judul 1</a></h3>
<div class="post">

Masukkan item anda disini,bisa berupa teks atau widget

</div>
</div>
<div id="isi2">
<h3><a href="#isi2">Judul 2</a></h3>
<div class="post">

Masukkan item anda disini,bisa berupa teks atau widget

</div>
</div>
<div id="isi3">
<h3><a href="#isi3">Judul 3</a></h3>
<div class="post">

Masukkan item anda disini,bisa berupa teks atau widget

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

7. Klik save dan lihat hasilnya... Gimana?? sederhana dan mudah bukan??

Baca Selengkapnya »

Cara Memasang Tanda Tangan di Blog

Cara Memasang Tanda Tangan di Blog - Apa kabar sobat blogger! Senang di pagi yang cerah ini saya kembali menyapah sobat blogger... Hmmm. sekedar info, mungkin beberapa hari kedepan ane tak mungkin ngapdet posting serutin ini jadi kali ini saya akan kasih tutorial cara memasang tanda tangan dengan selengkap - lengkapnya.
Pada postingan sebelumnya kita telah membahas tentang Kumpulan Efek - Efek Blog, dan kali ini setelah sekain lama tersimpan di draft akhirnya artikel ini di Poskan dengan judul Cara Bikin Tanda Tangan di Blog. Mungkin di antara sobat blogger sudah pernah melihat hiasan yang satu ini, biasanya diletakkan di bagian bawah postingan yang semakin menegaskan bahwa sobat adalah pemilik resminya. Bagi sobat yang tertarik, silahkan ikuti tutorial berikut.

Cara Memasang / Membuat Tanda Tangan di Blog
1. Kunjungi situs http://mylivesignature.com
2. Klik pada tombol bertuliskan Proceed untuk membuat tanda tanda tangan tanpa perlu registrasi.

3. Setelah itu, klik tulisan Using the signature creation wizard.

4. Silahkan masukkan nama sobat di kotak yang di sediakan dan klik Next Step

5. Pilih jenis huruf yang di inginkan dan klik Next Step.

6. Setelah itu, tentuhkan ukuran tanda tangan yang di inginkan dan klik next step.

7. Kemudian sobat akan melihat tampilan seperti berikut yang bertanda bahwa tanda tangan sobat akan segera jadi. Pilih warna background dan warna tanda tangan yang di inginkan.

Tambahan :
Untuk warna background direkomendasikan menggunakan background ( latar ) transparan agar nantinya cocok dengan semua warna.

8. Atur kemiringan ( slope ) teks dan klik Next Step

9. Nah dengan demikian maka tanda tangan online sobat telah berhasil dibuat.

 

Tambahan :
Klik Copy Image Location untuk mengambil URL gambarnya
Klik Save Image As untuk mendownload Tanda Tangannya.

Beginilah hasilnya

Baca Selengkapnya »

Cara Membuat Blog Terbaru 2013

Cara Membuat Blog Terbaru 2013 - Salam hangat sobat blogger! senang rasanya kembali memposting artikel di blog jadul ini.. setelah sekian lama menghilang dari orbit, blog yang aneh beri judul THE RESISTANCE BLOG ini ane harapkan bisa lagi kembali berkiprah di dunia blogger setidaknya dalam hal membantu para newbie yang tertarik untuk ngeblog...
Kali ini saya akan memposting artikel tentang cara bikin blog terbaru 2013, 2014, bahkan harapan saya sampai selama - lamanya.. hehehe.. ( ada - ada aja kamu bro!!! ). Kenapa terbaru?? yup! karna postingan lawas ane yang hampir berjudul sama yaitu cara bikin blog, tutorialnya sudah sangat berbeda, itu dikarenakan interface blogger yang baru. Antarmuka blogger yang baru pula turut merubah beberapa settingan blog termasuk cara untuk membuat blog...
Sekedar info, tutorial tentang cara membuat blogger terbaru ini saya posting sebagai respon atas saran dari teman - teman blogger yang meminta untuk memposting artikel khusus Newbie tentang cara instan membuat blog 2013. Di trik ini, sobat juga akan langsung mengaktifkan akun email gmail sobat beserta akun Google+ sobat. Ha?? mengapa demikian?? Jadi bisa dikatakan "sekali mendayung satu dua bahkan tiga pulau terlampaui " hehehe!!!
Baiklah sob! daripada sobat blogger makin penasaran, tanpa basa - basi lagi mari sobat ikuti tutorial berikut...

1. Silahkan menuju ke blogger.com dan sobat akan langsung melihat tampilan seperti berikut

 2. Isikan data - data yang diminta yang meliputi

• Nama lengkap
• Alamat Email Hasil ( blablabla@gmail.com )
• Password ( kata sandi )
• Tanggal lahir
• Jenis kelamin
• Nomor HP
• Lokasi

NB : Jangan lupa mencentang tulisan "I agree to the googleTerm of Service and Privacy Policy" dan jangan lupa pula untuk mengisi verifikasi sesuai kata yang tertera di atas (Captcha) dan klik Next Step

 3. Klik Continue dan jika tidak ada gangguan teknis yang berarti, sobat akan langsung menerima kode verifikasi berupa Sms di nomor hape yang sobat daftarkan. Masukkan kode verifikasinya dan klik Continue

4. Setelah itu, sobat akan meihat tampilan seperti berikut yang menandahkan bahwa akun email gmail sobat sudah jadi. Klik Back to Blogger

 5. Pilih Opsi profil yang akan di tampilkan atau di pakai di blogger. Terdapat 2 pilihan, yang pertama sobat bisa menggunakan Profil bawaan Blogger atau Bisa mencoba profil Google+ ( Rekomendasi ) sekaligus membuat akun Google+.

6. Jika sobat memilih membuat profil google+ maka sobat akan melihat tampilan berikut

7. Silahkan Utak - atik sendiri profil Google+ milik sobat dan klik Upgrade.

8. Klik "Lanjutkan ke Blogger"

9.  Klik tulisan " Blog Baru "

10  Silahkan Masukkan Judul Blog dan Alamat Blog serta Template yang di inginkan emudian klik Buat Blog.

Cat : Sesuaikan Judul Blog dengan Alamat Blog Misalnya Judul Blog "PASAR GADGET" maka Url Blog ada baiknya adalah PASARGADGET.BLOGSPOT.COM. Sekianlah Tutorial Lengkap Cara Membuat Blog di Blogspot Terbaru 2013.. dan dengan bangga saya ucapkan selamat datang di dunia blog yang mengasyikan ini....

Baca Selengkapnya »