Cikevin

Cara Membuat Tombol Share Keren #2

kevinservis TIPS BLOG 27 Mar 2013

Cara Membuat Tombol Share Keren #2 | Selamat malam sobat Blogger Tutorial, dimalam yang sesunyi ini aku akan membagikan sebuah tips blogging yang gak kalah kerennya nih, yaitu cara mambuat tombol share blog kita ke jejaring sosial seperti twitter, facebook, yahoo dan lain-lain, nah sebelum membuatnya, kita sedikit bahas dulu yuk, apa sih manfaat dari tombol share yang ada di blog kita?

Tombol share yang sering kita jumpai di blog-blog lain, atau blog saya ini berfungsi untuk membagikan link blog yang kita baca, ke situs jejaring sosial. Misalnya begini, ada seseorang yang sangat tertarik dengan salah satu artikel di blog saya, nah si orang itu ingin membagikannya ke teman-temannya, nah untuk mempermudah orang itu, kita gunakan tombol share ini, selain bermanfaat bagi orang itu, secara tidak langsung blog kita ikut terpromosi oleh orang itu sob.

Sebetulnya ada beberapa macam tombol share, namun menurut saya inilah yang paling keren dan palingenteng, mengapa saya bilang paling enteng? karena gadget ini memang tidak berat, hehehe... langsung saja yuk kita buat.

1. Login blog sobat.

2. Pilih Tataletak, Tambah Gadget.

3. Kemudian pilih HTML/JavaScript.

4. Lalu masukan kode dibawah ini.

</script>

5.Yang terakhir, simpan dan lihat hasilnya.

Ouke semoga bermanfaat untuk sobat semua, dan terimakasih...

Cara Mengganti Background Blog - 8 Situs Gratis Penyedia Background Terbaik

kevinservis TIPS BLOG

Terkadang kita merasa bosan dengan tampilan blogspot kita, sering kali kita ingin me-refresh blog kita agar lebih segar sehingga baik anda sendiri maupun pengunjung setia atau pengunjung baru semakin betah berlama-lama nongkrong di blog kita. Selain mengganti template blogspot pada artikel yang kemarin, salah satu cara mudah untuk menyegarkan blog anda adalah merubah tampilan background blogspot, dan caranya pun sangatlah mudah.

Secara default background dari blogger sudah lumayan banyak, anda tinggal pilih saja. Tapi tentu saja background yang didapat dunia maya luar sana amatlah banyak dan bervariasi sehingga kita bisa lebih dalam berkreasi.

Dibawah ini adalah 8 Daftar penyedia backgound blogspot terbaik dan gratis untuk mempercantik blog anda:

1. Din Pattern (www.dinpattern.com/)

2. Squidfingers (www.squidfingers.com/patterns/)

3. milleseicentopercento (http://adf.ly/Asgmx)

4. Tile Machine (www.tilemachine.com/)

5. Everyday Icons (www.playground.everydayicons.jp/)

6. Citrus Moon (www.citrusmoon.typepad.com/patterns/)

7. Alice Grafixx (www.alice-grafixx.com)

8. Koller Media (www.kollermedia.at/index.php/pattern4u/)

Bagaimana sangat unik-unik kan background nya? dan mengundang segera merubah tampilan background blog anda.
Setelah anda memilih background blogspot dari ke-8 situs diatas, sekarang saatnya menginstall ke blog anda. cara merubah background blogspot adalah sebagai berikut:

Log In ke Blogger anda
Klik Rancangan > Perancang template
Cari yang namanya "Latar belakang"
Pilih gambar latar dengan mengunggah dari komputer anda (gambar yang tadi anda pilih)
Simpan pekerjaannya dan lihat hasilnya.

Dengan cara merubah tampilan background blogspot, mudah-mudahan blog yang sudah mulai merasa bosan dilihat kembali menarik dan cantik.
Bagaimana dengan tampilan background blogspot anda????

Cara Membuat Social Icon Dengan CSS3

kevinservis TIPS BLOG

Tips blog kali ini bisa meningkatkan jumlah pelanggan social media sobat. Bukan tidak mungkin, karena tombol social icon ini penampilan nya sangat menarik yang membuat kita gatal untuk mengkliknya..hehee..Sesuai dengan judulnya Cara Membuat Social Icon Dengan CSS3, widget social ini memang menggunakan CSS3 yang membuat penampilanya menjadi sangat menarik. Untuk Live demo nya coba lihat dibawah ini :

Bagaimana sob ? keren gak ?..Kalau sobat tertarik ingin membuat nya, cara nya sangat mudah. Silahkan copy paste kode dibawah ini ke add gadget HTML blog sobat :

Note : Silahkan di ganti URL social media yang saya beri warna diatas, dengan milik sobat sendiri.

Cukup sekian sob. Terima kasih telah membaca artikel Cara Membuat Social Icon Dengan CSS3.

Semoga bermanfaat.

Cara Membuat Tombol Share Social Media CSS3

kevinservis TIPS BLOG

<p>Your browser does not support iframes.</p>

Selamat pagi sobat blogger,,seperti yang kita social media seperti facebook, twitter dll, adalah tempat yang paling bagus untuk kita melakukan kegiatan promosi. Bagi sobat blogger yang menekuni dunia blogging dan bisnis online rasanya tidak akan terlepas dari social media ini, karena selain penggunaanya yang mudah, social media ini bisa kita gunakan secara gratis. Jadi tunggu apalagi, segera promokan apapun bisnis sobat blogger melalui social media ini. kali ini, yang akan saya share adalah cara membuat tombol share social media CSS3. Dengan adanya widget ini, sobat akan lebih mudah untuk melakukan kegiatan promo ke social media, selain widget ini super kereen, cara pembuatanya pun juga cukup mudah. Mau tau bagaimana cara membuatnya ?

Cara Membuat Tombol Share Social Media CSS3 :

1. Seperti biasa, login ke blogspot
2. Masuk ke bagian pengeditan HTML
3. Cari kode ]]></b:skin>
4. Letakan kode dibawah ini, diatas ]]></b:skin>

.social{
    max-width:300px;
}
 
.social li{
    min-height:40px;
    clear:both;
    float:none;
    margin-bottom:10px;
}
 
.social a{
    color:#232323;
    position:relative;
    display:block;
    line-height:40px;
    padding-left:55px;
}
 
.social span{
    display:block;
    width:40px;
    height:40px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9h41DOsDn_PTx73EhqGdQa7Q-SF5eFlwG5BSdJzepY65jATRbd754eEikaqePDoyewtb3AhIRdpU0dSgkYcfzg9cfWqOQDb2m75AwVuf1ikk0z0JcxvgHt0_B4sDCNfXQI-tPPLZJ/s1600/social.png) no-repeat;
    position:Absolute;
    left:0;
    border-radius:32px;
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
 
.social .facebook{
    background-color:#2d309a;
}
 
.social .twitter{
    background-color:#00FFFF;
    background-position:0 -40px;
}
 
.social .pinterest{
    background-color:#FF0000;
    background-position:0 -80px;
}
 
.social .email{
    background-color:#00FF00;
    background-position:0 -120px;
}
 
.social .rss{
    background-color:#ffba16;
    background-position:0 -160px;
}
.social a{
    /*--code trước--*/
    z-index:1;
    -moz-transition:color 0.4s ease;
    -webkit-transition:color 0.4s ease;
    -o-transition:color 0.4s ease;
    transition:color 0.4s ease;
}
 
.social span{
    /*--code trước--*/
    z-index:-1;
    opacity:0.8;
    -moz-transition:opacity 0.4s ease,width 0.4s ease;
    -webkit-transition:opacity 0.4s ease,width 0.4s ease;
    -o-transition:opacity 0.4s ease,width 0.4s ease;
    transition:opacity 0.4s ease,width 0.4s ease;
}
 
.social a:hover{
    color:white;
    text-shadow:0 1px 0 rgba(0,0,0,0.5);
}
 
.social a:hover span{
    width:300px;
    opacity:1;
}

5. Save Template.
6. Masukan kode berikut ke add gadget HTML

<ul class="social">

    <li><a href="#"><span class="facebook icon"></span>Join Us on Facebook</a>

    </li>
    <li><a href="#"><span class="twitter icon"></span>Follow Us on Twitter</a>

    </li>
    <li><a href="#"><span class="pinterest icon"></span>Join Us on Pinterest</a>

    </li>
    <li><a href="#"><span class="email icon"></span>Send Us Email</a>

    </li>
    <li><a href="#"><span class="rss icon"></span>Subscrible RSS Feed</a>

    </li>
</ul>

7. Save dan selesai.

Nah sekarang sobat sudah mempunyai Tombol Share Social Media CSS3 yang akan memudahkan sobat dalam melakukan promo ke social media.

Terima kasih

Kumpulan Drop Down Keren Dan Cara Membuatnya

kevinservis TIPS BLOG

Tutorial | Ini dia drop down yang sobat sobat cari, Blogger Tutorial sudah koleksi banyak nih, bagi sobat yang templatenya belum ada drop downnya, bakal makin bagus bila di ksih salah satu drop down dari Blogger Tutorial ini. hehe :)

Cara membuat Drop down

Login ke blog anda > Design > Edit HTML ( tidak perlu centang Expand Widget templates )
Cari Kode ]]></b:skin> ( Gunakan CTRL + F untuk mempermudah pencarian )
Copy Css dari menu yang anda pilih di bawah ini dan paste tepat diatas kode ]]></b:skin>
Langkah selanjutnya cari kode <div id='header'> atau <div id='header-wrapper'>
Jika sudah ditemukan, Copy kode menu yang anda pilih dan paste tepat di atas kode <div id='header'> atau <div id='header-wrapper'>

Preview

Menu Horizontal 1

Css

Kode

Menu Horizontal 2

CSS

Kode

Menu Horizontal 3

CSS

Kode

Menu Horizontal 4

CSS

Kode

Menu Horizontal 5

CSS

Kode

Menu Horizontal 6

CSS

Kode

Menu Horizontal 7

CSS

Kode

Menu Horizontal 8

CSS

#tabs12 img { border: 
none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold
 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } 
#tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } 
#tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { 
float:left; 
background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu_vhXlxhI/AAAAAAAACvE/mtaQIkLuioQ/s1600/tableft12.png)
 no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
 #tabs12 a span { float:left; display:block; 
background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu_voDXE9I/AAAAAAAACvI/sVgxX67lkGc/s1600/tabright12.png)
 no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* 
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span 
{float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; }
 #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span {
 background-position:100% -42px; } #tabs12 #current a { 
background-position:0% -42px; } #tabs12 #current a span { 
background-position:100% -42px; }

Kode

Menu Horizontal 9

CSS

#tabs6 img { border: none;
 } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt
 Verdana; line-height$3Anormal; border-bottom:1px solid #666; } #tabs6 
ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { 
display:inline; margin:0; padding:0; } #tabs6 a { float:left; 
background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-pxMSoZI/AAAAAAAACuU/PFY8xbrx6AQ/s1600/tableft6.gif)
 no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
 #tabs6 a span { float:left; display:block; 
background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-p0wRo5I/AAAAAAAACuY/T2KFLniEzcM/s1600/tabright6.gif)
 no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* 
Commented Backslash Hack hides rule from IE5-Lac \*/ #tabs6 a span 
{float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; }
 #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { 
background-position:100% -42px; } #tabs6 #current a { 
background-position:0% -42px; } #tabs6 #current a span { 
background-position:100% -42px; }

Kode

Menu Horizontal 10

CSS

Kode

Catatan:

<li><a href="#" ><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 6</span></a></li>
<li><a href="#" ><span>Link 7</span></a></li>

Tanda pagar (#) silahkan ganti sesuai link yang anda inginkan, dan untuk yang saya warnai biru adalah text menu dari link yang anda buat. contoh : <li><a href="http://trickstipsblog.blogspot.com/" ><span>Blogger Tutorial</span></a></li>

Sekian dulu ya postingan Blogger Tutorial kali ini, kalau sobat mencoba Tutorial diatas, pasti tambah cakep tuh blog sobat, hehehe :)

Kumpulan Efek - Efek Blog Terlengkap

kevinservis TIPS BLOG

Tutorial | Blogger Tutorial akan share Kumpulan widget efek-efek terlengkap pada blog. Seperti salju, hati, bintang bertaburan, kembang api, gelembung, kupu-kupu, sampai banjir, uvo, dinosaurus dsb. tapi sebelum kita masuk ke intinya, terlebih dahulu saya ingatkan pada sobat bahwa efek, animasi dan widget - widget serupa akan menambah beban loading blog sobat, jadi mohon di perhitungkan sebelum sobat memasang efek ini. Efek yang akan saya posting kali ini, akan saya bagi 2 yaitu efek ringan ( loading ringan ) dan efek menegah hingga berat. ( kayak tinju aja.. hoho :D)

Sobat yang tertarik memasangnya silahkan ikuti tutorial memasang efek - efek pada blog berikut.

A. Efek Ringan

Mungkin Ini adalah efek yang biasa sobat lihat saat sobat blogwalking.hehe

1. Efek salju berjatuhan

2. Efek hati bertaburan

3. Efek bintang bertaburan

4. Efek kembang api

5. Efek Gelembung

5. Efek Kupu - Kupu Terbang

Cara pemasangan :

Klik rancangan --> Edit html
Letakkan script efek di atas kode </body>
Klik Save

B. Efek Menengah - Berat

Efek ini saya ambil dari http://www.netdisaster.com. Untuk demo dari salah satu script berikut, silahkan lihat di sini.. DEMO

1.Meteor Jatuh

2. Banjir

3. Bunga Mekar

4. Bom Atom

5. Ufo

6. Graffity

7. Shaver

8. Gun

9.Bloody gun

10. Paint ball

11. Chainsaw

12. Dinosaur

13. Lebah

14. Lalat

15. Semut

16. Siput

17. Cacing

18. Mold

19. Bayi merangkak

20. Telur mata sapi

21. Kopi tumpah

22. Terbakar

23. Tomat

24. Creampie

25. Murka

26. Sapi Jorok

27. Anjing Jorok

28. Kencing Sembarangan

Cara pemasangan :

Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
Masukkan script efek di dalam kotak yang di sediakan
Klik save dan lihat hasilnya.

Tambahan :

Efek yang ke 2 berbeda dengan efek yang pertama. di efek ke 2, efek bisa dimatikan secara manual, sedangkan yang pertama sebaliknya ( tidak bisa dimatikan selama masih memasang scriptnya ). so, pilih mana yang terbaik menurut sobat. sekian Tutorial kali ini, semoga berhasil :)

Cara Membuat Recent Post Berjalan di Blog

kevinservis TIPS BLOG

Cara ini ampuh dan bisa digunakan di all search engine seperti firefox, chrome, opera, dll.Recent post biasanya menampilkan sejumlah judul artikel yang belum lama sobat posting dalam deretan ke bawah dan tak jarang juga ada yang bergerak ke bawah. Contohnya :

Kali ini saya akan kasih tahu bagaimana cara memasang recent post di blog. Sobat yang berminat silahkan ikuti tutorial berikut.

ingat ! script ini support Google Chrome, Internet Explorer, maupun Firefox.
soalnya aku pernah coba script lain dan hasilnya hanya berjalan di Firefox saja, .
sungguh beruntung sahabat TTB karena aku udah sempurnakan scriptnya.

Langsung saja :

1. Log in ke akun blog sobat.
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode berikut ke dalam konten.

4. Klik save dan lihat hasilnya.

Recent Post ini sudah terbukti ampuh di Firefox, Chrome, maupun Internet Explorer.

Sekian dan terima kasih banyak atas kunjunganya.

Cara Membuat Border di Postingan Blog

kevinservis TIPS BLOG

Tutorial | Border biasanya digunakan untuk menandai suatu teks atau tulisan yang dianggap penting di postingan pada blog. Dengan kata lain, pembaca diajak untuk lebih memperhatikan kalimat yang diberi border tersebut. Selain itu, adanya border ini juga dapat mempercantik tampilan postingan. Blogger Tutorial mau berbagi koleksi bordernya diantaranya :

Preview

Untuk membuat border di postingan, diperlukan kode CSS atau Casscading Style Sheets. Border ini mempunyai beberapa macam atau style, diantaranya adalah border style solid dan border style dot. Berikut ini kode CSS untuk kedua macam style border tersebut.

Border Style Solid

<div style="border: 2px solid red; height: 20px; padding: 5px; text-align: left; width: 200px;">
Border Style Solid</div>

Maka hasilnya seperti di bawah ini.

Border Style Solid

border: 2px solid red; menunjukkan ketebalan tepi border sebesar 2 piksel dan bergaya solid dengan warna merah (red). Bila ingin lebih tebal lagi, silakan ganti angka 2 dengan angka yang lebih besar lagi. Kalau mau ganti warna, silakan ganti kata red dengan warna yang lain, misalnya blue untuk biru, dan lain sebagainya.
height: 20px; menunjukkan tinggi border sebesar 20 piksel. Bila ingin lebih tinggi lagi, silakan ubah angka 20 dengan angka yang lebih tinggi lagi nilainya.
padding: 5px; menunjukkan jarak antara tulisan dengan tepi border sebesar 5 piksel. Jika ingin diubah, silakan diganti angkanya. Makin besar angkanya makin renggang jaraknya.
text-align: left; menunjukkan perataan tulisan. Left untuk rata kiri, right untuk rata kanan, center untuk rata tengah, justify untuk rata kanan kiri.
width: 200px; menunjukkan lebar border sebesar 200 piksel. Jika ingin lebih lebar lagi, silakan diganti angka 200 dengan angka yang lebih tinggi lagi nilainya.

Border Style Dot

<div style="border: 2px dotted green; height: 20px; padding: 5px; text-align: center; width: 200px;">
Border Style Dot</div>

Maka hasilnya seperti di bawah ini.

Border Style Dot

Selain dua jenis border di atas masih ada lagi beberapa tipe border yang lainnya. Berikut ini beberapa style border yang lainnya.

Border Style Dash

<div style="border: 2px dashed blue; height: 20px; padding: 5px; text-align: right; width: 200px;">
Border Style Dash</div>

Maka hasilnya seperti di bawah ini.

Border Style Dash

Border Style Outset

<div style="border: 2px outset yellow; height: 20px; padding: 5px; text-align: left; width: 200px;">
Border Style Outset</div>

Maka hasilnya seperti di bawah ini.

Border Style Outset

Border Style Inset

<div style="border: 2px inset yellow; height: 20px; padding: 5px; text-align: right; width: 200px;">
Border Style Inset</div>

Maka hasilnya seperti di bawah ini.

Border Style Inset

Border Style Double

<div style="border: 5px double green; height: 20px; padding: 5px; text-align: center; width: 200px;">
Border Style Double</div>

Maka hasilnya seperti di bawah ini.

Border Style Double

Border Style Multiple

<div style="border-color: purple; border-style: dotted dashed solid double; border-width: 6px; height: 20px; padding: 5px; text-align: center; width: 200px;">Border Style Multiple</div>

Maka hasilnya seperti di bawah ini.

Border Style Multiple

Border Style Ridge

<div style="border: 10px ridge red; height: 20px; padding: 5px; text-align: left; width: 200px;">
Border Style Ridge</div>

Maka hasilnya seperti ini :

Border Style Ridge

Wah lengkap yah, postingan Blogger Tutorial kali ini cukup sampai disini, semoga bermanfaat ya sobat :-)

Cara Merubah Blog Nofollow Menjadi Dofollow

kevinservis TIPS BLOG

Tutorial | Cara Merubah Blog Nofollow Menjadi Dofollow, itulah yang akan Blogger Tutorial share. Sebelum membahas Cara Merubah atau Mengganti Blog Nofollow Menjadi Dofollow, sobat wajib membaca dahulu Pengertian Dofollow Dan Nofollow Blog.

Berikut ini adalah Cara Merubah Blog Menjadi Dofollow Blog:

Login ke akun blogger.
Dasbor >> Rancangan >> Edit Html.
Kasih centang pada "Expand Template Widget".
Tekan CTRL + F untuk memudahkan pencarian kode.
Cari kode seperti dibawah ini!.

rel='nofollow'

Maka sobat akan menemukan beberapa kode seperti diatas. Biasanya kode tersebut ada 3.

Silahkan sobat hapus saja kode tersebut!. Misal, sobat menemukan kode seperti dibawah ini!.

<a expr:href='data:backlink.url' rel='nofollow'>

Maka sobat hapus saja kode yang berwarna merah tersebut. Sehingga akan menjadi seperti dibawah ini!.

<a expr:href='data:backlink.url'>

Eiiittsss.. jangan lupa sobat klik "Simpan Template"!.

Nah, itu saja yang saya bahas kali ini. Semoga artikel ini bermanfaat untuk sobat :). Terima kasih dan jangan lupa berkomentar di blog Dofollow ini!. hehe :D

Trik Cara Mengetahui Link Dofollow Dan Nofollow

kevinservis TIPS BLOG

Tutorial | Trik Cara Mengetahui Link Dofollow Dan Nofollow sangatlah mudah dan gampang (eh samaa saja yah)haha. Kali ini Blogger Tutorial share Trik Cara Mengetahui Link Dofollow Dan Nofollow. Bagi sobat yang ingin sekali Cara Mengetahui Link Dofollow Dan Nofollow Pada Sebuah Blog. Kita hanya menginstall add-ons mozilla firefox dengan nama NoDoFollow. add-ons tersebut berfungsi sebagai alat bantu untuk mengetahui link blog DoFollow atau NoFollow. Berikut ini adalah langkah-langkahnya :

Trik Cara Mengetahui Link Dofollow Dan Nofollow Pada Blog, Putupunyablog | Tutorial Blog

Trik Cara Mengetahui Link Dofollow Dan Nofollow Pada Blog, Putupunyablog | Tutorial Blog

Install Add-Ons NoDoFollow Disini.
Klik lanjutkan untuk mendownload.
Setelah itu, klik "Pasang".
Silahkan anda restar firefox anda.
Sekarang silahkan anda buka salah satu blog.
Silahkan sobat klik kanan pada salah satu pemberi komentar pada blog yang ingin sobat ketahui apa dofollow atau nofollow, kemudian klik Nodofollow.
Link pemberi komentar yang berwarna biru adalah blog dofollow sedangkan yang berwarna merah adalah blog nofollow.
Selesai.

Itu saja tips dari Blogger Tutorial kali ini. Semoga artikel kali ini bermanfaat dan berguna untuk sobat semua. Terima kasih atas kesetiaan sobat pada Blogger Tutoral ini. Salam Blogger.

Cara mengganti Posting Lama Menjadi Angka

kevinservis TIPS BLOG

Tutorial | Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Untuk mengubahnya Blogger Tutorial mau share koleksi widgetnya,
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini

Langkah - Langkahnya :

Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
Sobat pilih salah satu dari 3 model diatas (bebas)
Script nya ada dibawah ini, sesuai dengan tandanya (Model1,2,3)
Setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum/diatas kode tersebut

Model 1

.showpageArea {
padding:2px;
margin:0px auto;
text-align: center;
}
.showpageArea a {border: 1px solid #FFFFFF;
color: #FF8000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;
}

.showpageNum a {border: 1px solid #FFFFFF;
color: #FF8000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #fff;
color: #fff;
background-color: #000000;

}

.showpage a:hover {font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #FFFFFF;
color: #FF8000;
background-color: #000000;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;
}

Model 2

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Model 3

.showpageArea {
padding:2px;
margin:0px auto;
text-align: center;
}
.showpageArea a {border: 1px solid #5FB404;
color: #FE2E2E;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #5FB404;
color: #FE2E2E;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #5FB404;
color: #fff;
background-color: #5FB404;

}

.showpage a:hover {font-size:11px;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;
}

setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum/diatas kode tersebut.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>

Kalau sudah silahkan dilihat hasilnya. Taraa, pasti sudah berhasil nih sahabat Blogger Tutorial, hoho, semoga bermanfaat :)

Cikevin

Cara Membuat Tombol Share Keren #2

Cara Mengganti Background Blog - 8 Situs Gratis Penyedia Background Terbaik

Cara Membuat Social Icon Dengan CSS3

Cara Membuat Tombol Share Social Media CSS3

Kumpulan Drop Down Keren Dan Cara Membuatnya

Tutorial | Ini dia drop down yang sobat sobat cari, Blogger Tutorial sudah koleksi banyak nih, bagi sobat yang templatenya belum ada drop downnya, bakal makin bagus bila di ksih salah satu drop down dari Blogger Tutorial ini. hehe :)

Cara membuat Drop down

Menu Horizontal 1

Menu Horizontal 2

Menu Horizontal 3

Menu Horizontal 4

Menu Horizontal 5

Menu Horizontal 6

Menu Horizontal 7

Menu Horizontal 8

Menu Horizontal 9

Menu Horizontal 10

Kumpulan Efek - Efek Blog Terlengkap

Cara Membuat Recent Post Berjalan di Blog

Cara Membuat Border di Postingan Blog

Cara Merubah Blog Nofollow Menjadi Dofollow

Trik Cara Mengetahui Link Dofollow Dan Nofollow

Cara mengganti Posting Lama Menjadi Angka

Anda pengujung ke

Kategori