Membuat Border Image Style Blog

Berikut ini salah satu cara membuat tampilan blog lebih variatif dengan membuat border dengan image/gambar. Sebelum memulai sebaiknya kumpulkan dulu image yang akan dijadikan border dan upload pada picasa (sebaiknya pengguna blog blogger menggunakan picasa sebagai media storage image-nya), flickr, photobucket etc, agar mudah membuat link image nantinya, dan sebaiknya juga gunakan ekstensi/format image png (Portable Network Graphics Format) agar tampilan image lebih baik. 

Letakkan kode CSS berikut tepat diatas tag kode </body> ;

/********************body template*********************/ .content-inner{ border:15px solid transparent; padding:10px 20px; -webkit-border-image:url(alamat-gambar.png) 30 30 round; /* Safari 5 */ -o-border-image:url(alamat-gambar.png) 30 30 round; /* Opera */ border-image:url(alamat-gambar.png) 30 30 round; }

Lalu letakkan kode CSS berikut ini pada bagian header pada blog template,
/*******************header***************/ .header{ border:15px solid transparent; padding:10px 20px; -webkit-border-image:url(alamat-gambar.png) 30 30 round; /* Safari 5 */ -o-border-image:url(alamat-gambar.png) 30 30 round; /* Opera */ border-image:url(alamat-gambar.png) 30 30 round; }

Lalu letakkan kode CSS berikut ini pada bagian posting pada blog template,
/***********tubuh posting*************/ .column-center-inner{ border:15px solid transparent; padding:10px 20px; -webkit-border-image:url(alamat-gambar.png) 30 30 round; /* Safari 5 */ -o-border-image:url(alamat-gambar.png) 30 30 round; /* Opera */ border-image:url(alamat-gambar.png) 30 30 round; }

Lalu letakkan kode CSS berikut ini pada bagian sidebar pada blog template,
/*****************sidebar*******************/ .column-right-inner{ /****jika menggunakn sidebar kiri maka ganti menjadi .column-left-inner******/ border:15px solid transparent; padding:10px 20px; -webkit-border-image:url(alamat-gambar.png) 30 30 round; /* Safari 5 */ -o-border-image:url(alamat-gambar.png) 30 30 round; /* Opera */ border-image:url(alamat-gambar.png) 30 30 round; }

Note :
Alamat-gambar.png harus diganti alaman gambar Anda yang sudah di upload.

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

Read more »

3 "Gaya Posting Summaries dan Thumbnail" Blogger.

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'> <article expr:class='"blogger-post blogger-post-" + data:blog.pageType' expr:id='"post-" + data:post.id'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <div class='blogger-post-part blogger-post-thumbnail-area'> <b:if cond='data:post.thumbnailUrl'> <a expr:href='data:post.url'><img class='blogger-post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' width='72'/></a> </b:if> </div> </b:if> </b:if> <div class='blogger-post-part blogger-post-body-area'> <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:
<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <script type='text/javascript'> function changeThumbSize(id,size){ var blogGadget = document.getElementById(id); var replacement = blogGadget.innerHTML; blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c"); var thumbnails = blogGadget.getElementsByTagName("img"); for(var i=0;i<thumbnails.length;i++){ thumbnails[i].width = size; thumbnails[i].height = size; } } changeThumbSize("Blog1",210); </script> </b:if> </b:if>

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"

Read more »

4 Gaya Popular Post Widget Blog

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 :

1. only the title of the post/hanya judul postingnya saja,
2. a thumbnail of the image and the post title/hanya thumbnail dan judul postingnya saja,
3. post title with a summary, and/judul dengan ringkasan postingan, dan
4. 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"

Read more »

Menambahkan Kode CSS Ke Blogger

Jika kita menemui kesulitan untuk menambahkan kode CSS pada Template Blog kita, berikut ini ada cara yang lebih singkat dan mudah serta cepat untuk kita bisa menempatkan kode CSS pada blog kita.

Ada beberapa blogger newbie seperti saya ini yang kesulitan dimana seharusnya menempatkan kode CSS untuk merubah gaya/model template blog kita, walaupun sebenarnya penempatan kode CSS biasanya berada sebelum kode tag html " ]]></b:skin>". Jadi untuk lebih mudahnya kita bisa menempatkan kode CSS melalui fasilitas yang disediakan oleh blogger yakni melalui Template Designer Blogger, perlu diketahui Template Designer Blogger lebih mudah digunakan pada Template Basic (bawaan) dari blogger, dan agak sulit jika kita menggunakan Template Blog dari pihak ketiga (free Template) yang bertebaran di internet dan terkadang pada free template pihak ketiga tersebut terselip spyware/malware yang tidak kita ketahui. Jadi himbauannya gunakan template dasar yang disediakan oleh blogger agar lebih mudah dimodifikasi.

Kembali ke pokok permasalahannya, langkah-langkah yang harus kita lakukan untuk menambahkan kode CSS pada blogger adalah, sbb:

Langkah pertama :

Masuk pada account blogger anda dan pilihlah blog yang akan dimodifikasi.

Note : Jika anda ingin membuat blog, dianjurkan anda mempunyai 1 account blogger dengan 2 buah blog, satu blog yang anda publish (Blog Utama), dan satunya lagi sebagai bahan/blog percobaan (Blog Modifikasi) jangan di publish, pada Settingan blog percobaan tersebut -> pilih Privasi pilih kriteria "Tidak tercantum di Blogger. Tidak dapat diakses mesin telusur." sehingga blog percobaan yang tidak dipublish ini, jika kita melakukan modifikasi dan berhasil bisa kita terapkan/aplikasikan pada blog yang sudah kita publish (Blog Utama).

Langkah kedua :
Pada Dashboard Blogger, pilih "Template" selanjutnya pilih "Customize/Sesuaikan".

DASHBOARD BLOGGER

Langkah ketiga :
Pilih/klik "Advance/Tingkat lanjut"

Langkah keempat :
Pada bagian inilah kita bisa menambahkan kode CSS yang kita inginkan.

BLOGGER TEMPLATE DESIGNER - Add CSS

Langkah kelima :
Jika kode CSS selesai kita tambahkan pilih/klik    Apply to Blog     dan selanjutnya pilih/klik   Back to Blogger   untuk kembali ke Dashboard Blogger.

Perlu kita ketahui, setelah melakukan metode ini kita tidak dapat lagi mengedit gaya CSS yang ada sudah ditambahkan dalam template blog kita melalui, yang bisa kita adalah dengan mengakses HTML template dan membuat beberapa modifikasi ulang di sana. Di sini kita hanya dapat menambahkan gaya baru dan mengedit gaya yang ada ditambahkan melalui panel Template Designer.

Hal yang penting dalam menambahkan gaya/kode CSS, tidak diperlukan menempatkan tag html <style type = "text/css"> ... </ style>, tetapi kita hanya meletakkan kode CSS diatas tag kode html </head> dari html Template. Menambahkan tag <style type = "text/css"> ... </ style> tersebut dapat mengakibatkan error/kesalahan atau penumpukan/crash kode CSS yang tidak dapat diurai rangkaian kode script-nya oleh blogger.

Jika kita mengubah template blog, CSS yang ditambahkan di sini, maka sebaiknya kode CSS yang lama dihapus. Hal yang sama berlaku untuk setiap penambahan/modifikasi lainnya atau Customize CSS Code dapat dilakukan melalui editor HTML Template. Semoga bermanfaat.......

SUMBER ORIGINAL MILIK HELPBLOGGER

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

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

Read more »

7 Gaya "Navigation Page" Pada Blogspot.

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 :         

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

Gaya Kedua : yang saya gunakan

Gaya Kedua

Kode CSS-nya :
#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);}

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

Gaya Kelima :

Gaya Kelima

Kode CSS-nya :
#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;}

Gaya Keenam :

Gaya Keenam

Kode CSS-nya :
#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;}

Gaya Ketujuh :

Gaya Ketujuh

Kode CSS-nya :
#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;}

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

Kode JavaScript-nya :
<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 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>

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

Read more »

Membuat Text/Tulisan Berjalan Berubah Warna

Ada banyak cara untuk membuat animasi pada website/blog, bisa saja kita memberi ruang untuk file GIF, SWF/FLASH, VIDEO LOOP, atau MARQUEE TEXT. Marquee text adalah animasi paling sederhana yang bisa kita buat pada ruang website/blog kita, penggunaannya bisa sebagai ucapan selamat datang, informasi atau iklan, bahkan bisa kita pergunakan sebagai gadget yang mempercantik website/blog kita.

Ada juga beberapa cara membuat marquee text, banyak sekali yang tersedia di blog-blog tutorial, tetapi yang paling saya suka adalah "Membuat Text/Tulisan Berjalan Berubah Warna" ini. Script-nya ada dibawah ini :

<div style="padding:1px 1px; border:0px solid blue; font-size:25px; font-family:Arial Black;font-weight:bolder;"> <marquee behavior="scroll" direction="left" onmouseover="stop" onmouseout="run" scrollamount="8" width="900px"> <script type="text/javascript" > var message="Agatha Nicole Belajar Blogging, Sambil Belajar Mengapa Tak Berbagi Apa Saja Yang Dipelajari..... " var bgsGR1color="Red" /* Warna utama teks */ var bgsGR2color="Green" /* Warna teks flash pertama */ var bgsGR3color="Blue" /* Warna teks flash ke dua */ var flashspeed=20 // kec. ganti warna (1/1000 dt) var flashingletters=50 // jumlah teks pertama var flashingletters2=50 // jumlah berwarna teks ke dua var flashpause=30 // waktu jeda pergantian warna (1/1000 dtk) var n=0 if (document.all||document.getElementById){document.write('<font color="'+bgsGR1color+'">') for (m=0;m<message.length;m++) document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>') document.write('</font>')}else document.write(message) function crossref(number){var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number) return crossobj}function neon(){if (n==0){for (m=0;m<message.length;m++) crossref(m).style.color=bgsGR1color} crossref(n).style.color=bgsGR2color if (n>flashingletters-1) crossref(n-flashingletters).style.color=bgsGR3color if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=bgsGR1color if (n<message.length-1) n++ else{n=0 clearInterval(flashing) setTimeout("beginneon()",flashpause) return}} function beginneon(){if (document.all||document.getElementById) flashing=setInterval("neon()",flashspeed)} beginneon() </script></marquee></div>
Penempatannya terserah bisa dimana saja, di header, body, sidebar atau footer tergantung kebutuhan kita. Kita tinggal menambahkan gadget HTML di ruang yang kita suka, simpel dan lumayan bagus.

Ket :
Yang paling banyak dirubah pada script ini adalah ;
font-size:25px -> Rubahlah sesuai dengan media/ruang yang akan diletakkan.
width="900px" -> Rubahlah sesuai dengan media/ruang yang akan diletakkan.
 var bgsGR1color="Red" /* Warna utama teks */  -> Rubahlah warna sesuai keinginan anda. 
var bgsGR2color="Green" /* Warna teks flash pertama */  -> Rubahlah warna sesuai keinginan anda.
var bgsGR3color="Blue" /* Warna teks flash ke dua */ -> Rubahlah warna sesuai keinginan anda.
var flashspeed=20 // kec. ganti warna (1/1000 dt) -> Rubahlah Kecepatannya sesuai keinginan anda.

Sumber Script : http://helplogger.blogspot.com/

Belajar Berbagi

Read more »