Cara Membuat Widget Recent Posts Responsive di Blogger

03:07
BLOGGINGPASURUAN - widget RECENT POST di blog adalah penting untuk memberitahukan pengunjung atau pembaca bahwa blog Anda telah diperbarui bahkan ketika pembaca/pengunjung membaca artikel lama Anda. RECENT POST widget di sidebar blog Anda adalah salah satu cara terbaik untuk menarik pengunjung. Meskipun Blogger menyediakan widget posting terbaru secara default, namun dengan desain yang mungkin terlihat kurang menarik dan cantik. WIDGET RECENT POST kali Ini dirancang dengan material yang sederhana namun indah sekali dan berharap widget ini dapat meningkatkan lalu lintas blog Anda.


Mengapa Anda Harus Menambahkan Widget Recent Posts di Blog Anda


Seperti yang saya sebutkan, menampilkan posting widget baru pada sidebar blog Anda adalah cara terbaik untuk memberitahu pengunjung Anda bahwa posting blog telah diperbarui dengan konten ter-update dan baru. Sehingga dapat membantu menjaga pengunjung terlibat di blog Anda atau lebih betah berlama-lama di Blog.

Dalam pembuatan Widget ini Anda tidak perlu menambahkan CSS atau kode jQuery ke dalam template Blogger yang berarti beban widget ringan dan lebih cepat . Screenshot gambar widget ( seperti yang ditunjukkan di bawah ini ).


Cara Membuat Widget Recent Posts Responsive di Blogger

Catatan:Widget RECENT POST ini menyesuaikan dimensi secara otomatis sesuai dengan tempat di mana widget diletakkan. Tapi akan lebih baik jika memiliki ukuran setidaknya 300px jika Anda berfokus meletakkanya pada sidebar. Untuk membuktikannya, jika Anda memiliki blog demo, cobalah untuk menambahkan widget recent posts ini di sidebar blog Anda atau footer untuk melihat dimensi otomatis nya. Dan Anda dapat dengan mudah menyesuaikan lebar sidebar Blogger Anda jika itu di bawah 300px dengan meng-edit kode scriptnya ( manual ). Ok..! langsung saja



Cara Menambahkan Widget Recent Posts di Blogger


Langkah 1: Buka Blogger Dashboard  >> Tata Letak
Langkah 2: Klik pada link Add Gadget dari Layout
Langkah 3: Pilih + HTML / JavaScript (Lihat di bawah)

Cara Membuat Widget Recent Posts Responsive di Blogger


Langkah 4: Salin & paste kode di bawah ini di dalamnya


HTML - BLOGGINGPASURUAN

<div class="recentpoststyle">
<script src="http://www.geocities.ws/usmankurniawan/bloggingpasuruan_recentpost.js"></script>
<script>
var posts_no = 3;var posts_date = true;var post_summary = true;var summary_chars = 90;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script>
<style type="text/css">
.recentpoststyle {
    counter-reset: countposts;
    list-style-type: none;
}
.recentpoststyle a {
    text-decoration: none;
    color: #0080ff;
}
.recentpoststyle a:hover {
    color: #db4437;
}
.recentpoststyle li:before {
    content: counter(countposts,decimal);
    counter-increment: countposts;
    float: left;
    z-index: 2;
    position: relative;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    background: #666;
    margin: 10px 5px 0px -4px;
    padding: 0px 10px;
    border-radius: 100%;
}
li.recent-post-title {
    padding: 7px 0px;
}
.recent-post-title {
    font-family: "book antiqua";
}
.recent-post-title a {
    color: #666;
    font-size: 14px;
    text-decoration: none;
    padding: 2px;
    font-weight: bold;
}
.post-date {
    padding: 5px 2px 5px 30px;
    font-size: 11px;
    color: #6d6e72;
    margin-bottom: 5px;
}
.recent-post-summ {
    border-left: 1px solid #69B7E2;
    color: #777;
    padding: 0px 5px 0px 20px;
    margin-left: 11px;
    font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;
    font-size: 15px;
}
</style></div>


Langkah 5: Sesuaikan widget Anda seperti yang Anda inginkan
Langkah 6: Klik tombol Save dan selesai……!


Dasar Pedoman & Kustomisasi


Seperti yang Anda lihat, saya telah memperindah kode ini untuk memudahkan pemahaman Anda. Ganti var posts_no = 3dengan jumlah posting yang Anda ingin tampilan pada widget ini. Jika Anda lebih suka warna melayang link lain, ganti # db4437 dengan Anda kode warna kustom. Saya sarankan Anda tidak perlu mengubah padding dan ukuran font karena itu otomatis untuk setiap template Blogger.

Saya pakai "book antique" font pada judul posting-nya, dan Anda akan dapat menggantinya dengan font yang Anda inginkan. Selain itu saya telah menyoroti bagian kustomisasi dasar dalam berbagai warna.

Jika Anda ada masalah dengan tutorial diatas , silahkan hubungi saya melalui komentar atau jika Anda tertarik dengan POSTINGAN ini mohon bantuannya untuk sharing di sosial media yang Anda miliki..

Terima Kasih… semoga bermanfaat !

Cara Membuat Kotak Script HTML dan CSS di Posting Blog

02:44
Bloggingpasuruan – Kali saya akan membagikan bagaimana Cara Membuat Kotak Script HTML dan CSS di Posting Blog terlihat profesional. Kebanyakan kotak kode script HTML atau CSS di buat normal atau polos dan ada sedikit modifikasi warna. Namun kali ini saya akan bagikan box dengan modifikasi seperti notepad atau buku folio bergaris. Jadi dari sisi tampilan memang  jauh lebih keren dan profesional. 


Jika Anda tertaik memasangnya di Blog Anda, silahkan ikuti tutorialnya dibawah ini, untuk PREVIEW-nya silahkan lihat langsung contohnya milik saya…

Cara Membuat Kotak Script HTML dan CSS di Posting Blog

1. Silahkan masuk ke akun Blogger Anda
2. Pada Dashboard >> Templete >> Edit HTML
3. Cari kode berikut ini ]]></b:skin>
4. Letakkan kode dibawah ini sebelum/di atas kode ]]></b:skin>

CSS - Bloggingpasuruan

body {
    font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
}
.notepad, .notepad:before, .notepad:after {
    background-color: white;
    background-image: -webkit-linear-gradient(#f6abca 1px, transparent 1px), -webkit-linear-gradient(#f6abca 1px, transparent 1px), -webkit-linear-
gradient(#e8e8e8 1px, transparent 1px);
    background-image: -moz-linear-gradient(#f6abca 1px, transparent 1px), -moz-linear-gradient(#f6abca 1px, transparent 1px), -moz-linear-gradient
(#e8e8e8 1px, transparent 1px);
    background-image: -o-linear-gradient(#f6abca 1px, transparent 1px), -o-linear-gradient(#f6abca 1px, transparent 1px), -o-linear-gradient(#e8e8e8
1px, transparent 1px);
    background-image: linear-gradient(#f6abca 1px, transparent 1px), linear-gradient(#f6abca 1px, transparent 1px), linear-gradient(#e8e8e8 1px,
transparent 1px);
    background-size: 1px 1px, 1px 1px, 23px 23px;
    background-repeat: repeat-y, repeat-y, repeat;
    background-position: 22px 0, 24px 0, 0 50px;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 4px rgba(0, 0, 0, 0.5);
}
.notepad {
    position: relative;
    margin: 5px auto;
    padding: 0 23px 14px 35px;
    width: 300px;
    line-height: 23px;
    font-size: 11px;
    color: #666;
}
.notepad p, .notepad blockquote {
    margin-bottom: 23px;
}
.notepad :last-child {
    margin-bottom: 0;
}
.notepad:before, .notepad:after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 100%;
    left: 3px;
    right: 3px;
    margin-top: -2px;
    height: 4px;
    background-size: 1px 1px, 1px 1px, 0 0;
}
.notepad:before {
    z-index: -2;
    left: 6px;
    right: 6px;
    height: 6px;
    background-color: #eee;
}
.notepad-heading {
    position: relative;
    margin: 0 -23px 14px -35px;
    height: 38px;
    background: #14466a;
    border-radius: 2px 2px 0 0;
    background-image: -webkit-linear-gradient(top, #226797, #0c3452);
    background-image: -moz-linear-gradient(top, #226797, #0c3452);
    background-image: -o-linear-gradient(top, #226797, #0c3452);
    background-image: linear-gradient(to bottom, #226797, #0c3452);
    -webkit-box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;
    box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;
}
.notepad-heading > h2 {
    line-height: 36px;
    font-size: 14px;
    color: white;
    text-align: center;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.7);
}
.notepad-heading:before, .notepad-heading:after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 1px;
    right: 1px;
    height: 0;
    border-top: 1px dashed #617c90;
    border-color: rgba(255, 255, 255, 0.35);
}
.notepad-heading:after {
    bottom: 3px;
    border-color: #071c2c;
    border-color: rgba(0, 0, 0, 0.5);
}


5. Save template

Penerapan pada posting Blog

1. Letakkan kode berikut dibawah ini di dalam posting Blog Sobat, cara meletakkannya pada posisi HTML ( bukan compose ! )


HTML - Bloggingpasuruan

<div class="notepad">
<div class="notepad-heading">
<h2>HTML atau CSS - Bloggingpasuruan</h2>
</div>
<blockquote>letakkan teks disini</blockquote>


2. Ganti  HTML atau CSS – Bloggingpasuruan “ tag judul dengan judul  Anda.

3.Selesai…..

Jika Anda menyukai posting, jangan lupa untuk berbagi dengan rekan,teman,sahabat Anda yang lain. Jika Anda memiliki pertanyaan mengenai Cara Membuat Kotak Script HTML dan CSS di Posting Blog. Jangan ragu untuk mengajukan pertanyaan….

Semoga bermanfaat..

Cara Cepat dan Mudah Impor Blogger ke WordPress

04:18
Cara Cepat dan Mudah  Impor Blogger ke WordPress

Info Blog News - Blogspot adalah platform yang baik untuk memulai blogging ( pemula ) tetapi ketika Anda ingin serius bidang blogging, WordPress adalah pilihan terbaik untuk platform blogging Anda. Salah satu alasan yang paling umum pengguna blogspot adalah kita mungkin terjebak karena tidak tahu bagaimana cara pindah dari Blogspot ke WordPress.

Sekarang jika Anda memiliki blog Blogspot baru dengan beberapa posting dengan lalu lintas harian kurang dari 25-30, Anda tidak perlu khawatir tentang lalu lintasnya  asalkan  semua ketentuan yang pernah anda lakukan di blogspot Anda juga lakukan di Wordpress nantinya. Anda dapat mengimpor posting blog Blogspot Anda ke WordPress, kemudian menghapus blog Blogspot Anda dan mulai blogging pada platform WordPress.

Panduan sederhana ini akan membantu Anda dalam meng-impor semua Posts, komentar dan pengguna dari blog Blogger ke WordPress. Banyak pengguna yang berpindah dari Blogspot ke WordPress. Proses migrasi posting, komentar dan user cukup mudah. WordPress menawarkan alat migrasi Blogger inbuilt untuk mengimpor segala sesuatunya ke WordPress dari BlogSpot. Dengan menggunakan ekspor blogger dan fitur impor WordPress, Anda dapat dengan mudah mengimpor posting Anda dari Blogspot ke WordPress.


Panduan untuk Impor Blogger ke WordPress:


Jadi, saya menganggap Anda sudah, login ke akun blog WordPress barudan juga login ke akun Blogger Anda. Satu hal yang perlu dilakukan, jika Anda menggunakan Blogspot custom domain, pastikan Anda kembali ke default Blogspot domain. Anda dapat menambahkan custom domain kembali demi lewat link juice dan biarkan Google menangani 301 redirection-nya. ( Memperbaiki permalink pada topik yang berbeda). Setelah Anda berada di WordPress Dashboard, klik Tools >> Impor dan klik pada Blogger. Ini akan meminta Anda untuk menginstal plugin yang akan mengimpor posting, komentar dan pengguna dari blog Blogspot ke WordPress.

Cara Cepat dan Mudah  Impor Blogger ke WordPress

Cara Cepat dan Mudah  Impor Blogger ke WordPress

Jadi setelah Anda menginstal, klik Activate and run importer

Cara Cepat dan Mudah  Impor Blogger ke WordPress


Pada layar berikutnya klik pada Allow access, ini akan memberikan akses WordPress ke akun Blogger Anda dan di halaman berikutnya akan menampilkan semua blog yang Anda miliki di akun Blogger Anda.

Cara Cepat dan Mudah  Impor Blogger ke WordPress


Pilih blog Blogspot yang Anda ingin pindahkan ke WordPress. Klik Imporblog yang ingin Anda impor dan ini akan memulai proses mengimpor posting, komentar, gambar, dan link. ( Ini mungkin memakan waktu lama tergantung pada ukuran blog Blogspot Anda )

Cara Cepat dan Mudah  Impor Blogger ke WordPress


Proses ini sangat sederhana pada fitur impor WordPress. Setelah semua posting blog Anda dan komentar sudah bermigrasi ( pindah ), Anda dapat mengaitkan pengguna pada akun Wordpress. Saya juga menyarankan Anda, pergi ke Posting >> Kategori dan klik Kategoriuntuk menandai converter dan mengkonversi semua kategori ke tag. Ketika label Blogger diimpor dan digunakan sebagai kategori WordPress, Anda lebih baik menjaga beberapa kategori untuk struktur yang lebih baik pada tag untuk label.

Dalam beberapa menit, blog WordPress baru Anda akan selesai dan siap dengan semua posting dan komentar yang sudah ter-migrasi dari Blogspot. Namun kadang-kadang, proses import bisa terjebak atau tidak semua posting atau komentar ter-import, saya sarankan Anda untuk menggunakan plugin Wp suicide dan membuang semua posting dan komentar dari blog WordPress dan re-authenticate ( mengulang )  kembali proses impor.
Pada kejadian di atas adalah sangat jarang terjadi dalam proses migrasi Blogsspot ke layanan migrasi WordPress. Padahal, jika Anda sudah familiar dengan dasar pengetahuan dari Blogspot dan WordPress, mengimpor Blogger ke WordPress itu bukan menjadi proses yang sulit bagi Anda.

Jika Anda menyukai posting, jangan lupa untuk berbagi dengan rekan,teman,sahabat Anda yang lain. Jika Anda memiliki pertanyaan mengenai importing dari blogspot ke WordPress. Jangan ragu untuk mengajukan pertanyaan.

Semoga bermanfaat…