Free File: post

Showing posts with label post. Show all posts

Monday, December 12, 2016

Modifikasi Widget Popular Post Menjadi Warna dan Melengkung

Modifikasi Widget Popular Post Menjadi Warna dan Melengkung ini sebenarnya sama dengan postingan sebelumnya yakni Cara Membuat Widget Popular Post Warna-Warni, namun ada sedikit perbedaan dari kode CSS-nya dan untuk melihatnya silahkan klik link tersebut. Widget popular post yang satu ini tampilannya lebih keren karena backgroundnya yang berwarna-warni atau seperti pelangi/rainbow dan bordernya berbentuk melengkung seperti ketupat.

Cara Membuat Popular Post Berwarna seperti Pelangi :

1. Buka blog anda
2. Pilih Template => Edit HTML
3. Tekan Ctrl + F dan cari kode ]]></b:skin> lalu letakkan kode berikut diatanya

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, Times New Roman, Times, serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F200FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#FF9100;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#E6FF00;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#0073FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#FF0080;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#00FFFB;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#B300FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#007902;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#006579; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#9E9BD1;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:3px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

4. Simpan template

Keterangan :
- Silahkan ubah jenis huruf / font yang berwarna biru
- Ubah juga warna merah dengan kode warna yang anda sukai

5. Selanjutnya masuk ke Tata Letak dan pilih widget Popular Post
6. Lalu hilangkan tanda checklist seperti gambar dibawah ini

7. Simpan

Nah sekian dulu tutorial blog mengenai Cara Membuat/Memasang Popular Post Warna Pelangi di Blog, semoga bermanfaat.

Available link for download

Sunday, October 30, 2016

Memasang adsense otomatis pada single post

Pada awalnya saya tertarik pada halaman web berita nasional yang setiap menit update berita terbaru. Setiap saya membaca isi berita pada tempat tertentu selalu muncul iklan adsensenya. Yang menjadi pertanyaan besar saya adalah apakah setiap update berita mereka juga harus memasang script adsense disana? jawabnya tentu tidak.
Script adsense telah dipasang pada template website yang akan muncul pada setiap halaman artikel/postingan. Lalu bagaimana cara kita memasang adsense yang nantinya hanya akan muncul ketika artikel/postingan kita dibuka? dan kita tidak repot-repot memasukkan script adsense setiap kali kita posting. Disini saya ada sedikit pengalaman cara memasang adsense otomatis pada single post. Bila kita telah munguasai karakter template website kita tidak akan kesulitan dalam pemasangan adsense tersebut. Contoh dalam 1 halaman web terdapat beberapa komponen diantaranya; Header, Content, Navbar/Menubar, Footer, Comment dan lainnya. Karena kita konsentrasi pada "single post" maka bagian Content yang akan kita uprek-uprek.

Saya akan mencoba menguraikan letak "single post" pada template WORDPRESS, BLOGGER dan JOOMLA

1. WORDPRESS
a. Log in ke admin wordpress
b. Masuk menu "Appearance" klik "editor"
c. Pada menu sebelah kanan klik "single Post (post.php)"
d. Pasang script adsense anda dibawah scrip berikut:
get_header(); ?>

        <div id="container">
            <div id="content" role="main">

(beda template akan beda isi scrip, intinya masukkan dibawah judul posting. Silahkan dicoba sendiri dan lihat perubahan hasilnya)

e. Lalu klik "Update File"

2. BLOGGER
a. Log in ke dasbor blogspot
b. Pada tab "Rancangan" klik "Edit HTML"
c. Centang box pada "Expand Template Widget"
d. Pasang script adsense anda dibawah scipt berikut:
<div class=post-header>
    <div class=post-header-line-1/>
    </div>
(Adsense akan muncul dibawah judul posting pada single post)
e. Klik Save Template"

3. JOOMLA
Kebanyakan template joomla disetting unwritable, jadi sulit bila disetting melalui Log in administrator. Untuk mengedit single post, kita harus masuk ke c-panel webhosting. Langkahnya:
a. Log in ke c-panel hosting
b. Gunakan "file manager" cari public_html / httdoc, dimana joomla anda terinstall
c. Buka directory "templates"
d. Buka directory template yang sedang aktif digunakan (lihat template aktif di administrator joomla)
e. Buka directory "html"
d. Buka directory "com_content"
e. Buka directory "article"
f. Edit file "default.php"
g. Pasang script adsense anda dibawah script berikut:
<?php echo $this->article->event->beforeDisplayContent; ?>

(adsense akan muncul dibawah judul posting/artikel)
h. Klik "Save editor"

Tulisan di atas adalah pengalaman saya dan semoga bisa bermanfaat bagi pembaca.

Available link for download