AGATHA BELAJAR BLOGGING

Showing posts with label Blog Design. Show all posts

3 "Gaya Posting Summaries dan Thumbnail" Blogger.

Unknown 16 July, 2014 9 komentar

Banyak diantara kita para newbie blogger yang bertanya tentang bagaimana membuat posisi judul dan ringkasan posting Blogger berada di sebelah thumbnail, atau bagaimana memposisikan thumbnail di atas judul dan ringkasan posting. Di sini saya membagi pencarian, dan pembelajaran yang saya peroleh di HELP BLOGGER (http://helplogger.blogspot.com/2014/06/stylish-post-summaries-thumbnails-for-blogger-no-javascript.html), pada tutorial tersebut dibuat posting khusus kode XML yang dirancang sefleksibel mungkin untuk tujuan kustomisasi di masa depan. Kode tersebut sudah termasuk potongan posting / ringkasan, jadi jika kita telah menerapkan modifikasi ini, maka kita tidak perlu repot-repot menerapkan "auto read-more". Tapi kita perlu hati-hati sebelum menambahkan/merubah/memodifikasi, karena hal ini akan mengubah struktur keseluruhan pos, ini berarti bahwa beberapa kustomisasi lama kita seperti widget ditambahkan sebelumnya - posting terkait, tombol media sosial atau kustomisasi lainnya - akan hilang. Oleh karena itu, kita disarankan untuk menyimpan salinan/Back Up template kita sebelum melakukan modifikasi ini. Mari kita lanjutkan untuk menerapkan kode. Hanya ada beberapa langkah sederhana yang perlu kita ikuti ...

Edit template XML:

Langkah - 1 . Lihat Blogger dashboard -> Template -> Edit HTML,

Langkah - 2 . Klik pada area kode HTML, lalu CTRL + F untuk membuka tools "search box"

Langkah - 3 . Copy and paste kode HTML berikut ini di dalam "search box" lalu enter,

<b:includable id='pos t' var='pos t'>

Langkah - 4 . Setelah kita temukan kode " <b:includable id='post' var='post'>..</b:includable> ", Lalu ganti kode tersebut dengan kode HTML dibawah ini :
Kode HTML-nya :

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

<h3 class='blogger-post-title'>
        <b:if cond='data:post.title'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
        <b:else/>
          [Untitled]
        </b:if>
      </h3>
<div class='blogger-post-body'>
        <b:if cond='data:blog.pageType == "item"'>
          <data:post.body/>
        <b:else/>
          <b:if cond='data:blog.pageType == "static_page"'>
            <data:post.body/>
          <b:else/>
            <b:if cond='data:post.snippet'>
              <data:post.snippet/>
            <b:else/>
              No content.
            </b:if>
          </b:if>
        </b:if>
      </div>
<footer class='blogger-post-footer'>
        <div class='blogger-post-footer-line blogger-post-footer-line-1'>
          <span class='blogger-post-author vcard'>
            <b:if cond='data:top.showAuthor'>
              <data:top.authorLabel/> <span class='fn'>
              <b:if cond='data:post.authorProfileUrl'>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='Author Profile'><data:post.author/></a>
              <b:else/>
                <span class='g-profile'><data:post.author/></span>
              </b:if>
              </span>
            </b:if>
          </span> <span class='blogger-post-timestamp'>
          <b:if cond='data:top.showTimestamp'>
            <data:top.timestampLabel/> <a class='blogger-post-timestamp-link' expr:href='data:post.url' rel='bookmark' title='Permanent Link'><time class='blogger-post-published published' expr:datetime='data:post.timestampISO8601'><data:post.timestamp/></time></a>
          </b:if>
          </span> <span class='blogger-post-comment-link'>
          <b:if cond='data:blog.pageType != "item"'>
            <b:if cond='data:blog.pageType != "static_page"'>
              <b:if cond='data:post.allowComments'>
                <a expr:href='data:post.url + "#comments"'><data:post.commentLabelFull/></a>
              </b:if>
            </b:if>
          </b:if>
          </span>
        </div>
<div class='blogger-post-footer-line blogger-post-footer-line-2'>
          <span class='blogger-post-labels'>
            <b:if cond='data:post.labels'>
              <data:postLabelsLabel/> <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 != "true"'>,</b:if>
              </b:loop>
            </b:if>
        <b:include data='post' name='postQuickEdit'/>
          </span>
        </div>
</footer> 
    </div>
</article>
</b:includable>

Langkah selanjutnya adalah menambahkan kode CSS, berikut ini ada 3 pilihan gaya kode CSS yang bisa kita terapkan,
GAYA - 1, Post Summaries dengan Thumbnails Lingkaran di Kiri :

Kode CSS-nya :

.blogger-post {padding: 5px 0px 0px; background: #F6F6F6; border-right: 1px dashed #E3E3E3;height:150px; margin:0 0 20px; overflow:hidden; *zoom:1;}
.blogger-post:after {  content:" "; display:block;clear:both;}
.blogger-post-title { font:normal bold 20px/1.2 Arial,Sans-Serif; margin:0 0 10px;padding:0;}
.blogger-post-title a{color: #888;}
.blogger-post-thumbnail-area {border-radius: 330px;-webkit-border-radius: 330px; -moz-border-radius: 330px;  border: 10px solid #E5E5E5;margin-left: 20px;width:120px;height:120px; background-color:#2D3957;float:left;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6PhiClkewuN-_RPCqLJbcjZoVp-n25ReF28v_yOlaPPRK_dFinLyJN-jHt73Hxu5n8i6NZS_tqX4i832gFrZHTMbfsvYq47Qq4oKv7rai4szXPF8HZ9vIn6Q7PE99niFtTSanYMbrmqFm/s1600/no-image-available.png'); background-repeat: no-repeat; background-size: 100%;}
.blogger-post-body-area:before {border-bottom:40px solid transparent;border-right:40px solid #E4E4E4;border-top:40px solid transparent; width:0;height:0; content:"";margin: 10px 0px 20px -60px;display:inline-block;float: left;}
.blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static;}
.blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;border-left: 1px solid #E3E3E3;}
.blogger-post-footer {margin:10px 0 0;padding:10px 0 0;border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif;text-transform:uppercase;color:#999;}
.blogger-post-footer a {color: #888;}
.blogger-post-item,
.blogger-post-static_page {height:auto}
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area {margin:0;padding:20px;font-size:13px;}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px}
.icon-action {width: 10px;height:10px;}

GAYA - 2, Thumbnails dengan judul dan Post Summary di sisi kanan :

Kode CSS-nya :

.blogger-post {background: #F6F6F6;border-right: 1px dashed #E3E3E3;height:200px; margin:0 0 20px; overflow:hidden; *zoom:1;}
.blogger-post:after { content:" "; display:block; clear:both;}
.blogger-post-title {font:normal bold 20px/1.2 Arial,Sans-Serif;margin:0 0 10px; padding:0;}
.blogger-post-title a{color: #888;}
.blogger-post-thumbnail-area {width:200px; height:200px;background-color:#2D3957;float:left;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6PhiClkewuN-_RPCqLJbcjZoVp-n25ReF28v_yOlaPPRK_dFinLyJN-jHt73Hxu5n8i6NZS_tqX4i832gFrZHTMbfsvYq47Qq4oKv7rai4szXPF8HZ9vIn6Q7PE99niFtTSanYMbrmqFm/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;}
.blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static;}
.blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;}
.blogger-post-footer {margin:10px 0 0;padding:10px 0 0; border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase; color:#999;}
.blogger-post-footer a {color: #888;}
.blogger-post-item,
.blogger-post-static_page {height:auto}
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area { margin:0; padding:20px; font-size:13px;}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px}
.icon-action {width: 10px;height:10px;}

GAYA - 3, Blogger Posts Bersisian/kolom dengan judul dan Summaries dibawah Thumbnail (Tata Letak Bergaya Surat Kabar/Koran) :

Kode CSS-nya:

#blog-pager {clear: both;}
.blogger-post {background: #F6F6F6;  border-right: 1px dashed #E3E3E3;  border-left: 1px dashed #E3E3E3; height: 405px; width:200px;  margin:0 20px 20px 0;  padding: 10px 10px 0px;  overflow:hidden;  float: left; display:inline-block; *zoom:1;}
.blogger-post:after {  content:" ";  display:block;  clear:both;}
.blogger-post-title {  font:normal bold 16px/1.2 Arial,Sans-Serif;  margin:0 0 10px;  padding:0;}
.blogger-post-title a{color: #777;}
.blogger-post-thumbnail-area a img{  width:200px;  height:200px;  background-color:#fff;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6PhiClkewuN-_RPCqLJbcjZoVp-n25ReF28v_yOlaPPRK_dFinLyJN-jHt73Hxu5n8i6NZS_tqX4i832gFrZHTMbfsvYq47Qq4oKv7rai4szXPF8HZ9vIn6Q7PE99niFtTSanYMbrmqFm/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;}
.blogger-post-thumbnail { display:block; width:100%; height:100%; max-width:none;max-height:none;min-width:0; min-height:0; margin:0; padding:0; border:none; outline:none;position:static;}
.blogger-post-body-area { padding:10px 20px 20px; margin:10px 0 0; font-size:11px;}
.blogger-post-footer {background: #E9E9E9;  margin:10px -20px 0; padding:20px;  border-top:1px dotted #ddd; font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase;  color:#555;}
.blogger-post-footer a{color: #888;}
.blogger-post-item,
.blogger-post-static_page {width:auto;}
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area {  margin:0;  padding:20px;  font-size:13px;}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px;}
.icon-action {width: 10px;height:10px;}

Note:

Untuk membuat thumbnail lebih besar, mengubah nilai-nilai merah (harap dicatat bahwa beberapa nilai adalah untuk posting tinggi / lebar yang harus sama dengan ukuran thumbnail - Kecuali untuk contoh pertama di mana Anda memiliki untuk menambahkan 30px lain (150px - tinggi posting));

Untuk mengubah gambar ketika tidak ada thumbnail, ganti url gambar dengan alamat gambar kita sendiri (contohnya :url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6PhiClkewuN-_RPCqLJbcjZoVp-n25ReF28v_yOlaPPRK_dFinLyJN-jHt73Hxu5n8i6NZS_tqX4i832gFrZHTMbfsvYq47Qq4oKv7rai4szXPF8HZ9vIn6Q7PE99niFtTSanYMbrmqFm/s1600/no-image-available.png);

Untuk mengubah latar belakang, mengubah nilai dalam violet: #F6F6F6 - untuk posting latar belakang dan #E9E9E9 - untuk tulisan pada footer.

Langkah - 5 . Tambahkan gaya kode CSS yang kita pilih, persis diatas tag kode HTM "]]></b:s k in>"

Merubah/Memodifikasi Resolusi dari gambar Thumbnails.

Sekarang kita akan membuat/memperbaiki resolusi thumbnail standard (Standard pada contoh diatas s72-c resolution), yang membuat thumbnails terlihat "BLUR"/kurang jelas. Untuk itu cari kode HTML berikut ini '<b:widget id='Blog1' :

Tepat di bawah '<b:widget id ='Blog1', ada tag kode HTML berikut ini '</ b: section>' copy dan paste script HTML ini dan letakkan tepat di bawahnya (lihat screenshot) :

Kode Script HTML-nya:

Perhatikan bahwa ANGKA 210 ("changeThumbSize("Blog1",210);" ) adalah resolusi gambar baru yang ingin kita terapkan dan itu tergantung pada ukuran masing-masing thumbnail yang termasuk dalam kode CSS di atas. Jika kita meningkatkan ukuran thumbnail, kita juga akan perlu memodifikasi nilai ini juga.

Langkah - 6. Simpan perubahan dengan mengklik tombol Save Template.
Metode yang digunakan di sini telah dicoba dan diuji untuk memodifikasi Template Blogger Simple. Dan untuk memodifikasi template lainnya pada Blogger template kita mungkin perlu untuk membuat lebih banyak penyesuaian dan mungkin menyesuaikan lebar dari blog kita untuk mengakomodasi tata letak gaya surat kabar/koran (gaya 3).

Amati, Tiru, dan Modifikasi - ATM "Belajar Berbagi"

Label: Blog Design

4 Gaya Popular Post Widget Blog

Unknown 14 July, 2014 2 komentar

Pada Blogger kita bisa dengan mudah menambahkan widget "Popular Posts", kita hanya perlu menambahkan widget tersebut melalui dashboard blogger -> tata letak/layout -> tambahkan/add gadget -- selesai, maka widget popular posts akan plugin pada blog kita, dan kita bisa menempatkannya dimanapun pada ruang blog kita.

Widget ini menunjukkan informasi posting/artikel mana saja yang paling banyak dikunjungi/baca oleh pengunjung blog kita, dan pada widget ini pula kita bisa memiliki option 4 kombinasi tampilan popular posts :

only the title of the post/hanya judul postingnya saja,

a thumbnail of the image and the post title/hanya thumbnail dan judul postingnya saja,

post title with a summary, and/judul dengan ringkasan postingan, dan

post title with a thumbnail and a post snippet/judul postingan dengan thumbnail dan potongan/cuplikan postingan.

Elemen/widget ini tidak boleh kita lewatkan di blog, karena widget ini mengajak pengunjung untuk menavigasi isi konten dan yang akan menghasilkan peningkatan jumlah halaman yang dikunjungi, dan pada gilirannya, dapat menarik minat para pengguna untuk berlangganan ke blog dan untuk membaca konten-konten yang menarik.

Langkah awal: Tambahkan gadget, jika kita belum memasang widget popular posts adalah,

Pilih "Layout/tata letak" tab dan menambahkan "Popular Posts" gadget di bagian blog kita, kita bisa bebas meletakkannya, seperti di sidebar, dengan mengklik "Add Gadget".

Konfigurasikan/atur widget untuk hanya menampilkan judul posting. kita dapat melakukan ini dengan mengklik "gambar thumbnail" dan "potongan/cuplikan" kotak centang, seperti yang ditunjukkan pada gambar berikut :

Popular Posts Widget

Setelah mengkonfigurasi widget, simpan perubahan dengan mengklik Simpan, dan kemudian Simpan pengaturan.

Selanjutnya adalah menambahkan kode CSS pada blog kita, ada 2 cara yang dapat kita lakukan untuk menambahkan kode CSS pada blog kita, (1) Pilih "Template" tab, kemudian klik pada Customize> Advanced> Tambah kode CSS

dan kemudian paste gaya kode CSS yang paling cocok dengan template blog kita dibawah ini :

Note : Beberapa template Blogger mungkin tidak memungkinkan menambahkan CSS di Blogger Template Designer (umumnya karena tidak menggunakan template dasar/basic dari blogger sendiri). Dalam hal ini, untuk menambahkan gaya kode CSS, yang dapat kita lakukan adalah melalui akses HTML Template - dari Dashboard Blogger, ke Template> Edit HTML dan paste kode tepat di atas kode tag html ]]> </ b: skin> .

Berikut adalah kode CSS masing-masing gaya, kita hanya dapat memilih salah satu yang sukai dan menaruhnya di blog.
Anda dapat melihat masing-masing gaya ini beraksi di demo blog berikut :

http://demo-blog343.blogspot.com

GAYA - 1,

Kode CSS-nya :

#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#757575; /* Color of the widget's title */
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
left: -30px;
top: 50%;
margin-top: -13px;
background: #8E8E8E; /* background color of the numbers */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;
content: '';
left: -2px;
margin-top: -.7em; 
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid #8E8E8E; /* background color of the right arrow*/
}
#PopularPosts1 ul li a{
color: #444;
text-decoration: none;   
font-size:15px;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
#PopularPosts1 ul li:hover{
background: #eee; /* Background color on mouseover */
}   
#PopularPosts1 ul li a:hover{
color:#444; /* Link color on mouseover */
margin-left:3px;
}

GAYA - 2,

Kode CSS-nya :

#PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px; 
width:100%;
margin:0;
font-size:16px;
background:#4F4F4F; /* Background color */
color:#f2f2f2; /* Color of the widget's title */
text-align:left;
text-indent:18px;
}
#PopularPosts1 h2:before{
position:absolute;
content:"";
top:36px;
right:0px;
width: 0px;
height: 0px;
border-bottom:12px outset transparent;
border-left:12px solid #000000; 
}
#PopularPosts1 h2:after{
position:absolute;
content:"";
top:-6px;
left:-5px;
width: 0px;
height: 0px;
border-bottom:24px outset transparent;
border-top:24px outset transparent;
border-left:24px solid #ffffff; /* Arrow background color on the left */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ 
width:100%;
position:relative;
left:0;
margin:7px 0 16px 12px;
padding:10px  4px 0 5px;
}
#PopularPosts1 ul li:before{ 
content:counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-20px;
font-size:35px;
width:20px;
color:#888888; 
}

#PopularPosts1 ul li a{
display:block;
font-size:16px; /* Font size of the links */
color: #666; /* Color of the links */
text-decoration:none;
transition: all .1s ease-in-out;font-weight: bold;
}
#PopularPosts1 ul li a:hover{
color:#3366FF;
margin-left:3px;
}

GAYA - 3,

Kode CSS-nya :

#PopularPosts1 h2{
padding:8px 10px 3px 0;
width:100%;
margin:0;
font-size:16px;
position:relative;
left:-20px;
display:block;
border-bottom:2px solid #ccc;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 6px 10px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{ /* Style of the numbers */
content:counter(li);
counter-increment:li;
position:absolute;
top:3px;
left:-39px;
font-size:21px;
width:28px;
height:28px;
border-radius: 50%;
color:#777; /* Text color */
border: 2px solid #ddd; /* Rounded border color */
padding:0;
text-indent:9px;
}
#PopularPosts1 ul li a{
display:block;
position:relative;
left:-45px;
width:100%;
margin:0;
min-height:28px;
padding: 5px 3px 3px 39px;
color:#333; /* color of the links */
text-decoration:none;
font-size:14px; /* Font size of the links */
font-style: italic;

}
#PopularPosts1 ul li a:hover{
color:#3366ff;
margin-left:3px;
}

GAYA - 3, Yang saya gunakan

Kode CSS-nya :

#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;   
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;   
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);   
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

Dalam pengaplikasiannya, kadang kode CSS original (Milik HELP BLOGGER http://helplogger.blogspot.ro/2013/09/4-different-styles-for-popular-posts.html) tidak selalu cocok dengan template awal blog kita, maka perlu kita Amati, Tiru dan Modifikasi (ATM) agar sesuai dengan template awal kita, maka dalam penerapannya pada blog saya,kode CSSnya saya modifikasi menjadi :

Kode CSS-nya :

#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-1px;
font-size:24px;
text-align:left;
color: #3399ff; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:18px;
width:320px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 0px 0;
padding: 3px 2px 0 17px;
left:18px;
width:265px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #3399ff;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;   
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background:#3399ff; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;   
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);   
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #cc0000;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #3399ff;
}

Amati, Tiru, dan Modifikasi - ATM "Belajar Berbagi"

Label: Blog Design

7 Gaya "Navigation Page" Pada Blogspot.

Unknown 11 July, 2014 0 komentar

Pada Blogger, kita bisa memiliki pilihan untuk mengatur berapa jumlah postingan yang ingin kita tampilkan per halaman dengan mengatur :

Settings Menu > Posts and Comments > Show at most ? posts.

Gunanya adalah untuk menampilkan jumlah posting/artikel per page/halaman. Setelah jumlah halaman dari jumlah posting/artikel diblog melebihi jumlah yang kita inginkan, kita akan melihat pesan "Postingan Lama" dan "Postingan Lebih Baru" pada link navigasi di halaman beranda kita dan halaman arsip footer, dan Blogger tidak memiliki fungsi built-in pada halaman penomoran pada navigation page. Berikut adalah cara membuat menambahkan Navigation Page pada halaman beranda Blogspot anda menggunakan Javascript dan CSS. Kita bisa memilih salah satu dari 7 gaya yang berbeda yang ada di bawah ini.

INGATLAH SELALU MEMBUAT BACK UP TEMPLATE BLOGSPOT (Cadangan) KITA SEBELUM MEMODIFIKASI ORIGINAL TEMPLATE !!!!!

Langkah Pertama adalah dengan menambahkan kode CSS pada rangkaian HTML Script (EDIT HTML) pada blog kita, cari kode " ]]></b:skin> " selanjutnya pilih style/gaya Navigation Page yang anda inginkan (sesuaikan keselarasannya dengan warna dan pola dasar template awal blog kita) dan letakkanlah kode CSS dibawah ini diatas kode " ]]></b:skin> ".

Gaya Pertama :

Gaya Pertama

Kode CSS-nya :

Gaya Kedua : yang saya gunakan

Gaya Kedua

Kode CSS-nya :

Gaya Ketiga :

Gaya Ketiga

Kode CSS-nya :

#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;}

Gaya Keempat :

Gaya Keempat

Kode CSS-nya:

Gaya Kelima :

Gaya Kelima

Kode CSS-nya :

Gaya Keenam :

Gaya Keenam

Kode CSS-nya :

Gaya Ketujuh :

Gaya Ketujuh

Kode CSS-nya :

Langkah Kedua adalah menambahkan kode JavaScript berikut ini diatas kode " </body> " :

Kode JavaScript-nya :

Kode JavaScript diatas bisa juga anda modifikasi sesuai dengan kebutuhan dan keselarasan pada template awal blog kita, bagian-bagian yang anda bisa modifikasi adalah :

var perPage=7; Adalah jumlah post/artikel per halaman.
var numPages=6; Adalah jumlah halaman yang akan ditunjukkan pada Navigation Page..
var prevText ='« Previous'; Kata yang bisa anda rubah dengan kata lain.
var nextText ='Next »'; Kata yang bisa anda rubah dengan kata lain.

Langkah Ketiga SAVE template anda dan lihat hasilnya, jika sudah sesuai sebaiknya anda juga membuat Back Up/Cadangan File XML template Blog dengan mengunduhnya langsung ke file folder anda. Semoga Bermanfaat.........

SUMBER ORIGINAL MILIK HELPBLOGGER

Belajar Berbagi

Top Menu

Pages

BELAJAR MENDESIGN - MEMODIFIKASI BLOG DAN WEBSITE

3 "Gaya Posting Summaries dan Thumbnail" Blogger.

4 Gaya Popular Post Widget Blog

7 Gaya "Navigation Page" Pada Blogspot.

ATM - BELAJAR BLOGGING YUK..

Entri Populer

Label

Total Tayang

PESAN DAN KESAN ANDA

JAVASCRIPT SOURCE