September 2015 ~ Abdullah shobirin

Selasa, 29 September 2015

CARA MENAMBAHKAN TOMBOL NAIK DIBLOG DENGAN HTML

Widget ini berfungsi untuk menaikkan halaman blog ke posisi atas caranya hanya dengan mengklik tombol tersebut. Widget yang satu ini sangat menarik karena berbeda dengan yang lainnya, dimana tombol ini akan menghilang apabila posisi halaman sedang berada di posisi atas dan kebalikannya tombol akan terlihat kembali apabila posisi halaman sedang berada
di bawah.

tips cara membuatnya adalah :

1.Login dulu di blog anda.
2. klik Tata Letak.
3.Kemudian klik Tambah Gadget.
4.Lalu pilihlah HTML/JavaScript.
5.Copy kode yang ada di bawah ini kemudian paste kan kode tersebut ke halaman HTML/JavaScript.

6.kemudian save dan lihat hasilnya

CARA MEMBUAT POPULER POST BERWARNA DI BLOG

06.57 No comments

tutorial cara pasang widget popular post warna warni di blogger pada postingan kali ini.

Tutorial Cara Membuat Popular Post Warna Warni Di Blogger (Mudah dan Cepat)

Sebenarnya cara membuat popular post warna warni di blogger tidak sulit kok, dan kita tidak perlu menambahkan script apapun, kita cukup pasang widget popular post yang sudah disediakan oleh blogger dan setting sedikit kemudian tambahkan kode css pada template kita.

Untuk lebih jelasnya silakan ikuti tutorial berikut.

Cara Pasang Popular Post Warna Warni Di Blogger

Pastikan kamu sudah login ke blogger, jika sudah login maka langkah selanjutnya adalah:

Klik menu Tata Letak / Layout
Klik Tambahkan Gadget / Add a Gdget
Pilih Widget Popular Post / Entri Populer

Cara Setting Widget Popular Post :

Pada bagian Most viewed, silakan tentukan sendiri apakah ingin menampilkan artikel populer sepanjang waktu, dalam 1 bulan atau dalam satu minggu.
Pada bagian Show ada bagian image thumbnail dan snippet serta Display up to, nah pada bagian Display up to silakan tentukan berapa artikel populer yang mau ditampilkan, sedangkan pada image thumbnail dan snippet JANGAN DIBERI CENTANG.
Setelah itu silakan Simpan

Tutorial Cara Pasang Popular Post Warna Warni Di Blogger

Sampai tahap ini widget artikel populer sudah bisa dilihat pada blog kita, namun artikel populer nya belum warna warni, agar popular post menjadi warna warni silakan lanjutkan baca tutorial ini , he heeee.

Ada 2 cara, silakan pilih yang menurut kamu lebih mudah.

Cara Pertama

Karena kamu sudah berada pada bagian Tata Letak / Layout, maka kamu cukup klik tambah gadget lagi, dan pilih gadget HTML/JavaScript, setelah itu masukkan kode css berikut di dalamnya

<style type='text/css'>
/*----- POPULAR POST WARNA WARNI -----*/
#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}
</style>

Selanjutnya simpan.

Cara Kedua

Klik menu Template (letak menunya di sebelah kiri)

Di sana kamu akan bisa melihat tampilan blog kamu sekarang, nah di bawahnya ada tulisan Edit HTML, silakan klik tulisan Edit HTML tersebut, kemudian klik Lanjutkan.

Cari kode ]]></b:skin> setelah itu pasang kode berikut di atasnya. Agar lebih mudah menemukan kode tersebut silakan baca Cara Mudah + Cepat Mencari Kode Html di Blogger

/*----- POPULAR POST WARNA WARNI -----*/
#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}

Simpan pengaturan template kamu.

Nah itulah tutorial cara membuat / pasang widget popular post warna warni di blogger, semoga bermanfaat. - See more at: http://blog.ahmadrifai.net/2012/09/cara-membuat-popular-post-warna-warni.html#sthash.HHo0aXEU.dpuf
Sumber : http://blog.ahmadrifai.net/2012/09/cara-membuat-popular-post-warna-warni.html

CARA MENAMBAH BUKU TAMU DI BLOG

06.30 No comments

Cara Membuat Buku Tamu Keren di Blog - Bagi anda para blogger pastinya menginginkan buku tamu bukan? Apakah anda tertarik dengan buku tamu di blog saya? Jika iya maka saya akan share cara membuat buku tamu keren di blog.

1. Anda silahkan daftar dulu di cbox untuk mendapatkan script buku tamu anda disini

2. Isi data tersebut dengan benar

3. Setelah kalian isi datanya, jangan lupa centang "i have read and...." lalu klik "create my cbox!"

4. Masuklah ke akun email anda untuk memverifikasi akun cbox anda

5. Klik tautan dari cbox yang ada di kotak masuk yahoo anda

6. Kini akun cbox anda aktif. Sekarang coba kalian cari script cbox anda atau lewat sini

7. Nah copy ke notepad script diantara tulisan
 dan 

Text "begin.." dan "end.." tidak usah dicopy, cukup copy script yang ada diantara "begin..." dan "end.." saja.

8. Selanjutnya masuk ke blogger anda -> tata letak -> tambah gadget -> html/javascript

9. Masukkan script berikut

10. Edit text yang berwarna merah dengan script cbox anda yang sebelumnya sudah disimpan notepad

11. Anda juga bisa mengedit text yang berwarna oranye dengan url gambar yang lain

Contoh:

http://i1089.photobucket.com/albums/i353/illankjie/bukutamu3.png

http://i1089.photobucket.com/albums/i353/illankjie/bukutamu5-2.png

http://i1089.photobucket.com/albums/i353/illankjie/bukutamu9-2.png

http://i1089.photobucket.com/albums/i353/illankjie/BukuTamu8-1.png

http://i1089.photobucket.com/albums/i353/illankjie/gustbook02-1.png

12. Klik "simpan"

Selesai. Kini anda sudah memiliki buku tamu seperti saya ^_^

Sumber : http://ramadhanlmzero.blogspot.com/2012/12/cara-membuat-buku-tamu-keren-di-blog.html#ixzz3n8NBvirJ

CARA MEMASANG TOMBOL NAVIGASI NEXT PAGE PADA BLOG

02.54 No comments

Cara Membuat Widget Navigasi Halaman Dengan NOMER Keren pada Blogger

Salam Blogging, Kali ini kami akan berbagi tips Cara Membuat Navigasi Nomer Halaman KEREN pada Blogger. Nomor halaman sebenarnya fungsinya sama dengan navigasi ( Next page atau page Previeous ) biasanya ini adalah default atau bawaan dari templatenya.

Namun kali saya akan mencona membuat Navigasi pada halaman dengan merubah ( next dan previous ) menjadi sebauah navigasi halaman ber-nomer

Cara Membuat Navigasi Nomer Halaman KEREN pada Blogger

Untuk membuat widget ini Anda hanya melakukan 2 langkah :

1. Menambhakan CSS

2. Menambahkan Script

1. Cara menambahkan CSS

1. Masuk Ke BLOGGER DASHBOARD >> TEMPLATE >> EDIT HTML.

2. Cari kode ]]></b:skin> dan pastekan kode CSS diatas ]]></b:skin>

Navigasi style # 1

Kode css style #1

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}

.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}

.showpageOf{display:none!important}

#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}

#blog-pager .pages{border:none;}

Navigasi style # 2

Kode css style #2

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}

#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}

.showpageOf{display:none!important}

#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Navigasi style # 3

Kode css style #3

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}

.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}

.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}

a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}

#blog-pager .pages{border:none;background: none;}

Navigasi style # 4

Kode css style #4

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Navigasi style # 5

Kode css style #5

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}

#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}

.showpageOf{display:none!important}

#blog-pager .pages{border:none;}

Navigasi style # 6

Kode css style #6

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Navigasi style # 7

Kode css style #7

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}

#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}

.showpageOf{display:none!important}

#blog-pager .pages{border:none;}

Catatan : Jika Anda tidak ingin menampilkan NEXT dan PREVIOUS halaman Anda bisa menambahkan kode CSS dibawah ini, Anda tambahkan di atas kode ]]></b:skin> yang tadi.

.firstpage, .lastpage {display: none;}

2. Langkah berikutnya menambahkan kode SCRIPT

1. Cari kode </body> gunakan ( Ctrl+F ) agar lebih cepat dalam pencarian kodenya.

2. Jika sudah ketemu letakkan kode SCRIPT dibawah ini diatas kode </body>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
/*]]>*/
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>

Keterangan : Anda bisa meng-EDIT kode dibawah ini sesuai selera

    var perPage=7;
    var numPages=6; ( panjang nomer halaman 1-6 )
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';

Pada umumnya standart default tampilan per halaman blogger adalah maksimal 20 halaman, Jika Anda ingin merubahnya :

>> Cari kode ini pada HTML Template : expr:href='data:label.url'
>> Tambahkan kode menjadi seperti ini : expr:href='data:label.url + "?&max-results=7"'

Keterangan : 7 adalah tampilan jumlah posting per halaman.

3. Langkah terakhir SAVE TEMPLATE

Deminkian tips Cara Membuat Navigasi Nomer Halaman KEREN pada Blogger, Jika ada masalah dengan ini silahkan isikan keluhan sahabat blogger pada kolom komentar, InsyaAllah akan saya mebalasnya. Terima Kasih

Sumber : http://bloggingpasuruan.blogspot.co.id/2014/09/cara-membuat-widget-navigasi-halaman.html

Abdullah shobirin

Videos

Total Tayangan Halaman

Recent Posts

Blog Archive

Sports

Fashion

Business

Header Ads

Social Counter

Hot News

Other News

Selasa, 29 September 2015

CARA MENAMBAHKAN TOMBOL NAIK DIBLOG DENGAN HTML

CARA MEMBUAT POPULER POST BERWARNA DI BLOG

Cara Pasang Popular Post Warna Warni Di Blogger

Cara Setting Widget Popular Post :

CARA MENAMBAH BUKU TAMU DI BLOG

CARA MEMASANG TOMBOL NAVIGASI NEXT PAGE PADA BLOG

Nature

Populer post

Photography

Unordered List

Comments

Main Slider

Recent Posts

Abdullah shobirin

Videos

Total Tayangan Halaman

Recent Posts

Blog Archive

Sports

Fashion

Business

Header Ads

Social Counter

Hot News

Other News

Selasa, 29 September 2015

CARA MENAMBAHKAN TOMBOL NAIK DIBLOG DENGAN HTML

CARA MEMBUAT POPULER POST BERWARNA DI BLOG

Cara Pasang Popular Post Warna Warni Di Blogger

Cara Setting Widget Popular Post :

CARA MENAMBAH BUKU TAMU DI BLOG

CARA MEMASANG TOMBOL NAVIGASI NEXT PAGE PADA BLOG

Social Profiles

Nature

Populer post

Photography

Unordered List

Comments

Main Slider

Recent Posts