5 Tipe Widget Popular Posts Keren untuk Blog

Desain Blog - Hallo sahabat Profesor Coreldraw, Photoshop, Adobe Illustrator, Pada Artikel yang anda baca kali ini dengan judul Desain Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Desain Blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : 5 Tipe Widget Popular Posts Keren untuk Blog
link : 5 Tipe Widget Popular Posts Keren untuk Blog

Desain Blog

WIDGET Popular Posts, Posting Terpopuler, atau Artikel Terbanyak dibaca harus diperlakukan "istimewa". Pasalnya, dialah daftar tulisan unggulan di blog kita.

Widget Popular Posts juga berfungsi sebagai navigasi dan internal link yang bagus buat seo dan user friendly. 

Kita bisa memasang dan mengatur widget Popular Posts itu di Layout > Add a Gadget > pilih "Popular Post". 

Jumlahnya bisa kita atur mulai dari 1 s.d. 10 posting. Bisa juga hanya berupa judul, judul dan gambar, atau judul - gambar - ringkasan.

Berikut ini 5 Tipe Widget Popular Posts yang Keren Banget yang di-share blog Arjana Designs. Cara memasangnya sebagai berikut:

LANGKAH PERTAMA

1. Layout --> Add a Gadget --> pilih "Popular Posts"

2. Di seksi "Show" centang (check) 'Image Thumbnail" dan jangan centang (uncheck) "Snippet".

3. Pilih juga jumlahnya, misalnya 5.

4. Save!

LANGKAH KEDUA

Pilih salah satu tipe widget tampilan Popular Posts yang Anda sukai di bawah ini. Copas kodenya dengan cara:

1. Template > Edit HTML

2. Simpan kode yang dipilih di atas kode ]]></b:skin>

3. Save Template!

Bisa juga dengan cara ini:

1. Template --> Customise 
2. Klik "Advanced" --> "Add CSS"
3. Copas salah satu kode dan klik "Apply to Blog".

Kode 5 Tipe Widget Popular Posts Keren untuk Blog

Style 1:

.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;

height:55px; width:55px;

border:1px solid #fff;

padding:3px;

-moz-border-radius: 100px;

-webkit-border-radius: 100px;

border-radius: 100px;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Style 2:

.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;

height:55px; width:55px;

border:1px solid #fff;

padding:3px;

-moz-border-radius: 30px/10px;

-webkit-border-radius: 30px/10px;

border-radius: 30px/10px;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Style 3:

.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;

height:55px; width:55px;

border:1px solid #fff;

padding:3px;

-moz-border-radius: 100px 0px;

-webkit-border-radius: 100px 0px;

border-radius: 100px 0px;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Style 4:

.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;

height:55px; width:55px;

border:1px solid #fff;

padding:3px;

-moz-border-radius: 20px 0px 20px 0px;

-webkit-border-radius: 20px 0px 20px 0px;

border-radius: 20px 0px 20px 0px;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Style 5:

.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;

height:55px; width:55px;

border:1px solid #fff;

padding:3px;

-moz-border-radius: 20px 20px 0px 0px;

-webkit-border-radius: 20px 20px 0px 0px;

border-radius: 20px 20px 0px 0px;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

Gimana? Keren kan? 

Silakan pilih dan pasang widget popular posts keren dan stylish ini di sidebar blog Anda. Tampilannya atraktif dan menarik perhatian pembaca. 

Tampilan Popular Posts yang lebih simple dan bernomor ada di posting sebelumnya: Popular Posts Keren. 

Ada juga yang warna-warni itu lho.... kalau saya pribadi tidak sarankan yang begitu, soalnya bikin "silau" dan "terlalu rame", lagi pula terkesan "childish". Good Luck!

Sumber :
(http://contohblognih.blogspot.com).

WIDGET Popular Posts, Posting Terpopuler, atau Artikel Terbanyak dibaca harus diperlakukan "istimewa". Pasalnya, dialah daftar tulisan unggulan di blog kita.

Widget Popular Posts juga berfungsi sebagai navigasi dan internal link yang bagus buat seo dan user friendly. 

Kita bisa memasang dan mengatur widget Popular Posts itu di Layout > Add a Gadget > pilih "Popular Post". 

Jumlahnya bisa kita atur mulai dari 1 s.d. 10 posting. Bisa juga hanya berupa judul, judul dan gambar, atau judul - gambar - ringkasan.

Berikut ini 5 Tipe Widget Popular Posts yang Keren Banget yang di-share blog Arjana Designs. Cara memasangnya sebagai berikut:

LANGKAH PERTAMA

1. Layout --> Add a Gadget --> pilih "Popular Posts"

2. Di seksi "Show" centang (check) 'Image Thumbnail" dan jangan centang (uncheck) "Snippet".

3. Pilih juga jumlahnya, misalnya 5.

4. Save!

LANGKAH KEDUA

Pilih salah satu tipe widget tampilan Popular Posts yang Anda sukai di bawah ini. Copas kodenya dengan cara:

1. Template > Edit HTML

2. Simpan kode yang dipilih di atas kode ]]></b:skin>

3. Save Template!

Bisa juga dengan cara ini:

1. Template --> Customise 
2. Klik "Advanced" --> "Add CSS"
3. Copas salah satu kode dan klik "Apply to Blog".

Kode 5 Tipe Widget Popular Posts Keren untuk Blog

Style 1:

.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;

height:55px; width:55px;

border:1px solid #fff;

padding:3px;

-moz-border-radius: 100px;

-webkit-border-radius: 100px;

border-radius: 100px;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Style 2:

.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;

height:55px; width:55px;

border:1px solid #fff;

padding:3px;

-moz-border-radius: 30px/10px;

-webkit-border-radius: 30px/10px;

border-radius: 30px/10px;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Style 3:

.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;

height:55px; width:55px;

border:1px solid #fff;

padding:3px;

-moz-border-radius: 100px 0px;

-webkit-border-radius: 100px 0px;

border-radius: 100px 0px;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Style 4:

.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;

height:55px; width:55px;

border:1px solid #fff;

padding:3px;

-moz-border-radius: 20px 0px 20px 0px;

-webkit-border-radius: 20px 0px 20px 0px;

border-radius: 20px 0px 20px 0px;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Style 5:

.PopularPosts ul li a {font: 14px verdana; color: black;}

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;}

.PopularPosts .item-title {padding-top:20px;}

.PopularPosts .item-thumbnail img

{background:#fff;

height:55px; width:55px;

border:1px solid #fff;

padding:3px;

-moz-border-radius: 20px 20px 0px 0px;

-webkit-border-radius: 20px 20px 0px 0px;

border-radius: 20px 20px 0px 0px;

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  

-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

Gimana? Keren kan? 

Silakan pilih dan pasang widget popular posts keren dan stylish ini di sidebar blog Anda. Tampilannya atraktif dan menarik perhatian pembaca. 

Tampilan Popular Posts yang lebih simple dan bernomor ada di posting sebelumnya: Popular Posts Keren. 

Ada juga yang warna-warni itu lho.... kalau saya pribadi tidak sarankan yang begitu, soalnya bikin "silau" dan "terlalu rame", lagi pula terkesan "childish". Good Luck!

Sumber :
(http://contohblognih.blogspot.com).

Featured Post Image Slider untuk Blog - Manual dan Otomatis

Desain Blog - Hallo sahabat Profesor Coreldraw, Photoshop, Adobe Illustrator, Pada Artikel yang anda baca kali ini dengan judul Desain Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Desain Blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Featured Post Image Slider untuk Blog - Manual dan Otomatis
link : Featured Post Image Slider untuk Blog - Manual dan Otomatis

Desain Blog

Cara Membuat atau Memasang Featured Posts Image (Content Slider Carousel) untuk di Halaman Depan Blog Blogspot.

MEMASANG, menampilkan, atau membuat Featured Content Post Image Slider (Carousel) untuk blog tidak disarankan oleh sebagian pakar SEO dan Web Usability.

Pasalnya, selain membuat berat loading blog (karena ada javascript dan gambar), posts slider juga tidak user friendly.

Slider akan membuat "silau" mata pengunjung. Slider juga jarang diklik. Sejumlah studi dan survei tentang slider di web menunjukkan, slider yang diklik pengunjung hanya di bawah 1%. Itu pun yang diklik hanya gambar pertama.

Namun, toko online atau blog foto kayaknya cocok pake Featured Slider, asalkan diatur slide-nya jangan terlalu cepat dan lebih baik di-off-kan otomatis slidenya.

Cara Membuat Featured Post Slider Manual

Tutorial Featured Post Slider Manual sangat banyak bahkan kebanyakan. Salah satunya ada di Windows Reloded. Sebanyak 17+ lainnya ada di Blogspot Tutorials.

Yang dimaksud "manual" adalah kita harus memasukkan link gambar, link posting, judul, dan deskirpnya satu per satu di widget Featured Content Slider ini. Ribet bener! Tapi gampang banget pasangnya. Silakan cek cara memasangnya ada di kedua link tadi.

Cara Memaang Featured Post Slider Otomatis

Yang dimaksud otomatis adalah kita gak perlu pasang satu per satu gambar, link, dan judul di widget ini. Gambar plus link dan judul akan muncul otomatis, bisa posting terbaru, bisa juga per label (kategori tertentu).

Yang otomatis sudah di-share dari maskolis. Featured post di halaman depan atau ala New Johy Wuss juga sudah. Berikut ini ada dua lagi sebagai tambahan dan alternatif:

Featured Image Slider Otomatis #1
Yang ini dari Help Blogger. Tampilannya keren banget, beda dengan yang biasa. Silakan klik link tersebut untuk detailnya.

Featured Image Slider Otomatis #2
Yang ini dari DTE.  Caranya gampang banget.

1. Layout → Add Widget → HTML/JavaScript
2. Copy & Paste kode berikut ini:

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<style type="text/css">
.slider-rotator {
  width:430px;
  height:240px;
  padding:0 0;
  background-color:white;
  font:italic normal 13px/1.4 Arial,Sans-serif;
  color:white;
  border:1px solid black;
}
.slider-rotator .slider-item {
  background-color:white;
  height:240px; /* Same with `.slider-rotator` height */
  padding:0 0;
}
.slider-rotator h4 {margin-top:0;color:#ff6}
.slider-rotator p {margin:2px 0 0}

/* Slider details as caption */
.slider-rotator .detail-wrapper {
  position:absolute;
  top:auto;
  right:0;
  bottom:0;
  left:0;
  background-color:black;
  background-color:rgba(0,0,0,.9);
  padding:.5em 1em;
  z-index:4;
}
.slider-rotator-nav {
  text-align: center;
  background: #777;
}
</style>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
    makeSlider({
    url: "http://graficom-art.blogspot.com", // Your blog URL
    thumbWidth: 430 // Thumbnail width in pixels (same with slideshow width)
});
</script>

3. Ganti alamat blog warna merah dengan alamat blog Anda.
4. Save!

Itu dia ragam cara membuat Featured Post Image Slider untuk Blog, baik versi manual maupun otomatis.

Sumber : (http://contohblognih.blogspot.com).*

Cara Membuat atau Memasang Featured Posts Image (Content Slider Carousel) untuk di Halaman Depan Blog Blogspot.

MEMASANG, menampilkan, atau membuat Featured Content Post Image Slider (Carousel) untuk blog tidak disarankan oleh sebagian pakar SEO dan Web Usability.

Pasalnya, selain membuat berat loading blog (karena ada javascript dan gambar), posts slider juga tidak user friendly.

Slider akan membuat "silau" mata pengunjung. Slider juga jarang diklik. Sejumlah studi dan survei tentang slider di web menunjukkan, slider yang diklik pengunjung hanya di bawah 1%. Itu pun yang diklik hanya gambar pertama.

Namun, toko online atau blog foto kayaknya cocok pake Featured Slider, asalkan diatur slide-nya jangan terlalu cepat dan lebih baik di-off-kan otomatis slidenya.

Cara Membuat Featured Post Slider Manual

Tutorial Featured Post Slider Manual sangat banyak bahkan kebanyakan. Salah satunya ada di Windows Reloded. Sebanyak 17+ lainnya ada di Blogspot Tutorials.

Yang dimaksud "manual" adalah kita harus memasukkan link gambar, link posting, judul, dan deskirpnya satu per satu di widget Featured Content Slider ini. Ribet bener! Tapi gampang banget pasangnya. Silakan cek cara memasangnya ada di kedua link tadi.

Cara Memaang Featured Post Slider Otomatis

Yang dimaksud otomatis adalah kita gak perlu pasang satu per satu gambar, link, dan judul di widget ini. Gambar plus link dan judul akan muncul otomatis, bisa posting terbaru, bisa juga per label (kategori tertentu).

Yang otomatis sudah di-share dari maskolis. Featured post di halaman depan atau ala New Johy Wuss juga sudah. Berikut ini ada dua lagi sebagai tambahan dan alternatif:

Featured Image Slider Otomatis #1
Yang ini dari Help Blogger. Tampilannya keren banget, beda dengan yang biasa. Silakan klik link tersebut untuk detailnya.

Featured Image Slider Otomatis #2
Yang ini dari DTE.  Caranya gampang banget.

1. Layout → Add Widget → HTML/JavaScript
2. Copy & Paste kode berikut ini:

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<style type="text/css">
.slider-rotator {
  width:430px;
  height:240px;
  padding:0 0;
  background-color:white;
  font:italic normal 13px/1.4 Arial,Sans-serif;
  color:white;
  border:1px solid black;
}
.slider-rotator .slider-item {
  background-color:white;
  height:240px; /* Same with `.slider-rotator` height */
  padding:0 0;
}
.slider-rotator h4 {margin-top:0;color:#ff6}
.slider-rotator p {margin:2px 0 0}

/* Slider details as caption */
.slider-rotator .detail-wrapper {
  position:absolute;
  top:auto;
  right:0;
  bottom:0;
  left:0;
  background-color:black;
  background-color:rgba(0,0,0,.9);
  padding:.5em 1em;
  z-index:4;
}
.slider-rotator-nav {
  text-align: center;
  background: #777;
}
</style>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
    makeSlider({
    url: "http://graficom-art.blogspot.com", // Your blog URL
    thumbWidth: 430 // Thumbnail width in pixels (same with slideshow width)
});
</script>

3. Ganti alamat blog warna merah dengan alamat blog Anda.
4. Save!

Itu dia ragam cara membuat Featured Post Image Slider untuk Blog, baik versi manual maupun otomatis.

Sumber : (http://contohblognih.blogspot.com).*